@francofantomius/material-components 1.0.2 → 1.1.1

package/dist/chunks/navigation-rail-item-6pdhNHJK.js

@@ -0,0 +1,357 @@
+import { n as l, t as e } from "./decorate-DXuynaiA.js";
+import "./ripple-squbKHhj.js";
+import "./focus-ring-CuiJuM-y.js";
+import "./icon-DrNqcNEL.js";
+import { css as c, html as r, nothing as o } from "lit";
+import { customElement as h, property as t } from "lit/decorators.js";
+var w = c`
+  :host {
+    display: inline-flex;
+    flex-direction: column;
+    width: var(--md-navigation-rail-width, 80px);
+    min-width: var(--md-navigation-rail-width, 80px);
+    height: var(--md-navigation-rail-height, 100%);
+    min-height: 100%;
+    box-sizing: border-box;
+    background-color: var(--md-navigation-rail-container-color, var(--md-sys-color-surface, #FEF7FF));
+    color: var(--md-navigation-rail-on-container-color, var(--md-sys-color-on-surface, #1D1B20));
+    border-right: var(--md-navigation-rail-border, 1px solid var(--md-sys-color-outline-variant, #CAC4D0));
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    user-select: none;
+    position: relative;
+  }
+
+  .rail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 12px 0;
+    box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .rail::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  .rail::-webkit-scrollbar-thumb {
+    background-color: var(--md-sys-color-outline-variant, #CAC4D0);
+    border-radius: 4px;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+    width: 100%;
+    flex-shrink: 0;
+  }
+
+  .destinations {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    flex: 1;
+  }
+
+  /* Alignment Variants */
+  :host([alignment="top"]) .destinations {
+    justify-content: flex-start;
+  }
+
+  :host([alignment="center"]) .destinations {
+    justify-content: center;
+  }
+
+  :host([alignment="bottom"]) .destinations {
+    justify-content: flex-end;
+  }
+
+  .footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    margin-top: auto;
+    width: 100%;
+    padding-top: 12px;
+    flex-shrink: 0;
+  }
+`, m = c`
+  :host {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  .item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 56px;
+    padding: 4px 0 8px 0;
+    box-sizing: border-box;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
+    border-radius: 12px;
+    transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .indicator-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .active-indicator {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--md-navigation-rail-indicator-width, 56px);
+    height: var(--md-navigation-rail-indicator-height, 32px);
+    border-radius: var(--md-navigation-rail-indicator-shape, 16px);
+    background-color: transparent;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),
+                color 200ms cubic-bezier(0.2, 0, 0, 1);
+    overflow: hidden;
+  }
+
+  .item:hover .active-indicator {
+    background-color: var(--md-sys-color-surface-container-high, #ECE6F0);
+  }
+
+  /* Active / Selected State */
+  :host([active]) .active-indicator,
+  :host([selected]) .active-indicator {
+    background-color: var(--md-navigation-rail-active-indicator-color, var(--md-sys-color-secondary-container, #E8DEF8));
+    color: var(--md-navigation-rail-active-icon-color, var(--md-sys-color-on-secondary-container, #1D192B));
+  }
+
+  :host([active]) .item:hover .active-indicator,
+  :host([selected]) .item:hover .active-indicator {
+    background-color: var(--md-navigation-rail-active-indicator-hover-color, var(--md-sys-color-secondary-container, #E8DEF8));
+  }
+
+  .icon-slot {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+    font-size: 24px;
+    line-height: 1;
+    z-index: 1;
+  }
+
+  .label-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin-top: 4px;
+    box-sizing: border-box;
+  }
+
+  .label {
+    font-size: var(--md-sys-typescale-label-medium-size, 12px);
+    line-height: var(--md-sys-typescale-label-medium-line-height, 16px);
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    text-align: center;
+    max-width: 72px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--md-navigation-rail-label-color, var(--md-sys-color-on-surface-variant, #49454F));
+    transition: color 150ms cubic-bezier(0.2, 0, 0, 1),
+                font-weight 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([active]) .label,
+  :host([selected]) .label {
+    color: var(--md-navigation-rail-active-label-color, var(--md-sys-color-on-surface, #1D1B20));
+    font-weight: 700;
+  }
+
+  :host([hide-label]) .label-container,
+  :host([hide-labels]) .label-container {
+    display: none;
+  }
+
+  /* Badge styling */
+  .badge-slot {
+    position: absolute;
+    top: -2px;
+    right: 4px;
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: 8px;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1;
+    background-color: var(--md-sys-color-error, #B3261E);
+    color: var(--md-sys-color-on-error, #FFFFFF);
+    box-sizing: border-box;
+  }
+
+  .badge.dot {
+    min-width: 6px;
+    width: 6px;
+    height: 6px;
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  :host([active]) .badge,
+  :host([selected]) .badge {
+    background-color: var(--md-sys-color-error, #B3261E);
+    color: var(--md-sys-color-on-error, #FFFFFF);
+  }
+`, i = class extends l {
+  constructor(...a) {
+    super(...a), this.icon = "", this.activeIcon = "", this.label = "", this.headline = "", this.badge = "", this.badgeDot = !1, this.active = !1, this.selected = !1, this.disabled = !1, this.hideLabel = !1, this.href = "", this.target = "", this.value = "", this.handleClick = (n) => {
+      if (this.disabled) {
+        n.preventDefault(), n.stopImmediatePropagation();
+        return;
+      }
+      this.emitEvent("item-click", {
+        label: this.label || this.headline,
+        icon: this.icon,
+        active: this.active,
+        value: this.value,
+        item: this
+      });
+    };
+  }
+  static {
+    this.styles = [l.styles, m];
+  }
+  willUpdate(a) {
+    super.willUpdate(a), a.has("active") && !a.has("selected") ? this.selected = this.active : a.has("selected") && !a.has("active") ? this.active = this.selected : a.has("active") && a.has("selected") && (this.active ? this.selected = !0 : this.selected && (this.active = !0));
+  }
+  render() {
+    const a = this.label || this.headline, n = this.active && this.activeIcon ? this.activeIcon : this.icon, v = () => this.badgeDot ? r`<span class="badge dot"></span>` : this.badge ? r`<span class="badge">${this.badge}</span>` : o, s = r`
+      <div class="indicator-wrapper">
+        <div class="active-indicator">
+          <md-ripple ?disabled=${this.disabled}></md-ripple>
+          <md-focus-ring></md-focus-ring>
+          <span class="icon-slot">
+            <slot name="icon">
+              ${n ? r`<md-icon name=${n}></md-icon>` : o}
+            </slot>
+          </span>
+        </div>
+
+        <div class="badge-slot">
+          <slot name="badge">
+            ${v()}
+          </slot>
+        </div>
+      </div>
+
+      <div class="label-container">
+        <slot>
+          ${a ? r`<span class="label">${a}</span>` : o}
+        </slot>
+      </div>
+    `;
+    return this.href ? r`
+        <a
+          class="item"
+          href=${this.disabled ? o : this.href}
+          target=${this.target || o}
+          aria-disabled=${this.disabled ? "true" : o}
+          aria-current=${this.active ? "page" : o}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleClick}
+        >
+          ${s}
+        </a>
+      ` : r`
+      <div
+        class="item"
+        role="button"
+        tabindex=${this.disabled ? "-1" : "0"}
+        aria-disabled=${this.disabled ? "true" : o}
+        aria-pressed=${this.active ? "true" : "false"}
+        @click=${this.handleClick}
+      >
+        ${s}
+      </div>
+    `;
+  }
+};
+e([t({ type: String })], i.prototype, "icon", void 0);
+e([t({
+  type: String,
+  attribute: "active-icon"
+})], i.prototype, "activeIcon", void 0);
+e([t({ type: String })], i.prototype, "label", void 0);
+e([t({ type: String })], i.prototype, "headline", void 0);
+e([t({ type: String })], i.prototype, "badge", void 0);
+e([t({
+  type: Boolean,
+  attribute: "badge-dot"
+})], i.prototype, "badgeDot", void 0);
+e([t({
+  type: Boolean,
+  reflect: !0
+})], i.prototype, "active", void 0);
+e([t({
+  type: Boolean,
+  reflect: !0
+})], i.prototype, "selected", void 0);
+e([t({
+  type: Boolean,
+  reflect: !0
+})], i.prototype, "disabled", void 0);
+e([t({
+  type: Boolean,
+  reflect: !0,
+  attribute: "hide-label"
+})], i.prototype, "hideLabel", void 0);
+e([t({ type: String })], i.prototype, "href", void 0);
+e([t({ type: String })], i.prototype, "target", void 0);
+e([t({ type: String })], i.prototype, "value", void 0);
+i = e([h("md-navigation-rail-item")], i);
+var d = class extends i {
+};
+d = e([h("md-nav-rail-item")], d);
+export {
+  i as n,
+  w as r,
+  d as t
+};
+
+//# sourceMappingURL=navigation-rail-item-6pdhNHJK.js.map

