diff --git a/gallery/src/demos/demo-ha-label-badge.ts b/gallery/src/demos/demo-ha-label-badge.ts new file mode 100644 index 0000000000..277c539040 --- /dev/null +++ b/gallery/src/demos/demo-ha-label-badge.ts @@ -0,0 +1,122 @@ +import { html, css, LitElement, TemplateResult } from "lit"; +import { customElement } from "lit/decorators"; +import "../../../src/components/ha-label-badge"; +import "../../../src/components/ha-card"; + +const colors = ["#03a9f4", "#ffa600", "#43a047"]; + +const badges: { + label?: string; + description?: string; + image?: string; +}[] = [ + { + label: "label", + }, + { + label: "label", + description: "Description", + }, + { + description: "Description", + }, + { + label: "label", + description: "Description", + image: "/images/living_room.png", + }, + { + description: "Description", + image: "/images/living_room.png", + }, + { + label: "label", + image: "/images/living_room.png", + }, + { + image: "/images/living_room.png", + }, + { + label: "big label", + }, + { + label: "big label", + description: "Description", + }, + { + label: "big label", + description: "Description", + image: "/images/living_room.png", + }, +]; + +@customElement("demo-ha-label-badge") +export class DemoHaLabelBadge extends LitElement { + protected render(): TemplateResult { + return html` + + + ${badges.map( + (badge) => html` + + + ` + )} + + + + + ${badges.map( + (badge) => html` + + + + ${JSON.stringify(badge, null, 2)} + + ` + )} + + + `; + } + + static get styles() { + return css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + pre { + margin-left: 16px; + background-color: var(--markdown-code-background-color); + padding: 8px; + } + .badge { + display: flex; + flex-direction: row; + margin-bottom: 16px; + align-items: center; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "demo-ha-label-badge": DemoHaLabelBadge; + } +} diff --git a/src/components/ha-label-badge.ts b/src/components/ha-label-badge.ts index 7c1d633f43..a8bbf838a5 100644 --- a/src/components/ha-label-badge.ts +++ b/src/components/ha-label-badge.ts @@ -8,7 +8,6 @@ import { } from "lit"; import { property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; -import "./ha-svg-icon"; class HaLabelBadge extends LitElement { @property() public label?: string;
${JSON.stringify(badge, null, 2)}