dap-design-system 0.62.0 → 0.62.2

package/dist/components/select/select.component.js

@@ -1,17 +1,17 @@
-var f = (u, e, t) => new Promise((n, a) => {
+var f = (u, e, t) => new Promise((s, l) => {
   var p = (r) => {
     try {
       b(t.next(r));
     } catch (y) {
-      a(y);
+      l(y);
     }
   }, m = (r) => {
     try {
       b(t.throw(r));
     } catch (y) {
-      a(y);
+      l(y);
     }
-  }, b = (r) => r.done ? n(r.value) : Promise.resolve(r.value).then(p, m);
+  }, b = (r) => r.done ? s(r.value) : Promise.resolve(r.value).then(p, m);
   b((t = t.apply(u, e)).next());
 });
 import { clsx as h } from "../../node_modules/clsx/dist/clsx.js";
@@ -21,7 +21,7 @@ import "../../node_modules/lit-element/lit-element.js";
 import { property as d } from "../../node_modules/@lit/reactive-element/decorators/property.js";
 import { state as $ } from "../../node_modules/@lit/reactive-element/decorators/state.js";
 import { query as v } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { ifDefined as s } from "../../node_modules/lit-html/directives/if-defined.js";
+import { ifDefined as o } from "../../node_modules/lit-html/directives/if-defined.js";
 import { html as i } from "../../node_modules/lit-html/static.js";
 import { getValidityStateObject as D } from "../../common/utils.js";
 import { GenericFormElement as w } from "../../internal/mixin/genericFormElement.js";
@@ -35,15 +35,15 @@ import I from "../icons/system/system-loading-spinner/system-loading-spinner.com
 import x from "../option-list/option-list.component.js";
 import V from "../popup/popup.component.js";
 import O from "../tooltip/tooltip.component.js";
-import B from "../tray/tray.component.js";
-import T from "../typography/typography.component.js";
+import T from "../tray/tray.component.js";
+import B from "../typography/typography.component.js";
 import q from "./select.scss.js";
 import g, { t as N } from "../../node_modules/i18next/dist/esm/i18next.js";
 import { unsafeCSS as z } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var M = Object.defineProperty, l = (u, e, t, n) => {
-  for (var a = void 0, p = u.length - 1, m; p >= 0; p--)
-    (m = u[p]) && (a = m(e, t, a) || a);
-  return a && M(e, t, a), a;
+var M = Object.defineProperty, n = (u, e, t, s) => {
+  for (var l = void 0, p = u.length - 1, m; p >= 0; p--)
+    (m = u[p]) && (l = m(e, t, l) || l);
+  return l && M(e, t, l), l;
 };
 const c = class c extends w {
   constructor() {
@@ -62,7 +62,12 @@ const c = class c extends w {
         this.emit("dds-keydown", e), this.showDropDown(e.key);
       }
     }), this.handleListKeyDown = (e) => {
-      e.detail.key === "Escape" && this.hideDropDown();
+      var t, s;
+      if (((t = e.detail) == null ? void 0 : t.key) === "Tab") {
+        this.hideDropDown({ skipFocus: !0 }), this.focus();
+        return;
+      }
+      ((s = e.detail) == null ? void 0 : s.key) === "Escape" && this.hideDropDown();
     }, this.handleDocumentMouseDown = (e) => {
       const t = e.composedPath();
       this && !t.includes(this) && this.hideDropDown();
@@ -73,15 +78,15 @@ const c = class c extends w {
     }, this.handleBlur = () => {
       this.emit("dds-blur");
     }, this.handleSelectedChange = (e) => {
-      const t = Object.keys(e.detail).length ? e.detail : null, n = t == null ? void 0 : t.value, a = n !== this.value;
-      this.selectedItem = t, this.hideDropDown(), this.value = n, a && this.emit("dds-change", this.selectedItem), this.setValidity();
+      const t = Object.keys(e.detail).length ? e.detail : null, s = t == null ? void 0 : t.value, l = s !== this.value;
+      this.selectedItem = t, this.hideDropDown(), this.value = s, l && this.emit("dds-change", this.selectedItem), this.setValidity();
     }, this.handleOptionDeselect = () => {
       this.selectedItem = null, this.value = void 0, this.emit("dds-change", null), this.setValidity();
     }, this.handleNativeChange = (e) => {
-      const n = e.target.value, a = this.querySelector(
-        `dap-ds-option-item[value="${n}"]`
+      const s = e.target.value, l = this.querySelector(
+        `dap-ds-option-item[value="${s}"]`
       );
-      this.value = n, this.selectedItem = a ? { value: n, text: a.optionText } : { value: n, text: n }, this.emit("dds-change", this.selectedItem), this.setValidity();
+      this.value = s, this.selectedItem = l ? { value: s, text: l.optionText } : { value: s, text: s }, this.emit("dds-change", this.selectedItem), this.setValidity();
     };
   }
   connectedCallback() {
@@ -186,7 +191,7 @@ const c = class c extends w {
     );
     return i`
       <optgroup label=${e.label || ""} ?disabled=${e.disabled}>
-        ${t.map((n) => this.renderNativeOption(n))}
+        ${t.map((s) => this.renderNativeOption(s))}
       </optgroup>
     `;
   }
@@ -205,8 +210,8 @@ const c = class c extends w {
       "select--loading": this.loading
     })}"
           part="trigger"
-          aria-labelledby=${s(this.label ? "label" : void 0)}
-          aria-describedby=${s(this.getAriaDescribedBy())}
+          aria-labelledby=${o(this.label ? "label" : void 0)}
+          aria-describedby=${o(this.getAriaDescribedBy())}
           ?disabled=${this.disabled}
           ?required=${this.required}
           @change=${this.handleNativeChange}
@@ -242,17 +247,17 @@ const c = class c extends w {
       "select--optional": this.optional
     })}"
       aria-expanded=${this.readonly || this.disabled ? "false" : this.opened ? "true" : "false"}