package/dist/chunks/navigation-rail-item-6pdhNHJK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail-item-6pdhNHJK.js","names":[],"sources":["../../src/components/navigation-rail/navigation-rail.css.ts","../../src/components/navigation-rail/navigation-rail-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const navigationRailStyles = css`\n  :host {\n    display: inline-flex;\n    flex-direction: column;\n    width: var(--md-navigation-rail-width, 80px);\n    min-width: var(--md-navigation-rail-width, 80px);\n    height: var(--md-navigation-rail-height, 100%);\n    min-height: 100%;\n    box-sizing: border-box;\n    background-color: var(--md-navigation-rail-container-color, var(--md-sys-color-surface, #FEF7FF));\n    color: var(--md-navigation-rail-on-container-color, var(--md-sys-color-on-surface, #1D1B20));\n    border-right: var(--md-navigation-rail-border, 1px solid var(--md-sys-color-outline-variant, #CAC4D0));\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    user-select: none;\n    position: relative;\n  }\n\n  .rail {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    padding: 12px 0;\n    box-sizing: border-box;\n    overflow-y: auto;\n    overflow-x: hidden;\n  }\n\n  .rail::-webkit-scrollbar {\n    width: 4px;\n  }\n\n  .rail::-webkit-scrollbar-thumb {\n    background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n    border-radius: 4px;\n  }\n\n  .header {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 12px;\n    width: 100%;\n    flex-shrink: 0;\n  }\n\n  .destinations {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n    flex: 1;\n  }\n\n  /* Alignment Variants */\n  :host([alignment=\"top\"]) .destinations {\n    justify-content: flex-start;\n  }\n\n  :host([alignment=\"center\"]) .destinations {\n    justify-content: center;\n  }\n\n  :host([alignment=\"bottom\"]) .destinations {\n    justify-content: flex-end;\n  }\n\n  .footer {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    margin-top: auto;\n    width: 100%;\n    padding-top: 12px;\n    flex-shrink: 0;\n  }\n`;\n\nexport const navigationRailItemStyles = css`\n  :host {\n    display: block;\n    width: 100%;\n    box-sizing: border-box;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .item {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    min-height: 56px;\n    padding: 4px 0 8px 0;\n    box-sizing: border-box;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    text-decoration: none;\n    cursor: pointer;\n    outline: none;\n    border-radius: 12px;\n    transition: color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .indicator-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .active-indicator {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--md-navigation-rail-indicator-width, 56px);\n    height: var(--md-navigation-rail-indicator-height, 32px);\n    border-radius: var(--md-navigation-rail-indicator-shape, 16px);\n    background-color: transparent;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                color 200ms cubic-bezier(0.2, 0, 0, 1);\n    overflow: hidden;\n  }\n\n  .item:hover .active-indicator {\n    background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n  }\n\n  /* Active / Selected State */\n  :host([active]) .active-indicator,\n  :host([selected]) .active-indicator {\n    background-color: var(--md-navigation-rail-active-indicator-color, var(--md-sys-color-secondary-container, #E8DEF8));\n    color: var(--md-navigation-rail-active-icon-color, var(--md-sys-color-on-secondary-container, #1D192B));\n  }\n\n  :host([active]) .item:hover .active-indicator,\n  :host([selected]) .item:hover .active-indicator {\n    background-color: var(--md-navigation-rail-active-indicator-hover-color, var(--md-sys-color-secondary-container, #E8DEF8));\n  }\n\n  .icon-slot {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: inherit;\n    font-size: 24px;\n    line-height: 1;\n    z-index: 1;\n  }\n\n  .label-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    margin-top: 4px;\n    box-sizing: border-box;\n  }\n\n  .label {\n    font-size: var(--md-sys-typescale-label-medium-size, 12px);\n    line-height: var(--md-sys-typescale-label-medium-line-height, 16px);\n    font-weight: 500;\n    letter-spacing: 0.5px;\n    text-align: center;\n    max-width: 72px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--md-navigation-rail-label-color, var(--md-sys-color-on-surface-variant, #49454F));\n    transition: color 150ms cubic-bezier(0.2, 0, 0, 1),\n                font-weight 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([active]) .label,\n  :host([selected]) .label {\n    color: var(--md-navigation-rail-active-label-color, var(--md-sys-color-on-surface, #1D1B20));\n    font-weight: 700;\n  }\n\n  :host([hide-label]) .label-container,\n  :host([hide-labels]) .label-container {\n    display: none;\n  }\n\n  /* Badge styling */\n  .badge-slot {\n    position: absolute;\n    top: -2px;\n    right: 4px;\n    z-index: 2;\n    pointer-events: none;\n  }\n\n  .badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 4px;\n    border-radius: 8px;\n    font-size: 11px;\n    font-weight: 600;\n    line-height: 1;\n    background-color: var(--md-sys-color-error, #B3261E);\n    color: var(--md-sys-color-on-error, #FFFFFF);\n    box-sizing: border-box;\n  }\n\n  .badge.dot {\n    min-width: 6px;\n    width: 6px;\n    height: 6px;\n    padding: 0;\n    border-radius: 50%;\n  }\n\n  :host([active]) .badge,\n  :host([selected]) .badge {\n    background-color: var(--md-sys-color-error, #B3261E);\n    color: var(--md-sys-color-on-error, #FFFFFF);\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { navigationRailItemStyles } from './navigation-rail.css.js';\n\n/**\n * Material Design 3 Navigation Rail Item component.\n *\n * @slot icon - Custom leading icon.\n * @slot - Default slot for destination label.\n * @slot badge - Custom badge element.\n */\n@customElement('md-navigation-rail-item')\nexport class MdNavigationRailItem extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, navigationRailItemStyles];\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, attribute: 'active-icon' })\n  activeIcon = '';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String })\n  badge = '';\n\n  @property({ type: Boolean, attribute: 'badge-dot' })\n  badgeDot = false;\n\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  @property({ type: String })\n  value = '';\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('active') && !changedProperties.has('selected')) {\n      this.selected = this.active;\n    } else if (changedProperties.has('selected') && !changedProperties.has('active')) {\n      this.active = this.selected;\n    } else if (changedProperties.has('active') && changedProperties.has('selected')) {\n      if (this.active) {\n        this.selected = true;\n      } else if (this.selected) {\n        this.active = true;\n      }\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n    this.emitEvent('item-click', {\n      label: this.label || this.headline,\n      icon: this.icon,\n      active: this.active,\n      value: this.value,\n      item: this,\n    });\n  };\n\n  override render() {\n    const text = this.label || this.headline;\n    const currentIcon = (this.active && this.activeIcon) ? this.activeIcon : this.icon;\n\n    const renderBadge = () => {\n      if (this.badgeDot) {\n        return html`<span class=\"badge dot\"></span>`;\n      }\n      if (this.badge) {\n        return html`<span class=\"badge\">${this.badge}</span>`;\n      }\n      return nothing;\n    };\n\n    const inner = html`\n      <div class=\"indicator-wrapper\">\n        <div class=\"active-indicator\">\n          <md-ripple ?disabled=${this.disabled}></md-ripple>\n          <md-focus-ring></md-focus-ring>\n          <span class=\"icon-slot\">\n            <slot name=\"icon\">\n              ${currentIcon ? html`<md-icon name=${currentIcon}></md-icon>` : nothing}\n            </slot>\n          </span>\n        </div>\n\n        <div class=\"badge-slot\">\n          <slot name=\"badge\">\n            ${renderBadge()}\n          </slot>\n        </div>\n      </div>\n\n      <div class=\"label-container\">\n        <slot>\n          ${text ? html`<span class=\"label\">${text}</span>` : nothing}\n        </slot>\n      </div>\n    `;\n\n    if (this.href) {\n      return html`\n        <a\n          class=\"item\"\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-current=${this.active ? 'page' : nothing}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @click=${this.handleClick}\n        >\n          ${inner}\n        </a>\n      `;\n    }\n\n    return html`\n      <div\n        class=\"item\"\n        role=\"button\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        aria-pressed=${this.active ? 'true' : 'false'}\n        @click=${this.handleClick}\n      >\n        ${inner}\n      </div>\n    `;\n  }\n}\n\n// Aliases\n@customElement('md-nav-rail-item')\nexport class MdNavRailItem extends MdNavigationRailItem {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-rail-item': MdNavigationRailItem;\n    'md-nav-rail-item': MdNavRailItem;\n  }\n}\n"],"mappings":";;;;;;AAEA,IAAa,IAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkFvB,IAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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"}

