dap-design-system 0.62.1 → 0.62.2

package/dist/components/input/input-base-element.js

@@ -1,19 +1,19 @@
 import { clsx as r } from "../../node_modules/clsx/dist/clsx.js";
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as b, html as d } from "../../node_modules/lit-html/lit-html.js";
+import { nothing as b, html as n } from "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
-import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as p } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { property as o } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as l } from "../../node_modules/@lit/reactive-element/decorators/state.js";
 import { query as m } from "../../node_modules/@lit/reactive-element/decorators/query.js";
 import { queryAssignedElements as h } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
 import { ifDefined as s } from "../../node_modules/lit-html/directives/if-defined.js";
 import { GenericFormElement as y } from "../../internal/mixin/genericFormElement.js";
 import $ from "./_styles/input.scss.js";
 import { unsafeCSS as g } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var x = Object.defineProperty, i = (c, t, n, o) => {
-  for (var l = void 0, u = c.length - 1, _; u >= 0; u--)
-    (_ = c[u]) && (l = _(t, n, l) || l);
-  return l && x(t, n, l), l;
+var x = Object.defineProperty, i = (c, t, d, a) => {
+  for (var p = void 0, u = c.length - 1, _; u >= 0; u--)
+    (_ = c[u]) && (p = _(t, d, p) || p);
+  return p && x(t, d, p), p;
 };
 const f = class f extends y {
   constructor() {
@@ -31,8 +31,8 @@ const f = class f extends y {
   firstUpdated(t) {
     super.firstUpdated(t), this._hasAddonBefore = !!this._addonBeforeNode.length, this._hasAddonAfter = !!this._addonAfterNode.length, this._hasPrefix = !!this._prefixNode.length, this._hasPostfix = !!this._postfixNode.length;
   }
-  attributeChangedCallback(t, n, o) {
-    super.attributeChangedCallback(t, n, o), t === "value" && this.input && (this.input.value = o);
+  attributeChangedCallback(t, d, a) {
+    super.attributeChangedCallback(t, d, a), t === "value" && this.input && (this.input.value = a);
   }
   formResetCallback() {
     this.internals.setValidity({}), this.internals.setFormValue(this.defaultValue), this.value = this.defaultValue, this.input.value = this.defaultValue || "";
@@ -48,11 +48,11 @@ const f = class f extends y {
   }
   onKeydown(t) {
     this.emit("dds-keydown", { value: this.input.value, originalEvent: t });
-    const n = t.metaKey || t.ctrlKey || t.shiftKey || t.altKey;
-    !this.disableEnter && t.key === "Enter" && !n && setTimeout(() => {
+    const d = t.metaKey || t.ctrlKey || t.shiftKey || t.altKey;
+    !this.disableEnter && t.key === "Enter" && !d && setTimeout(() => {
       if (!t.defaultPrevented && !t.isComposing) {
-        const o = document.createElement("button");
-        o.type = "submit", this.insertAdjacentElement("afterend", o), o.click(), o.remove();
+        const a = document.createElement("button");
+        a.type = "submit", this.insertAdjacentElement("afterend", a), a.click(), a.remove();
       }
     });
   }
@@ -66,13 +66,13 @@ const f = class f extends y {
    */
   getAriaDescribedBy() {
     const t = [];
-    return this.description && t.push("description"), this.feedback && t.push("feedback"), t.length > 0 ? t.join(" ") : void 0;
+    return this.description && t.push("description"), this.tooltip && t.push("tooltip-description"), this.feedback && t.push("feedback"), t.length > 0 ? t.join(" ") : void 0;
   }
   handleInvalid(t) {
     t.preventDefault();
   }
   renderDefaultContent() {
-    return d` <span
+    return n` <span
         part="prefix"
         class=${r({ "input__addon-prefix": !!this._hasPrefix })}>
         <slot name="prefix"></slot>
@@ -82,14 +82,14 @@ const f = class f extends y {
         class=${r({
       "input__addon-postfix": this._hasPostfix || this.loading
     })}>
-        ${this.loading ? d`<dap-ds-spinner size="lg"></dap-ds-spinner>` : b}
+        ${this.loading ? n`<dap-ds-spinner size="lg"></dap-ds-spinner>` : b}
         <slot name="postfix"></slot>
       </span>`;
   }
   renderInput(t) {
-    return d`
+    return n`
       <div class="label-container">
-        ${this.label && d`<dap-ds-form-label
+        ${this.label && n`<dap-ds-form-label
           part="label"
           id="label"
           for="input"
@@ -104,10 +104,11 @@ const f = class f extends y {
           .hideLabel=${this.hideLabel}
           label=${s(this.label)}>
         </dap-ds-form-label>`}
-        ${this.tooltip && d` <dap-ds-tooltip
+        ${this.tooltip && n` <dap-ds-tooltip
           part="tooltip"
           content=${this.tooltip}
-          mode="toggle"
+          mode=${this.tooltipTrigger === "hover" ? "tooltip" : "toggle"}
+          trigger=${this.tooltipTrigger === "hover" ? "hover focus" : "click"}
           floatingStrategy="fixed"
           placement=${this.tooltipPlacement}>
           <dap-ds-icon-button
@@ -122,8 +123,11 @@ const f = class f extends y {
               class="info-button"></dap-ds-icon>
           </dap-ds-icon-button>
         </dap-ds-tooltip>`}
+        ${this.tooltip && // The tooltip text lives in the tooltip's shadow root, which an
+    // aria-describedby on the input cannot reach; mirror it here instead.
+    n`<span id="tooltip-description" hidden>${this.tooltip}</span>`}
       </div>
-      ${this.description && d`
+      ${this.description && n`
         <dap-ds-typography
           part="description"
           variant="description"
@@ -221,7 +225,7 @@ const f = class f extends y {
     `;
   }
   _renderFeedback() {
-    return d`
+    return n`
       <dap-ds-feedback
         part="feedback"
         role="alert"
@@ -255,52 +259,52 @@ i([
   h({ slot: "postfix" })
 ], e.prototype, "_postfixNode");
 i([
-  a()
+  o()
 ], e.prototype, "type");
 i([
-  a()
+  o()
 ], e.prototype, "placeholder");
 i([
-  a({ type: Number })
+  o({ type: Number })
 ], e.prototype, "minlength");
 i([
-  a({ type: Number })
+  o({ type: Number })
 ], e.prototype, "maxlength");
 i([
-  a({ type: Number })
+  o({ type: Number })
 ], e.prototype, "min");
 i([
-  a({ type: Number })
+  o({ type: Number })
 ], e.prototype, "max");
 i([
-  a()
+  o()
 ], e.prototype, "pattern");
 i([
-  a({ type: Number })
+  o({ type: Number })
 ], e.prototype, "step");
 i([
-  a()
+  o()
 ], e.prototype, "inputmode");
 i([
-  a({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], e.prototype, "loading");
 i([
-  a({ type: Boolean })
+  o({ type: Boolean })
 ], e.prototype, "manualValueSet");
 i([
-  a({ type: Boolean })
+  o({ type: Boolean })
 ], e.prototype, "disableEnter");
 i([
-  p()
+  l()
 ], e.prototype, "_hasAddonBefore");
 i([
-  p()
+  l()
 ], e.prototype, "_hasAddonAfter");
 i([
-  p()
+  l()
 ], e.prototype, "_hasPrefix");
 i([
-  p()
+  l()
 ], e.prototype, "_hasPostfix");
 export {
   e as InputBaseElement

package/dist/components/input/input-base-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-base-element.js","sources":["../../../src/components/input/input-base-element.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { CommonFormElementSize, InputTypes } from '@/common/types'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport styles from './_styles/input.scss?inline'\n\nexport class InputBaseElement extends GenericFormElement {\n  @query('#input') input!: HTMLInputElement\n  @queryAssignedElements({ slot: 'addon-before' })\n  private readonly _addonBeforeNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'addon-after' })\n  private readonly _addonAfterNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'prefix' })\n  private readonly _prefixNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'postfix' })\n  private readonly _postfixNode!: NodeListOf<HTMLElement>\n\n  @property() type: InputTypes = 'text'\n  @property() placeholder?: string\n  @property({ type: Number }) minlength?: number\n  @property({ type: Number }) maxlength?: number\n  @property({ type: Number }) min?: number\n  @property({ type: Number }) max?: number\n  @property() pattern?: string\n  @property({ type: Number }) step?: number | 'any' = 1\n  @property() inputmode?: string\n  @property({ type: Boolean, reflect: true }) loading = false\n  @property({ type: Boolean }) manualValueSet = false\n  @property({ type: Boolean }) disableEnter = false\n  @state() private _hasAddonBefore = false\n  @state() private _hasAddonAfter = false\n  @state() private _hasPrefix = false\n  @state() private _hasPostfix = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  public get nativeControl(): HTMLInputElement {\n    return this.shadowRoot?.querySelector('.input__control') as HTMLInputElement\n  }\n\n  private _handleSlotChange(event: Event) {\n    const target = event?.target as HTMLInputElement\n    target.setAttribute('slot', 'icon')\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    // this.role = 'textbox'\n    this._hasAddonBefore = !!this._addonBeforeNode.length\n    this._hasAddonAfter = !!this._addonAfterNode.length\n    this._hasPrefix = !!this._prefixNode.length\n    this._hasPostfix = !!this._postfixNode.length\n  }\n\n  attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n\n    if (name === 'value' && this.input) {\n      this.input.value = newValue\n    }\n  }\n\n  onInput = () => {\n    if (!this.input.validity.badInput && !this.manualValueSet) {\n      this.value = this.input.value\n    }\n\n    this.emit('dds-input', { value: this.input.value })\n    this.setValidity()\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({})\n    this.internals.setFormValue(this.defaultValue)\n    this.value = this.defaultValue\n    this.input.value = this.defaultValue || ''\n  }\n\n  onBlur() {\n    this.emit('dds-blur')\n  }\n\n  onFocus() {\n    this.emit('dds-focus')\n  }\n\n  onChange() {\n    this.value = this.input.value\n\n    if (!this.manualValueSet) {\n      this.emit('dds-change', { value: this.input.value })\n    }\n\n    this.setValidity()\n  }\n\n  onKeydown(event: KeyboardEvent) {\n    this.emit('dds-keydown', { value: this.input.value, originalEvent: event })\n\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey\n\n    if (!this.disableEnter && event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        if (!event.defaultPrevented && !event.isComposing) {\n          const proxy = document.createElement('button')\n          proxy.type = 'submit'\n          this.insertAdjacentElement('afterend', proxy)\n\n          proxy.click()\n          proxy.remove()\n        }\n      })\n    }\n  }\n\n  public get focusElement() {\n    return this.input\n  }\n\n  /**\n   * Gets the aria-describedby attribute value by combining description and feedback IDs.\n   * @returns {string | undefined} Space-separated IDs or undefined if none exist\n   * @private\n   */\n  private getAriaDescribedBy(): string | undefined {\n    const ids: string[] = []\n\n    if (this.description) {\n      ids.push('description')\n    }\n\n    if (this.feedback) {\n      ids.push('feedback')\n    }\n\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n  }\n\n  renderDefaultContent() {\n    return html` <span\n        part=\"prefix\"\n        class=${clsx({ 'input__addon-prefix': !!this._hasPrefix })}>\n        <slot name=\"prefix\"></slot>\n      </span>\n      <span\n        part=\"postfix\"\n        class=${clsx({\n          'input__addon-postfix': this._hasPostfix || this.loading,\n        })}>\n        ${this.loading\n          ? html`<dap-ds-spinner size=\"lg\"></dap-ds-spinner>`\n          : nothing}\n        <slot name=\"postfix\"></slot>\n      </span>`\n  }\n\n  renderInput(content?: unknown) {\n    return html`\n      <div class=\"label-container\">\n        ${this.label &&\n        html`<dap-ds-form-label\n          part=\"label\"\n          id=\"label\"\n          for=\"input\"\n          .size=${this.effectiveSize}\n          .required=${this.required}\n          .requiredLabel=${this.requiredLabel}\n          .optional=${this.optional}\n          .optionalLabel=${this.optionalLabel}\n          .disabled=${this.disabled}\n          class=${clsx('label')}\n          .noMargin=${!!this.description}\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          floatingStrategy=\"fixed\"\n          placement=${this.tooltipPlacement}>\n          <dap-ds-icon-button\n            clean\n            class=\"info-button\"\n            slot=\"trigger\"\n            aria-label=${this.tooltipAriaLabel}\n            size=${this.effectiveSize as 'xs' | 'sm' | 'md' | 'lg'}\n            iconSize=${this.effectiveSize === 'xs' ? '16' : '22'}>\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      <span\n        part=\"base\"\n        class=${clsx(\n          'input',\n          `input--${this.effectiveSize}`,\n          { 'input--success': this.status === 'success' },\n          { 'input--error': this.status === 'error' },\n          { 'input--disabled': this.disabled },\n          { 'input--readonly': this.readonly },\n          { 'input--has-addon-before': !!this._hasAddonBefore },\n          { 'input--has-addon-after': !!this._hasAddonAfter },\n          { 'input--has-prefix': !!this._hasPrefix },\n          { 'input--has-postfix': !!this._hasPostfix || this.loading },\n        )}>\n        <span\n          part=\"addon-before\"\n          class=${clsx({\n            'input__addon-before': !!this._hasAddonBefore,\n            [`input__addon-before--${this.effectiveSize}`]:\n              !!this._hasAddonBefore,\n            'input__addon-before--disabled':\n              !!this._hasAddonBefore && this.disabled,\n            'input__addon-before--readonly':\n              !!this._hasAddonBefore && this.readonly,\n            'input__addon-before--success':\n              !!this._hasAddonBefore && this.status === 'success',\n            'input__addon-before--error':\n              !!this._hasAddonBefore && this.status === 'error',\n          })}>\n          <slot name=\"addon-before\"></slot>\n        </span>\n        <div class=\"input__container\">\n          <input\n            id=\"input\"\n            class=${clsx(\n              'input__control',\n              `input__control--${this.effectiveSize}`,\n              { 'input__control--success': this.status === 'success' },\n              { 'input__control--error': this.status === 'error' },\n              { 'input__control--disabled': this.disabled },\n              { 'input__control--readonly': this.readonly },\n              { 'input__control--has-addon-before': !!this._hasAddonBefore },\n              { 'input__control--has-addon-after': !!this._hasAddonAfter },\n              { 'input__control--has-prefix': !!this._hasPrefix },\n              {\n                'input__control--has-postfix':\n                  !!this._hasPostfix || this.loading,\n              },\n            )}\n            part=\"input\"\n            name=${ifDefined(this.name ? this.name : undefined)}\n            type=${this.type}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            placeholder=${ifDefined(this.placeholder)}\n            value=${ifDefined(this.value)}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            aria-labelledby=${ifDefined(this.label ? 'label' : nothing)}\n            aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            pattern=${ifDefined(this.pattern)}\n            step=${ifDefined(this.step as number)}\n            inputmode=${ifDefined(this.inputmode)}\n            ?autofocus=${this.autofocus}\n            autocomplete=${this.autocomplete as any}\n            autocapitalize=${ifDefined(this.autocapitalize ? 'on' : 'off')}\n            @change=${this.onChange}\n            @input=${this.onInput}\n            @keydown=${this.onKeydown}\n            @invalid=${this.handleInvalid}\n            @blur=${this.onBlur}\n            @focus=${this.onFocus} />\n          ${content ?? this.renderDefaultContent()}\n        </div>\n        <span\n          part=\"addon-after\"\n          class=${clsx({\n            'input__addon-after': !!this._hasAddonAfter,\n            [`input__addon-after--${this.effectiveSize}`]:\n              !!this._hasAddonAfter,\n            'input__addon-after--disabled':\n              !!this._hasAddonAfter && this.disabled,\n            'input__addon-after--readonly':\n              !!this._hasAddonAfter && this.readonly,\n            'input__addon-after--success':\n              !!this._hasAddonAfter && this.status === 'success',\n            'input__addon-after--error':\n              !!this._hasAddonAfter && this.status === 'error',\n          })}>\n          <slot name=\"addon-after\"></slot>\n        </span>\n      </span>\n      ${this.feedback && this._renderFeedback()}\n    `\n  }\n\n  private _renderFeedback() {\n    return html`\n      <dap-ds-feedback\n        part=\"feedback\"\n        role=\"alert\"\n        feedbackType=${ifDefined(this.feedbackType)}\n        feedbackSize=\"${ifDefined(this.effectiveSize as 'lg' | 'sm' | 'xs')}\"\n        .subtle=${this.subtle}\n        id=\"feedback\">\n        <slot\n          name=\"feedback-icon\"\n          @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${this.feedback}\n      </dap-ds-feedback>\n    `\n  }\n}\n"],"names":["_InputBaseElement","GenericFormElement","_a","event","_changedProperties","name","oldValue","newValue","hasModifier","proxy","ids","html","clsx","nothing","content","ifDefined","unsafeCSS","styles","InputBaseElement","__decorateClass","query","queryAssignedElements","property","state"],"mappings":";;;;;;;;;;;;;;;;;AAeO,MAAMA,IAAN,MAAMA,UAAyBC,EAAmB;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA,GAW0B,KAAA,OAAA,QAOqB,KAAA,OAAA,GAEE,KAAA,UAAA,IACR,KAAA,iBAAA,IACF,KAAA,eAAA,IACnC,KAAQ,kBAAkB,IAC1B,KAAQ,iBAAiB,IACzB,KAAQ,aAAa,IACrB,KAAQ,cAAc,IAgC/B,KAAA,UAAU,MAAM;AACd,MAAI,CAAC,KAAK,MAAM,SAAS,YAAY,CAAC,KAAK,mBACpC,KAAA,QAAQ,KAAK,MAAM,QAG1B,KAAK,KAAK,aAAa,EAAE,OAAO,KAAK,MAAM,OAAO,GAClD,KAAK,YAAY;AAAA,IACnB;AAAA,EAAA;AAAA,EAnCA,IAAW,gBAAkC;;AACpC,YAAAC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AAAA,EAAiB;AAAA,EAGjD,kBAAkBC,GAAc;AAE/B,KADQA,KAAA,gBAAAA,EAAO,QACf,aAAa,QAAQ,MAAM;AAAA,EAAA;AAAA,EAG1B,aACRC,GACM;AACN,UAAM,aAAaA,CAAkB,GAErC,KAAK,kBAAkB,CAAC,CAAC,KAAK,iBAAiB,QAC/C,KAAK,iBAAiB,CAAC,CAAC,KAAK,gBAAgB,QAC7C,KAAK,aAAa,CAAC,CAAC,KAAK,YAAY,QACrC,KAAK,cAAc,CAAC,CAAC,KAAK,aAAa;AAAA,EAAA;AAAA,EAGzC,yBAAyBC,GAAcC,GAAeC,GAAe;AAC7D,UAAA,yBAAyBF,GAAMC,GAAUC,CAAQ,GAEnDF,MAAS,WAAW,KAAK,UAC3B,KAAK,MAAM,QAAQE;AAAA,EACrB;AAAA,EAYF,oBAAoB;AACb,SAAA,UAAU,YAAY,EAAE,GACxB,KAAA,UAAU,aAAa,KAAK,YAAY,GAC7C,KAAK,QAAQ,KAAK,cACb,KAAA,MAAM,QAAQ,KAAK,gBAAgB;AAAA,EAAA;AAAA,EAG1C,SAAS;AACP,SAAK,KAAK,UAAU;AAAA,EAAA;AAAA,EAGtB,UAAU;AACR,SAAK,KAAK,WAAW;AAAA,EAAA;AAAA,EAGvB,WAAW;AACJ,SAAA,QAAQ,KAAK,MAAM,OAEnB,KAAK,kBACR,KAAK,KAAK,cAAc,EAAE,OAAO,KAAK,MAAM,OAAO,GAGrD,KAAK,YAAY;AAAA,EAAA;AAAA,EAGnB,UAAUJ,GAAsB;AACzB,SAAA,KAAK,eAAe,EAAE,OAAO,KAAK,MAAM,OAAO,eAAeA,GAAO;AAE1E,UAAMK,IACJL,EAAM,WAAWA,EAAM,WAAWA,EAAM,YAAYA,EAAM;AAE5D,IAAI,CAAC,KAAK,gBAAgBA,EAAM,QAAQ,WAAW,CAACK,KAClD,WAAW,MAAM;AACf,UAAI,CAACL,EAAM,oBAAoB,CAACA,EAAM,aAAa;AAC3C,cAAAM,IAAQ,SAAS,cAAc,QAAQ;AAC7C,QAAAA,EAAM,OAAO,UACR,KAAA,sBAAsB,YAAYA,CAAK,GAE5CA,EAAM,MAAM,GACZA,EAAM,OAAO;AAAA,MAAA;AAAA,IACf,CACD;AAAA,EACH;AAAA,EAGF,IAAW,eAAe;AACxB,WAAO,KAAK;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQN,qBAAyC;AAC/C,UAAMC,IAAgB,CAAC;AAEvB,WAAI,KAAK,eACPA,EAAI,KAAK,aAAa,GAGpB,KAAK,YACPA,EAAI,KAAK,UAAU,GAGdA,EAAI,SAAS,IAAIA,EAAI,KAAK,GAAG,IAAI;AAAA,EAAA;AAAA,EAG1C,cAAcP,GAAc;AAC1B,IAAAA,EAAM,eAAe;AAAA,EAAA;AAAA,EAGvB,uBAAuB;AACd,WAAAQ;AAAAA;AAAAA,gBAEKC,EAAK,EAAE,uBAAuB,CAAC,CAAC,KAAK,WAAA,CAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKlDA,EAAK;AAAA,MACX,wBAAwB,KAAK,eAAe,KAAK;AAAA,IAAA,CAClD,CAAC;AAAA,UACA,KAAK,UACHD,iDACAE,CAAO;AAAA;AAAA;AAAA,EAAA;AAAA,EAKjB,YAAYC,GAAmB;AACtB,WAAAH;AAAAA;AAAAA,UAED,KAAK,SACPA;AAAAA;AAAAA;AAAAA;AAAAA,kBAIU,KAAK,aAAa;AAAA,sBACd,KAAK,QAAQ;AAAA,2BACR,KAAK,aAAa;AAAA,sBACvB,KAAK,QAAQ;AAAA,2BACR,KAAK,aAAa;AAAA,sBACvB,KAAK,QAAQ;AAAA,kBACjBC,EAAK,OAAO,CAAC;AAAA,sBACT,CAAC,CAAC,KAAK,WAAW;AAAA,uBACjB,KAAK,SAAS;AAAA,kBACnBG,EAAU,KAAK,KAAK,CAAC;AAAA,6BACV;AAAA,UACnB,KAAK,WACPJ;AAAAA;AAAAA,oBAEY,KAAK,OAAO;AAAA;AAAA;AAAA,sBAGV,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKlB,KAAK,gBAAgB;AAAA,mBAC3B,KAAK,aAA0C;AAAA,uBAC3C,KAAK,kBAAkB,OAAO,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKtC;AAAA;AAAA,QAElB,KAAK,eACPA;AAAAA;AAAAA;AAAAA;AAAAA,kBAIYC,EAAK,mBAAmB,CAAC;AAAA,iBAC1BG,EAAU,KAAK,aAAsC,CAAC;AAAA;AAAA,YAE3D,KAAK,WAAW;AAAA;AAAA,OAErB;AAAA;AAAA;AAAA,gBAGSH;AAAA,MACN;AAAA,MACA,UAAU,KAAK,aAAa;AAAA,MAC5B,EAAE,kBAAkB,KAAK,WAAW,UAAU;AAAA,MAC9C,EAAE,gBAAgB,KAAK,WAAW,QAAQ;AAAA,MAC1C,EAAE,mBAAmB,KAAK,SAAS;AAAA,MACnC,EAAE,mBAAmB,KAAK,SAAS;AAAA,MACnC,EAAE,2BAA2B,CAAC,CAAC,KAAK,gBAAgB;AAAA,MACpD,EAAE,0BAA0B,CAAC,CAAC,KAAK,eAAe;AAAA,MAClD,EAAE,qBAAqB,CAAC,CAAC,KAAK,WAAW;AAAA,MACzC,EAAE,sBAAsB,CAAC,CAAC,KAAK,eAAe,KAAK,QAAQ;AAAA,IAAA,CAC5D;AAAA;AAAA;AAAA,kBAGSA,EAAK;AAAA,MACX,uBAAuB,CAAC,CAAC,KAAK;AAAA,MAC9B,CAAC,wBAAwB,KAAK,aAAa,EAAE,GAC3C,CAAC,CAAC,KAAK;AAAA,MACT,iCACE,CAAC,CAAC,KAAK,mBAAmB,KAAK;AAAA,MACjC,iCACE,CAAC,CAAC,KAAK,mBAAmB,KAAK;AAAA,MACjC,gCACE,CAAC,CAAC,KAAK,mBAAmB,KAAK,WAAW;AAAA,MAC5C,8BACE,CAAC,CAAC,KAAK,mBAAmB,KAAK,WAAW;AAAA,IAAA,CAC7C,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMQA;AAAA,MACN;AAAA,MACA,mBAAmB,KAAK,aAAa;AAAA,MACrC,EAAE,2BAA2B,KAAK,WAAW,UAAU;AAAA,MACvD,EAAE,yBAAyB,KAAK,WAAW,QAAQ;AAAA,MACnD,EAAE,4BAA4B,KAAK,SAAS;AAAA,MAC5C,EAAE,4BAA4B,KAAK,SAAS;AAAA,MAC5C,EAAE,oCAAoC,CAAC,CAAC,KAAK,gBAAgB;AAAA,MAC7D,EAAE,mCAAmC,CAAC,CAAC,KAAK,eAAe;AAAA,MAC3D,EAAE,8BAA8B,CAAC,CAAC,KAAK,WAAW;AAAA,MAClD;AAAA,QACE,+BACE,CAAC,CAAC,KAAK,eAAe,KAAK;AAAA,MAAA;AAAA,IAEhC,CAAA;AAAA;AAAA,mBAEMG,EAAU,KAAK,OAAO,KAAK,OAAO,MAAS,CAAC;AAAA,mBAC5C,KAAK,IAAI;AAAA,wBACJ,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,0BACXA,EAAU,KAAK,WAAW,CAAC;AAAA,oBACjCA,EAAU,KAAK,KAAK,CAAC;AAAA,wBACjBA,EAAU,KAAK,SAAS,CAAC;AAAA,wBACzBA,EAAU,KAAK,SAAS,CAAC;AAAA,8BACnBA,EAAU,KAAK,QAAQ,UAAUF,CAAO,CAAC;AAAA,+BACxCE,EAAU,KAAK,oBAAoB,CAAC;AAAA,kBACjDA,EAAU,KAAK,GAAG,CAAC;AAAA,kBACnBA,EAAU,KAAK,GAAG,CAAC;AAAA,sBACfA,EAAU,KAAK,OAAO,CAAC;AAAA,mBAC1BA,EAAU,KAAK,IAAc,CAAC;AAAA,wBACzBA,EAAU,KAAK,SAAS,CAAC;AAAA,yBACxB,KAAK,SAAS;AAAA,2BACZ,KAAK,YAAmB;AAAA,6BACtBA,EAAU,KAAK,iBAAiB,OAAO,KAAK,CAAC;AAAA,sBACpD,KAAK,QAAQ;AAAA,qBACd,KAAK,OAAO;AAAA,uBACV,KAAK,SAAS;AAAA,uBACd,KAAK,aAAa;AAAA,oBACrB,KAAK,MAAM;AAAA,qBACV,KAAK,OAAO;AAAA,YACrBD,KAAA,OAAAA,IAAW,KAAK,qBAAsB,CAAA;AAAA;AAAA;AAAA;AAAA,kBAIhCF,EAAK;AAAA,MACX,sBAAsB,CAAC,CAAC,KAAK;AAAA,MAC7B,CAAC,uBAAuB,KAAK,aAAa,EAAE,GAC1C,CAAC,CAAC,KAAK;AAAA,MACT,gCACE,CAAC,CAAC,KAAK,kBAAkB,KAAK;AAAA,MAChC,gCACE,CAAC,CAAC,KAAK,kBAAkB,KAAK;AAAA,MAChC,+BACE,CAAC,CAAC,KAAK,kBAAkB,KAAK,WAAW;AAAA,MAC3C,6BACE,CAAC,CAAC,KAAK,kBAAkB,KAAK,WAAW;AAAA,IAAA,CAC5C,CAAC;AAAA;AAAA;AAAA;AAAA,QAIJ,KAAK,YAAY,KAAK,gBAAiB,CAAA;AAAA;AAAA,EAAA;AAAA,EAIrC,kBAAkB;AACjB,WAAAD;AAAAA;AAAAA;AAAAA;AAAAA,uBAIYI,EAAU,KAAK,YAAY,CAAC;AAAA,wBAC3BA,EAAU,KAAK,aAAmC,CAAC;AAAA,kBACzD,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA,yBAIJ,KAAK,iBAAiB;AAAA,UACrC,KAAK,QAAQ;AAAA;AAAA;AAAA,EAAA;AAIvB;AAtSkBf,EAAA,SAASgB,EAAUC,CAAM;AA5BpC,IAAMC,IAANlB;AACYmB,EAAA;AAAA,EAAhBC,EAAM,QAAQ;AAAA,GADJF,EACM,WAAA,OAAA;AAEAC,EAAA;AAAA,EADhBE,EAAsB,EAAE,MAAM,eAAgB,CAAA;AAAA,GAFpCH,EAGM,WAAA,kBAAA;AAEAC,EAAA;AAAA,EADhBE,EAAsB,EAAE,MAAM,cAAe,CAAA;AAAA,GAJnCH,EAKM,WAAA,iBAAA;AAEAC,EAAA;AAAA,EADhBE,EAAsB,EAAE,MAAM,SAAU,CAAA;AAAA,GAN9BH,EAOM,WAAA,aAAA;AAEAC,EAAA;AAAA,EADhBE,EAAsB,EAAE,MAAM,UAAW,CAAA;AAAA,GAR/BH,EASM,WAAA,cAAA;AAELC,EAAA;AAAA,EAAXG,EAAS;AAAA,GAXCJ,EAWC,WAAA,MAAA;AACAC,EAAA;AAAA,EAAXG,EAAS;AAAA,GAZCJ,EAYC,WAAA,aAAA;AACgBC,EAAA;AAAA,EAA3BG,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAbfJ,EAaiB,WAAA,WAAA;AACAC,EAAA;AAAA,EAA3BG,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAdfJ,EAciB,WAAA,WAAA;AACAC,EAAA;AAAA,EAA3BG,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAffJ,EAeiB,WAAA,KAAA;AACAC,EAAA;AAAA,EAA3BG,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAhBfJ,EAgBiB,WAAA,KAAA;AAChBC,EAAA;AAAA,EAAXG,EAAS;AAAA,GAjBCJ,EAiBC,WAAA,SAAA;AACgBC,EAAA;AAAA,EAA3BG,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAlBfJ,EAkBiB,WAAA,MAAA;AAChBC,EAAA;AAAA,EAAXG,EAAS;AAAA,GAnBCJ,EAmBC,WAAA,WAAA;AACgCC,EAAA;AAAA,EAA3CG,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GApB/BJ,EAoBiC,WAAA,SAAA;AACfC,EAAA;AAAA,EAA5BG,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GArBhBJ,EAqBkB,WAAA,gBAAA;AACAC,EAAA;AAAA,EAA5BG,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAtBhBJ,EAsBkB,WAAA,cAAA;AACZC,EAAA;AAAA,EAAhBI,EAAM;AAAA,GAvBIL,EAuBM,WAAA,iBAAA;AACAC,EAAA;AAAA,EAAhBI,EAAM;AAAA,GAxBIL,EAwBM,WAAA,gBAAA;AACAC,EAAA;AAAA,EAAhBI,EAAM;AAAA,GAzBIL,EAyBM,WAAA,YAAA;AACAC,EAAA;AAAA,EAAhBI,EAAM;AAAA,GA1BIL,EA0BM,WAAA,aAAA;"}
+{"version":3,"file":"input-base-element.js","sources":["../../../src/components/input/input-base-element.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { CommonFormElementSize, InputTypes } from '@/common/types'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport styles from './_styles/input.scss?inline'\n\nexport class InputBaseElement extends GenericFormElement {\n  @query('#input') input!: HTMLInputElement\n  @queryAssignedElements({ slot: 'addon-before' })\n  private readonly _addonBeforeNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'addon-after' })\n  private readonly _addonAfterNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'prefix' })\n  private readonly _prefixNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'postfix' })\n  private readonly _postfixNode!: NodeListOf<HTMLElement>\n\n  @property() type: InputTypes = 'text'\n  @property() placeholder?: string\n  @property({ type: Number }) minlength?: number\n  @property({ type: Number }) maxlength?: number\n  @property({ type: Number }) min?: number\n  @property({ type: Number }) max?: number\n  @property() pattern?: string\n  @property({ type: Number }) step?: number | 'any' = 1\n  @property() inputmode?: string\n  @property({ type: Boolean, reflect: true }) loading = false\n  @property({ type: Boolean }) manualValueSet = false\n  @property({ type: Boolean }) disableEnter = false\n  @state() private _hasAddonBefore = false\n  @state() private _hasAddonAfter = false\n  @state() private _hasPrefix = false\n  @state() private _hasPostfix = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  public get nativeControl(): HTMLInputElement {\n    return this.shadowRoot?.querySelector('.input__control') as HTMLInputElement\n  }\n\n  private _handleSlotChange(event: Event) {\n    const target = event?.target as HTMLInputElement\n    target.setAttribute('slot', 'icon')\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    // this.role = 'textbox'\n    this._hasAddonBefore = !!this._addonBeforeNode.length\n    this._hasAddonAfter = !!this._addonAfterNode.length\n    this._hasPrefix = !!this._prefixNode.length\n    this._hasPostfix = !!this._postfixNode.length\n  }\n\n  attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n\n    if (name === 'value' && this.input) {\n      this.input.value = newValue\n    }\n  }\n\n  onInput = () => {\n    if (!this.input.validity.badInput && !this.manualValueSet) {\n      this.value = this.input.value\n    }\n\n    this.emit('dds-input', { value: this.input.value })\n    this.setValidity()\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({})\n    this.internals.setFormValue(this.defaultValue)\n    this.value = this.defaultValue\n    this.input.value = this.defaultValue || ''\n  }\n\n  onBlur() {\n    this.emit('dds-blur')\n  }\n\n  onFocus() {\n    this.emit('dds-focus')\n  }\n\n  onChange() {\n    this.value = this.input.value\n\n    if (!this.manualValueSet) {\n      this.emit('dds-change', { value: this.input.value })\n    }\n\n    this.setValidity()\n  }\n\n  onKeydown(event: KeyboardEvent) {\n    this.emit('dds-keydown', { value: this.input.value, originalEvent: event })\n\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey\n\n    if (!this.disableEnter && event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        if (!event.defaultPrevented && !event.isComposing) {\n          const proxy = document.createElement('button')\n          proxy.type = 'submit'\n          this.insertAdjacentElement('afterend', proxy)\n\n          proxy.click()\n          proxy.remove()\n        }\n      })\n    }\n  }\n\n  public get focusElement() {\n    return this.input\n  }\n\n  /**\n   * Gets the aria-describedby attribute value by combining description and feedback IDs.\n   * @returns {string | undefined} Space-separated IDs or undefined if none exist\n   * @private\n   */\n  private getAriaDescribedBy(): string | undefined {\n    const ids: string[] = []\n\n    if (this.description) {\n      ids.push('description')\n    }\n\n    if (this.tooltip) {\n      ids.push('tooltip-description')\n    }\n\n    if (this.feedback) {\n      ids.push('feedback')\n    }\n\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n  }\n\n  renderDefaultContent() {\n    return html` <span\n        part=\"prefix\"\n        class=${clsx({ 'input__addon-prefix': !!this._hasPrefix })}>\n        <slot name=\"prefix\"></slot>\n      </span>\n      <span\n        part=\"postfix\"\n        class=${clsx({\n          'input__addon-postfix': this._hasPostfix || this.loading,\n        })}>\n        ${this.loading\n          ? html`<dap-ds-spinner size=\"lg\"></dap-ds-spinner>`\n          : nothing}\n        <slot name=\"postfix\"></slot>\n      </span>`\n  }\n\n  renderInput(content?: unknown) {\n    return html`\n      <div class=\"label-container\">\n        ${this.label &&\n        html`<dap-ds-form-label\n          part=\"label\"\n          id=\"label\"\n          for=\"input\"\n          .size=${this.effectiveSize}\n          .required=${this.required}\n          .requiredLabel=${this.requiredLabel}\n          .optional=${this.optional}\n          .optionalLabel=${this.optionalLabel}\n          .disabled=${this.disabled}\n          class=${clsx('label')}\n          .noMargin=${!!this.description}\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=${this.tooltipTrigger === 'hover' ? 'tooltip' : 'toggle'}\n          trigger=${this.tooltipTrigger === 'hover' ? 'hover focus' : 'click'}\n          floatingStrategy=\"fixed\"\n          placement=${this.tooltipPlacement}>\n          <dap-ds-icon-button\n            clean\n            class=\"info-button\"\n            slot=\"trigger\"\n            aria-label=${this.tooltipAriaLabel}\n            size=${this.effectiveSize as 'xs' | 'sm' | 'md' | 'lg'}\n            iconSize=${this.effectiveSize === 'xs' ? '16' : '22'}>\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        ${this.tooltip &&\n        // The tooltip text lives in the tooltip's shadow root, which an\n        // aria-describedby on the input cannot reach; mirror it here instead.\n        html`<span id=\"tooltip-description\" hidden>${this.tooltip}</span>`}\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      <span\n        part=\"base\"\n        class=${clsx(\n          'input',\n          `input--${this.effectiveSize}`,\n          { 'input--success': this.status === 'success' },\n          { 'input--error': this.status === 'error' },\n          { 'input--disabled': this.disabled },\n          { 'input--readonly': this.readonly },\n          { 'input--has-addon-before': !!this._hasAddonBefore },\n          { 'input--has-addon-after': !!this._hasAddonAfter },\n          { 'input--has-prefix': !!this._hasPrefix },\n          { 'input--has-postfix': !!this._hasPostfix || this.loading },\n        )}>\n        <span\n          part=\"addon-before\"\n          class=${clsx({\n            'input__addon-before': !!this._hasAddonBefore,\n            [`input__addon-before--${this.effectiveSize}`]:\n              !!this._hasAddonBefore,\n            'input__addon-before--disabled':\n              !!this._hasAddonBefore && this.disabled,\n            'input__addon-before--readonly':\n              !!this._hasAddonBefore && this.readonly,\n            'input__addon-before--success':\n              !!this._hasAddonBefore && this.status === 'success',\n            'input__addon-before--error':\n              !!this._hasAddonBefore && this.status === 'error',\n          })}>\n          <slot name=\"addon-before\"></slot>\n        </span>\n        <div class=\"input__container\">\n          <input\n            id=\"input\"\n            class=${clsx(\n              'input__control',\n              `input__control--${this.effectiveSize}`,\n              { 'input__control--success': this.status === 'success' },\n              { 'input__control--error': this.status === 'error' },\n              { 'input__control--disabled': this.disabled },\n              { 'input__control--readonly': this.readonly },\n              { 'input__control--has-addon-before': !!this._hasAddonBefore },\n              { 'input__control--has-addon-after': !!this._hasAddonAfter },\n              { 'input__control--has-prefix': !!this._hasPrefix },\n              {\n                'input__control--has-postfix':\n                  !!this._hasPostfix || this.loading,\n              },\n            )}\n            part=\"input\"\n            name=${ifDefined(this.name ? this.name : undefined)}\n            type=${this.type}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            placeholder=${ifDefined(this.placeholder)}\n            value=${ifDefined(this.value)}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            aria-labelledby=${ifDefined(this.label ? 'label' : nothing)}\n            aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            pattern=${ifDefined(this.pattern)}\n            step=${ifDefined(this.step as number)}\n            inputmode=${ifDefined(this.inputmode)}\n            ?autofocus=${this.autofocus}\n            autocomplete=${this.autocomplete as any}\n            autocapitalize=${ifDefined(this.autocapitalize ? 'on' : 'off')}\n            @change=${this.onChange}\n            @input=${this.onInput}\n            @keydown=${this.onKeydown}\n            @invalid=${this.handleInvalid}\n            @blur=${this.onBlur}\n            @focus=${this.onFocus} />\n          ${content ?? this.renderDefaultContent()}\n        </div>\n        <span\n          part=\"addon-after\"\n          class=${clsx({\n            'input__addon-after': !!this._hasAddonAfter,\n            [`input__addon-after--${this.effectiveSize}`]:\n              !!this._hasAddonAfter,\n            'input__addon-after--disabled':\n              !!this._hasAddonAfter && this.disabled,\n            'input__addon-after--readonly':\n              !!this._hasAddonAfter && this.readonly,\n            'input__addon-after--success':\n              !!this._hasAddonAfter && this.status === 'success',\n            'input__addon-after--error':\n              !!this._hasAddonAfter && this.status === 'error',\n          })}>\n          <slot name=\"addon-after\"></slot>\n        </span>\n      </span>\n      ${this.feedback && this._renderFeedback()}\n    `\n  }\n\n  private _renderFeedback() {\n    return html`\n      <dap-ds-feedback\n        part=\"feedback\"\n        role=\"alert\"\n        feedbackType=${ifDefined(this.feedbackType)}\n        feedbackSize=\"${ifDefined(this.effectiveSize as 'lg' | 'sm' | 'xs')}\"\n        .subtle=${this.subtle}\n        id=\"feedback\">\n        <slot\n          name=\"feedback-icon\"\n          @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${this.feedback}\n      </dap-ds-feedback>\n    `\n  }\n}\n"],"names":["_InputBaseElement","GenericFormElement","_a","event","_changedProperties","name","oldValue","newValue","hasModifier","proxy","ids","html","clsx","nothing","content","ifDefined","unsafeCSS","styles","InputBaseElement","__decorateClass","query","queryAssignedElements","property","state"],"mappings":"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"}

package/dist/components/input/input.component.d.ts

@@ -17,6 +17,7 @@ import { InputBaseElement } from './input-base-element';
  * @property {string} tooltip - The tooltip of the input.
  * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.
  * @property {string} tooltipAriaLabel - The aria label of the tooltip.
+ * @property {'click' | 'hover'} tooltipTrigger - How the tooltip opens: `click` (click/Enter, default) or `hover` (hover and keyboard focus).
  * @property {string} feedback - The feedback of the input.
  * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.
  * @property {'succes' | 'error'} status - The status of the input. Can be `success` or `error`.

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

@@ -1 +1 @@
-{"version":3,"file":"input.component.js","sources":["../../../src/components/input/input.component.ts"],"sourcesContent":["import { InputBaseElement } from './input-base-element'\n\n/**\n * `dap-ds-input`\n * @summary An input is a field used to collect user input.\n * @element dap-ds-input\n * @title - Input\n *\n * @property {string} label - The label of the input.\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 input.\n * @property {string} optionalLabel - Text of optional label.\n * @property {string} requiredLabel - Text of required indicator. (default: '*')\n * @property {boolean} subtle - Text weight of label. If true the label is subtle. Default value is false.\n * @property {string} value - The value of the input.\n * @property {string} placeholder - The placeholder of the input.\n * @property {boolean} loading - The loading state of the input. Default is false.\n * @property {string} tooltip - The tooltip of the input.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.\n * @property {string} tooltipAriaLabel - The aria label of the tooltip.\n * @property {string} feedback - The feedback of the input.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.\n * @property {'succes' | 'error'} status - The status of the input. Can be `success` or `error`.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the input. Default is `sm`.\n * @property {string} sizeMap - Responsive size map (e.g. \"xs:lg\").\n * @property {string} name - The name of the input.\n * @property {'text' | 'number' | 'button' | 'color' | 'email' | 'hidden' | 'reset' | 'submit' | 'url' | 'password'| 'file' | 'time'} type - The type of the input. Default is 'text'.\n * @property {boolean} disabled - The disabled state of the input. Default is false.\n * @property {boolean} required - The required state of the input. Default is false.\n * @property {boolean} readonly - The readonly state of the input. Default is false.\n * @property {boolean} autofocus - The autofocus state of the input. Default is false.\n * @property {boolean} autocapitalize - The autocapitalize state of the input. Default is false.\n * @property {number} minlength - The minimum length of the input.\n * @property {number} maxlength - The maximum length of the input.\n * @property {number} min - The minimum value of the number input.\n * @property {number} max - The maximum value of the number input.\n * @property {number} step - The step value of the number input.\n * @property {string} inputmode - The inputmode of the input.\n * @property {string} pattern - The regex pattern of the input.\n *\n * @cssproperty --dds-input-height-xs - The height of the extra small input. (default: var(--dds-spacing-800)).\n * @cssproperty --dds-input-height-sm - The height of the small input. (default: var(--dds-spacing-1000)).\n * @cssproperty --dds-input-height-lg - The height of the large input. (default: var(--dds-spacing-1200)).\n * @cssproperty --dds-input-padding-xs - The padding of the extra small input. (default: 0 var(--dds-spacing-200)).\n * @cssproperty --dds-input-padding-sm - The padding of the small input. (default: 0 var(--dds-spacing-300)).\n * @cssproperty --dds-input-padding-lg - The padding of the large input. (default: 0 var(--dds-spacing-400)).\n * @cssproperty --dds-input-font-size-xs - The font size of the extra small input. (default: var(--dds-font-sm)).\n * @cssproperty --dds-input-font-size-sm - The font size of the small input. (default: var(--dds-font-base)).\n * @cssproperty --dds-input-font-size-lg - The font size of the large input. (default: var(--dds-font-lg)).\n * @cssproperty --dds-input-border - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-background - The background color of the input. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-text-color - The text color of the input. (default: var(--dds-text-neutral-base)).\n * @cssproperty --dds-input-border-radius - The border radius of the input. (default: var(--dds-radius-base)).\n * @cssproperty --dds-input-disabled-border - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)).\n * @cssproperty --dds-input-disabled-background - The background color of the disabled input. (default: var(--dds-fields-background-disabled)).\n * @cssproperty --dds-input-disabled-text - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-input-readonly-border - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)).\n * @cssproperty --dds-input-readonly-background - The background color of the readonly input. (default: var(--dds-fields-background-read-only)).\n * @cssproperty --dds-input-readonly-text - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)).\n * @cssproperty --dds-input-success-border - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-error-border - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-background - The background color of the input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-border-before - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-after - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-width-before - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-border-width-after - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-success-border - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-before - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-after - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-width-before - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-success-border-width-after - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-error-border-before - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-after - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-width-before - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-error-border-width-after - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n *\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ value: string }} dds-input - Fired when the input value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n *\n * @slot postfix - The postfix of the input.\n * @slot prefix - The prefix of the input.\n * @slot addon-before - The addon before the input.\n * @slot addon-after - The addon after the input.\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main input container.\n * @csspart input - The input element.\n * @csspart label - The label of the input.\n * @csspart description - The description of the input.\n * @csspart feedback - The feedback of the input.\n * @csspart tooltip - The tooltip of the input.\n * @csspart addon-before - The addon before the input.\n * @csspart addon-after - The addon after the input.\n * @csspart prefix - The prefix of the input.\n * @csspart postfix - The postfix of the input.\n *\n */\nexport default class DapDSInput extends InputBaseElement {\n  static tagName = 'dap-ds-input'\n\n  render() {\n    return this.renderInput()\n  }\n}\n"],"names":["_DapDSInput","InputBaseElement","DapDSInput"],"mappings":";AAsGA,MAAqBA,IAArB,MAAqBA,UAAmBC,EAAiB;AAAA,EAGvD,SAAS;AACP,WAAO,KAAK,YAAY;AAAA,EAAA;AAE5B;AALED,EAAO,UAAU;AADnB,IAAqBE,IAArBF;"}
+{"version":3,"file":"input.component.js","sources":["../../../src/components/input/input.component.ts"],"sourcesContent":["import { InputBaseElement } from './input-base-element'\n\n/**\n * `dap-ds-input`\n * @summary An input is a field used to collect user input.\n * @element dap-ds-input\n * @title - Input\n *\n * @property {string} label - The label of the input.\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 input.\n * @property {string} optionalLabel - Text of optional label.\n * @property {string} requiredLabel - Text of required indicator. (default: '*')\n * @property {boolean} subtle - Text weight of label. If true the label is subtle. Default value is false.\n * @property {string} value - The value of the input.\n * @property {string} placeholder - The placeholder of the input.\n * @property {boolean} loading - The loading state of the input. Default is false.\n * @property {string} tooltip - The tooltip of the input.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.\n * @property {string} tooltipAriaLabel - The aria label of the tooltip.\n * @property {'click' | 'hover'} tooltipTrigger - How the tooltip opens: `click` (click/Enter, default) or `hover` (hover and keyboard focus).\n * @property {string} feedback - The feedback of the input.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.\n * @property {'succes' | 'error'} status - The status of the input. Can be `success` or `error`.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the input. Default is `sm`.\n * @property {string} sizeMap - Responsive size map (e.g. \"xs:lg\").\n * @property {string} name - The name of the input.\n * @property {'text' | 'number' | 'button' | 'color' | 'email' | 'hidden' | 'reset' | 'submit' | 'url' | 'password'| 'file' | 'time'} type - The type of the input. Default is 'text'.\n * @property {boolean} disabled - The disabled state of the input. Default is false.\n * @property {boolean} required - The required state of the input. Default is false.\n * @property {boolean} readonly - The readonly state of the input. Default is false.\n * @property {boolean} autofocus - The autofocus state of the input. Default is false.\n * @property {boolean} autocapitalize - The autocapitalize state of the input. Default is false.\n * @property {number} minlength - The minimum length of the input.\n * @property {number} maxlength - The maximum length of the input.\n * @property {number} min - The minimum value of the number input.\n * @property {number} max - The maximum value of the number input.\n * @property {number} step - The step value of the number input.\n * @property {string} inputmode - The inputmode of the input.\n * @property {string} pattern - The regex pattern of the input.\n *\n * @cssproperty --dds-input-height-xs - The height of the extra small input. (default: var(--dds-spacing-800)).\n * @cssproperty --dds-input-height-sm - The height of the small input. (default: var(--dds-spacing-1000)).\n * @cssproperty --dds-input-height-lg - The height of the large input. (default: var(--dds-spacing-1200)).\n * @cssproperty --dds-input-padding-xs - The padding of the extra small input. (default: 0 var(--dds-spacing-200)).\n * @cssproperty --dds-input-padding-sm - The padding of the small input. (default: 0 var(--dds-spacing-300)).\n * @cssproperty --dds-input-padding-lg - The padding of the large input. (default: 0 var(--dds-spacing-400)).\n * @cssproperty --dds-input-font-size-xs - The font size of the extra small input. (default: var(--dds-font-sm)).\n * @cssproperty --dds-input-font-size-sm - The font size of the small input. (default: var(--dds-font-base)).\n * @cssproperty --dds-input-font-size-lg - The font size of the large input. (default: var(--dds-font-lg)).\n * @cssproperty --dds-input-border - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-background - The background color of the input. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-text-color - The text color of the input. (default: var(--dds-text-neutral-base)).\n * @cssproperty --dds-input-border-radius - The border radius of the input. (default: var(--dds-radius-base)).\n * @cssproperty --dds-input-disabled-border - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)).\n * @cssproperty --dds-input-disabled-background - The background color of the disabled input. (default: var(--dds-fields-background-disabled)).\n * @cssproperty --dds-input-disabled-text - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-input-readonly-border - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)).\n * @cssproperty --dds-input-readonly-background - The background color of the readonly input. (default: var(--dds-fields-background-read-only)).\n * @cssproperty --dds-input-readonly-text - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)).\n * @cssproperty --dds-input-success-border - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-error-border - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-background - The background color of the input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-border-before - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-after - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-width-before - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-border-width-after - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-success-border - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-before - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-after - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-width-before - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-success-border-width-after - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-error-border-before - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-after - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-width-before - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-error-border-width-after - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n *\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ value: string }} dds-input - Fired when the input value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n *\n * @slot postfix - The postfix of the input.\n * @slot prefix - The prefix of the input.\n * @slot addon-before - The addon before the input.\n * @slot addon-after - The addon after the input.\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main input container.\n * @csspart input - The input element.\n * @csspart label - The label of the input.\n * @csspart description - The description of the input.\n * @csspart feedback - The feedback of the input.\n * @csspart tooltip - The tooltip of the input.\n * @csspart addon-before - The addon before the input.\n * @csspart addon-after - The addon after the input.\n * @csspart prefix - The prefix of the input.\n * @csspart postfix - The postfix of the input.\n *\n */\nexport default class DapDSInput extends InputBaseElement {\n  static tagName = 'dap-ds-input'\n\n  render() {\n    return this.renderInput()\n  }\n}\n"],"names":["_DapDSInput","InputBaseElement","DapDSInput"],"mappings":";AAuGA,MAAqBA,IAArB,MAAqBA,UAAmBC,EAAiB;AAAA,EAGvD,SAAS;AACP,WAAO,KAAK,YAAY;AAAA,EAAA;AAE5B;AALED,EAAO,UAAU;AADnB,IAAqBE,IAArBF;"}

package/dist/components/option-list/option-list.component.js

@@ -15,18 +15,18 @@ import "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
 import { property as d } from "../../node_modules/@lit/reactive-element/decorators/property.js";
 import { state as c } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { ifDefined as v } from "../../node_modules/lit-html/directives/if-defined.js";
-import { unsafeStatic as I, html as O } from "../../node_modules/lit-html/static.js";
-import { scrollIntoContainer as y } from "../../common/utils.js";
+import { ifDefined as O } from "../../node_modules/lit-html/directives/if-defined.js";
+import { unsafeStatic as y, html as v } from "../../node_modules/lit-html/static.js";
+import { scrollIntoContainer as I } from "../../common/utils.js";
 import { DdsElement as C } from "../../internal/dds-hu-element.js";
 import { SizedMixin as S } from "../../internal/mixin/sizedMixin.js";
 import A from "../option-item/option-item.component.js";
 import E from "./option-list.scss.js";
 import { unsafeCSS as T } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var $ = Object.defineProperty, a = (o, e, t, i) => {
+var w = Object.defineProperty, a = (o, e, t, i) => {
   for (var s = void 0, l = o.length - 1, p; l >= 0; l--)
     (p = o[l]) && (s = p(e, t, s) || s);
-  return s && $(e, t, s), s;
+  return s && w(e, t, s), s;
 };
 const r = class r extends S(C) {
   constructor() {
@@ -131,6 +131,10 @@ const r = class r extends S(C) {
     this.availableOptions = e, this.optionEls = e;
   }
   handleKeydown(e) {
+    if (this.focused = !0, e.key === "Tab" || e.key === "Escape") {
+      e.key === "Escape" && (e.preventDefault(), this.emit("dds-cancel")), this.emit("dds-keydown", { key: e.key, code: e.code });
+      return;
+    }
     e.preventDefault(), this.handleKeyCodes(e.key, e.code);
   }
   scrollToActiveOption() {
@@ -139,7 +143,7 @@ const r = class r extends S(C) {
     const e = this.getAllRenderedOptions().find(
       (t) => t.value === this.currentOption.value
     );
-    e && y(e);
+    e && I(e);
   }
   handleNavigationKey(e) {
     var t;
@@ -168,7 +172,7 @@ const r = class r extends S(C) {
     }
   }
   handleActionKey(e) {
-    e === "Escape" ? this.emit("dds-cancel") : e === "Enter" && (this.setSelectedOption(this.availableOptions[this.selectedIndex]), this.selectionChanged(this.availableOptions[this.selectedIndex]), this.emit("dds-option-change", h({}, this.getEventDetails(this.currentOption))));
+    e === "Enter" && (this.setSelectedOption(this.availableOptions[this.selectedIndex]), this.selectionChanged(this.availableOptions[this.selectedIndex]), this.emit("dds-option-change", h({}, this.getEventDetails(this.currentOption))));
   }
   handleTypeheadKey(e) {
     this.searchMode === "typehead" && ((e == null ? void 0 : e.length) === 1 || e === "Backspace") && this.buildQueryString(e);
@@ -264,7 +268,7 @@ const r = class r extends S(C) {
     }
   }
   render() {
-    return O`<div
+    return v`<div
       part="base"
       class=${g("option-list", {
       "option-list--sm": this.size === "sm",
@@ -273,7 +277,7 @@ const r = class r extends S(C) {
       @keydown=${this.handleKeydown}
       @focus=${this.captureFocus}>
       ${this.availableOptions.map(
-      (e, t) => O`
+      (e, t) => v`
           <dap-ds-option-item
             size=${this.size}
             part="option-item"
@@ -281,15 +285,15 @@ const r = class r extends S(C) {
             ?disabled=${e.disabled}
             ?selected=${this.value === e.value}
             ?focused=${t === this.selectedIndex}
-            label=${v(e.label)}
+            label=${O(e.label)}
             role="option"
             value=${e.value}
             tabIndex=${e.tabIndex}
             id=${e.id || `dap-ds-option-${e.value}`}
-            data-testid=${v(e.dataset.testid || void 0)}
+            data-testid=${O(e.dataset.testid || void 0)}
             selectable=${this.selectable}
             @click=${this.handleOptionClick}>
-            ${I(e.innerHTML)}
+            ${y(e.innerHTML)}
           </dap-ds-option-item>
         `
     )}

package/dist/components/option-list/option-list.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"option-list.component.js","sources":["../../../src/components/option-list/option-list.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { scrollIntoContainer } from '@/common/utils'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport styles from './option-list.scss?inline'\n\n/**\n * `dap-ds-option-list`\n * @summary An option list is a list of selectable options.\n * @element dap-ds-option-list\n * @title - Option list\n *\n * @event {{ void }} dds-cancel - Fired when the escape key is pressed.\n * @event {{ option: DapDSOptionItem, value: string, index: number, text: string }} dds-option-change - Fired when the option list value changes.\n * @event {{ void }} dds-keydown - Fired when a key is pressed down.\n * @event {{ elements: DapDSOptionItem[] }} dds-list-changed - Fired when the available options list changes.\n *\n * @csspart base - The main option list container.\n * @csspart option-item - The option item of the option list.\n * @csspart popup-base - The base of the popup.\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 *\n * @slot - The default slot for the options.\n */\nexport default class DapDSOptionList extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-option-list'\n\n  static dependencies = {\n    'dap-ds-option-item': DapDSOptionItem,\n  }\n\n  /** The filter text of the option list */\n  @property() filterText = ''\n\n  /** The value of the option list */\n  @property({ type: String, reflect: true }) value?: string\n\n  /** The focused state of the option list. */\n  @property({ type: Boolean }) focused = false\n\n  /** Whether the option list is searchable */\n  @property({ type: Boolean }) search = false\n\n  /** The search mode of the option list. Default is `none` */\n  @property() searchMode: 'none' | 'typehead' | 'autocomplete' | 'manual' =\n    'none'\n\n  /**\n   * @ignore\n   */\n  @property({ type: String }) searchOnValueSet = 'true'\n\n  /** Whether the option list items are selectable, whether it shows the selected icon */\n  @property({ type: String }) selectable = 'true'\n\n  /**\n   * @ignore\n   */\n  @property({ type: Array })\n  public options?: any[]\n\n  /**\n   * @ignore\n   */\n  @property({ type: Boolean }) disableDelaySet = false\n\n  queryTimeout: number | undefined\n  queryString = ''\n  firstLoad = true\n\n  @state()\n  private currentOption: any\n\n  @state()\n  public selectedIndex: number\n\n  @state()\n  private optionEls: DapDSOptionItem[] = []\n\n  @state()\n  private availableOptions: DapDSOptionItem[] = []\n\n  get isAutoComplete() {\n    return this.searchMode === 'autocomplete' || this.searchMode === 'manual'\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    this.setAttribute('role', 'listbox')\n  }\n\n  getAllOptions() {\n    const mainSlot = this.shadowRoot?.querySelector('slot')\n    const assignedElement = mainSlot?.assignedElements()[0]\n    const embeddedSlot =\n      assignedElement?.nodeName === 'SLOT'\n        ? (\n            mainSlot?.assignedElements()[0] as HTMLSlotElement\n          ).assignedElements()\n        : mainSlot?.assignedElements()\n\n    if (!embeddedSlot) {\n      return [...this.querySelectorAll<DapDSOptionItem>('dap-ds-option-item')]\n    } else {\n      return [...(embeddedSlot as DapDSOptionItem[])]\n    }\n  }\n\n  private getAllRenderedOptions(): DapDSOptionItem[] {\n    const ro =\n      this.shadowRoot?.querySelectorAll<DapDSOptionItem>('dap-ds-option-item')\n    return ro ? [...ro] : []\n  }\n\n  getAllAvailabeOptions() {\n    return this.availableOptions\n  }\n\n  getActiveOption() {\n    if (!this.currentOption) {\n      return null\n    }\n\n    const activeOption = this.getAllRenderedOptions().find(\n      el => el.value === this.currentOption.value,\n    )\n\n    return activeOption\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (\n      _changedProperties.has('value') &&\n      !_changedProperties.has('currentOption') &&\n      this.searchOnValueSet === 'true'\n    ) {\n      const option = this.availableOptions.find(\n        option => option.value === this.value,\n      )\n\n      if (option) {\n        this.changeOption(option, _changedProperties.get('value'))\n\n        this.selectedIndex = this.findIndexByValue(\n          this.availableOptions,\n          this.value,\n        )\n\n        this.emit('dds-option-change', {\n          ...this.getEventDetails(this.currentOption),\n        })\n      }\n    }\n\n    if (\n      _changedProperties.has('options') ||\n      _changedProperties.has('optionEls')\n    ) {\n      this.availableOptions = this.options || this.optionEls\n      this.emit('dds-list-changed', { elements: this.availableOptions })\n    }\n  }\n\n  protected shouldUpdate(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): boolean {\n    if (_changedProperties.has('filterText')) {\n      if (\n        this.filterText &&\n        this.searchMode !== 'none' &&\n        this.searchMode !== 'manual'\n      ) {\n        this.filterAvailableOptions()\n        this.selectedIndex = 0\n        this.setCurrentOption(this.availableOptions[0], false)\n        this.emit('dds-list-changed', { elements: this.availableOptions })\n      } else if (this.filterText && this.searchMode === 'manual') {\n        if (this.selectedIndex === -1 && this.availableOptions.length > 0) {\n          this.selectedIndex = 0\n          this.setCurrentOption(this.availableOptions[0], false)\n        }\n      } else if (this.filterText && this.searchMode === 'none') {\n        this.filterAvailableOptions()\n        this.selectedIndex = -1\n        this.setCurrentOption(null, false)\n        this.setSelectedOption()\n        this.emit('dds-list-changed', { elements: this.availableOptions })\n      } else {\n        this.availableOptions = this.options || this.optionEls\n        this.selectedIndex = -1\n        this.setCurrentOption(null, false)\n        this.emit('dds-list-changed', { elements: this.availableOptions })\n      }\n    }\n\n    return super.shouldUpdate(_changedProperties)\n  }\n\n  public filterAvailableOptions(): void {\n    const valueLowerCase = this.filterText.toLowerCase()\n    this.availableOptions = (this.options || this.optionEls).filter(item => {\n      if (!item.disabled) {\n        const itemTextLowerCase = item.optionText.toLowerCase()\n        return itemTextLowerCase.startsWith(valueLowerCase)\n      }\n    })\n  }\n\n  attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n    if (\n      name === 'value' &&\n      oldValue !== newValue &&\n      this.searchOnValueSet === 'true'\n    ) {\n      if (newValue) {\n        const option = this.availableOptions.find(el => el.value === newValue)\n\n        this.setSelectedOption(option)\n        this.selectionChanged(option)\n\n        this.emit('dds-option-change', {\n          ...this.getEventDetails(this.currentOption),\n        })\n      } else {\n        this.setSelectedOption()\n        this.selectionChanged()\n      }\n    }\n  }\n\n  public setOptionsFromSlottedItems(): void {\n    const elements = this.getAllOptions()\n    this.availableOptions = elements\n    this.optionEls = elements\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    event.preventDefault()\n\n    this.handleKeyCodes(event.key, event.code)\n  }\n\n  private scrollToActiveOption(): void {\n    if (!this.currentOption) {\n      return\n    }\n\n    const activeOption = this.getAllRenderedOptions().find(\n      el => el.value === this.currentOption.value,\n    )\n\n    if (activeOption) {\n      // Scroll only within the list's own scroll container. A plain\n      // scrollIntoView would also scroll every ancestor (modal body, page),\n      // pushing the trigger out of the viewport and tripping the popup's\n      // viewport auto-close so the dropdown snaps shut on open.\n      scrollIntoContainer(activeOption)\n    }\n  }\n\n  private handleNavigationKey(key: string): void {\n    if (key === 'ArrowDown') {\n      this.selectedIndex = this.findNearestEnabled(\n        this.availableOptions,\n        this.selectedIndex,\n        1,\n      )\n    } else if (key === 'ArrowUp') {\n      const nearest = this.findNearestEnabled(\n        this.availableOptions,\n        this.selectedIndex,\n        this.selectedIndex === -1 ? 1 : -1,\n      )\n      this.selectedIndex =\n        nearest === this.availableOptions.length ? -1 : nearest\n    } else if (key === 'Home') {\n      this.selectedIndex = this.availableOptions[0]?.disabled\n        ? this.findNearestEnabled(this.availableOptions, -1, 1)\n        : 0\n    } else if (key === 'End') {\n      const nearest = this.findNearestEnabled(\n        this.availableOptions,\n        this.availableOptions.length,\n        -1,\n      )\n      this.selectedIndex =\n        nearest === this.availableOptions.length ? -1 : nearest\n    }\n  }\n\n  private handleActionKey(key: string): void {\n    if (key === 'Escape') {\n      this.emit('dds-cancel')\n    } else if (key === 'Enter') {\n      this.setSelectedOption(this.availableOptions[this.selectedIndex])\n      this.selectionChanged(this.availableOptions[this.selectedIndex])\n      this.emit('dds-option-change', {\n        ...this.getEventDetails(this.currentOption),\n      })\n    }\n  }\n\n  private handleTypeheadKey(key: string): void {\n    if (\n      this.searchMode === 'typehead' &&\n      (key?.length === 1 || key === 'Backspace')\n    ) {\n      this.buildQueryString(key)\n    }\n  }\n\n  private handleKeyCodes(key: string, keyCode?: string) {\n    if (!this.focused) {\n      return\n    }\n\n    this.handleNavigationKey(key)\n    this.handleActionKey(key)\n    this.handleTypeheadKey(key)\n\n    if (this.selectedIndex >= 0) {\n      const option = this.availableOptions[this.selectedIndex]\n      this.setCurrentOption(option)\n      this.emit('dds-keydown', {\n        code: keyCode,\n        key,\n        ...this.getEventDetails(option),\n      })\n    }\n  }\n\n  private getEventDetails(option?: DapDSOptionItem) {\n    if (!option) {\n      return undefined\n    }\n\n    let opt = option\n\n    if (option.tagName !== 'DAP-DS-OPTION-ITEM') {\n      opt = option.closest('dap-ds-option-item')!\n    }\n\n    return {\n      opt,\n      value: opt?.value,\n      text: opt?.optionText,\n      index: this.selectedIndex,\n    }\n  }\n\n  private findNearestEnabled(\n    allOptions: DapDSOptionItem[],\n    current: number,\n    step: number,\n  ) {\n    let nextIndex: number = current\n    let nextOption: DapDSOptionItem\n\n    do {\n      nextIndex += step\n      nextOption = allOptions[nextIndex]\n      if (nextOption === undefined) {\n        break\n      }\n    } while (nextOption?.disabled)\n\n    return nextOption ? nextIndex : current\n  }\n\n  private findIndexByValue(\n    allOptions: DapDSOptionItem[],\n    value?: string,\n  ): number {\n    return allOptions.findIndex(option => option.value === value)\n  }\n\n  private clearItemFocusStates() {\n    this.availableOptions.forEach(el => {\n      el.focused = false\n      el.tabIndex = -1\n    })\n  }\n\n  // Only set the current option without selecting it, eg: focus\n  private setCurrentOption(option?: DapDSOptionItem | null, setFocus = true) {\n    this.clearItemFocusStates()\n\n    if (option) {\n      this.currentOption = option\n      option.focused = true\n      option.tabIndex = 0\n\n      this.emit('dds-current-change', {\n        ...this.getEventDetails(option),\n      })\n\n      if (setFocus) {\n        this.setFocusedOption(option)\n      } else {\n        this.scrollToActiveOption()\n      }\n    } else {\n      this.currentOption = null\n\n      this.emit('dds-current-change', null)\n    }\n  }\n\n  private setFocusedOption(option: DapDSOptionItem) {\n    const renderedItem = this.getAllRenderedOptions().find(\n      el => el.value === option.value,\n    )\n\n    if (renderedItem) {\n      // preventScroll so native focus doesn't scroll ancestor containers (modal\n      // body, page); scrollToActiveOption reveals it within the list instead.\n      renderedItem.focus({ preventScroll: true })\n    }\n  }\n\n  private setSelectedOption(option?: DapDSOptionItem | undefined) {\n    this.availableOptions.forEach(el => (el.selected = false))\n\n    if (option) {\n      this.currentOption = option\n\n      option.selected = true\n    }\n  }\n\n  private selectionChanged(option?: DapDSOptionItem | undefined, value?: any) {\n    const oldValue = value || this.value\n\n    if (option) {\n      if (option.value !== oldValue) {\n        this.value = option.value\n      }\n    }\n  }\n\n  private changeOption(option: DapDSOptionItem, value?: any) {\n    if (option && !option.disabled) {\n      this.selectedIndex = this.findIndexByValue(\n        this.availableOptions,\n        option.value,\n      )\n\n      this.setSelectedOption(option)\n      this.setCurrentOption(option)\n      this.selectionChanged(option, value)\n    }\n  }\n\n  private readonly handleOptionClick = (event: MouseEvent) => {\n    this.focused = true\n    const option = event.target as DapDSOptionItem\n\n    if (option && !option.disabled) {\n      const isModifierKeyPressed = event.ctrlKey || event.metaKey\n      const isAlreadySelected = option.selected\n\n      if (isModifierKeyPressed && isAlreadySelected) {\n        // Find the empty item (with \"empty\" attribute) to select automatically\n        const emptyItem = this.availableOptions.find(opt =>\n          opt.hasAttribute('empty'),\n        )\n\n        if (emptyItem) {\n          // Select the empty item automatically\n          this.setSelectedOption(emptyItem)\n          this.setCurrentOption(emptyItem)\n          this.value = emptyItem.value\n          this.selectedIndex = this.findIndexByValue(\n            this.availableOptions,\n            emptyItem.value,\n          )\n\n          this.emit('dds-option-change', {\n            ...this.getEventDetails(emptyItem),\n          })\n        } else {\n          // Fallback to original behavior if no empty item found\n          this.setSelectedOption(undefined)\n          this.setCurrentOption(null)\n          this.value = undefined\n          this.selectedIndex = -1\n\n          this.emit('dds-option-deselect', {\n            option: option,\n            value: undefined,\n            index: -1,\n            text: option.optionText,\n          })\n        }\n\n        return\n      }\n\n      this.setCurrentOption(option)\n      this.setSelectedOption(option)\n      this.selectionChanged(option)\n\n      this.updateComplete.then(() => {\n        this.selectedIndex = this.findIndexByValue(\n          this.availableOptions,\n          this.value,\n        )\n\n        if (!this.disableDelaySet) {\n          this.emit('dds-option-change', {\n            ...this.getEventDetails(this.currentOption),\n          })\n        }\n      })\n    } else {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n  }\n\n  getSearchString = (char: string) => {\n    if (typeof this.queryTimeout === 'number') {\n      window.clearTimeout(this.queryTimeout)\n    }\n\n    this.queryTimeout = window.setTimeout(() => {\n      this.queryString = ''\n    }, 500)\n\n    this.queryString += char\n    return this.queryString\n  }\n\n  buildQueryString = (char: string) => {\n    const queryString = this.getSearchString(char)\n\n    for (const option of this.availableOptions) {\n      const label = option.optionText.toLowerCase()\n\n      if (label.startsWith(queryString.toLowerCase())) {\n        this.selectedIndex = this.findIndexByValue(\n          this.availableOptions,\n          option.value,\n        )\n        this.setCurrentOption(option)\n        break\n      }\n    }\n  }\n\n  private handleInitialFocus(): void {\n    if (!this.value && this.selectedIndex < 0) {\n      this.selectedIndex = 0\n    } else {\n      const index = this.value\n        ? this.findIndexByValue(this.availableOptions, this.value)\n        : this.selectedIndex\n\n      if (index !== -1 && !this.isAutoComplete) {\n        this.selectedIndex = index\n        this.setCurrentOption(this.availableOptions[this.selectedIndex])\n        this.setSelectedOption(this.availableOptions[this.selectedIndex])\n        if (this.value) {\n          this.selectionChanged(this.availableOptions[this.selectedIndex])\n        }\n      }\n    }\n\n    if (!this.selectedIndex) {\n      this.setCurrentOption(this.availableOptions[0])\n      this.setSelectedOption(this.availableOptions[0])\n    }\n  }\n\n  private handleKeyFocus(key: string): void {\n    if (this.isAutoComplete || this.searchMode === 'none') {\n      this.handleKeyCodes(key)\n      this.setCurrentOption(this.availableOptions[this.selectedIndex], false)\n      this.setSelectedOption(this.availableOptions[this.selectedIndex])\n    }\n\n    if (this.searchMode === 'typehead') {\n      this.buildQueryString(key)\n    }\n  }\n\n  public captureFocus(key?: string): void {\n    this.focused = true\n    this.focus()\n\n    if (!key) {\n      this.handleInitialFocus()\n    } else {\n      this.handleKeyFocus(key)\n    }\n\n    // The popup constrains its scroll container's max-height via floating-ui one\n    // animation frame after opening. At this point that constraint isn't applied\n    // yet (clientHeight === scrollHeight), so the container isn't scrollable and\n    // both native focus() scrolling and scrollIntoView are no-ops. Defer the\n    // scroll to the next frame so the selected option is actually revealed.\n    if (typeof requestAnimationFrame === 'function') {\n      requestAnimationFrame(() => this.scrollToActiveOption())\n    }\n  }\n\n  public removeFocus(): void {\n    this.focused = false\n    this.clearItemFocusStates()\n  }\n\n  private handleSlotChange() {\n    const allOptions = this.getAllOptions()\n    this.setOptionsFromSlottedItems()\n\n    if (allOptions.length > 0 && this.searchOnValueSet === 'true') {\n      const option = allOptions.find(el => el.value === this.value)\n      this.setSelectedOption(option)\n      this.selectionChanged(option)\n\n      if (this.currentOption) {\n        this.selectedIndex = this.findIndexByValue(allOptions, this.value)\n        this.emit('dds-option-change', {\n          ...this.getEventDetails(this.currentOption),\n        })\n      }\n    } else if (allOptions.length > 0 && !this.search && !this.isAutoComplete) {\n      const firstOption = allOptions.find(option => !option.disabled)\n      this.selectedIndex = 0\n      this.setCurrentOption(firstOption, false)\n\n      this.emit('dds-current-change', {\n        ...this.getEventDetails(firstOption),\n      })\n    } else if (allOptions.length > 0 && (this.search || this.isAutoComplete)) {\n      const firstOption = allOptions.find(option => !option.disabled)\n\n      if (\n        !this.currentOption ||\n        this.currentOption.value !== firstOption?.value\n      ) {\n        this.selectedIndex = 0\n        this.setCurrentOption(firstOption, false)\n      }\n    }\n  }\n\n  render() {\n    return html`<div\n      part=\"base\"\n      class=${clsx('option-list', {\n        'option-list--sm': this.size === 'sm',\n        'option-list--lg': this.size === 'lg',\n      })}\n      @keydown=${this.handleKeydown}\n      @focus=${this.captureFocus}>\n      ${this.availableOptions.map(\n        (option, index) => html`\n          <dap-ds-option-item\n            size=${this.size}\n            part=\"option-item\"\n            exportparts=\"base: option-item-base, label: option-item-label, prefix: option-item-prefix, suffix: option-item-suffix\"\n            ?disabled=${option.disabled}\n            ?selected=${this.value === option.value}\n            ?focused=${index === this.selectedIndex}\n            label=${ifDefined(option.label)}\n            role=\"option\"\n            value=${option.value}\n            tabIndex=${option.tabIndex}\n            id=${option.id || `dap-ds-option-${option.value}`}\n            data-testid=${ifDefined(option.dataset.testid || undefined)}\n            selectable=${this.selectable}\n            @click=${this.handleOptionClick}>\n            ${unsafeStatic(option.innerHTML)}\n          </dap-ds-option-item>\n        `,\n      )}\n      <slot hidden @slotchange=${this.handleSlotChange}></slot>\n    </div> `\n  }\n}\n"],"names":["_DapDSOptionList","SizedMixin","DdsElement","event","option","isModifierKeyPressed","isAlreadySelected","emptyItem","opt","__spreadValues","char","queryString","_changedProperties","mainSlot","_a","assignedElement","embeddedSlot","ro","el","valueLowerCase","item","name","oldValue","newValue","elements","activeOption","scrollIntoContainer","key","nearest","keyCode","allOptions","current","step","nextIndex","nextOption","value","setFocus","renderedItem","index","firstOption","html","clsx","ifDefined","unsafeStatic","DapDSOptionItem","unsafeCSS","styles","DapDSOptionList","__decorateClass","property","state"],"mappings":"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"}
+{"version":3,"file":"option-list.component.js","sources":["../../../src/components/option-list/option-list.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { scrollIntoContainer } from '@/common/utils'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport styles from './option-list.scss?inline'\n\n/**\n * `dap-ds-option-list`\n * @summary An option list is a list of selectable options.\n * @element dap-ds-option-list\n * @title - Option list\n *\n * @event {{ void }} dds-cancel - Fired when the escape key is pressed.\n * @event {{ option: DapDSOptionItem, value: string, index: number, text: string }} dds-option-change - Fired when the option list value changes.\n * @event {{ void }} dds-keydown - Fired when a key is pressed down.\n * @event {{ elements: DapDSOptionItem[] }} dds-list-changed - Fired when the available options list changes.\n *\n * @csspart base - The main option list container.\n * @csspart option-item - The option item of the option list.\n * @csspart popup-base - The base of the popup.\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 *\n * @slot - The default slot for the options.\n */\nexport default class DapDSOptionList extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-option-list'\n\n  static dependencies = {\n    'dap-ds-option-item': DapDSOptionItem,\n  }\n\n  /** The filter text of the option list */\n  @property() filterText = ''\n\n  /** The value of the option list */\n  @property({ type: String, reflect: true }) value?: string\n\n  /** The focused state of the option list. */\n  @property({ type: Boolean }) focused = false\n\n  /** Whether the option list is searchable */\n  @property({ type: Boolean }) search = false\n\n  /** The search mode of the option list. Default is `none` */\n  @property() searchMode: 'none' | 'typehead' | 'autocomplete' | 'manual' =\n    'none'\n\n  /**\n   * @ignore\n   */\n  @property({ type: String }) searchOnValueSet = 'true'\n\n  /** Whether the option list items are selectable, whether it shows the selected icon */\n  @property({ type: String }) selectable = 'true'\n\n  /**\n   * @ignore\n   */\n  @property({ type: Array })\n  public options?: any[]\n\n  /**\n   * @ignore\n   */\n  @property({ type: Boolean }) disableDelaySet = false\n\n  queryTimeout: number | undefined\n  queryString = ''\n  firstLoad = true\n\n  @state()\n  private currentOption: any\n\n  @state()\n  public selectedIndex: number\n\n  @state()\n  private optionEls: DapDSOptionItem[] = []\n\n  @state()\n  private availableOptions: DapDSOptionItem[] = []\n\n  get isAutoComplete() {\n    return this.searchMode === 'autocomplete' || this.searchMode === 'manual'\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    this.setAttribute('role', 'listbox')\n  }\n\n  getAllOptions() {\n    const mainSlot = this.shadowRoot?.querySelector('slot')\n    const assignedElement = mainSlot?.assignedElements()[0]\n    const embeddedSlot =\n      assignedElement?.nodeName === 'SLOT'\n        ? (\n            mainSlot?.assignedElements()[0] as HTMLSlotElement\n          ).assignedElements()\n        : mainSlot?.assignedElements()\n\n    if (!embeddedSlot) {\n      return [...this.querySelectorAll<DapDSOptionItem>('dap-ds-option-item')]\n    } else {\n      return [...(embeddedSlot as DapDSOptionItem[])]\n    }\n  }\n\n  private getAllRenderedOptions(): DapDSOptionItem[] {\n    const ro =\n      this.shadowRoot?.querySelectorAll<DapDSOptionItem>('dap-ds-option-item')\n    return ro ? [...ro] : []\n  }\n\n  getAllAvailabeOptions() {\n    return this.availableOptions\n  }\n\n  getActiveOption() {\n    if (!this.currentOption) {\n      return null\n    }\n\n    const activeOption = this.getAllRenderedOptions().find(\n      el => el.value === this.currentOption.value,\n    )\n\n    return activeOption\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (\n      _changedProperties.has('value') &&\n      !_changedProperties.has('currentOption') &&\n      this.searchOnValueSet === 'true'\n    ) {\n      const option = this.availableOptions.find(\n        option => option.value === this.value,\n      )\n\n      if (option) {\n        this.changeOption(option, _changedProperties.get('value'))\n\n        this.selectedIndex = this.findIndexByValue(\n          this.availableOptions,\n          this.value,\n        )\n\n        this.emit('dds-option-change', {\n          ...this.getEventDetails(this.currentOption),\n        })\n      }\n    }\n\n    if (\n      _changedProperties.has('options') ||\n      _changedProperties.has('optionEls')\n    ) {\n      this.availableOptions = this.options || this.optionEls\n      this.emit('dds-list-changed', { elements: this.availableOptions })\n    }\n  }\n\n  protected shouldUpdate(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): boolean {\n    if (_changedProperties.has('filterText')) {\n      if (\n        this.filterText &&\n        this.searchMode !== 'none' &&\n        this.searchMode !== 'manual'\n      ) {\n        this.filterAvailableOptions()\n        this.selectedIndex = 0\n        this.setCurrentOption(this.availableOptions[0], false)\n        this.emit('dds-list-changed', { elements: this.availableOptions })\n      } else if (this.filterText && this.searchMode === 'manual') {\n        if (this.selectedIndex === -1 && this.availableOptions.length > 0) {\n          this.selectedIndex = 0\n          this.setCurrentOption(this.availableOptions[0], false)\n        }\n      } else if (this.filterText && this.searchMode === 'none') {\n        this.filterAvailableOptions()\n        this.selectedIndex = -1\n        this.setCurrentOption(null, false)\n        this.setSelectedOption()\n        this.emit('dds-list-changed', { elements: this.availableOptions })\n      } else {\n        this.availableOptions = this.options || this.optionEls\n        this.selectedIndex = -1\n        this.setCurrentOption(null, false)\n        this.emit('dds-list-changed', { elements: this.availableOptions })\n      }\n    }\n\n    return super.shouldUpdate(_changedProperties)\n  }\n\n  public filterAvailableOptions(): void {\n    const valueLowerCase = this.filterText.toLowerCase()\n    this.availableOptions = (this.options || this.optionEls).filter(item => {\n      if (!item.disabled) {\n        const itemTextLowerCase = item.optionText.toLowerCase()\n        return itemTextLowerCase.startsWith(valueLowerCase)\n      }\n    })\n  }\n\n  attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n    if (\n      name === 'value' &&\n      oldValue !== newValue &&\n      this.searchOnValueSet === 'true'\n    ) {\n      if (newValue) {\n        const option = this.availableOptions.find(el => el.value === newValue)\n\n        this.setSelectedOption(option)\n        this.selectionChanged(option)\n\n        this.emit('dds-option-change', {\n          ...this.getEventDetails(this.currentOption),\n        })\n      } else {\n        this.setSelectedOption()\n        this.selectionChanged()\n      }\n    }\n  }\n\n  public setOptionsFromSlottedItems(): void {\n    const elements = this.getAllOptions()\n    this.availableOptions = elements\n    this.optionEls = elements\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    // Keydown only reaches the list while focus is inside it. Focus can arrive\n    // via Tab (not captureFocus), so mark the list focused or every key is ignored.\n    this.focused = true\n\n    // Tab and Escape must always work so keyboard users can leave the list\n    // (WCAG 2.1.2). Tab keeps its native behaviour; the host closes the popup.\n    if (event.key === 'Tab' || event.key === 'Escape') {\n      if (event.key === 'Escape') {\n        event.preventDefault()\n        this.emit('dds-cancel')\n      }\n      this.emit('dds-keydown', { key: event.key, code: event.code })\n      return\n    }\n\n    event.preventDefault()\n\n    this.handleKeyCodes(event.key, event.code)\n  }\n\n  private scrollToActiveOption(): void {\n    if (!this.currentOption) {\n      return\n    }\n\n    const activeOption = this.getAllRenderedOptions().find(\n      el => el.value === this.currentOption.value,\n    )\n\n    if (activeOption) {\n      // Scroll only within the list's own scroll container. A plain\n      // scrollIntoView would also scroll every ancestor (modal body, page),\n      // pushing the trigger out of the viewport and tripping the popup's\n      // viewport auto-close so the dropdown snaps shut on open.\n      scrollIntoContainer(activeOption)\n    }\n  }\n\n  private handleNavigationKey(key: string): void {\n    if (key === 'ArrowDown') {\n      this.selectedIndex = this.findNearestEnabled(\n        this.availableOptions,\n        this.selectedIndex,\n        1,\n      )\n    } else if (key === 'ArrowUp') {\n      const nearest = this.findNearestEnabled(\n        this.availableOptions,\n        this.selectedIndex,\n        this.selectedIndex === -1 ? 1 : -1,\n      )\n      this.selectedIndex =\n        nearest === this.availableOptions.length ? -1 : nearest\n    } else if (key === 'Home') {\n      this.selectedIndex = this.availableOptions[0]?.disabled\n        ? this.findNearestEnabled(this.availableOptions, -1, 1)\n        : 0\n    } else if (key === 'End') {\n      const nearest = this.findNearestEnabled(\n        this.availableOptions,\n        this.availableOptions.length,\n        -1,\n      )\n      this.selectedIndex =\n        nearest === this.availableOptions.length ? -1 : nearest\n    }\n  }\n\n  private handleActionKey(key: string): void {\n    if (key === 'Enter') {\n      this.setSelectedOption(this.availableOptions[this.selectedIndex])\n      this.selectionChanged(this.availableOptions[this.selectedIndex])\n      this.emit('dds-option-change', {\n        ...this.getEventDetails(this.currentOption),\n      })\n    }\n  }\n\n  private handleTypeheadKey(key: string): void {\n    if (\n      this.searchMode === 'typehead' &&\n      (key?.length === 1 || key === 'Backspace')\n    ) {\n      this.buildQueryString(key)\n    }\n  }\n\n  private handleKeyCodes(key: string, keyCode?: string) {\n    if (!this.focused) {\n      return\n    }\n\n    this.handleNavigationKey(key)\n    this.handleActionKey(key)\n    this.handleTypeheadKey(key)\n\n    if (this.selectedIndex >= 0) {\n      const option = this.availableOptions[this.selectedIndex]\n      this.setCurrentOption(option)\n      this.emit('dds-keydown', {\n        code: keyCode,\n        key,\n        ...this.getEventDetails(option),\n      })\n    }\n  }\n\n  private getEventDetails(option?: DapDSOptionItem) {\n    if (!option) {\n      return undefined\n    }\n\n    let opt = option\n\n    if (option.tagName !== 'DAP-DS-OPTION-ITEM') {\n      opt = option.closest('dap-ds-option-item')!\n    }\n\n    return {\n      opt,\n      value: opt?.value,\n      text: opt?.optionText,\n      index: this.selectedIndex,\n    }\n  }\n\n  private findNearestEnabled(\n    allOptions: DapDSOptionItem[],\n    current: number,\n    step: number,\n  ) {\n    let nextIndex: number = current\n    let nextOption: DapDSOptionItem\n\n    do {\n      nextIndex += step\n      nextOption = allOptions[nextIndex]\n      if (nextOption === undefined) {\n        break\n      }\n    } while (nextOption?.disabled)\n\n    return nextOption ? nextIndex : current\n  }\n\n  private findIndexByValue(\n    allOptions: DapDSOptionItem[],\n    value?: string,\n  ): number {\n    return allOptions.findIndex(option => option.value === value)\n  }\n\n  private clearItemFocusStates() {\n    this.availableOptions.forEach(el => {\n      el.focused = false\n      el.tabIndex = -1\n    })\n  }\n\n  // Only set the current option without selecting it, eg: focus\n  private setCurrentOption(option?: DapDSOptionItem | null, setFocus = true) {\n    this.clearItemFocusStates()\n\n    if (option) {\n      this.currentOption = option\n      option.focused = true\n      option.tabIndex = 0\n\n      this.emit('dds-current-change', {\n        ...this.getEventDetails(option),\n      })\n\n      if (setFocus) {\n        this.setFocusedOption(option)\n      } else {\n        this.scrollToActiveOption()\n      }\n    } else {\n      this.currentOption = null\n\n      this.emit('dds-current-change', null)\n    }\n  }\n\n  private setFocusedOption(option: DapDSOptionItem) {\n    const renderedItem = this.getAllRenderedOptions().find(\n      el => el.value === option.value,\n    )\n\n    if (renderedItem) {\n      // preventScroll so native focus doesn't scroll ancestor containers (modal\n      // body, page); scrollToActiveOption reveals it within the list instead.\n      renderedItem.focus({ preventScroll: true })\n    }\n  }\n\n  private setSelectedOption(option?: DapDSOptionItem | undefined) {\n    this.availableOptions.forEach(el => (el.selected = false))\n\n    if (option) {\n      this.currentOption = option\n\n      option.selected = true\n    }\n  }\n\n  private selectionChanged(option?: DapDSOptionItem | undefined, value?: any) {\n    const oldValue = value || this.value\n\n    if (option) {\n      if (option.value !== oldValue) {\n        this.value = option.value\n      }\n    }\n  }\n\n  private changeOption(option: DapDSOptionItem, value?: any) {\n    if (option && !option.disabled) {\n      this.selectedIndex = this.findIndexByValue(\n        this.availableOptions,\n        option.value,\n      )\n\n      this.setSelectedOption(option)\n      this.setCurrentOption(option)\n      this.selectionChanged(option, value)\n    }\n  }\n\n  private readonly handleOptionClick = (event: MouseEvent) => {\n    this.focused = true\n    const option = event.target as DapDSOptionItem\n\n    if (option && !option.disabled) {\n      const isModifierKeyPressed = event.ctrlKey || event.metaKey\n      const isAlreadySelected = option.selected\n\n      if (isModifierKeyPressed && isAlreadySelected) {\n        // Find the empty item (with \"empty\" attribute) to select automatically\n        const emptyItem = this.availableOptions.find(opt =>\n          opt.hasAttribute('empty'),\n        )\n\n        if (emptyItem) {\n          // Select the empty item automatically\n          this.setSelectedOption(emptyItem)\n          this.setCurrentOption(emptyItem)\n          this.value = emptyItem.value\n          this.selectedIndex = this.findIndexByValue(\n            this.availableOptions,\n            emptyItem.value,\n          )\n\n          this.emit('dds-option-change', {\n            ...this.getEventDetails(emptyItem),\n          })\n        } else {\n          // Fallback to original behavior if no empty item found\n          this.setSelectedOption(undefined)\n          this.setCurrentOption(null)\n          this.value = undefined\n          this.selectedIndex = -1\n\n          this.emit('dds-option-deselect', {\n            option: option,\n            value: undefined,\n            index: -1,\n            text: option.optionText,\n          })\n        }\n\n        return\n      }\n\n      this.setCurrentOption(option)\n      this.setSelectedOption(option)\n      this.selectionChanged(option)\n\n      this.updateComplete.then(() => {\n        this.selectedIndex = this.findIndexByValue(\n          this.availableOptions,\n          this.value,\n        )\n\n        if (!this.disableDelaySet) {\n          this.emit('dds-option-change', {\n            ...this.getEventDetails(this.currentOption),\n          })\n        }\n      })\n    } else {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n  }\n\n  getSearchString = (char: string) => {\n    if (typeof this.queryTimeout === 'number') {\n      window.clearTimeout(this.queryTimeout)\n    }\n\n    this.queryTimeout = window.setTimeout(() => {\n      this.queryString = ''\n    }, 500)\n\n    this.queryString += char\n    return this.queryString\n  }\n\n  buildQueryString = (char: string) => {\n    const queryString = this.getSearchString(char)\n\n    for (const option of this.availableOptions) {\n      const label = option.optionText.toLowerCase()\n\n      if (label.startsWith(queryString.toLowerCase())) {\n        this.selectedIndex = this.findIndexByValue(\n          this.availableOptions,\n          option.value,\n        )\n        this.setCurrentOption(option)\n        break\n      }\n    }\n  }\n\n  private handleInitialFocus(): void {\n    if (!this.value && this.selectedIndex < 0) {\n      this.selectedIndex = 0\n    } else {\n      const index = this.value\n        ? this.findIndexByValue(this.availableOptions, this.value)\n        : this.selectedIndex\n\n      if (index !== -1 && !this.isAutoComplete) {\n        this.selectedIndex = index\n        this.setCurrentOption(this.availableOptions[this.selectedIndex])\n        this.setSelectedOption(this.availableOptions[this.selectedIndex])\n        if (this.value) {\n          this.selectionChanged(this.availableOptions[this.selectedIndex])\n        }\n      }\n    }\n\n    if (!this.selectedIndex) {\n      this.setCurrentOption(this.availableOptions[0])\n      this.setSelectedOption(this.availableOptions[0])\n    }\n  }\n\n  private handleKeyFocus(key: string): void {\n    if (this.isAutoComplete || this.searchMode === 'none') {\n      this.handleKeyCodes(key)\n      this.setCurrentOption(this.availableOptions[this.selectedIndex], false)\n      this.setSelectedOption(this.availableOptions[this.selectedIndex])\n    }\n\n    if (this.searchMode === 'typehead') {\n      this.buildQueryString(key)\n    }\n  }\n\n  public captureFocus(key?: string): void {\n    this.focused = true\n    this.focus()\n\n    if (!key) {\n      this.handleInitialFocus()\n    } else {\n      this.handleKeyFocus(key)\n    }\n\n    // The popup constrains its scroll container's max-height via floating-ui one\n    // animation frame after opening. At this point that constraint isn't applied\n    // yet (clientHeight === scrollHeight), so the container isn't scrollable and\n    // both native focus() scrolling and scrollIntoView are no-ops. Defer the\n    // scroll to the next frame so the selected option is actually revealed.\n    if (typeof requestAnimationFrame === 'function') {\n      requestAnimationFrame(() => this.scrollToActiveOption())\n    }\n  }\n\n  public removeFocus(): void {\n    this.focused = false\n    this.clearItemFocusStates()\n  }\n\n  private handleSlotChange() {\n    const allOptions = this.getAllOptions()\n    this.setOptionsFromSlottedItems()\n\n    if (allOptions.length > 0 && this.searchOnValueSet === 'true') {\n      const option = allOptions.find(el => el.value === this.value)\n      this.setSelectedOption(option)\n      this.selectionChanged(option)\n\n      if (this.currentOption) {\n        this.selectedIndex = this.findIndexByValue(allOptions, this.value)\n        this.emit('dds-option-change', {\n          ...this.getEventDetails(this.currentOption),\n        })\n      }\n    } else if (allOptions.length > 0 && !this.search && !this.isAutoComplete) {\n      const firstOption = allOptions.find(option => !option.disabled)\n      this.selectedIndex = 0\n      this.setCurrentOption(firstOption, false)\n\n      this.emit('dds-current-change', {\n        ...this.getEventDetails(firstOption),\n      })\n    } else if (allOptions.length > 0 && (this.search || this.isAutoComplete)) {\n      const firstOption = allOptions.find(option => !option.disabled)\n\n      if (\n        !this.currentOption ||\n        this.currentOption.value !== firstOption?.value\n      ) {\n        this.selectedIndex = 0\n        this.setCurrentOption(firstOption, false)\n      }\n    }\n  }\n\n  render() {\n    return html`<div\n      part=\"base\"\n      class=${clsx('option-list', {\n        'option-list--sm': this.size === 'sm',\n        'option-list--lg': this.size === 'lg',\n      })}\n      @keydown=${this.handleKeydown}\n      @focus=${this.captureFocus}>\n      ${this.availableOptions.map(\n        (option, index) => html`\n          <dap-ds-option-item\n            size=${this.size}\n            part=\"option-item\"\n            exportparts=\"base: option-item-base, label: option-item-label, prefix: option-item-prefix, suffix: option-item-suffix\"\n            ?disabled=${option.disabled}\n            ?selected=${this.value === option.value}\n            ?focused=${index === this.selectedIndex}\n            label=${ifDefined(option.label)}\n            role=\"option\"\n            value=${option.value}\n            tabIndex=${option.tabIndex}\n            id=${option.id || `dap-ds-option-${option.value}`}\n            data-testid=${ifDefined(option.dataset.testid || undefined)}\n            selectable=${this.selectable}\n            @click=${this.handleOptionClick}>\n            ${unsafeStatic(option.innerHTML)}\n          </dap-ds-option-item>\n        `,\n      )}\n      <slot hidden @slotchange=${this.handleSlotChange}></slot>\n    </div> `\n  }\n}\n"],"names":["_DapDSOptionList","SizedMixin","DdsElement","event","option","isModifierKeyPressed","isAlreadySelected","emptyItem","opt","__spreadValues","char","queryString","_changedProperties","mainSlot","_a","assignedElement","embeddedSlot","ro","el","valueLowerCase","item","name","oldValue","newValue","elements","activeOption","scrollIntoContainer","key","nearest","keyCode","allOptions","current","step","nextIndex","nextOption","value","setFocus","renderedItem","index","firstOption","html","clsx","ifDefined","unsafeStatic","DapDSOptionItem","unsafeCSS","styles","DapDSOptionList","__decorateClass","property","state"],"mappings":"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"}