-      aria-haspopup=${s(
+      aria-haspopup=${o(
       this.readonly || this.disabled ? void 0 : "listbox"
     )}
-      aria-labelledby=${s(this.label ? "label" : void 0)}
-      aria-label=${s(
+      aria-labelledby=${o(this.label ? "label" : void 0)}
+      aria-label=${o(
       this.label ? void 0 : this.ariaLabel || this.selectedDisplayText || this.placeholder || void 0
     )}
-      aria-describedby=${s(this.getAriaDescribedBy())}
+      aria-describedby=${o(this.getAriaDescribedBy())}
       aria-disabled=${this.disabled}
       aria-controls="option-list"
-      aria-activedescendant=${s((e = this.getActiveDescendant()) == null ? void 0 : e.id)}
+      aria-activedescendant=${o((e = this.getActiveDescendant()) == null ? void 0 : e.id)}
       ?required=${this.required}
       ?readonly=${this.readonly}
       ?autofocus=${this.autofocus}
@@ -281,9 +286,9 @@ const c = class c extends w {
       part="option-list"
       exportparts="option-item, option-item-base, option-item-label, option-item-prefix, option-item-suffix"
       id="option-list"
-      aria-labelledby=${s(this.label ? "label" : void 0)}
+      aria-labelledby=${o(this.label ? "label" : void 0)}
       searchMode="typehead"
-      size=${s(this.effectiveSize)}
+      size=${o(this.effectiveSize)}
       value=${this.value}
       disableDelaySet
       @dds-option-change=${this.handleSelectedChange}
@@ -308,7 +313,7 @@ const c = class c extends w {
           .noMargin=${!!this.description}
           for="input"
           .hideLabel=${this.hideLabel}
-          label=${s(this.label)}>
+          label=${o(this.label)}>
         </dap-ds-form-label>`}
         ${this.tooltip && i` <dap-ds-tooltip
           part="tooltip"
@@ -333,7 +338,7 @@ const c = class c extends w {
           part="description"
           variant="description"
           class=${h("input-description")}
-          size=${s(this.effectiveSize)}
+          size=${o(this.effectiveSize)}
           id="description">
           ${this.description}
         </dap-ds-typography>
@@ -350,7 +355,7 @@ const c = class c extends w {
                   >${this.renderOptionList()}</dap-ds-tray
                 >
               ` : i`<dap-ds-popup
-                floatingStrategy=${s(this.floatingStrategy)}
+                floatingStrategy=${o(this.floatingStrategy)}
                 part="base"
                 exportparts="popup:popup-base"
                 class="select-popup"
@@ -358,17 +363,17 @@ const c = class c extends w {
                 ?hasArrow=${!1}
                 overflow
                 placement=${this.placement}
-                maxHeight=${s(this.maxHeight)}
+                maxHeight=${o(this.maxHeight)}
                 ?sync=${this.sync}
                 ?disableViewportAutoClose=${this.disableViewportAutoClose}
                 @dds-close=${this.handlePopupAutoClose}
-                size=${s(this.effectiveSize)}>
+                size=${o(this.effectiveSize)}>
                 ${this.renderTriggerElement()} ${this.renderOptionList()}
               </dap-ds-popup>`}
         ${this.feedback && i`<dap-ds-feedback
           part="feedback"
-          feedbackType=${s(this.feedbackType)}
-          feedbackSize="${s(this.effectiveSize)}"
+          feedbackType=${o(this.feedbackType)}
+          feedbackSize="${o(this.effectiveSize)}"
           id="feedback"
           .subtle=${this.subtle}>
           ${this.feedback}
@@ -384,55 +389,55 @@ c.tagName = "dap-ds-select", c.dependencies = {
   "dap-ds-tooltip": O,
   "dap-ds-icon-button": L,
   "dap-ds-icon": A,
-  "dap-ds-typography": T,
+  "dap-ds-typography": B,
   "dap-ds-popup": V,
-  "dap-ds-tray": B,
+  "dap-ds-tray": T,
   "dap-ds-feedback": k
 }, c.styles = z(q);
-let o = c;
-l([
+let a = c;
+n([
   v("button")
-], o.prototype, "triggerButton");
-l([
+], a.prototype, "triggerButton");
+n([
   v("dap-ds-option-list")
-], o.prototype, "optionList");
-l([
+], a.prototype, "optionList");
+n([
   d({ reflect: !0 })
-], o.prototype, "placement");
-l([
+], a.prototype, "placement");
+n([
   d({ type: Boolean, reflect: !0 })
-], o.prototype, "opened");
-l([
+], a.prototype, "opened");
+n([
   d()
-], o.prototype, "placeholder");
-l([
+], a.prototype, "placeholder");
+n([
   d({ type: Boolean })
-], o.prototype, "sync");
-l([
+], a.prototype, "sync");
+n([
   d({ type: Boolean })
-], o.prototype, "isMobile");
-l([
+], a.prototype, "isMobile");
+n([
   d({ type: Boolean })
-], o.prototype, "native");
-l([
+], a.prototype, "native");
+n([
   d({ type: Boolean })
-], o.prototype, "loading");
-l([
+], a.prototype, "loading");
+n([
   d({ type: Number })
-], o.prototype, "maxHeight");
-l([
+], a.prototype, "maxHeight");
+n([
   d({ type: Boolean })
-], o.prototype, "noAnimation");
-l([
+], a.prototype, "noAnimation");
+n([
   d({ reflect: !0 })
-], o.prototype, "floatingStrategy");
-l([
+], a.prototype, "floatingStrategy");
+n([
   d({ type: Boolean })
-], o.prototype, "disableViewportAutoClose");
-l([
+], a.prototype, "disableViewportAutoClose");
+n([
   $()
-], o.prototype, "selectedItem");
+], a.prototype, "selectedItem");
 export {
-  o as default
+  a as default
 };
 //# sourceMappingURL=select.component.js.map

package/dist/components/select/select.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.component.js","sources":["../../../src/components/select/select.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n  CommonFormElementSize,\n  FloatingStrategy,\n  PopupPlacement,\n} from '@/common/types'\nimport { getValidityStateObject } from '@/common/utils'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\nimport { i18next, t } from '@/localization/localization'\n\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport ArrowsArrowDownSLine from '../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component'\nimport SystemLoadingSpinner from '../icons/system/system-loading-spinner/system-loading-spinner.component'\nimport DapDSOptionGroup from '../option-group/option-group.component'\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport DapDSOptionList from '../option-list/option-list.component'\nimport DapDSPopup from '../popup/popup.component'\nimport DapDSTooltip from '../tooltip/tooltip.component'\nimport DapDSTray from '../tray/tray.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './select.scss?inline'\n\n/**\n * `dap-ds-select`\n * @summary A select is a form element that allows the user to select one option from a set.\n * @element dap-ds-select\n * @title - Select\n *\n * @event {{ value: string }} dds-change - Fired when the select value changes.\n * @event {{ void }} dds-blur - Emitted when the select loses focus.\n * @event {{ void }} dds-focus - Emitted when the select gains focus.\n * @event {{ void }} dds-opened - Emitted when the select dropdown is opened.\n * @event {{ void }} dds-closed - Emitted when the select dropdown is closed.\n *\n * @property {string} value - The value of the select.\n * @property {string} label - The label of the select.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the select.\n * @property {string} tooltip - The tooltip of the select.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the select.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the select. Default is `sm`.\n * @property {boolean} disabled - Whether the select is disabled.\n * @property {boolean} required - Whether the select is required.\n * @property {boolean} readonly - Whether the select is readonly.\n * @property {boolean} autofocus - Whether the select is autofocus.\n * @property {string} feedback - The feedback of the select.\n * @property {negative | positive | warning} feedbackType - The feedback type of the select. Can be `negative`, `positive`, or `warning`.\n * @property {string} status - The status of the select. Can be `success` or `error`.\n * @property {boolean} optional - The optional state of the select.\n * @property {string} optionalLabel - The optional label of the select.\n * @property {string} requiredLabel - The required indicator of the select. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n *\n * @csspart base - The main select container.\n * @csspart trigger - The trigger button of the select.\n * @csspart label - The label of the select.\n * @csspart description - The description of the select.\n * @csspart feedback - The feedback of the select.\n * @csspart tooltip - The tooltip of the select.\n * @csspart popup-base - The base of the popup.\n * @csspart option-list - The option list of the select.\n * @csspart option-item - The option item of the select.\n * @csspart option-item-base - The base of the option item.\n * @csspart option-item-label - The label of the option item.\n * @csspart option-item-prefix - The prefix of the option item.\n * @csspart option-item-suffix - The suffix of the option item.\n * @csspart indicator-icon - The indicator icon of the select.\n * @csspart mobile-tray - The mobile tray of the select.\n * @csspart mobile-content - The mobile content of the select.\n * @csspart mobile-body - The mobile body of the select.\n * @csspart mobile-header - The mobile header of the select.\n * @csspart mobile-footer - The mobile footer of the select.\n *\n * @cssproperty --dds-select-min-height - Minimum height of the select component (default: var(--dds-spacing-1000))\n * @cssproperty --dds-select-padding - Padding of the select component (default: var(--dds-spacing-300))\n * @cssproperty --dds-select-column-gap - Column gap of the select component (default: var(--dds-spacing-100))\n * @cssproperty --dds-select-border-color - Border color of the select component (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-select-border-radius - Border radius of the select component (default: var(--dds-radius-base))\n * @cssproperty --dds-select-bg-color - Background color of the select component (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-select-text-color - Text color of the select component (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-select-icon-right - Right position of the icon (default: var(--dds-spacing-200))\n * @cssproperty --dds-select-icon-color - Color of the icon (default: var(--dds-icon-neutral-subtle))\n * @cssproperty --dds-select-text-margin-right - Right margin of the text (default: var(--dds-spacing-600))\n * @cssproperty --dds-select-disabled-border-color - Border color when disabled (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-select-disabled-bg-color - Background color when disabled (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-select-disabled-text-color - Text color when disabled (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-select-error-border-color - Border color in error state (default: var(--dds-border-negative-base))\n * @cssproperty --dds-select-success-border-color - Border color in success state (default: var(--dds-border-positive-base))\n * @cssproperty --dds-select-xs-min-height - Minimum height for extra small size (default: var(--dds-spacing-800))\n * @cssproperty --dds-select-xs-padding - Padding for extra small size (default: var(--dds-spacing-200))\n * @cssproperty --dds-select-xs-font-size - Font size for extra small size (default: var(--dds-font-sm))\n * @cssproperty --dds-select-lg-min-height - Minimum height for large size (default: var(--dds-spacing-1200))\n * @cssproperty --dds-select-lg-padding - Padding for large size (default: var(--dds-spacing-400))\n * @cssproperty --dds-select-lg-font-size - Font size for large size (default: var(--dds-font-lg))\n * @cssproperty --dds-select-lg-icon-right - Right position of the icon for large size (default: var(--dds-spacing-300))\n * @cssproperty --dds-select-lg-icon-color - Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-select-popup-bg-color - Background color of the popup (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-select-icon-opened-transform - Transform of the icon when the select is opened (default: rotate(90deg))\n *\n * @slot - The option list of the select.\n * @slot indicator-icon - The indicator icon of the select.\n */\nexport default class DapDSSelect extends GenericFormElement {\n  static tagName = 'dap-ds-select'\n\n  static dependencies = {\n    'dap-ds-icon-loading-spinner': SystemLoadingSpinner,\n    'dap-ds-icon-arrow-down-s-line': ArrowsArrowDownSLine,\n    'dap-ds-option-list': DapDSOptionList,\n    'dap-ds-form-label': DapDSFormLabel,\n    'dap-ds-tooltip': DapDSTooltip,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-popup': DapDSPopup,\n    'dap-ds-tray': DapDSTray,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  /**\n   * @ignore\n   */\n  @query('button') triggerButton!: HTMLButtonElement\n\n  /**\n   * @ignore\n   */\n  @query('dap-ds-option-list') optionList!: DapDSOptionList\n\n  /** The popup placement of the select\n   * @type {'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'}\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'bottom-start'\n\n  /** Whether the select dropdown is opened.*/\n  @property({ type: Boolean, reflect: true }) opened? = false\n\n  /** The placeholder of the select. */\n  @property() placeholder: string | null\n\n  /** The sync size of the select dropdown */\n  @property({ type: Boolean }) sync?: boolean\n\n  /** Whether the select is in mobile mode. */\n  @property({ type: Boolean }) isMobile?: boolean = false\n\n  /** Whether to render a native HTML select element for mobile-friendly option selection. */\n  @property({ type: Boolean }) native?: boolean = false\n\n  /** The loading state of the select. */\n  @property({ type: Boolean }) loading?: boolean = false\n\n  /** The max heigth of the select dropdown. */\n  @property({ type: Number }) maxHeight?: number\n\n  /** Whether the select dropdown indicator is animated or not */\n  @property({ type: Boolean }) noAnimation?: boolean = false\n\n  /** The floating strategy of the select dropdown\n   * @type {'absolute' | 'fixed'}\n   */\n  @property({ reflect: true }) floatingStrategy: FloatingStrategy = 'absolute'\n\n  /** Whether to keep popup open when trigger leaves viewport. */\n  @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n  /**\n   * @ignore\n   */\n  @state() selectedItem: any\n\n  static readonly styles = unsafeCSS(styles)\n\n  private languageChangeHandler = () => {\n    // Force re-render when language changes to update selectedDisplayText\n    this.requestUpdate()\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // Listen for language changes to update the displayed text\n    i18next.on('languageChanged', this.languageChangeHandler)\n\n    // Ensure native browser validation UI is suppressed by default,\n    // similar to other form components (inputs, combobox, etc.)\n    this.addEventListener('invalid', this.handleInvalid)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up language change listener\n    i18next.off('languageChanged', this.languageChangeHandler)\n\n    this.removeEventListener('invalid', this.handleInvalid)\n  }\n\n  /**\n   * Lifecycle method to handle property changes\n   */\n  updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties)\n\n    // Handle when value is set to undefined or null externally\n    if (changedProperties.has('value')) {\n      const newValue = this.value\n      if (newValue === undefined || newValue === null) {\n        if (this.selectedItem !== null) {\n          this.selectedItem = null\n          this.setValidity()\n        }\n      }\n    }\n  }\n\n  private readonly handleClick = () => {\n    if (this.readonly || this.disabled) {\n      return\n    }\n\n    this.opened ? this.hideDropDown() : this.showDropDown()\n  }\n\n  private readonly handleKeyDown = async (event: KeyboardEvent) => {\n    if (event.key === 'Tab' || event.key === 'Shift') {\n      return\n    }\n\n    if (this.readonly) {\n      return\n    }\n\n    event.preventDefault()\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      return this.opened ? this.hideDropDown() : this.showDropDown()\n    }\n\n    if (event.key === 'Escape') {\n      this.hideDropDown()\n      return this.focus()\n    }\n\n    if (\n      event.key === 'ArrowDown' ||\n      event.key === 'ArrowUp' ||\n      event.key === 'ArrowLeft' ||\n      event.key === 'ArrowRight'\n    ) {\n      if (!this.opened) {\n        return this.showDropDown()\n      }\n\n      return\n    }\n\n    this.emit('dds-keydown', event)\n\n    // typing\n    this.showDropDown(event.key)\n  }\n\n  private readonly handleListKeyDown = (event: CustomEvent) => {\n    if (event.detail.key === 'Escape') {\n      this.hideDropDown()\n    }\n  }\n\n  private readonly handleDocumentMouseDown = (event: MouseEvent) => {\n    const path = event.composedPath()\n    if (this && !path.includes(this)) {\n      this.hideDropDown()\n    }\n  }\n\n  private readonly handlePopupAutoClose = () => {\n    this.hideDropDown({ skipFocus: true })\n  }\n\n  private readonly handleFocus = () => {\n    this.emit('dds-focus')\n  }\n\n  private readonly handleBlur = () => {\n    this.emit('dds-blur')\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({})\n    this.internals.setFormValue(this.defaultValue)\n    this.value = this.defaultValue\n    this.selectedItem = this.defaultValue\n  }\n\n  async showDropDown(key?: string) {\n    if (this.opened) {\n      return\n    }\n\n    this.opened = true\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown)\n\n    await this.updateComplete\n    this.optionList.captureFocus(key)\n\n    // Force update to ensure aria-activedescendant is set correctly\n    await this.updateComplete\n\n    this.emit('dds-opened')\n  }\n\n  async hideDropDown(options?: { skipFocus?: boolean }) {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n\n    await this.updateComplete\n    this.optionList.removeFocus()\n\n    if (!options?.skipFocus) {\n      this.focus()\n    }\n\n    this.emit('dds-closed')\n  }\n\n  get focusElement() {\n    return this.triggerButton\n  }\n\n  /**\n   * Get the active descendant element for aria-activedescendant\n   * Returns the currently focused option when dropdown is open, otherwise null\n   */\n  getActiveDescendant() {\n    if (!this.opened) {\n      return null\n    }\n\n    const activeOption = this.optionList?.getActiveOption()\n    return activeOption\n  }\n\n  /**\n   * Get the aria-describedby value, combining description and feedback IDs\n   */\n  private getAriaDescribedBy(): string | undefined {\n    const ids: string[] = []\n    if (this.description) {\n      ids.push('description')\n    }\n    if (this.feedback) {\n      ids.push('feedback')\n    }\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  // custom validation\n  get validity(): ValidityState {\n    if (this.internals.validity) {\n      return this.internals.validity\n    } else {\n      return getValidityStateObject({\n        valueMissing:\n          this.required &&\n          (!this.selectedItem ||\n            this.selectedItem.value === '' ||\n            this.value === '' ||\n            this.value === undefined ||\n            this.value === null),\n      })\n    }\n  }\n\n  get validationMessage(): string {\n    return t('form.validationMessage.select')\n  }\n\n  /** Get the current display text for the selected item, dynamically fetching from the option */\n  get selectedDisplayText(): string | null {\n    if (!this.selectedItem) return null\n\n    // Try to get the current text from the actual option element (reactive to language changes)\n    if (this.optionList) {\n      const currentOption = Array.from(\n        this.optionList.querySelectorAll('dap-ds-option-item'),\n      ).find((opt: any) => opt.value === this.selectedItem.value)\n\n      if (currentOption) {\n        return (currentOption as any).optionText\n      }\n    }\n\n    // Fallback to cached text if option not found\n    return this.selectedItem.text\n  }\n\n  checkValidity() {\n    const hasValue =\n      !!this.selectedItem &&\n      this.selectedItem.value !== '' &&\n      this.value !== '' &&\n      this.value !== undefined &&\n      this.value !== null\n\n    return this.required ? hasValue : true\n  }\n\n  reportValidity() {\n    return this.required ? this.checkValidity() : true\n  }\n\n  setValidity() {\n    const isValid = this.checkValidity()\n\n    if (!isValid) {\n      this.internals.setValidity(\n        {\n          valueMissing:\n            this.required &&\n            (!this.selectedItem ||\n              this.selectedItem.value === '' ||\n              this.value === '' ||\n              this.value === undefined ||\n              this.value === null),\n        },\n        this.validationMessage,\n        this.triggerButton,\n      )\n    } else {\n      this.internals.setValidity({})\n    }\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n    this.focus()\n  }\n\n  private readonly handleSelectedChange = (event: CustomEvent) => {\n    const val = Object.keys(event.detail).length ? event.detail : null\n    const newValue = val?.value\n    // The option-list echoes dds-option-change whenever its value is synced from\n    // ours (searchOnValueSet), so a programmatic `value` assignment would surface\n    // as a user change. A genuine selection changes the value here; a programmatic\n    // one has already set it before the echo arrives. Emit only on a real change.\n    const changed = newValue !== this.value\n    this.selectedItem = val\n    this.hideDropDown()\n    this.value = newValue\n    if (changed) {\n      this.emit('dds-change', this.selectedItem)\n    }\n\n    this.setValidity()\n  }\n\n  private readonly handleOptionDeselect = () => {\n    this.selectedItem = null\n    this.value = undefined\n    this.emit('dds-change', null)\n\n    this.setValidity()\n  }\n\n  private readonly handleNativeChange = (event: Event) => {\n    const select = event.target as HTMLSelectElement\n    const value = select.value\n\n    // Find matching option-item to get full item data\n    const optionItem = this.querySelector(\n      `dap-ds-option-item[value=\"${value}\"]`,\n    ) as DapDSOptionItem | null\n\n    this.value = value\n    this.selectedItem = optionItem\n      ? { value, text: optionItem.optionText }\n      : { value, text: value }\n\n    this.emit('dds-change', this.selectedItem)\n    this.setValidity()\n  }\n\n  private renderNativeOption(item: DapDSOptionItem) {\n    return html`\n      <option\n        value=${item.value || ''}\n        ?disabled=${item.disabled}\n        ?selected=${item.value === this.value}>\n        ${item.optionText}\n      </option>\n    `\n  }\n\n  private renderNativeOptgroup(group: DapDSOptionGroup) {\n    const options = Array.from(\n      group.querySelectorAll('dap-ds-option-item'),\n    ) as DapDSOptionItem[]\n    return html`\n      <optgroup label=${group.label || ''} ?disabled=${group.disabled}>\n        ${options.map(opt => this.renderNativeOption(opt))}\n      </optgroup>\n    `\n  }\n\n  private renderNativeOptions() {\n    const children = Array.from(this.children)\n    return children.map(child => {\n      if (child.tagName === 'DAP-DS-OPTION-GROUP') {\n        return this.renderNativeOptgroup(child as DapDSOptionGroup)\n      } else if (child.tagName === 'DAP-DS-OPTION-ITEM') {\n        return this.renderNativeOption(child as DapDSOptionItem)\n      }\n      return ''\n    })\n  }\n\n  private renderNativeSelect() {\n    return html`\n      <div class=\"select-wrapper--native\">\n        <select\n          class=\"${clsx('select', `select--${this.effectiveSize}`, {\n            'select--disabled': this.disabled,\n            'select--readonly': this.readonly,\n            'select--success': this.status === 'success',\n            'select--error': this.status === 'error',\n            'select--loading': this.loading,\n          })}\"\n          part=\"trigger\"\n          aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n          aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          @change=${this.handleNativeChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}>\n          ${this.placeholder\n            ? html`<option value=\"\" disabled ?selected=${!this.value}>\n                ${this.placeholder}\n              </option>`\n            : ''}\n          ${this.renderNativeOptions()}\n        </select>\n        <div class=\"icon\" part=\"indicator-icon\">\n          ${this.loading\n            ? html`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>`\n            : html`<slot name=\"indicator-icon\"\n                ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line\n              ></slot>`}\n        </div>\n      </div>\n    `\n  }\n\n  renderTriggerElement() {\n    return html` <button\n      slot=\"trigger\"\n      part=\"trigger\"\n      role=\"combobox\"\n      class=\"${clsx('select', `select--${this.effectiveSize}`, {\n        'select--disabled': this.disabled,\n        'select--readonly': this.readonly,\n        'select--opened': this.opened,\n        'select--loading': this.loading,\n        'select--success': this.status === 'success',\n        'select--error': this.status === 'error',\n        'select--no-animation': this.noAnimation,\n        'select--optional': this.optional,\n      })}\"\n      aria-expanded=${this.readonly || this.disabled\n        ? 'false'\n        : this.opened\n          ? 'true'\n          : 'false'}\n      aria-haspopup=${ifDefined(\n        this.readonly || this.disabled ? undefined : 'listbox',\n      )}\n      aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n      aria-label=${ifDefined(\n        this.label\n          ? undefined\n          : this.ariaLabel ||\n              this.selectedDisplayText ||\n              this.placeholder ||\n              undefined,\n      )}\n      aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n      aria-disabled=${this.disabled}\n      aria-controls=\"option-list\"\n      aria-activedescendant=${ifDefined(this.getActiveDescendant()?.id)}\n      ?required=${this.required}\n      ?readonly=${this.readonly}\n      ?autofocus=${this.autofocus}\n      ?disabled=${this.disabled}\n      tabindex=${this.readonly || this.disabled ? -1 : 0}\n      @blur=${this.handleBlur}\n      @focus=${this.handleFocus}\n      @keydown=${this.handleKeyDown}\n      @click=${this.handleClick}>\n      <span class=\"text\">${this.selectedDisplayText || this.placeholder}</span>\n      <div\n        class=\"${clsx('icon', {\n          'icon--opened': this.opened,\n          'icon--no-animation': this.noAnimation,\n        })}\"\n        part=\"indicator-icon\">\n        ${this.loading\n          ? html`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>`\n          : html`<slot name=\"indicator-icon\"\n              ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line\n            ></slot>`}\n      </div>\n    </button>`\n  }\n\n  renderOptionList() {\n    return html` <dap-ds-option-list\n      class=\"option-list\"\n      part=\"option-list\"\n      exportparts=\"option-item, option-item-base, option-item-label, option-item-prefix, option-item-suffix\"\n      id=\"option-list\"\n      aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n      searchMode=\"typehead\"\n      size=${ifDefined(this.effectiveSize)}\n      value=${this.value}\n      disableDelaySet\n      @dds-option-change=${this.handleSelectedChange}\n      @dds-keydown=${this.handleListKeyDown}\n      @dds-option-deselect=${this.handleOptionDeselect}>\n      <slot></slot>\n    </dap-ds-option-list>`\n  }\n\n  render() {\n    return html` <div class=\"label-container\">\n        ${this.label &&\n        html`<dap-ds-form-label\n          part=\"label\"\n          id=\"label\"\n          .size=${this.effectiveSize}\n          .required=${this.required}\n          .requiredLabel=${this.requiredLabel}\n          .optional=${this.optional}\n          .optionalLabel=${this.optionalLabel}\n          .subtle=${this.subtle}\n          .disabled=${this.disabled}\n          class=${clsx('label')}\n          .noMargin=${!!this.description}\n          for=\"input\"\n          .hideLabel=${this.hideLabel}\n          label=${ifDefined(this.label)}>\n        </dap-ds-form-label>`}\n        ${this.tooltip &&\n        html` <dap-ds-tooltip\n          part=\"tooltip\"\n          content=${this.tooltip}\n          mode=\"toggle\"\n          placement=${this.tooltipPlacement}>\n          <dap-ds-icon-button\n            clean\n            slot=\"trigger\"\n            size=${this.effectiveSize as 'xs' | 'sm' | 'md' | 'lg'}\n            iconSize=${this.effectiveSize === 'xs' ? '16' : '22'}\n            aria-label=${this.tooltipAriaLabel}\n            class=\"input-group__toggle-button\">\n            <dap-ds-icon\n              name=\"information-line\"\n              class=\"info-button\"></dap-ds-icon>\n          </dap-ds-icon-button>\n        </dap-ds-tooltip>`}\n      </div>\n      ${this.description &&\n      html`\n        <dap-ds-typography\n          part=\"description\"\n          variant=\"description\"\n          class=${clsx('input-description')}\n          size=${ifDefined(this.effectiveSize as CommonFormElementSize)}\n          id=\"description\">\n          ${this.description}\n        </dap-ds-typography>\n      `}\n      <div>\n        ${this.native\n          ? this.renderNativeSelect()\n          : !this.isMobile\n            ? html`<dap-ds-popup\n                floatingStrategy=${ifDefined(this.floatingStrategy)}\n                part=\"base\"\n                exportparts=\"popup:popup-base\"\n                class=\"select-popup\"\n                ?opened=${this.opened}\n                ?hasArrow=${false}\n                overflow\n                placement=${this.placement}\n                maxHeight=${ifDefined(this.maxHeight)}\n                ?sync=${this.sync}\n                ?disableViewportAutoClose=${this.disableViewportAutoClose}\n                @dds-close=${this.handlePopupAutoClose}\n                size=${ifDefined(this.effectiveSize) as 'lg' | 'sm' | 'xs'}>\n                ${this.renderTriggerElement()} ${this.renderOptionList()}\n              </dap-ds-popup>`\n            : html`\n                ${this.renderTriggerElement()}\n                <dap-ds-tray\n                  part=\"mobile-tray\"\n                  exportparts=\"content: mobile-content, body: mobile-body, header: mobile-header, footer: mobile-footer\"\n                  ?open=${this.opened}\n                  closeButton=\"false\"\n                  header=\"false\"\n                  >${this.renderOptionList()}</dap-ds-tray\n                >\n              `}\n        ${this.feedback &&\n        html`<dap-ds-feedback\n          part=\"feedback\"\n          feedbackType=${ifDefined(this.feedbackType)}\n          feedbackSize=\"${ifDefined(this.effectiveSize as 'lg' | 'sm' | 'xs')}\"\n          id=\"feedback\"\n          .subtle=${this.subtle}>\n          ${this.feedback}\n        </dap-ds-feedback>`}\n      </div>`\n  }\n}\n"],"names":["_DapDSSelect","GenericFormElement","event","__async","path","val","newValue","changed","value","optionItem","i18next","changedProperties","key","options","_a","ids","getValidityStateObject","t","currentOption","opt","hasValue","item","html","group","child","clsx","ifDefined","SystemLoadingSpinner","ArrowsArrowDownSLine","DapDSOptionList","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSPopup","DapDSTray","DapDSFeedback","unsafeCSS","styles","DapDSSelect","__decorateClass","query","property","state"],"mappings":"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"}
+{"version":3,"file":"select.component.js","sources":["../../../src/components/select/select.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n  CommonFormElementSize,\n  FloatingStrategy,\n  PopupPlacement,\n} from '@/common/types'\nimport { getValidityStateObject } from '@/common/utils'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\nimport { i18next, t } from '@/localization/localization'\n\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport ArrowsArrowDownSLine from '../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component'\nimport SystemLoadingSpinner from '../icons/system/system-loading-spinner/system-loading-spinner.component'\nimport DapDSOptionGroup from '../option-group/option-group.component'\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport DapDSOptionList from '../option-list/option-list.component'\nimport DapDSPopup from '../popup/popup.component'\nimport DapDSTooltip from '../tooltip/tooltip.component'\nimport DapDSTray from '../tray/tray.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './select.scss?inline'\n\n/**\n * `dap-ds-select`\n * @summary A select is a form element that allows the user to select one option from a set.\n * @element dap-ds-select\n * @title - Select\n *\n * @event {{ value: string }} dds-change - Fired when the select value changes.\n * @event {{ void }} dds-blur - Emitted when the select loses focus.\n * @event {{ void }} dds-focus - Emitted when the select gains focus.\n * @event {{ void }} dds-opened - Emitted when the select dropdown is opened.\n * @event {{ void }} dds-closed - Emitted when the select dropdown is closed.\n *\n * @property {string} value - The value of the select.\n * @property {string} label - The label of the select.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the select.\n * @property {string} tooltip - The tooltip of the select.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the select.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the select. Default is `sm`.\n * @property {boolean} disabled - Whether the select is disabled.\n * @property {boolean} required - Whether the select is required.\n * @property {boolean} readonly - Whether the select is readonly.\n * @property {boolean} autofocus - Whether the select is autofocus.\n * @property {string} feedback - The feedback of the select.\n * @property {negative | positive | warning} feedbackType - The feedback type of the select. Can be `negative`, `positive`, or `warning`.\n * @property {string} status - The status of the select. Can be `success` or `error`.\n * @property {boolean} optional - The optional state of the select.\n * @property {string} optionalLabel - The optional label of the select.\n * @property {string} requiredLabel - The required indicator of the select. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n *\n * @csspart base - The main select container.\n * @csspart trigger - The trigger button of the select.\n * @csspart label - The label of the select.\n * @csspart description - The description of the select.\n * @csspart feedback - The feedback of the select.\n * @csspart tooltip - The tooltip of the select.\n * @csspart popup-base - The base of the popup.\n * @csspart option-list - The option list of the select.\n * @csspart option-item - The option item of the select.\n * @csspart option-item-base - The base of the option item.\n * @csspart option-item-label - The label of the option item.\n * @csspart option-item-prefix - The prefix of the option item.\n * @csspart option-item-suffix - The suffix of the option item.\n * @csspart indicator-icon - The indicator icon of the select.\n * @csspart mobile-tray - The mobile tray of the select.\n * @csspart mobile-content - The mobile content of the select.\n * @csspart mobile-body - The mobile body of the select.\n * @csspart mobile-header - The mobile header of the select.\n * @csspart mobile-footer - The mobile footer of the select.\n *\n * @cssproperty --dds-select-min-height - Minimum height of the select component (default: var(--dds-spacing-1000))\n * @cssproperty --dds-select-padding - Padding of the select component (default: var(--dds-spacing-300))\n * @cssproperty --dds-select-column-gap - Column gap of the select component (default: var(--dds-spacing-100))\n * @cssproperty --dds-select-border-color - Border color of the select component (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-select-border-radius - Border radius of the select component (default: var(--dds-radius-base))\n * @cssproperty --dds-select-bg-color - Background color of the select component (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-select-text-color - Text color of the select component (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-select-icon-right - Right position of the icon (default: var(--dds-spacing-200))\n * @cssproperty --dds-select-icon-color - Color of the icon (default: var(--dds-icon-neutral-subtle))\n * @cssproperty --dds-select-text-margin-right - Right margin of the text (default: var(--dds-spacing-600))\n * @cssproperty --dds-select-disabled-border-color - Border color when disabled (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-select-disabled-bg-color - Background color when disabled (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-select-disabled-text-color - Text color when disabled (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-select-error-border-color - Border color in error state (default: var(--dds-border-negative-base))\n * @cssproperty --dds-select-success-border-color - Border color in success state (default: var(--dds-border-positive-base))\n * @cssproperty --dds-select-xs-min-height - Minimum height for extra small size (default: var(--dds-spacing-800))\n * @cssproperty --dds-select-xs-padding - Padding for extra small size (default: var(--dds-spacing-200))\n * @cssproperty --dds-select-xs-font-size - Font size for extra small size (default: var(--dds-font-sm))\n * @cssproperty --dds-select-lg-min-height - Minimum height for large size (default: var(--dds-spacing-1200))\n * @cssproperty --dds-select-lg-padding - Padding for large size (default: var(--dds-spacing-400))\n * @cssproperty --dds-select-lg-font-size - Font size for large size (default: var(--dds-font-lg))\n * @cssproperty --dds-select-lg-icon-right - Right position of the icon for large size (default: var(--dds-spacing-300))\n * @cssproperty --dds-select-lg-icon-color - Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-select-popup-bg-color - Background color of the popup (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-select-icon-opened-transform - Transform of the icon when the select is opened (default: rotate(90deg))\n *\n * @slot - The option list of the select.\n * @slot indicator-icon - The indicator icon of the select.\n */\nexport default class DapDSSelect extends GenericFormElement {\n  static tagName = 'dap-ds-select'\n\n  static dependencies = {\n    'dap-ds-icon-loading-spinner': SystemLoadingSpinner,\n    'dap-ds-icon-arrow-down-s-line': ArrowsArrowDownSLine,\n    'dap-ds-option-list': DapDSOptionList,\n    'dap-ds-form-label': DapDSFormLabel,\n    'dap-ds-tooltip': DapDSTooltip,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-popup': DapDSPopup,\n    'dap-ds-tray': DapDSTray,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  /**\n   * @ignore\n   */\n  @query('button') triggerButton!: HTMLButtonElement\n\n  /**\n   * @ignore\n   */\n  @query('dap-ds-option-list') optionList!: DapDSOptionList\n\n  /** The popup placement of the select\n   * @type {'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'}\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'bottom-start'\n\n  /** Whether the select dropdown is opened.*/\n  @property({ type: Boolean, reflect: true }) opened? = false\n\n  /** The placeholder of the select. */\n  @property() placeholder: string | null\n\n  /** The sync size of the select dropdown */\n  @property({ type: Boolean }) sync?: boolean\n\n  /** Whether the select is in mobile mode. */\n  @property({ type: Boolean }) isMobile?: boolean = false\n\n  /** Whether to render a native HTML select element for mobile-friendly option selection. */\n  @property({ type: Boolean }) native?: boolean = false\n\n  /** The loading state of the select. */\n  @property({ type: Boolean }) loading?: boolean = false\n\n  /** The max heigth of the select dropdown. */\n  @property({ type: Number }) maxHeight?: number\n\n  /** Whether the select dropdown indicator is animated or not */\n  @property({ type: Boolean }) noAnimation?: boolean = false\n\n  /** The floating strategy of the select dropdown\n   * @type {'absolute' | 'fixed'}\n   */\n  @property({ reflect: true }) floatingStrategy: FloatingStrategy = 'absolute'\n\n  /** Whether to keep popup open when trigger leaves viewport. */\n  @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n  /**\n   * @ignore\n   */\n  @state() selectedItem: any\n\n  static readonly styles = unsafeCSS(styles)\n\n  private languageChangeHandler = () => {\n    // Force re-render when language changes to update selectedDisplayText\n    this.requestUpdate()\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // Listen for language changes to update the displayed text\n    i18next.on('languageChanged', this.languageChangeHandler)\n\n    // Ensure native browser validation UI is suppressed by default,\n    // similar to other form components (inputs, combobox, etc.)\n    this.addEventListener('invalid', this.handleInvalid)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up language change listener\n    i18next.off('languageChanged', this.languageChangeHandler)\n\n    this.removeEventListener('invalid', this.handleInvalid)\n  }\n\n  /**\n   * Lifecycle method to handle property changes\n   */\n  updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties)\n\n    // Handle when value is set to undefined or null externally\n    if (changedProperties.has('value')) {\n      const newValue = this.value\n      if (newValue === undefined || newValue === null) {\n        if (this.selectedItem !== null) {\n          this.selectedItem = null\n          this.setValidity()\n        }\n      }\n    }\n  }\n\n  private readonly handleClick = () => {\n    if (this.readonly || this.disabled) {\n      return\n    }\n\n    this.opened ? this.hideDropDown() : this.showDropDown()\n  }\n\n  private readonly handleKeyDown = async (event: KeyboardEvent) => {\n    if (event.key === 'Tab' || event.key === 'Shift') {\n      return\n    }\n\n    if (this.readonly) {\n      return\n    }\n\n    event.preventDefault()\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      return this.opened ? this.hideDropDown() : this.showDropDown()\n    }\n\n    if (event.key === 'Escape') {\n      this.hideDropDown()\n      return this.focus()\n    }\n\n    if (\n      event.key === 'ArrowDown' ||\n      event.key === 'ArrowUp' ||\n      event.key === 'ArrowLeft' ||\n      event.key === 'ArrowRight'\n    ) {\n      if (!this.opened) {\n        return this.showDropDown()\n      }\n\n      return\n    }\n\n    this.emit('dds-keydown', event)\n\n    // typing\n    this.showDropDown(event.key)\n  }\n\n  private readonly handleListKeyDown = (event: CustomEvent) => {\n    if (event.detail?.key === 'Tab') {\n      // Return focus to the trigger synchronously so the native Tab continues\n      // from there and leaves the select instead of cycling inside the list.\n      this.hideDropDown({ skipFocus: true })\n      this.focus()\n      return\n    }\n\n    if (event.detail?.key === 'Escape') {\n      this.hideDropDown()\n    }\n  }\n\n  private readonly handleDocumentMouseDown = (event: MouseEvent) => {\n    const path = event.composedPath()\n    if (this && !path.includes(this)) {\n      this.hideDropDown()\n    }\n  }\n\n  private readonly handlePopupAutoClose = () => {\n    this.hideDropDown({ skipFocus: true })\n  }\n\n  private readonly handleFocus = () => {\n    this.emit('dds-focus')\n  }\n\n  private readonly handleBlur = () => {\n    this.emit('dds-blur')\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({})\n    this.internals.setFormValue(this.defaultValue)\n    this.value = this.defaultValue\n    this.selectedItem = this.defaultValue\n  }\n\n  async showDropDown(key?: string) {\n    if (this.opened) {\n      return\n    }\n\n    this.opened = true\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown)\n\n    await this.updateComplete\n    this.optionList.captureFocus(key)\n\n    // Force update to ensure aria-activedescendant is set correctly\n    await this.updateComplete\n\n    this.emit('dds-opened')\n  }\n\n  async hideDropDown(options?: { skipFocus?: boolean }) {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n\n    await this.updateComplete\n    this.optionList.removeFocus()\n\n    if (!options?.skipFocus) {\n      this.focus()\n    }\n\n    this.emit('dds-closed')\n  }\n\n  get focusElement() {\n    return this.triggerButton\n  }\n\n  /**\n   * Get the active descendant element for aria-activedescendant\n   * Returns the currently focused option when dropdown is open, otherwise null\n   */\n  getActiveDescendant() {\n    if (!this.opened) {\n      return null\n    }\n\n    const activeOption = this.optionList?.getActiveOption()\n    return activeOption\n  }\n\n  /**\n   * Get the aria-describedby value, combining description and feedback IDs\n   */\n  private getAriaDescribedBy(): string | undefined {\n    const ids: string[] = []\n    if (this.description) {\n      ids.push('description')\n    }\n    if (this.feedback) {\n      ids.push('feedback')\n    }\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  // custom validation\n  get validity(): ValidityState {\n    if (this.internals.validity) {\n      return this.internals.validity\n    } else {\n      return getValidityStateObject({\n        valueMissing:\n          this.required &&\n          (!this.selectedItem ||\n            this.selectedItem.value === '' ||\n            this.value === '' ||\n            this.value === undefined ||\n            this.value === null),\n      })\n    }\n  }\n\n  get validationMessage(): string {\n    return t('form.validationMessage.select')\n  }\n\n  /** Get the current display text for the selected item, dynamically fetching from the option */\n  get selectedDisplayText(): string | null {\n    if (!this.selectedItem) return null\n\n    // Try to get the current text from the actual option element (reactive to language changes)\n    if (this.optionList) {\n      const currentOption = Array.from(\n        this.optionList.querySelectorAll('dap-ds-option-item'),\n      ).find((opt: any) => opt.value === this.selectedItem.value)\n\n      if (currentOption) {\n        return (currentOption as any).optionText\n      }\n    }\n\n    // Fallback to cached text if option not found\n    return this.selectedItem.text\n  }\n\n  checkValidity() {\n    const hasValue =\n      !!this.selectedItem &&\n      this.selectedItem.value !== '' &&\n      this.value !== '' &&\n      this.value !== undefined &&\n      this.value !== null\n\n    return this.required ? hasValue : true\n  }\n\n  reportValidity() {\n    return this.required ? this.checkValidity() : true\n  }\n\n  setValidity() {\n    const isValid = this.checkValidity()\n\n    if (!isValid) {\n      this.internals.setValidity(\n        {\n          valueMissing:\n            this.required &&\n            (!this.selectedItem ||\n              this.selectedItem.value === '' ||\n              this.value === '' ||\n              this.value === undefined ||\n              this.value === null),\n        },\n        this.validationMessage,\n        this.triggerButton,\n      )\n    } else {\n      this.internals.setValidity({})\n    }\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n    this.focus()\n  }\n\n  private readonly handleSelectedChange = (event: CustomEvent) => {\n    const val = Object.keys(event.detail).length ? event.detail : null\n    const newValue = val?.value\n    // The option-list echoes dds-option-change whenever its value is synced from\n    // ours (searchOnValueSet), so a programmatic `value` assignment would surface\n    // as a user change. A genuine selection changes the value here; a programmatic\n    // one has already set it before the echo arrives. Emit only on a real change.\n    const changed = newValue !== this.value\n    this.selectedItem = val\n    this.hideDropDown()\n    this.value = newValue\n    if (changed) {\n      this.emit('dds-change', this.selectedItem)\n    }\n\n    this.setValidity()\n  }\n\n  private readonly handleOptionDeselect = () => {\n    this.selectedItem = null\n    this.value = undefined\n    this.emit('dds-change', null)\n\n    this.setValidity()\n  }\n\n  private readonly handleNativeChange = (event: Event) => {\n    const select = event.target as HTMLSelectElement\n    const value = select.value\n\n    // Find matching option-item to get full item data\n    const optionItem = this.querySelector(\n      `dap-ds-option-item[value=\"${value}\"]`,\n    ) as DapDSOptionItem | null\n\n    this.value = value\n    this.selectedItem = optionItem\n      ? { value, text: optionItem.optionText }\n      : { value, text: value }\n\n    this.emit('dds-change', this.selectedItem)\n    this.setValidity()\n  }\n\n  private renderNativeOption(item: DapDSOptionItem) {\n    return html`\n      <option\n        value=${item.value || ''}\n        ?disabled=${item.disabled}\n        ?selected=${item.value === this.value}>\n        ${item.optionText}\n      </option>\n    `\n  }\n\n  private renderNativeOptgroup(group: DapDSOptionGroup) {\n    const options = Array.from(\n      group.querySelectorAll('dap-ds-option-item'),\n    ) as DapDSOptionItem[]\n    return html`\n      <optgroup label=${group.label || ''} ?disabled=${group.disabled}>\n        ${options.map(opt => this.renderNativeOption(opt))}\n      </optgroup>\n    `\n  }\n\n  private renderNativeOptions() {\n    const children = Array.from(this.children)\n    return children.map(child => {\n      if (child.tagName === 'DAP-DS-OPTION-GROUP') {\n        return this.renderNativeOptgroup(child as DapDSOptionGroup)\n      } else if (child.tagName === 'DAP-DS-OPTION-ITEM') {\n        return this.renderNativeOption(child as DapDSOptionItem)\n      }\n      return ''\n    })\n  }\n\n  private renderNativeSelect() {\n    return html`\n      <div class=\"select-wrapper--native\">\n        <select\n          class=\"${clsx('select', `select--${this.effectiveSize}`, {\n            'select--disabled': this.disabled,\n            'select--readonly': this.readonly,\n            'select--success': this.status === 'success',\n            'select--error': this.status === 'error',\n            'select--loading': this.loading,\n          })}\"\n          part=\"trigger\"\n          aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n          aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          @change=${this.handleNativeChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}>\n          ${this.placeholder\n            ? html`<option value=\"\" disabled ?selected=${!this.value}>\n                ${this.placeholder}\n              </option>`\n            : ''}\n          ${this.renderNativeOptions()}\n        </select>\n        <div class=\"icon\" part=\"indicator-icon\">\n          ${this.loading\n            ? html`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>`\n            : html`<slot name=\"indicator-icon\"\n                ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line\n              ></slot>`}\n        </div>\n      </div>\n    `\n  }\n\n  renderTriggerElement() {\n    return html` <button\n      slot=\"trigger\"\n      part=\"trigger\"\n      role=\"combobox\"\n      class=\"${clsx('select', `select--${this.effectiveSize}`, {\n        'select--disabled': this.disabled,\n        'select--readonly': this.readonly,\n        'select--opened': this.opened,\n        'select--loading': this.loading,\n        'select--success': this.status === 'success',\n        'select--error': this.status === 'error',\n        'select--no-animation': this.noAnimation,\n        'select--optional': this.optional,\n      })}\"\n      aria-expanded=${this.readonly || this.disabled\n        ? 'false'\n        : this.opened\n          ? 'true'\n          : 'false'}\n      aria-haspopup=${ifDefined(\n        this.readonly || this.disabled ? undefined : 'listbox',\n      )}\n      aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n      aria-label=${ifDefined(\n        this.label\n          ? undefined\n          : this.ariaLabel ||\n              this.selectedDisplayText ||\n              this.placeholder ||\n              undefined,\n      )}\n      aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n      aria-disabled=${this.disabled}\n      aria-controls=\"option-list\"\n      aria-activedescendant=${ifDefined(this.getActiveDescendant()?.id)}\n      ?required=${this.required}\n      ?readonly=${this.readonly}\n      ?autofocus=${this.autofocus}\n      ?disabled=${this.disabled}\n      tabindex=${this.readonly || this.disabled ? -1 : 0}\n      @blur=${this.handleBlur}\n      @focus=${this.handleFocus}\n      @keydown=${this.handleKeyDown}\n      @click=${this.handleClick}>\n      <span class=\"text\">${this.selectedDisplayText || this.placeholder}</span>\n      <div\n        class=\"${clsx('icon', {\n          'icon--opened': this.opened,\n          'icon--no-animation': this.noAnimation,\n        })}\"\n        part=\"indicator-icon\">\n        ${this.loading\n          ? html`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>`\n          : html`<slot name=\"indicator-icon\"\n              ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line\n            ></slot>`}\n      </div>\n    </button>`\n  }\n\n  renderOptionList() {\n    return html` <dap-ds-option-list\n      class=\"option-list\"\n      part=\"option-list\"\n      exportparts=\"option-item, option-item-base, option-item-label, option-item-prefix, option-item-suffix\"\n      id=\"option-list\"\n      aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n      searchMode=\"typehead\"\n      size=${ifDefined(this.effectiveSize)}\n      value=${this.value}\n      disableDelaySet\n      @dds-option-change=${this.handleSelectedChange}\n      @dds-keydown=${this.handleListKeyDown}\n      @dds-option-deselect=${this.handleOptionDeselect}>\n      <slot></slot>\n    </dap-ds-option-list>`\n  }\n\n  render() {\n    return html` <div class=\"label-container\">\n        ${this.label &&\n        html`<dap-ds-form-label\n          part=\"label\"\n          id=\"label\"\n          .size=${this.effectiveSize}\n          .required=${this.required}\n          .requiredLabel=${this.requiredLabel}\n          .optional=${this.optional}\n          .optionalLabel=${this.optionalLabel}\n          .subtle=${this.subtle}\n          .disabled=${this.disabled}\n          class=${clsx('label')}\n          .noMargin=${!!this.description}\n          for=\"input\"\n          .hideLabel=${this.hideLabel}\n          label=${ifDefined(this.label)}>\n        </dap-ds-form-label>`}\n        ${this.tooltip &&\n        html` <dap-ds-tooltip\n          part=\"tooltip\"\n          content=${this.tooltip}\n          mode=\"toggle\"\n          placement=${this.tooltipPlacement}>\n          <dap-ds-icon-button\n            clean\n            slot=\"trigger\"\n            size=${this.effectiveSize as 'xs' | 'sm' | 'md' | 'lg'}\n            iconSize=${this.effectiveSize === 'xs' ? '16' : '22'}\n            aria-label=${this.tooltipAriaLabel}\n            class=\"input-group__toggle-button\">\n            <dap-ds-icon\n              name=\"information-line\"\n              class=\"info-button\"></dap-ds-icon>\n          </dap-ds-icon-button>\n        </dap-ds-tooltip>`}\n      </div>\n      ${this.description &&\n      html`\n        <dap-ds-typography\n          part=\"description\"\n          variant=\"description\"\n          class=${clsx('input-description')}\n          size=${ifDefined(this.effectiveSize as CommonFormElementSize)}\n          id=\"description\">\n          ${this.description}\n        </dap-ds-typography>\n      `}\n      <div>\n        ${this.native\n          ? this.renderNativeSelect()\n          : !this.isMobile\n            ? html`<dap-ds-popup\n                floatingStrategy=${ifDefined(this.floatingStrategy)}\n                part=\"base\"\n                exportparts=\"popup:popup-base\"\n                class=\"select-popup\"\n                ?opened=${this.opened}\n                ?hasArrow=${false}\n                overflow\n                placement=${this.placement}\n                maxHeight=${ifDefined(this.maxHeight)}\n                ?sync=${this.sync}\n                ?disableViewportAutoClose=${this.disableViewportAutoClose}\n                @dds-close=${this.handlePopupAutoClose}\n                size=${ifDefined(this.effectiveSize) as 'lg' | 'sm' | 'xs'}>\n                ${this.renderTriggerElement()} ${this.renderOptionList()}\n              </dap-ds-popup>`\n            : html`\n                ${this.renderTriggerElement()}\n                <dap-ds-tray\n                  part=\"mobile-tray\"\n                  exportparts=\"content: mobile-content, body: mobile-body, header: mobile-header, footer: mobile-footer\"\n                  ?open=${this.opened}\n                  closeButton=\"false\"\n                  header=\"false\"\n                  >${this.renderOptionList()}</dap-ds-tray\n                >\n              `}\n        ${this.feedback &&\n        html`<dap-ds-feedback\n          part=\"feedback\"\n          feedbackType=${ifDefined(this.feedbackType)}\n          feedbackSize=\"${ifDefined(this.effectiveSize as 'lg' | 'sm' | 'xs')}\"\n          id=\"feedback\"\n          .subtle=${this.subtle}>\n          ${this.feedback}\n        </dap-ds-feedback>`}\n      </div>`\n  }\n}\n"],"names":["_DapDSSelect","GenericFormElement","event","__async","_a","_b","path","val","newValue","changed","value","optionItem","i18next","changedProperties","key","options","ids","getValidityStateObject","t","currentOption","opt","hasValue","item","html","group","child","clsx","ifDefined","SystemLoadingSpinner","ArrowsArrowDownSLine","DapDSOptionList","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSPopup","DapDSTray","DapDSFeedback","unsafeCSS","styles","DapDSSelect","__decorateClass","query","property","state"],"mappings":"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"}

package/dist/components/snackbar/snackbar-message.component.js

@@ -2,26 +2,26 @@ import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
 import { nothing as p } from "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
-import { property as e } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { property as i } from "../../node_modules/@lit/reactive-element/decorators/property.js";
 import { state as h } from "../../node_modules/@lit/reactive-element/decorators/state.js";
 import { ifDefined as a } from "../../node_modules/lit-html/directives/if-defined.js";
 import { styleMap as b } from "../../node_modules/lit-html/directives/style-map.js";
 import { html as o } from "../../node_modules/lit-html/static.js";
 import { translate as y } from "../../node_modules/lit-i18n/src/lit-i18n.js";
-import { DdsElement as g } from "../../internal/dds-hu-element.js";
-import k from "../button/button.component.js";
+import { DdsElement as k } from "../../internal/dds-hu-element.js";
+import g from "../button/button.component.js";
 import $ from "../icon/icon.component.js";
 import _ from "../icon-button/icon-button.component.js";
 import v from "../link/link.component.js";
 import T from "../stack/stack.component.js";
 import x from "./snackbar-message.scss.js";
 import { unsafeCSS as B } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var C = Object.defineProperty, r = (m, t, c, l) => {
-  for (var i = void 0, d = m.length - 1, f; d >= 0; d--)
-    (f = m[d]) && (i = f(t, c, i) || i);
-  return i && C(t, c, i), i;
+var C = Object.defineProperty, r = (f, t, c, l) => {
+  for (var e = void 0, d = f.length - 1, m; d >= 0; d--)
+    (m = f[d]) && (e = m(t, c, e) || e);
+  return e && C(t, c, e), e;
 };
-const n = class n extends g {
+const n = class n extends k {
   constructor() {
     super(...arguments), this.actions = [], this.message = "", this.closeButton = "true", this.alertType = "default", this.position = "bottom-right", this.closeButtonTestId = "snackbar-close-button", this.isClosing = !1;
   }
@@ -76,8 +76,6 @@ const n = class n extends g {
   render() {
     var t;
     return o`<div
-      role="alert"
-      aria-label=${this.message}
       part="base"
       class=${u(
       "snackbar",
@@ -113,32 +111,32 @@ const n = class n extends g {
 };
 n.tagName = "dap-ds-snackbar-message", n.dependencies = {
   "dap-ds-stack": T,
-  "dap-ds-button": k,
+  "dap-ds-button": g,
   "dap-ds-link": v,
   "dap-ds-icon": $,
   "dap-ds-icon-button": _
 }, n.styles = B(x);
 let s = n;
 r([
-  e({ type: Array })
+  i({ type: Array })
 ], s.prototype, "actions");
 r([
-  e({ type: String })
+  i({ type: String })
 ], s.prototype, "message");
 r([
-  e({ type: String, reflect: !0 })
+  i({ type: String, reflect: !0 })
 ], s.prototype, "closeButton");
 r([
-  e({ type: String })
+  i({ type: String })
 ], s.prototype, "alertType");
 r([
-  e({ type: Object })
+  i({ type: Object })
 ], s.prototype, "customStyle");
 r([
-  e({ type: String })
+  i({ type: String })
 ], s.prototype, "position");
 r([
-  e()
+  i()
 ], s.prototype, "closeButtonTestId");
 r([
   h()

package/dist/components/snackbar/snackbar-message.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar-message.component.js","sources":["../../../src/components/snackbar/snackbar-message.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, TemplateResult, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { html } from 'lit/static-html.js'\nimport { translate } from 'lit-i18n'\n\nimport { ActionType, AlertType, SnackbarPosition } from '@/common/types'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSButton from '../button/button.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport DapDSLink from '../link/link.component'\nimport DapDSStack from '../stack/stack.component'\nimport styles from './snackbar-message.scss?inline'\n\n/**\n * `dap-ds-snackbar-message`\n * @summary The Snackbar component shows a sliding message to the user.\n * @element dap-ds-snackbar-message\n * @title - Snackbar message\n * @group snackbar\n *\n * @event {{ id: string }} dds-close - Fires when the snackbar closes.\n *\n * @slot default - The content of the snackbar.\n *\n * @csspart base - Main snackbar container.\n * @csspart text - The text part of the snackbar.\n * @csspart closebutton - The close button part of the component.\n * @csspart icon - The icon part of the close button.\n *\n * @cssproperty --dds-snackbar-width - Width of the snackbar (default: clamp(var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall)))\n * @cssproperty --dds-snackbar-gap - Gap between snackbar elements (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-padding - Padding inside the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-margin-bottom - Bottom margin of the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-transition - Transition property for the snackbar (default: transform var(--dds-transition-slow) var(--dds-easing-ease-out)allow-discrete, opacity var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, margin var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, box-shadow var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete)\n * @cssproperty --dds-snackbar-border-radius - Border radius of the snackbar (default: var(--dds-radius-base))\n * @cssproperty --dds-snackbar-font-size - Font size used in the snackbar (default: var(--dds-font-sm))\n * @cssproperty --dds-snackbar-background - Background color of the snackbar (default: var(--dds-snackbar-error-background))\n * @cssproperty --dds-snackbar-border - Border color of the snackbar (default: var(--dds-snackbar-error-border))\n * @cssproperty --dds-snackbar-text - Text color of the snackbar (default: var(--dds-snackbar-variant-text))\n * @cssproperty --dds-snackbar-icon - Icon color of the snackbar (default: var(--dds-snackbar-variant-icon))\n * @cssproperty --dds-snackbar-link - Link color of the snackbar (default: var(--dds-snackbar-variant-link))\n * @cssproperty --dds-snackbar-information-background - Background color for information variant (default: var(--dds-background-informative-medium))\n * @cssproperty --dds-snackbar-information-border - Border color for information variant (default: var(--dds-border-width-base) solidvar(--dds-border-informative-subtle))\n * @cssproperty --dds-snackbar-information-icon - Icon color for information variant (default: var(--dds-icon-informative-subtle))\n * @cssproperty --dds-snackbar-success-background - Background color for success variant (default: var(--dds-background-positive-medium))\n * @cssproperty --dds-snackbar-success-border - Border color for success variant (default: var(--dds-border-width-base) solidvar(--dds-border-positive-subtle))\n * @cssproperty --dds-snackbar-success-icon - Icon color for success variant (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-snackbar-error-background - Background color for error variant (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-snackbar-error-border - Border color for error variant (default: var(--dds-border-width-base) solidvar(--dds-border-negative-subtle))\n * @cssproperty --dds-snackbar-error-icon - Icon color for error variant (default: var(--dds-icon-negative-subtle))\n * @cssproperty --dds-snackbar-variant-text - Text color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-variant-icon - Icon color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-variant-link - Link color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-animation-duration - Duration of entrance animations (default: 0.3s)\n * @cssproperty --dds-snackbar-animation-timing - Timing function for animations (default: ease-out)\n */\nexport default class DapDSSnackbarMessage extends DdsElement {\n  static tagName = 'dap-ds-snackbar-message'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-button': DapDSButton,\n    'dap-ds-link': DapDSLink,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-icon-button': DapDSIconButton,\n  }\n\n  /** The actions of the snackbar item. */\n  @property({ type: Array }) actions?: ActionType[] = []\n  /** The message of the snackbar item. */\n  @property({ type: String }) message = ''\n  /** Whether the snackbar has a close button. */\n  @property({ type: String, reflect: true }) closeButton = 'true'\n  /** The message type of the snackbar item. */\n  @property({ type: String }) alertType: AlertType = 'default'\n  /** The custom style of the snackbar item. */\n  @property({ type: Object }) customStyle?: Record<string, string>\n  /** The position of the snackbar container for directional animations. */\n  @property({ type: String }) position: SnackbarPosition = 'bottom-right'\n  /** `data-testid` for the snackbar close button. */\n  @property() closeButtonTestId = 'snackbar-close-button'\n\n  @state() private isClosing = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  private getActions(): TemplateResult | typeof nothing {\n    if (this.actions && this.actions.length > 0) {\n      return html`<dap-ds-stack\n        part=\"actions\"\n        exportparts=\"base:actions-base\"\n        class=\"snackbar__actions\"\n        direction=\"row\">\n        ${this.actions.map((actionItem: ActionType, index: number) => {\n          if (actionItem && typeof actionItem.func === 'function') {\n            return html`<dap-ds-button\n              variant=${actionItem.variant ?? 'primary'}\n              data-testid=${`snackbar-action-${index}`}\n              @click=${() => {\n                if (actionItem.func) {\n                  actionItem.func()\n                }\n              }}\n              >${ifDefined(actionItem.text)}</dap-ds-button\n            >`\n          } else {\n            return html`<dap-ds-link\n              class=\"snackbar__link\"\n              href=${ifDefined(actionItem.href)}\n              target=\"${ifDefined(actionItem.target)}\"\n              rel=${ifDefined(actionItem.target ? actionItem.rel : undefined)}\n              >${ifDefined(actionItem.text)}</dap-ds-link\n            >`\n          }\n        })}\n      </dap-ds-stack>`\n    }\n    return nothing\n  }\n\n  private getAlertTypeIcon(): TemplateResult | typeof nothing {\n    let iconName = ''\n    switch (this.alertType) {\n      case 'information':\n        iconName = 'information-2-fill'\n        break\n      case 'successful':\n        iconName = 'checkbox-circle-fill'\n        break\n      case 'error':\n        iconName = 'error-warning-fill'\n        break\n      default:\n    }\n    return iconName.length > 0\n      ? html`<dap-ds-icon\n          name=${iconName}\n          size=\"lg\"\n          class=\"snackbar__alert-icon\"></dap-ds-icon>`\n      : nothing\n  }\n\n  private _close(id: string) {\n    if (id) {\n      this.isClosing = true\n      // Wait for the closing animation to complete before emitting the close event\n      setTimeout(() => {\n        this.emit('dds-close', { id })\n      }, 300) // Match the animation duration\n    }\n  }\n\n  render() {\n    return html`<div\n      role=\"alert\"\n      aria-label=${this.message}\n      part=\"base\"\n      class=${clsx(\n        'snackbar',\n        `snackbar--${this.alertType}`,\n        `snackbar--position-${this.position}`,\n        { 'snackbar--closing': this.isClosing },\n      )}\n      style=${styleMap(this.customStyle ?? {})}>\n      <div class=\"snackbar__main\">\n        <div class=\"snackbar__left-group\">\n          ${this.getAlertTypeIcon()}\n          <div class=\"snackbar__content\">\n            ${this.message\n              ? html`<span part=\"text\" class=\"snackbar__text\"\n                  >${this.message}</span\n                >`\n              : html`<slot></slot>`}\n            ${this.actions ? html` ${this.getActions()}` : nothing}\n          </div>\n        </div>\n        ${this.closeButton === 'true'\n          ? html`<dap-ds-icon-button\n              @click=${() => this._close(this.id)}\n              part=\"closebutton\"\n              data-testid=${this.closeButtonTestId}\n              class=\"snackbar__close\"\n              aria-label=${translate('close')}>\n              <dap-ds-icon\n                part=\"close-icon\"\n                class=\"snackbar__close-icon\"\n                name=\"close-line\"></dap-ds-icon>\n            </dap-ds-icon-button>`\n          : nothing}\n      </div>\n    </div>`\n  }\n}\n"],"names":["_DapDSSnackbarMessage","DdsElement","html","actionItem","index","_a","ifDefined","nothing","iconName","id","clsx","styleMap","translate","DapDSStack","DapDSButton","DapDSLink","DapDSIcon","DapDSIconButton","unsafeCSS","styles","DapDSSnackbarMessage","__decorateClass","property","state"],"mappings":"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"}
+{"version":3,"file":"snackbar-message.component.js","sources":["../../../src/components/snackbar/snackbar-message.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, TemplateResult, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { html } from 'lit/static-html.js'\nimport { translate } from 'lit-i18n'\n\nimport { ActionType, AlertType, SnackbarPosition } from '@/common/types'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSButton from '../button/button.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport DapDSLink from '../link/link.component'\nimport DapDSStack from '../stack/stack.component'\nimport styles from './snackbar-message.scss?inline'\n\n/**\n * `dap-ds-snackbar-message`\n * @summary The Snackbar component shows a sliding message to the user.\n * @element dap-ds-snackbar-message\n * @title - Snackbar message\n * @group snackbar\n *\n * @event {{ id: string }} dds-close - Fires when the snackbar closes.\n *\n * @slot default - The content of the snackbar.\n *\n * @csspart base - Main snackbar container.\n * @csspart text - The text part of the snackbar.\n * @csspart closebutton - The close button part of the component.\n * @csspart icon - The icon part of the close button.\n *\n * @cssproperty --dds-snackbar-width - Width of the snackbar (default: clamp(var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall)))\n * @cssproperty --dds-snackbar-gap - Gap between snackbar elements (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-padding - Padding inside the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-margin-bottom - Bottom margin of the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-transition - Transition property for the snackbar (default: transform var(--dds-transition-slow) var(--dds-easing-ease-out)allow-discrete, opacity var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, margin var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, box-shadow var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete)\n * @cssproperty --dds-snackbar-border-radius - Border radius of the snackbar (default: var(--dds-radius-base))\n * @cssproperty --dds-snackbar-font-size - Font size used in the snackbar (default: var(--dds-font-sm))\n * @cssproperty --dds-snackbar-background - Background color of the snackbar (default: var(--dds-snackbar-error-background))\n * @cssproperty --dds-snackbar-border - Border color of the snackbar (default: var(--dds-snackbar-error-border))\n * @cssproperty --dds-snackbar-text - Text color of the snackbar (default: var(--dds-snackbar-variant-text))\n * @cssproperty --dds-snackbar-icon - Icon color of the snackbar (default: var(--dds-snackbar-variant-icon))\n * @cssproperty --dds-snackbar-link - Link color of the snackbar (default: var(--dds-snackbar-variant-link))\n * @cssproperty --dds-snackbar-information-background - Background color for information variant (default: var(--dds-background-informative-medium))\n * @cssproperty --dds-snackbar-information-border - Border color for information variant (default: var(--dds-border-width-base) solidvar(--dds-border-informative-subtle))\n * @cssproperty --dds-snackbar-information-icon - Icon color for information variant (default: var(--dds-icon-informative-subtle))\n * @cssproperty --dds-snackbar-success-background - Background color for success variant (default: var(--dds-background-positive-medium))\n * @cssproperty --dds-snackbar-success-border - Border color for success variant (default: var(--dds-border-width-base) solidvar(--dds-border-positive-subtle))\n * @cssproperty --dds-snackbar-success-icon - Icon color for success variant (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-snackbar-error-background - Background color for error variant (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-snackbar-error-border - Border color for error variant (default: var(--dds-border-width-base) solidvar(--dds-border-negative-subtle))\n * @cssproperty --dds-snackbar-error-icon - Icon color for error variant (default: var(--dds-icon-negative-subtle))\n * @cssproperty --dds-snackbar-variant-text - Text color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-variant-icon - Icon color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-variant-link - Link color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-animation-duration - Duration of entrance animations (default: 0.3s)\n * @cssproperty --dds-snackbar-animation-timing - Timing function for animations (default: ease-out)\n */\nexport default class DapDSSnackbarMessage extends DdsElement {\n  static tagName = 'dap-ds-snackbar-message'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-button': DapDSButton,\n    'dap-ds-link': DapDSLink,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-icon-button': DapDSIconButton,\n  }\n\n  /** The actions of the snackbar item. */\n  @property({ type: Array }) actions?: ActionType[] = []\n  /** The message of the snackbar item. */\n  @property({ type: String }) message = ''\n  /** Whether the snackbar has a close button. */\n  @property({ type: String, reflect: true }) closeButton = 'true'\n  /** The message type of the snackbar item. */\n  @property({ type: String }) alertType: AlertType = 'default'\n  /** The custom style of the snackbar item. */\n  @property({ type: Object }) customStyle?: Record<string, string>\n  /** The position of the snackbar container for directional animations. */\n  @property({ type: String }) position: SnackbarPosition = 'bottom-right'\n  /** `data-testid` for the snackbar close button. */\n  @property() closeButtonTestId = 'snackbar-close-button'\n\n  @state() private isClosing = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  private getActions(): TemplateResult | typeof nothing {\n    if (this.actions && this.actions.length > 0) {\n      return html`<dap-ds-stack\n        part=\"actions\"\n        exportparts=\"base:actions-base\"\n        class=\"snackbar__actions\"\n        direction=\"row\">\n        ${this.actions.map((actionItem: ActionType, index: number) => {\n          if (actionItem && typeof actionItem.func === 'function') {\n            return html`<dap-ds-button\n              variant=${actionItem.variant ?? 'primary'}\n              data-testid=${`snackbar-action-${index}`}\n              @click=${() => {\n                if (actionItem.func) {\n                  actionItem.func()\n                }\n              }}\n              >${ifDefined(actionItem.text)}</dap-ds-button\n            >`\n          } else {\n            return html`<dap-ds-link\n              class=\"snackbar__link\"\n              href=${ifDefined(actionItem.href)}\n              target=\"${ifDefined(actionItem.target)}\"\n              rel=${ifDefined(actionItem.target ? actionItem.rel : undefined)}\n              >${ifDefined(actionItem.text)}</dap-ds-link\n            >`\n          }\n        })}\n      </dap-ds-stack>`\n    }\n    return nothing\n  }\n\n  private getAlertTypeIcon(): TemplateResult | typeof nothing {\n    let iconName = ''\n    switch (this.alertType) {\n      case 'information':\n        iconName = 'information-2-fill'\n        break\n      case 'successful':\n        iconName = 'checkbox-circle-fill'\n        break\n      case 'error':\n        iconName = 'error-warning-fill'\n        break\n      default:\n    }\n    return iconName.length > 0\n      ? html`<dap-ds-icon\n          name=${iconName}\n          size=\"lg\"\n          class=\"snackbar__alert-icon\"></dap-ds-icon>`\n      : nothing\n  }\n\n  private _close(id: string) {\n    if (id) {\n      this.isClosing = true\n      // Wait for the closing animation to complete before emitting the close event\n      setTimeout(() => {\n        this.emit('dds-close', { id })\n      }, 300) // Match the animation duration\n    }\n  }\n\n  render() {\n    return html`<div\n      part=\"base\"\n      class=${clsx(\n        'snackbar',\n        `snackbar--${this.alertType}`,\n        `snackbar--position-${this.position}`,\n        { 'snackbar--closing': this.isClosing },\n      )}\n      style=${styleMap(this.customStyle ?? {})}>\n      <div class=\"snackbar__main\">\n        <div class=\"snackbar__left-group\">\n          ${this.getAlertTypeIcon()}\n          <div class=\"snackbar__content\">\n            ${this.message\n              ? html`<span part=\"text\" class=\"snackbar__text\"\n                  >${this.message}</span\n                >`\n              : html`<slot></slot>`}\n            ${this.actions ? html` ${this.getActions()}` : nothing}\n          </div>\n        </div>\n        ${this.closeButton === 'true'\n          ? html`<dap-ds-icon-button\n              @click=${() => this._close(this.id)}\n              part=\"closebutton\"\n              data-testid=${this.closeButtonTestId}\n              class=\"snackbar__close\"\n              aria-label=${translate('close')}>\n              <dap-ds-icon\n                part=\"close-icon\"\n                class=\"snackbar__close-icon\"\n                name=\"close-line\"></dap-ds-icon>\n            </dap-ds-icon-button>`\n          : nothing}\n      </div>\n    </div>`\n  }\n}\n"],"names":["_DapDSSnackbarMessage","DdsElement","html","actionItem","index","_a","ifDefined","nothing","iconName","id","clsx","styleMap","translate","DapDSStack","DapDSButton","DapDSLink","DapDSIcon","DapDSIconButton","unsafeCSS","styles","DapDSSnackbarMessage","__decorateClass","property","state"],"mappings":"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"}