package/dist/chunks/{search-bar-TXnqJ-gd.js → search-bar-fUD0qU2P.js}

@@ -2,7 +2,7 @@ import { t as o } from "./decorate-DXuynaiA.js";
 import { t as p } from "./form-associated-Cty_ZaS9.js";
 import "./icon-DrNqcNEL.js";
 import { css as m, html as l, nothing as r } from "lit";
-import { customElement as v, property as a, query as x, state as f } from "lit/decorators.js";
+import { customElement as u, property as a, query as x, state as f } from "lit/decorators.js";
 var y = m`
   :host {
     display: block;
@@ -113,6 +113,24 @@ var y = m`
     padding: 0 4px;
     margin: 0;
     box-sizing: border-box;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  input::-webkit-search-decoration,
+  input::-webkit-search-cancel-button,
+  input::-webkit-search-results-button,
+  input::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+    appearance: none;
+    display: none;
+  }
+
+  input::-ms-clear,
+  input::-ms-reveal {
+    display: none;
+    width: 0;
+    height: 0;
   }
 
   input::placeholder {
@@ -686,13 +704,13 @@ o([a({
 })], i.prototype, "autoDeactivateOnSelect", void 0);
 o([f()], i.prototype, "highlightedIndex", void 0);
 o([x("input")], i.prototype, "inputElement", void 0);
-i = o([v("md-search-bar")], i);
+i = o([u("md-search-bar")], i);
 var g = class extends i {
 };
-g = o([v("md-search")], g);
+g = o([u("md-search")], g);
 export {
   i as n,
   g as t
 };
 
-//# sourceMappingURL=search-bar-TXnqJ-gd.js.map
+//# sourceMappingURL=search-bar-fUD0qU2P.js.map

package/dist/chunks/search-bar-fUD0qU2P.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-bar-fUD0qU2P.js","names":[],"sources":["../../src/components/search-bar/search-bar.css.ts","../../src/components/search-bar/search-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const searchBarStyles = css`\n  :host {\n    display: block;\n    box-sizing: border-box;\n    position: relative;\n    width: 100%;\n    max-width: var(--md-search-bar-max-width, 100%);\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    vertical-align: middle;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .scrim {\n    display: none;\n  }\n\n  /* Scrim when active in docked mode to catch outside clicks */\n  :host([active]) .scrim {\n    display: block;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 40;\n    background: transparent;\n  }\n\n  .search-container {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    background-color: var(--md-search-bar-container-color, var(--md-sys-color-surface-container-high, #ECE6F0));\n    border-radius: var(--md-sys-shape-corner-full, 28px);\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                border-radius 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .search-bar-header {\n    display: flex;\n    align-items: center;\n    min-height: 56px;\n    height: 56px;\n    padding: 0 8px 0 16px;\n    box-sizing: border-box;\n    gap: 8px;\n  }\n\n  .leading-slot, .trailing-slot {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .icon-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    border: none;\n    background: transparent;\n    border-radius: 50%;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    cursor: pointer;\n    padding: 0;\n    outline: none;\n    position: relative;\n    transition: background-color 150ms ease;\n  }\n\n  .icon-btn:hover {\n    background-color: rgba(73, 69, 79, 0.08);\n  }\n\n  .icon-btn:focus-visible {\n    background-color: rgba(73, 69, 79, 0.12);\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    align-items: center;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: transparent;\n    outline: none;\n    font-family: inherit;\n    font-size: var(--md-sys-typescale-body-large-size, 16px);\n    line-height: var(--md-sys-typescale-body-large-line-height, 24px);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    padding: 0 4px;\n    margin: 0;\n    box-sizing: border-box;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  input::-webkit-search-decoration,\n  input::-webkit-search-cancel-button,\n  input::-webkit-search-results-button,\n  input::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n    appearance: none;\n    display: none;\n  }\n\n  input::-ms-clear,\n  input::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  input::placeholder {\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    opacity: 0.8;\n  }\n\n  /* Active Docked Mode */\n  :host([active]) .search-container {\n    z-index: 50;\n    border-radius: var(--md-sys-shape-corner-extra-large, 28px 28px 16px 16px);\n    box-shadow: var(--md-sys-elevation-level3, 0px 4px 8px 3px rgba(0, 0, 0, 0.15));\n  }\n\n  /* Divider when active */\n  .divider {\n    display: none;\n    height: 1px;\n    background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n    margin: 0 16px;\n  }\n\n  :host([active]) .divider {\n    display: block;\n  }\n\n  /* Suggestions / Content Container */\n  .suggestions-container {\n    display: none;\n    flex-direction: column;\n    max-height: 360px;\n    overflow-y: auto;\n    padding: 8px 0;\n    box-sizing: border-box;\n  }\n\n  :host([active]) .suggestions-container {\n    display: flex;\n  }\n\n  .suggestion-item {\n    display: flex;\n    align-items: center;\n    min-height: 48px;\n    padding: 0 16px;\n    gap: 16px;\n    box-sizing: border-box;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    transition: background-color 150ms ease;\n  }\n\n  .suggestion-item:hover,\n  .suggestion-item.highlighted {\n    background-color: rgba(73, 69, 79, 0.08);\n  }\n\n  .suggestion-item.selected {\n    background-color: rgba(73, 69, 79, 0.12);\n  }\n\n  .suggestion-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    flex-shrink: 0;\n  }\n\n  .suggestion-text {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .suggestion-label {\n    font-size: var(--md-sys-typescale-body-large-size, 16px);\n    line-height: 20px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .suggestion-supporting {\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 16px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-top: 2px;\n  }\n\n  .suggestion-trailing {\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    flex-shrink: 0;\n  }\n\n  .search-trigger-container {\n    display: none;\n  }\n\n  /* Responsive Fullscreen / Mobile Collapsed Mode */\n  @media (max-width: 768px) {\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])),\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) {\n      display: inline-flex;\n      width: auto;\n      max-width: none;\n      vertical-align: middle;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      background-color: transparent;\n      border-radius: 50%;\n      box-shadow: none;\n      cursor: pointer;\n      user-select: none;\n      outline: none;\n      transition: background-color 200ms ease, box-shadow 200ms ease;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing {\n      height: 48px;\n      padding: 0 4px;\n      gap: 2px;\n      background-color: var(--md-search-bar-container-color, var(--md-sys-color-surface-container-high, #ECE6F0));\n      border-radius: var(--md-sys-shape-corner-full, 28px);\n      box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing:hover,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing:hover {\n      box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container:focus-visible,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container:focus-visible {\n      outline: 2px solid var(--md-sys-color-primary, #6750A4);\n      outline-offset: 2px;\n    }\n\n    .trigger-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 40px;\n      height: 40px;\n      min-width: 40px;\n      min-height: 40px;\n      border-radius: 50%;\n      border: none;\n      background: transparent;\n      color: var(--md-sys-color-on-surface-variant, #49454F);\n      cursor: pointer;\n      padding: 0;\n      margin: 0;\n      outline: none;\n      position: relative;\n      transition: background-color 150ms ease, color 150ms ease;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .trigger-btn:hover {\n      background-color: rgba(73, 69, 79, 0.08);\n    }\n\n    .trigger-btn:focus-visible {\n      background-color: rgba(73, 69, 79, 0.12);\n    }\n\n    .trigger-divider {\n      width: 1px;\n      height: 22px;\n      background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n      margin: 0 2px;\n      flex-shrink: 0;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-container,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-container {\n      display: none;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .scrim,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .scrim {\n      display: none;\n    }\n\n    :host([responsive][active]),\n    :host([collapse-on-mobile][active]) {\n      display: block;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: 100vw;\n      height: 100vh;\n      height: 100dvh;\n      max-width: 100vw;\n      margin: 0;\n      padding: 0;\n      z-index: 99999;\n    }\n\n    :host([responsive][active]) .search-trigger-container,\n    :host([collapse-on-mobile][active]) .search-trigger-container {\n      display: none;\n    }\n\n    :host([responsive][active]) .scrim,\n    :host([collapse-on-mobile][active]) .scrim {\n      display: none;\n    }\n\n    :host([responsive][active]) .search-container,\n    :host([collapse-on-mobile][active]) .search-container {\n      display: flex;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: 100vw;\n      height: 100vh;\n      height: 100dvh;\n      max-width: 100vw;\n      border-radius: 0;\n      box-shadow: none;\n      z-index: 99999;\n      background-color: var(--md-search-bar-container-color, var(--md-sys-color-surface-container-high, #ECE6F0));\n    }\n\n    :host([responsive][active]) .suggestions-container,\n    :host([collapse-on-mobile][active]) .suggestions-container {\n      flex: 1;\n      max-height: calc(100vh - 57px);\n      max-height: calc(100dvh - 57px);\n    }\n  }\n\n  /* Forced Fullscreen attribute */\n  :host([fullscreen][active]) {\n    display: block;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100vw;\n    height: 100vh;\n    height: 100dvh;\n    max-width: 100vw;\n    z-index: 99999;\n  }\n\n  :host([fullscreen][active]) .search-trigger-container {\n    display: none;\n  }\n\n  :host([fullscreen][active]) .scrim {\n    display: none;\n  }\n\n  :host([fullscreen][active]) .search-container {\n    display: flex;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100vw;\n    height: 100vh;\n    height: 100dvh;\n    max-width: 100vw;\n    border-radius: 0;\n    box-shadow: none;\n    z-index: 99999;\n    background-color: var(--md-search-bar-container-color, var(--md-sys-color-surface-container-high, #ECE6F0));\n  }\n\n  :host([fullscreen][active]) .suggestions-container {\n    flex: 1;\n    max-height: calc(100vh - 57px);\n    max-height: calc(100dvh - 57px);\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../icon/icon.js';\nimport { searchBarStyles } from './search-bar.css.js';\n\nexport interface SearchSuggestion {\n  id?: string;\n  label: string;\n  value?: string;\n  supportingText?: string;\n  trailingSupportingText?: string;\n  icon?: string;\n  [key: string]: unknown;\n}\n\n@customElement('md-search-bar')\nexport class MdSearchBar extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, searchBarStyles];\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  placeholder = 'Search';\n\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  @property({ type: Array })\n  suggestions: Array<string | SearchSuggestion> = [];\n\n  @property({ type: String, attribute: 'leading-icon' })\n  leadingIcon = 'search';\n\n  @property({ type: String, attribute: 'active-leading-icon' })\n  activeLeadingIcon = 'arrow_back';\n\n  @property({ type: String, attribute: 'trailing-icon' })\n  trailingIcon = '';\n\n  @property({ type: Boolean, attribute: 'show-back-button' })\n  showBackButton = true;\n\n  @property({ type: Boolean, attribute: 'show-clear-button' })\n  showClearButton = true;\n\n  @property({ type: Boolean, reflect: true })\n  responsive = true;\n\n  @property({ type: Boolean, attribute: 'collapse-on-mobile', reflect: true })\n  collapseOnMobile = true;\n\n  @property({ type: Boolean, reflect: true })\n  fullscreen = false;\n\n  @property({ type: Boolean, attribute: 'auto-deactivate-on-select' })\n  autoDeactivateOnSelect = true;\n\n  @state()\n  private highlightedIndex = -1;\n\n  @query('input')\n  private inputElement?: HTMLInputElement;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setFormValue(this.value);\n    this.toggleAttribute('has-value', Boolean(this.value));\n    this.toggleAttribute('active', this.active);\n    this.toggleAttribute('collapse-on-mobile', this.collapseOnMobile);\n  }\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('value')) {\n      this.setFormValue(this.value);\n      this.toggleAttribute('has-value', Boolean(this.value));\n    }\n    if (changedProperties.has('active')) {\n      this.toggleAttribute('active', this.active);\n      if (!this.active) {\n        this.highlightedIndex = -1;\n      }\n    }\n    if (changedProperties.has('collapseOnMobile')) {\n      this.toggleAttribute('collapse-on-mobile', this.collapseOnMobile);\n    }\n  }\n\n  override formResetCallback() {\n    this.value = '';\n    this.setFormValue(null);\n    this.toggleAttribute('has-value', false);\n    this.highlightedIndex = -1;\n  }\n\n  /**\n   * Focuses the search input field.\n   */\n  override focus() {\n    this.inputElement?.focus();\n  }\n\n  /**\n   * Opens / activates the search view.\n   */\n  show() {\n    if (!this.active) {\n      this.active = true;\n      this.emitEvent('active-change', { active: true });\n    }\n    this.updateComplete.then(() => {\n      this.inputElement?.focus();\n    });\n  }\n\n  /**\n   * Alias for show()\n   */\n  open() {\n    this.show();\n  }\n\n  /**\n   * Closes / deactivates the search view.\n   */\n  close() {\n    if (this.active) {\n      this.active = false;\n      this.highlightedIndex = -1;\n      this.emitEvent('active-change', { active: false });\n    }\n  }\n\n  /**\n   * Alias for close()\n   */\n  collapse() {\n    this.close();\n  }\n\n  /**\n   * Toggles the active state of the search bar.\n   */\n  toggle() {\n    if (this.active) {\n      this.close();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Clears the current search input.\n   */\n  clear() {\n    this.value = '';\n    this.setFormValue('');\n    this.toggleAttribute('has-value', false);\n    this.highlightedIndex = -1;\n    this.emitEvent('input', { value: '' });\n    this.emitEvent('clear');\n    this.inputElement?.focus();\n  }\n\n  private handleFocus = () => {\n    if (!this.active) {\n      this.active = true;\n      this.emitEvent('active-change', { active: true });\n    }\n  };\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.setFormValue(this.value);\n    this.toggleAttribute('has-value', Boolean(this.value));\n    this.highlightedIndex = -1;\n    this.emitEvent('input', { value: this.value });\n  };\n\n  private handleChange = () => {\n    this.emitEvent('change', { value: this.value });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const count = this.suggestions.length;\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n      this.inputElement?.blur();\n      return;\n    }\n\n    if (event.key === 'ArrowDown') {\n      if (!this.active) {\n        this.show();\n        return;\n      }\n      if (count > 0) {\n        event.preventDefault();\n        this.highlightedIndex = (this.highlightedIndex + 1) % count;\n      }\n      return;\n    }\n\n    if (event.key === 'ArrowUp') {\n      if (count > 0 && this.active) {\n        event.preventDefault();\n        this.highlightedIndex = this.highlightedIndex <= 0 ? count - 1 : this.highlightedIndex - 1;\n      }\n      return;\n    }\n\n    if (event.key === 'Enter') {\n      if (this.active && this.highlightedIndex >= 0 && this.highlightedIndex < count) {\n        const item = this.suggestions[this.highlightedIndex];\n        if (item !== undefined) {\n          event.preventDefault();\n          this.selectSuggestion(item, this.highlightedIndex);\n        }\n      } else {\n        this.emitEvent('search', { value: this.value });\n      }\n    }\n  };\n\n  private handleTriggerClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.show();\n  };\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.show();\n    }\n  };\n\n  private handleTrailingTriggerClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    const allowed = this.emitEvent('trailing-icon-click', { icon: this.trailingIcon });\n    if (allowed) {\n      this.show();\n    }\n  };\n\n  private handleBackClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.close();\n  };\n\n  private handleScrimClick = () => {\n    this.close();\n  };\n\n  private handleClearClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.clear();\n  };\n\n  private selectSuggestion(suggestion: string | SearchSuggestion, index: number) {\n    const label = typeof suggestion === 'string' ? suggestion : suggestion.label;\n    const value = typeof suggestion === 'string' ? suggestion : (suggestion.value ?? suggestion.label);\n\n    this.value = value;\n    this.setFormValue(this.value);\n    this.toggleAttribute('has-value', Boolean(this.value));\n    this.emitEvent('suggestion-select', { suggestion, label, value, index });\n    this.emitEvent('search', { value: this.value, suggestion });\n\n    if (this.autoDeactivateOnSelect) {\n      this.close();\n    }\n  }\n\n  private renderSuggestionItem(suggestion: string | SearchSuggestion, index: number) {\n    const isString = typeof suggestion === 'string';\n    const label = isString ? suggestion : suggestion.label;\n    const supportingText = !isString ? suggestion.supportingText : undefined;\n    const trailingSupportingText = !isString ? suggestion.trailingSupportingText : undefined;\n    const iconName = !isString && suggestion.icon ? suggestion.icon : 'history';\n    const isHighlighted = this.highlightedIndex === index;\n\n    return html`\n      <div\n        class=\"suggestion-item ${isHighlighted ? 'highlighted' : ''}\"\n        role=\"option\"\n        aria-selected=${isHighlighted ? 'true' : 'false'}\n        @click=${() => this.selectSuggestion(suggestion, index)}\n      >\n        <span class=\"suggestion-icon\">\n          <md-icon name=${iconName}></md-icon>\n        </span>\n        <div class=\"suggestion-text\">\n          <span class=\"suggestion-label\">${label}</span>\n          ${supportingText ? html`<span class=\"suggestion-supporting\">${supportingText}</span>` : nothing}\n        </div>\n        ${trailingSupportingText ? html`<span class=\"suggestion-trailing\">${trailingSupportingText}</span>` : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    const showBack = this.active && this.showBackButton;\n    const hasTrailing = Boolean(this.trailingIcon);\n\n    return html`\n      <div\n        class=\"search-trigger-container ${hasTrailing ? 'has-trailing' : ''}\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=${this.placeholder || 'Search'}\n        title=${this.placeholder || 'Search'}\n        ?disabled=${this.disabled}\n        @click=${this.handleTriggerClick}\n        @keydown=${this.handleTriggerKeyDown}\n      >\n        <button\n          class=\"trigger-btn\"\n          type=\"button\"\n          aria-label=${this.placeholder || 'Search'}\n          title=${this.placeholder || 'Search'}\n          ?disabled=${this.disabled}\n          @click=${this.handleTriggerClick}\n        >\n          <md-icon name=${this.leadingIcon || 'search'}></md-icon>\n        </button>\n\n        ${hasTrailing\n          ? html`\n              <div class=\"trigger-divider\" aria-hidden=\"true\"></div>\n              <button\n                class=\"trigger-btn trigger-trailing-btn\"\n                type=\"button\"\n                aria-label=${this.trailingIcon}\n                title=${this.trailingIcon}\n                ?disabled=${this.disabled}\n                @click=${this.handleTrailingTriggerClick}\n              >\n                <md-icon name=${this.trailingIcon}></md-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n\n      <div class=\"scrim\" @click=${this.handleScrimClick}></div>\n\n      <div class=\"search-container\" role=\"search\">\n        <div class=\"search-bar-header\">\n          <span class=\"leading-slot\">\n            <slot name=\"leading-icon\">\n              ${showBack\n                ? html`\n                    <button\n                      class=\"icon-btn\"\n                      type=\"button\"\n                      aria-label=\"Back\"\n                      @click=${this.handleBackClick}\n                    >\n                      <md-icon name=${this.activeLeadingIcon}></md-icon>\n                    </button>\n                  `\n                : html`\n                    <span class=\"icon-btn\" style=\"cursor: default;\">\n                      <md-icon name=${this.leadingIcon}></md-icon>\n                    </span>\n                  `}\n            </slot>\n          </span>\n\n          <div class=\"input-wrapper\">\n            <input\n              type=\"search\"\n              role=\"combobox\"\n              aria-autocomplete=\"list\"\n              aria-expanded=${this.active ? 'true' : 'false'}\n              aria-label=${this.placeholder}\n              placeholder=${this.placeholder}\n              .value=${this.value}\n              ?disabled=${this.disabled}\n              @input=${this.handleInput}\n              @change=${this.handleChange}\n              @keydown=${this.handleKeyDown}\n              @focus=${this.handleFocus}\n              @click=${this.handleFocus}\n            />\n          </div>\n\n          <span class=\"trailing-slot\">\n            ${this.showClearButton && this.value\n              ? html`\n                  <button\n                    class=\"icon-btn clear-btn\"\n                    type=\"button\"\n                    aria-label=\"Clear search\"\n                    @click=${this.handleClearClick}\n                  >\n                    <md-icon name=\"close\"></md-icon>\n                  </button>\n                `\n              : nothing}\n\n            <slot name=\"trailing-icon\">\n              ${this.trailingIcon\n                ? html`\n                    <span class=\"icon-btn\" style=\"cursor: default;\">\n                      <md-icon name=${this.trailingIcon}></md-icon>\n                    </span>\n                  `\n                : nothing}\n            </slot>\n          </span>\n        </div>\n\n        <div class=\"divider\"></div>\n\n        <div class=\"suggestions-container\" role=\"listbox\" aria-label=\"Suggestions\">\n          <slot name=\"suggestions\">\n            ${this.suggestions.map((item, idx) => this.renderSuggestionItem(item, idx))}\n          </slot>\n          <div class=\"extra-content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\n@customElement('md-search')\nexport class MdSearch extends MdSearchBar {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-search-bar': MdSearchBar;\n    'md-search': MdSearch;\n  }\n}\n"],"mappings":";;;;;AAEA,IAAa,IAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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"}