@francofantomius/material-components 1.0.1 → 1.1.0

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/segmented-button-B0BvGSQ7.js

@@ -0,0 +1,265 @@
+import { n as u, t as o } from "./decorate-DXuynaiA.js";
+import "./ripple-squbKHhj.js";
+import "./focus-ring-CuiJuM-y.js";
+import "./icon-DrNqcNEL.js";
+import { css as m, html as c, nothing as g } from "lit";
+import { customElement as b, property as r, queryAssignedElements as f } from "lit/decorators.js";
+var k = m`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    box-sizing: border-box;
+    height: 40px;
+    min-height: 40px;
+    padding: 0 16px;
+    background-color: transparent;
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-size: var(--md-sys-typescale-label-large-size, 14px);
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.1px;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),
+                color 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([selected]) {
+    background-color: var(--md-sys-color-secondary-container, #E8DEF8);
+    color: var(--md-sys-color-on-secondary-container, #1D192B);
+  }
+
+  :host(:hover:not([disabled])) {
+    background-color: rgba(29, 27, 32, 0.08);
+  }
+
+  :host([selected]:hover:not([disabled])) {
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container, #E8DEF8) 90%, #1D192B 10%);
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    gap: 8px;
+    position: relative;
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    --md-icon-size: 18px;
+  }
+
+  .checkmark-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    animation: checkmark-pop 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  @keyframes checkmark-pop {
+    0% {
+      transform: scale(0.6);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .label {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+`, v = m`
+  :host {
+    display: inline-flex;
+    align-items: stretch;
+    position: relative;
+    border-radius: var(--md-sys-shape-corner-full, 9999px);
+    border: 1px solid var(--md-sys-color-outline, #79747E);
+    background-color: transparent;
+    overflow: hidden;
+    box-sizing: border-box;
+    vertical-align: middle;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  ::slotted(md-segmented-button:not(:first-child)) {
+    border-left: 1px solid var(--md-sys-color-outline, #79747E);
+  }
+`, a = class extends u {
+  constructor(...i) {
+    super(...i), this.selected = !1, this.disabled = !1, this.value = "", this.label = "", this.icon = "", this.noCheckmark = !1, this.handleClick = (e) => {
+      if (this.disabled) {
+        e.preventDefault(), e.stopImmediatePropagation();
+        return;
+      }
+      this.closest("md-segmented-button-set") || (this.selected = !this.selected, this.emitEvent("change", {
+        selected: this.selected,
+        value: this.value || this.label || this.textContent?.trim() || ""
+      }));
+    }, this.handleKeyDown = (e) => {
+      this.disabled || (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.click());
+    };
+  }
+  static {
+    this.styles = [u.styles, k];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "button"), this.updateAriaAttributes(), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  updated(i) {
+    super.updated(i), (i.has("selected") || i.has("disabled")) && this.updateAriaAttributes();
+  }
+  updateAriaAttributes() {
+    this.setAttribute("aria-pressed", this.selected ? "true" : "false"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  render() {
+    const i = this.selected && !this.noCheckmark, e = !!(this.icon || this.assignedIcons && this.assignedIcons.length > 0);
+    return c`
+      <div class="button">
+        <md-ripple ?disabled=${this.disabled}></md-ripple>
+        <md-focus-ring></md-focus-ring>
+
+        ${i ? c`
+              <span class="icon checkmark-icon" aria-hidden="true">
+                <md-icon name="check" size="18"></md-icon>
+              </span>
+            ` : e ? c`
+              <span class="icon">
+                <slot name="icon">
+                  ${this.icon ? c`<md-icon name=${this.icon} size="18"></md-icon>` : g}
+                </slot>
+              </span>
+            ` : c`<slot name="icon"></slot>`}
+
+        <span class="label">
+          <slot>${this.label}</slot>
+        </span>
+      </div>
+    `;
+  }
+};
+o([r({
+  type: Boolean,
+  reflect: !0
+})], a.prototype, "selected", void 0);
+o([r({
+  type: Boolean,
+  reflect: !0
+})], a.prototype, "disabled", void 0);
+o([r({ type: String })], a.prototype, "value", void 0);
+o([r({ type: String })], a.prototype, "label", void 0);
+o([r({ type: String })], a.prototype, "icon", void 0);
+o([r({
+  type: Boolean,
+  attribute: "no-checkmark",
+  reflect: !0
+})], a.prototype, "noCheckmark", void 0);
+o([f({ slot: "icon" })], a.prototype, "assignedIcons", void 0);
+a = o([b("md-segmented-button")], a);
+var h = class extends u {
+  constructor(...i) {
+    super(...i), this.multiselect = !1, this.disabled = !1, this.handleSlotChange = () => {
+      this.syncRovingTabIndex(), this.disabled && this.syncDisabled();
+    }, this.handleClick = (e) => {
+      if (this.disabled) return;
+      const t = e.target.closest("md-segmented-button");
+      if (!t || t.disabled || !this.buttons.includes(t)) return;
+      const n = this.buttons.indexOf(t);
+      this.multiselect ? t.selected = !t.selected : this.buttons.forEach((s) => {
+        s.selected = s === t;
+      }), this.syncRovingTabIndex();
+      const d = this.buttons.filter((s) => s.selected).map((s) => s.value || s.label || s.textContent?.trim() || ""), l = t.value || t.label || t.textContent?.trim() || "";
+      this.emitEvent("change", {
+        target: t,
+        index: n,
+        selected: t.selected,
+        value: l,
+        values: d
+      });
+    }, this.handleKeyDown = (e) => {
+      const t = this.buttons.filter((s) => !s.disabled);
+      if (t.length === 0) return;
+      const n = document.activeElement, d = t.findIndex((s) => s === n || s.shadowRoot && s.shadowRoot.activeElement === n);
+      let l = -1;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown" ? (e.preventDefault(), l = d >= 0 && d < t.length - 1 ? d + 1 : 0) : e.key === "ArrowLeft" || e.key === "ArrowUp" ? (e.preventDefault(), l = d > 0 ? d - 1 : t.length - 1) : e.key === "Home" ? (e.preventDefault(), l = 0) : e.key === "End" && (e.preventDefault(), l = t.length - 1), l !== -1 && t[l]) {
+        const s = t[l];
+        this.buttons.forEach((p) => {
+          p.tabIndex = p === s ? 0 : -1;
+        }), s.focus();
+      }
+    };
+  }
+  static {
+    this.styles = [u.styles, v];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "group"), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  updated(i) {
+    super.updated(i), i.has("disabled") && this.syncDisabled();
+  }
+  syncDisabled() {
+    this.buttons && this.buttons.forEach((i) => {
+      i.disabled = this.disabled;
+    });
+  }
+  syncRovingTabIndex() {
+    if (!this.buttons || this.buttons.length === 0) return;
+    const i = this.buttons.find((n) => n.selected && !n.disabled), e = this.buttons.find((n) => !n.disabled), t = i || e;
+    this.buttons.forEach((n) => {
+      n.tabIndex = n === t ? 0 : -1;
+    });
+  }
+  render() {
+    return c`<slot @slotchange=${this.handleSlotChange}></slot>`;
+  }
+};
+o([r({
+  type: Boolean,
+  reflect: !0
+})], h.prototype, "multiselect", void 0);
+o([r({
+  type: Boolean,
+  reflect: !0
+})], h.prototype, "disabled", void 0);
+o([f({ selector: "md-segmented-button" })], h.prototype, "buttons", void 0);
+h = o([b("md-segmented-button-set")], h);
+export {
+  h as n,
+  a as t
+};
+
+//# sourceMappingURL=segmented-button-B0BvGSQ7.js.map