@cupra/ui-kit 2.0.0-canary.62 → 2.0.0-canary.63

package/dist/esm/node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directive-helpers.js

@@ -4,34 +4,35 @@ import { _$LH as l } from "./lit-html.js";
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { I: f } = l, m = () => document.createComment(""), u = (e, A, t) => {
+const { I: f } = l, v = (e) => e.strings === void 0, m = () => document.createComment(""), p = (e, i, t) => {
   var o;
-  const $ = e._$AA.parentNode, i = A === void 0 ? e._$AB : A._$AA;
+  const $ = e._$AA.parentNode, r = i === void 0 ? e._$AB : i._$AA;
   if (t === void 0) {
-    const s = $.insertBefore(m(), i), _ = $.insertBefore(m(), i);
-    t = new f(s, _, e, e.options);
+    const A = $.insertBefore(m(), r), _ = $.insertBefore(m(), r);
+    t = new f(A, _, e, e.options);
   } else {
-    const s = t._$AB.nextSibling, _ = t._$AM, a = _ !== e;
+    const A = t._$AB.nextSibling, _ = t._$AM, a = _ !== e;
     if (a) {
-      let r;
-      (o = t._$AQ) == null || o.call(t, e), t._$AM = e, t._$AP !== void 0 && (r = e._$AU) !== _._$AU && t._$AP(r);
+      let s;
+      (o = t._$AQ) == null || o.call(t, e), t._$AM = e, t._$AP !== void 0 && (s = e._$AU) !== _._$AU && t._$AP(s);
     }
-    if (s !== i || a) {
-      let r = t._$AA;
-      for (; r !== s; ) {
-        const d = r.nextSibling;
-        $.insertBefore(r, i), r = d;
+    if (A !== r || a) {
+      let s = t._$AA;
+      for (; s !== A; ) {
+        const d = s.nextSibling;
+        $.insertBefore(s, r), s = d;
       }
     }
   }
   return t;
-}, v = (e, A, t = e) => (e._$AI(A, t), e), c = {}, p = (e, A = c) => e._$AH = A, B = (e) => e._$AH, P = (e) => {
+}, u = (e, i, t = e) => (e._$AI(i, t), e), n = {}, g = (e, i = n) => e._$AH = i, B = (e) => e._$AH, P = (e) => {
   e._$AR(), e._$AA.remove();
 };
 export {
   B as getCommittedValue,
-  u as insertPart,
+  p as insertPart,
+  v as isSingleExpression,
   P as removePart,
-  v as setChildPartValue,
-  p as setCommittedValue
+  u as setChildPartValue,
+  g as setCommittedValue
 };

package/dist/esm/node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directive.js

@@ -3,8 +3,8 @@
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const s = { ATTRIBUTE: 1, CHILD: 2 }, $ = (i) => (...t) => ({ _$litDirective$: i, values: t });
-class _ {
+const s = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4 }, _ = (i) => (...t) => ({ _$litDirective$: i, values: t });
+class $ {
   constructor(t) {
   }
   get _$AU() {
@@ -21,7 +21,7 @@ class _ {
   }
 }
 export {
-  _ as Directive,
+  $ as Directive,
   s as PartType,
-  $ as directive
+  _ as directive
 };

package/dist/esm/node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/live.js

@@ -0,0 +1,30 @@
+import { noChange as i, nothing as o } from "../lit-html.js";
+import { directive as a, Directive as T, PartType as r } from "../directive.js";
+import { isSingleExpression as l, setCommittedValue as p } from "../directive-helpers.js";
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const c = a(class extends T {
+  constructor(e) {
+    if (super(e), e.type !== r.PROPERTY && e.type !== r.ATTRIBUTE && e.type !== r.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
+    if (!l(e)) throw Error("`live` bindings can only contain a single expression");
+  }
+  render(e) {
+    return e;
+  }
+  update(e, [t]) {
+    if (t === i || t === o) return t;
+    const n = e.element, s = e.name;
+    if (e.type === r.PROPERTY) {
+      if (t === n[s]) return i;
+    } else if (e.type === r.BOOLEAN_ATTRIBUTE) {
+      if (!!t === n.hasAttribute(s)) return i;
+    } else if (e.type === r.ATTRIBUTE && n.getAttribute(s) === t + "") return i;
+    return p(e), t;
+  }
+});
+export {
+  c as live
+};

package/dist/esm/utils/IconsManager.js

@@ -25,7 +25,7 @@ class l {
     }), f.subscribe("theme", this.handleChangeTheme);
   }
 }
-const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.62"), h = globalThis;
+const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.63"), h = globalThis;
 let i = h[c];
 i || (i = new l(), Object.defineProperty(h, c, {
   value: i,

package/dist/esm/utils/PubSub.js

@@ -18,7 +18,7 @@ class e {
     });
   }
 }
-const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.62"), t = globalThis;
+const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.63"), t = globalThis;
 let b = t[u];
 b || (b = new e(), Object.defineProperty(t, u, {
   value: b,

package/dist/esm/utils/StylesRegistry/StylesRegistry.js

@@ -1,3 +1,5 @@
+import { concurrencyLimit as o } from "../concurrencyLimit.js";
+const h = o(20);
 class s {
   constructor() {
     this.stylePromises = /* @__PURE__ */ new Map(), this.getStyles = async ({
@@ -5,10 +7,10 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const r = `https://ds-assets.cupra.com/2.0.0-canary.62/styles/${t}/components/${e}.css`, c = this.getCachedStyleSheetPromise({ url: r });
-      if (c) return c;
-      const i = this.fetchStyle({ url: r }).then((n) => (n || this.stylePromises.delete(r), n));
-      return this.stylePromises.set(r, i), this.stylePromises.get(r);
+      const c = `https://ds-assets.cupra.com/2.0.0-canary.63/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      if (r) return r;
+      const i = h(() => this.fetchStyle({ url: c })).then((n) => (n || this.stylePromises.delete(c), n));
+      return this.stylePromises.set(c, i), this.stylePromises.get(c);
     };
   }
   async fetchStyle({ url: e }) {
@@ -27,7 +29,7 @@ class s {
     return s.instance || (s.instance = new s()), s.instance;
   }
 }
-const a = s.getInstance();
+const y = s.getInstance();
 export {
-  a as stylesRegistry
+  y as stylesRegistry
 };

package/dist/esm/utils/concurrencyLimit.js

@@ -0,0 +1,32 @@
+function c(r) {
+  let t = 0;
+  const e = [];
+  function u() {
+    if (t < r) {
+      t++;
+      return;
+    }
+    return new Promise((n) => {
+      e.push(() => {
+        t++, n();
+      });
+    });
+  }
+  function o() {
+    t--;
+    const n = e.shift();
+    n && n();
+  }
+  return async (n) => {
+    const i = u();
+    i && await i;
+    try {
+      return await n();
+    } finally {
+      o();
+    }
+  };
+}
+export {
+  c as concurrencyLimit
+};

package/dist/esm/utils/cssWithTokens.js

@@ -3,7 +3,7 @@ import "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 function x(t, ...r) {
-  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-62"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-63"), i = n(e);
   return o`${i}`;
 }
 export {

package/dist/esm/utils/htmlWithTokens.js

@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 function x(t, ...r) {
-  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-62"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-63"), e = i(o);
   return n`${e}`;
 }
 export {

package/dist/types/components/ds-select/ds-select.d.ts

@@ -7,6 +7,7 @@ export declare class DsSelect extends UiKitElement {
     mode: DsSelectAttrs['mode'];
     size: DsSelectAttrs['size'];
     variant: DsSelectAttrs['variant'];
+    readonly: DsSelectAttrs['readonly'];
     private _open;
     private nativeSelect;
     private nativeLabel;
@@ -44,6 +45,7 @@ export declare class DsSelect extends UiKitElement {
         container: boolean;
         open: boolean;
         disabled: boolean;
+        readonly: boolean;
         filled: boolean;
         invalid: boolean;
         error: boolean;

package/dist/types/components/ds-select/ds-select.types.d.ts

@@ -3,4 +3,5 @@ export interface DsSelectAttrs extends CommonAttrs {
     mode?: 'dark' | 'light';
     size?: 'medium' | 'small';
     variant?: 'primary' | 'secondary' | (string & {});
+    readonly?: boolean;
 }

package/dist/types/components/ds-slider/ds-slider.d.ts

@@ -11,6 +11,8 @@ export declare class DsSlider extends DsSlider_base {
     step: DsSliderAttrs['step'];
     initialValueMin: DsSliderAttrs['initial-value-min'];
     initialValueMax: DsSliderAttrs['initial-value-max'];
+    valueMin: DsSliderAttrs['value-min'];
+    valueMax: DsSliderAttrs['value-max'];
     mode: DsSliderAttrs['mode'];
     locale: DsSliderAttrs['locale'];
     localeMatcher: DsSliderAttrs['locale-matcher'];
@@ -30,13 +32,16 @@ export declare class DsSlider extends DsSlider_base {
     inputMinAriaLabel: DsSliderAttrs['input-min-aria-label'];
     inputMaxAriaLabel: DsSliderAttrs['input-max-aria-label'];
     protected track: HTMLInputElement;
-    protected valueMin: number;
-    protected valueMax: number;
+    protected _valueMin: number;
+    protected _valueMax: number;
     protected activeThumb: 'min' | 'max' | null;
     protected animationFrameRequest: number;
     protected editingField?: 'min' | 'max' | null;
     protected keyboardMode: boolean;
     static styles: import("lit").CSSResult[];
+    protected get isRange(): boolean;
+    private isControlled;
+    protected willUpdate(changedProps: PropertyValues): void;
     disconnectedCallback(): void;
     protected firstUpdated(changedProps: PropertyValues): void;
     protected getTrackPct(value: number): number;

package/dist/types/components/ds-slider/ds-slider.types.d.ts

@@ -29,14 +29,29 @@ type SliderCustomUnit = Omit<NoUnit, 'style'> & {
     'unit-symbol': string;
 };
 type SliderUnitStyle = SliderCurrency | SliderDecimal | SliderPercent | SliderUnit | SliderNoUnit | SliderCustomUnit;
+type UncontrolledMin = {
+    'initial-value-min'?: number;
+    'value-min'?: never;
+};
+type ControlledMin = {
+    'initial-value-min'?: never;
+    'value-min'?: number;
+};
+type UncontrolledMax = {
+    'initial-value-max'?: number;
+    'value-max'?: never;
+};
+type ControlledMax = {
+    'initial-value-max'?: never;
+    'value-max'?: number;
+};
+type SliderValueProps = (UncontrolledMin | ControlledMin) & (UncontrolledMax | ControlledMax);
 export type DsSliderAttrs = CommonAttrs & {
     min?: number;
     max?: number;
     'min-label'?: string;
     'max-label'?: string;
     step?: number;
-    'initial-value-min'?: number;
-    'initial-value-max'?: number;
     mode?: 'dark' | 'light';
     size?: Size | ResponsiveSize;
     disabled?: boolean;
@@ -51,5 +66,5 @@ export type DsSliderAttrs = CommonAttrs & {
     'use-grouping'?: 'auto' | boolean;
     'input-min-aria-label'?: string;
     'input-max-aria-label'?: string;
-} & SliderUnitStyle;
+} & SliderValueProps & SliderUnitStyle;
 export {};

package/dist/types/components/ds-text-input/ds-text-input.d.ts

@@ -9,6 +9,7 @@ export declare class DsTextInput extends DsTextInput_base {
     helperText: DsTextInputAttrs['helper-text'];
     forcedError: DsTextInputAttrs['forced-error'];
     invalidError: DsTextInputAttrs['invalid-error'];
+    readonlyText: DsTextInputAttrs['readonly-text'];
     dataAriaLabelRemoveButton: DsTextInputAttrs['data-aria-label-remove-button'];
     protected handleClickIcon: () => void;
     private get classes();
@@ -17,6 +18,7 @@ export declare class DsTextInput extends DsTextInput_base {
     protected get lengthTemplate(): typeof nothing | import("lit").TemplateResult<1>;
     protected get helperTextTemplate(): typeof nothing | import("lit").TemplateResult<1>;
     protected get forcedErrorTemplate(): typeof nothing | import("lit").TemplateResult<1>;
+    protected get readonlyTextTemplate(): typeof nothing | import("lit").TemplateResult<1>;
     protected get invalidErrorTemplate(): typeof nothing | import("lit").TemplateResult<1>;
 }
 export {};

package/dist/types/components/ds-text-input/ds-text-input.types.d.ts

@@ -4,5 +4,6 @@ export type DsTextInputAttrs = {
     'helper-text'?: string;
     'forced-error'?: string;
     'invalid-error'?: string;
+    'readonly-text'?: string;
     'data-aria-label-remove-button'?: string;
 } & CommonAttrs;

package/dist/types/components/ds-textarea/ds-textarea.d.ts

@@ -9,6 +9,7 @@ export declare class DsTextarea extends DsTextarea_base {
     helperText: DsTextareaAttrs['helper-text'];
     forcedError: DsTextareaAttrs['forced-error'];
     invalidError: DsTextareaAttrs['invalid-error'];
+    readonlyText: DsTextareaAttrs['readonly-text'];
     mode: DsTextareaAttrs['mode'];
     protected onInputReady(nativeInput: HTMLInputElement | HTMLTextAreaElement): void;
     private get classes();
@@ -16,6 +17,7 @@ export declare class DsTextarea extends DsTextarea_base {
     protected get lengthTemplate(): typeof nothing | import("lit").TemplateResult<1>;
     protected get helperTextTemplate(): typeof nothing | import("lit").TemplateResult<1>;
     protected get forcedErrorTemplate(): typeof nothing | import("lit").TemplateResult<1>;
+    protected get readonlyTextTemplate(): typeof nothing | import("lit").TemplateResult<1>;
     protected get invalidErrorTemplate(): typeof nothing | import("lit").TemplateResult<1>;
 }
 export {};

package/dist/types/components/ds-textarea/ds-textarea.types.d.ts

@@ -8,6 +8,7 @@ export type DsTextareaAttrs = {
     'helper-text'?: string;
     'forced-error'?: string;
     'invalid-error'?: string;
+    'readonly-text'?: string;
     mode?: 'dark' | 'light';
 } & CommonAttrs;
 export {};

package/dist/types/mixins/inputStatesMixin.d.ts

@@ -8,6 +8,7 @@ export interface InputStatesInterface {
         invalid: boolean;
         filled: boolean;
         disabled: boolean;
+        readonly: boolean;
     };
     nativeInput: HTMLInputElement | HTMLTextAreaElement | undefined;
 }

package/dist/types/utils/concurrencyLimit.d.ts

@@ -0,0 +1,4 @@
+type Callback<T> = () => Promise<T>;
+type LimitedPromises = <T>(callback: Callback<T>) => Promise<T>;
+export declare function concurrencyLimit(maxConcurrent: number): LimitedPromises;
+export {};

package/dist/types/utils/concurrencyLimit.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-react/cjs/components/ds-select/ds-select.cjs

@@ -1,13 +1,14 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../base/UiKitElement.cjs"),y=require("../../decorators/customUiKitElement.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const r=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const h=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),o=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),b=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),p=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs"),u=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),S=require("./controllers/SelectKeyboardController.cjs"),O=require("./styles/common.styles.cjs");var f=Object.defineProperty,g=Object.getOwnPropertyDescriptor,n=(c,e,t,i)=>{for(var s=i>1?void 0:i?g(e,t):e,a=c.length-1,l;a>=0;a--)(l=c[a])&&(s=(i?l(e,t,s):l(s))||s);return i&&s&&f(e,t,s),s};exports.DsSelect=class extends m.UiKitElement{constructor(){super(...arguments),this.mode="light",this.size="medium",this.variant="primary",this._open=!1,this.nativeSelect=null,this.nativeLabel=null,this.nativeOptions=[],this.activeIndex=-1,this.hasForcedError=!1,this.handleMutations=e=>{e.forEach(t=>{t.type==="childList"&&this.syncNativeOptions()}),this.requestUpdate()},this.syncNativeOptions=()=>{this.nativeOptions=Array.from(this.nativeSelect.options)},this.handleOpen=()=>{this._open=!0,this.activeIndex=this.findSelectedOptionIndex(),this.focusDisplaySelect()},this.handleClose=()=>{this._open=!1},this.handleClickDisplaySelect=()=>{this._open?this.handleClose():this.handleOpen()},this.handleKeydown=e=>{this._open?S.SelectKeyboardController.handleKeydownWhenOpen(e,{commit:()=>this.commitSelection(),navigateNext:()=>this.advanceSelection(1),navigatePrev:()=>this.advanceSelection(-1),navigateFirst:()=>this.advanceToFirst(),navigateLast:()=>this.advanceToLast(),close:this.handleClose}):S.SelectKeyboardController.handleKeydownWhenClosed(e,{open:this.handleOpen})}}firstUpdated(){this.initializeNativeSelect()}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}initializeNativeSelect(){var e,t;this.nativeSelect=(e=this.nativeSelects)==null?void 0:e[0],this.nativeLabel=(t=this.nativeLabels)==null?void 0:t[0],this.nativeSelect&&(this.syncNativeOptions(),this.setupNativeElementsAttributes(),this.setupEventListeners())}handleChangeForcedError(){var e;this.hasForcedError=((e=this.forcedError)==null?void 0:e.length)>0}setupNativeElementsAttributes(){this.nativeSelect.setAttribute("aria-hidden","true"),this.nativeSelect.setAttribute("tabindex","-1")}setupEventListeners(){this.nativeSelect.addEventListener("change",this.syncNativeOptions),this.observer=new MutationObserver(this.handleMutations),this.observer.observe(this.nativeSelect,{childList:!0,subtree:!0,attributes:!0})}cleanup(){var e,t;(e=this.nativeSelect)==null||e.removeEventListener("change",this.syncNativeOptions),(t=this.observer)==null||t.disconnect()}findSelectedOptionIndex(){var t;const e=this.nativeOptions.findIndex(i=>i.value===this.nativeSelect.value);return(t=this.nativeOptions[e])!=null&&t.hidden?this.nativeOptions.findIndex(i=>!i.hidden):e}focusDisplaySelect(){this.updateComplete.then(()=>{var e;(e=this.displaySelect)==null||e.focus()})}advanceToFirst(){if(this.nativeOptions.length){const t=this.nativeOptions.findIndex(i=>!i.hidden);this.advanceSelection(t-this.activeIndex)}}advanceToLast(){if(this.nativeOptions.length){let t=-1;for(let i=this.nativeOptions.length-1;i>=0;i--)if(!this.nativeOptions[i].hidden){t=i;break}this.advanceSelection(t-this.activeIndex)}}advanceSelection(e){const t=this.nativeOptions.length;this.activeIndex=(this.activeIndex+e+t)%t,this.shouldSkipHiddenOption()?this.advanceSelection(Math.sign(e)):this.scrollToActive(this.nativeOptions[this.activeIndex])}shouldSkipHiddenOption(){return this.nativeOptions.some(t=>!t.hidden)&&this.nativeOptions[this.activeIndex].hidden}scrollToActive(e){var t;(t=e==null?void 0:e.scrollIntoView)==null||t.call(e,{block:"nearest"})}commitSelection(){this.handleClose();const e=this.nativeOptions[this.activeIndex];this.nativeSelect&&(e!=null&&e.value)&&this.updateNativeSelectValue(e.value)}updateNativeSelectValue(e){this.nativeSelect.value=e,["input","change"].forEach(t=>this.nativeSelect.dispatchEvent(new Event(t,{bubbles:!0,composed:!0})))}get containerClasses(){var e,t,i,s;return{container:!0,open:this._open,disabled:!!((e=this.nativeSelect)!=null&&e.disabled),filled:!!((i=(t=this.nativeOptions)==null?void 0:t.find(a=>a.selected&&!a.hidden))!=null&&i.selected),invalid:!((s=this.nativeSelect)!=null&&s.validity.valid),error:this.hasForcedError,[this.size]:!!this.size,[this.mode]:!!this.mode,[this.variant]:!!this.variant}}set open(e){this._open=e}get open(){return this._open}render(){return r.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("../base/UiKitElement.cjs"),m=require("../../decorators/customUiKitElement.cjs"),b=require("../../utils/booleanConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const r=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const c=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),o=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),O=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),p=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs"),u=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),S=require("./controllers/SelectKeyboardController.cjs"),f=require("./styles/common.styles.cjs");var g=Object.defineProperty,C=Object.getOwnPropertyDescriptor,n=(d,e,t,i)=>{for(var s=i>1?void 0:i?C(e,t):e,a=d.length-1,l;a>=0;a--)(l=d[a])&&(s=(i?l(e,t,s):l(s))||s);return i&&s&&g(e,t,s),s};exports.DsSelect=class extends y.UiKitElement{constructor(){super(...arguments),this.mode="light",this.size="medium",this.variant="primary",this.readonly=!1,this._open=!1,this.nativeSelect=null,this.nativeLabel=null,this.nativeOptions=[],this.activeIndex=-1,this.hasForcedError=!1,this.handleMutations=e=>{e.forEach(t=>{t.type==="childList"&&this.syncNativeOptions()}),this.requestUpdate()},this.syncNativeOptions=()=>{this.nativeOptions=Array.from(this.nativeSelect.options)},this.handleOpen=()=>{this.readonly||(this._open=!0,this.activeIndex=this.findSelectedOptionIndex(),this.focusDisplaySelect())},this.handleClose=()=>{this._open=!1},this.handleClickDisplaySelect=()=>{this._open?this.handleClose():this.handleOpen()},this.handleKeydown=e=>{this._open?S.SelectKeyboardController.handleKeydownWhenOpen(e,{commit:()=>this.commitSelection(),navigateNext:()=>this.advanceSelection(1),navigatePrev:()=>this.advanceSelection(-1),navigateFirst:()=>this.advanceToFirst(),navigateLast:()=>this.advanceToLast(),close:this.handleClose}):S.SelectKeyboardController.handleKeydownWhenClosed(e,{open:this.handleOpen})}}firstUpdated(){this.initializeNativeSelect()}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}initializeNativeSelect(){var e,t;this.nativeSelect=(e=this.nativeSelects)==null?void 0:e[0],this.nativeLabel=(t=this.nativeLabels)==null?void 0:t[0],this.nativeSelect&&(this.syncNativeOptions(),this.setupNativeElementsAttributes(),this.setupEventListeners())}handleChangeForcedError(){var e;this.hasForcedError=((e=this.forcedError)==null?void 0:e.length)>0}setupNativeElementsAttributes(){this.nativeSelect.setAttribute("aria-hidden","true"),this.nativeSelect.setAttribute("tabindex","-1")}setupEventListeners(){this.nativeSelect.addEventListener("change",this.syncNativeOptions),this.observer=new MutationObserver(this.handleMutations),this.observer.observe(this.nativeSelect,{childList:!0,subtree:!0,attributes:!0})}cleanup(){var e,t;(e=this.nativeSelect)==null||e.removeEventListener("change",this.syncNativeOptions),(t=this.observer)==null||t.disconnect()}findSelectedOptionIndex(){var t;const e=this.nativeOptions.findIndex(i=>i.value===this.nativeSelect.value);return(t=this.nativeOptions[e])!=null&&t.hidden?this.nativeOptions.findIndex(i=>!i.hidden):e}focusDisplaySelect(){this.updateComplete.then(()=>{var e;(e=this.displaySelect)==null||e.focus()})}advanceToFirst(){if(this.nativeOptions.length){const t=this.nativeOptions.findIndex(i=>!i.hidden);this.advanceSelection(t-this.activeIndex)}}advanceToLast(){if(this.nativeOptions.length){let t=-1;for(let i=this.nativeOptions.length-1;i>=0;i--)if(!this.nativeOptions[i].hidden){t=i;break}this.advanceSelection(t-this.activeIndex)}}advanceSelection(e){const t=this.nativeOptions.length;this.activeIndex=(this.activeIndex+e+t)%t,this.shouldSkipHiddenOption()?this.advanceSelection(Math.sign(e)):this.scrollToActive(this.nativeOptions[this.activeIndex])}shouldSkipHiddenOption(){return this.nativeOptions.some(t=>!t.hidden)&&this.nativeOptions[this.activeIndex].hidden}scrollToActive(e){var t;(t=e==null?void 0:e.scrollIntoView)==null||t.call(e,{block:"nearest"})}commitSelection(){this.handleClose();const e=this.nativeOptions[this.activeIndex];this.nativeSelect&&(e!=null&&e.value)&&this.updateNativeSelectValue(e.value)}updateNativeSelectValue(e){this.nativeSelect.value=e,["input","change"].forEach(t=>this.nativeSelect.dispatchEvent(new Event(t,{bubbles:!0,composed:!0})))}get containerClasses(){var e,t,i,s;return{container:!0,open:this._open,disabled:!!((e=this.nativeSelect)!=null&&e.disabled),readonly:!!this.readonly,filled:!!((i=(t=this.nativeOptions)==null?void 0:t.find(a=>a.selected&&!a.hidden))!=null&&i.selected),invalid:!((s=this.nativeSelect)!=null&&s.validity.valid),error:this.hasForcedError,[this.size]:!!this.size,[this.mode]:!!this.mode,[this.variant]:!!this.variant}}set open(e){this._open=e}get open(){return this._open}render(){return r.html`
             <slot @slotchange=${this.initializeNativeSelect}></slot>
             <div class=${u.classMap(this.containerClasses)}>
                 ${this.displaySelectTemplate}
                 ${this.optionsContainerTemplate}
                 <slot name="helper-text"></slot>
+                <slot name="readonly-text"></slot>
                 <slot name="forced-error" @slotchange=${this.handleChangeForcedError}></slot>
                 <slot name="invalid-error"></slot>
             </div>
-        `}get iconTemplate(){return this.componentFactory.createIcon({class:"icon","icon-name":this._open?"arrow-up":"arrow-down"})}get displaySelectTemplate(){var i,s,a;const e=this.nativeOptions.find(l=>l.selected),t=(i=Array.from((e==null?void 0:e.childNodes)||[]))==null?void 0:i.map(l=>{const v=l.cloneNode(!0);if(l.nodeType!==3)return v;if(l.textContent.trim()==="")return"";const d=document.createElement("span");return d.classList.add("text"),d.appendChild(v),d});return r.html`
+        `}get iconTemplate(){return this.componentFactory.createIcon({class:"icon","icon-name":this._open?"arrow-up":"arrow-down"})}get displaySelectTemplate(){var i,s,a;const e=this.nativeOptions.find(l=>l.selected),t=(i=Array.from((e==null?void 0:e.childNodes)||[]))==null?void 0:i.map(l=>{const v=l.cloneNode(!0);if(l.nodeType!==3)return v;if(l.textContent.trim()==="")return"";const h=document.createElement("span");return h.classList.add("text"),h.appendChild(v),h});return r.html`
             <div class="select-outline">
                 <div class="select-container">
                     <label id="display-label" class="label">${(s=this.nativeLabel)==null?void 0:s.innerText}</label>
@@ -44,4 +45,4 @@
             >
                 ${i}
             </div>
-        `}};exports.DsSelect.styles=[O.commonStyles];exports.DsSelect.ARIA_OPTION_PREFIX="option-";n([h.property({type:String})],exports.DsSelect.prototype,"mode",2);n([h.property({type:String})],exports.DsSelect.prototype,"size",2);n([h.property({type:String})],exports.DsSelect.prototype,"variant",2);n([o.state()],exports.DsSelect.prototype,"_open",2);n([o.state()],exports.DsSelect.prototype,"nativeSelect",2);n([o.state()],exports.DsSelect.prototype,"nativeLabel",2);n([o.state()],exports.DsSelect.prototype,"nativeOptions",2);n([o.state()],exports.DsSelect.prototype,"activeIndex",2);n([o.state()],exports.DsSelect.prototype,"hasForcedError",2);n([p.queryAssignedElements({slot:"",selector:"select",flatten:!0})],exports.DsSelect.prototype,"nativeSelects",2);n([p.queryAssignedElements({slot:"",selector:"label",flatten:!0})],exports.DsSelect.prototype,"nativeLabels",2);n([p.queryAssignedElements({slot:"forced-error",flatten:!0})],exports.DsSelect.prototype,"forcedError",2);n([b.query(".select")],exports.DsSelect.prototype,"displaySelect",2);exports.DsSelect=n([y.customUiKitElement("ds-select")],exports.DsSelect);
+        `}};exports.DsSelect.styles=[f.commonStyles];exports.DsSelect.ARIA_OPTION_PREFIX="option-";n([c.property({type:String})],exports.DsSelect.prototype,"mode",2);n([c.property({type:String})],exports.DsSelect.prototype,"size",2);n([c.property({type:String})],exports.DsSelect.prototype,"variant",2);n([c.property({type:Boolean,converter:b.booleanConverter,reflect:!0})],exports.DsSelect.prototype,"readonly",2);n([o.state()],exports.DsSelect.prototype,"_open",2);n([o.state()],exports.DsSelect.prototype,"nativeSelect",2);n([o.state()],exports.DsSelect.prototype,"nativeLabel",2);n([o.state()],exports.DsSelect.prototype,"nativeOptions",2);n([o.state()],exports.DsSelect.prototype,"activeIndex",2);n([o.state()],exports.DsSelect.prototype,"hasForcedError",2);n([p.queryAssignedElements({slot:"",selector:"select",flatten:!0})],exports.DsSelect.prototype,"nativeSelects",2);n([p.queryAssignedElements({slot:"",selector:"label",flatten:!0})],exports.DsSelect.prototype,"nativeLabels",2);n([p.queryAssignedElements({slot:"forced-error",flatten:!0})],exports.DsSelect.prototype,"forcedError",2);n([O.query(".select")],exports.DsSelect.prototype,"displaySelect",2);exports.DsSelect=n([m.customUiKitElement("ds-select")],exports.DsSelect);

package/dist-react/cjs/components/ds-slider/ds-slider.cjs

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("../base/UiKitElement.cjs"),c=require("./utils/getStepValue/getStepValue.cjs"),D=require("./utils/roundToDecimals/roundToDecimals.cjs"),V=require("../../decorators/customUiKitElement.cjs"),$=require("../../mixins/ViewportMixin.cjs"),T=require("../../utils/booleanConverter.cjs"),L=require("../../utils/formatNumber/formatNumber.cjs"),P=require("../../utils/htmlWithTokens.cjs"),k=require("../../utils/objectConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const o=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),m=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),E=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),q=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),d=require("./styles/common.styles.cjs");var F=Object.defineProperty,N=Object.getOwnPropertyDescriptor,n=(u,t,e,i)=>{for(var s=i>1?void 0:i?N(t,e):t,r=u.length-1,l;r>=0;r--)(l=u[r])&&(s=(i?l(t,e,s):l(s))||s);return i&&s&&F(t,e,s),s};exports.DsSlider=class extends $.ViewportMixin(w.UiKitElement){constructor(){super(...arguments),this.min=0,this.max=100,this.minLabel="",this.maxLabel="",this.step=1,this.initialValueMin=0,this.mode="light",this.locale=void 0,this.localeMatcher="lookup",this.useGrouping=!0,this.minimumIntegerDigits=1,this.minimumFractionDigits=0,this.maximumFractionDigits=3,this.size="medium",this.disabled=!1,this.keyboardMode=!1,this.getNewValue=t=>{const{width:e,left:i}=this.track.getBoundingClientRect(),s=t.type.indexOf("mouse")!==-1?t.clientX:t.touches[0].clientX,l=Math.min(Math.max(0,s-i),e)*100/e;return this.min+l*(this.max-this.min)/100},this.setActiveThumb=t=>{const e=this.getNewValue(t);typeof this.valueMax!="number"||e<=this.valueMin?this.activeThumb="min":e>=this.valueMax?this.activeThumb="max":e-this.valueMin<this.valueMax-e?this.activeThumb="min":this.activeThumb="max"},this.handleMouseMove=t=>{this.animationFrameRequest&&cancelAnimationFrame(this.animationFrameRequest),this.animationFrameRequest=requestAnimationFrame(()=>{const e=this.getNewValue(t),i=this.activeThumb??"min",{stepValue:s}=c.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:e,role:i,currentValues:{1:this.valueMin,...typeof this.valueMax=="number"?{2:this.valueMax}:{}}});this.handleChange({value:s,role:i})})},this.handleMouseDown=t=>{var e;this.disabled||((e=t==null?void 0:t.preventDefault)==null||e.call(t),this.setActiveThumb(t),this.handleMouseMove(t),window==null||window.addEventListener("mousemove",this.handleMouseMove),window==null||window.addEventListener("touchmove",this.handleMouseMove),window==null||window.addEventListener("pointerup",this.handlePointerUp))},this.handlePointerUp=()=>{window==null||window.removeEventListener("mousemove",this.handleMouseMove),window==null||window.removeEventListener("touchmove",this.handleMouseMove),window==null||window.removeEventListener("pointerup",this.handlePointerUp)},this.handleKeydown=()=>{this.keyboardMode=!0},this.handlePointerOrMouseDown=()=>{this.keyboardMode=!1},this.onInputFocus=(t,e)=>{const i=t.currentTarget,s=e===1?"min":"max";this.editingField=s,i.type="number",i.step=String(this.step??1);const r=s==="min"?this.valueMin:this.valueMax;i.value=String(r??""),this.keyboardMode&&i.classList.add("focus-visible")},this.commitInputValue=(t,e)=>{const i=t.currentTarget,s=e===1?"min":"max",{stepValue:r}=c.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:Number(i.value),role:s,currentValues:{1:this.valueMin,...typeof this.valueMax=="number"?{2:this.valueMax}:{}}});this.handleChange({value:r,role:s}),i.value=String(r)},this.onInputBlur=t=>{var i;this.editingField=void 0;const e=t.currentTarget;(i=e==null?void 0:e.classList)==null||i.remove("focus-visible")},this.onInputKeyDown=(t,e)=>{t.key==="Enter"&&(t.preventDefault(),this.commitInputValue(t,e))},this.onThumbKeyDown=(t,e)=>{if(!this.disabled&&(t.key==="ArrowLeft"||t.key==="ArrowRight")){t.preventDefault();const i=this.step??1,s=t.key==="ArrowLeft"?-i:i,r=e===1?"min":"max",p=(r==="min"?this.valueMin:this.valueMax)+s,{stepValue:y}=c.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:p,role:r,currentValues:{1:this.valueMin,...typeof this.valueMax=="number"?{2:this.valueMax}:{}}});this.handleChange({value:y,role:r})}}}disconnectedCallback(){super.disconnectedCallback(),window==null||window.removeEventListener("mousemove",this.handleMouseMove),window==null||window.removeEventListener("touchmove",this.handleMouseMove),window==null||window.removeEventListener("pointerup",this.handlePointerUp),window==null||window.removeEventListener("keydown",this.handleKeydown),window==null||window.removeEventListener("mousedown",this.handlePointerOrMouseDown),window==null||window.removeEventListener("pointerdown",this.handlePointerOrMouseDown)}firstUpdated(t){super.firstUpdated(t),window==null||window.addEventListener("keydown",this.handleKeydown),window==null||window.addEventListener("mousedown",this.handlePointerOrMouseDown),window==null||window.addEventListener("pointerdown",this.handlePointerOrMouseDown),["min","max"].forEach(i=>{const r=this[i==="min"?"initialValueMin":"initialValueMax"];if(typeof r!="number")return;const{stepValue:l}=c.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:r,role:i,currentValues:{1:this.valueMin,...typeof this.valueMax=="number"?{2:this.valueMax}:{}}});this[i==="min"?"valueMin":"valueMax"]!==l&&this.handleChange({value:l,role:i})})}getTrackPct(t){const e=this.max-this.min;return e===0?0:(t-this.min)/e*100}handleChange({value:t,role:e}){const i=D.roundToDecimals({value:t,fractionDigits:this.maximumFractionDigits}),s=e==="min"?"valueMin":"valueMax";this[s]!==i&&(this[s]=i,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{role:e,value:i}})))}formatNumber(t){const e={value:t,locale:this.locale,...this.unitStyle&&{style:this.unitStyle},...this.currency&&{currency:this.currency},...this.unit&&{unit:this.unit},localeMatcher:this.localeMatcher,minimumIntegerDigits:this.minimumIntegerDigits,minimumFractionDigits:this.minimumFractionDigits,maximumFractionDigits:this.maximumFractionDigits,thousandSeparator:this.thousandSeparator,fractionSeparator:this.fractionSeparator,useGrouping:this.useGrouping};return L.formatNumber(e)}get rangeValuesTemplates(){const{formattedValue:t,unitSymbol:e,unitSymbolPosition:i}=this.formatNumber(this.min),s=this.unitSymbol??e,r=this.unitSymbolPosition??i,{formattedValue:l}=this.formatNumber(this.max);return o.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("../base/UiKitElement.cjs"),c=require("./utils/getStepValue/getStepValue.cjs"),D=require("./utils/roundToDecimals/roundToDecimals.cjs"),$=require("../../decorators/customUiKitElement.cjs"),V=require("../../mixins/ViewportMixin.cjs"),_=require("../../utils/booleanConverter.cjs"),T=require("../../utils/formatNumber/formatNumber.cjs"),L=require("../../utils/htmlWithTokens.cjs"),P=require("../../utils/objectConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const o=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),h=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),k=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),q=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),E=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/live.cjs"),d=require("./styles/common.styles.cjs");var F=Object.defineProperty,C=Object.getOwnPropertyDescriptor,s=(u,t,e,i)=>{for(var n=i>1?void 0:i?C(t,e):t,r=u.length-1,l;r>=0;r--)(l=u[r])&&(n=(i?l(t,e,n):l(n))||n);return i&&n&&F(t,e,n),n};exports.DsSlider=class extends V.ViewportMixin(w.UiKitElement){constructor(){super(...arguments),this.min=0,this.max=100,this.minLabel="",this.maxLabel="",this.step=1,this.initialValueMin=0,this.mode="light",this.locale=void 0,this.localeMatcher="lookup",this.useGrouping=!0,this.minimumIntegerDigits=1,this.minimumFractionDigits=0,this.maximumFractionDigits=3,this.size="medium",this.disabled=!1,this.keyboardMode=!1,this.getNewValue=t=>{const{width:e,left:i}=this.track.getBoundingClientRect(),n=t.type.indexOf("mouse")!==-1?t.clientX:t.touches[0].clientX,l=Math.min(Math.max(0,n-i),e)*100/e;return this.min+l*(this.max-this.min)/100},this.setActiveThumb=t=>{const e=this.getNewValue(t);typeof this._valueMax!="number"||e<=this._valueMin?this.activeThumb="min":e>=this._valueMax?this.activeThumb="max":e-this._valueMin<this._valueMax-e?this.activeThumb="min":this.activeThumb="max"},this.handleMouseMove=t=>{this.animationFrameRequest&&cancelAnimationFrame(this.animationFrameRequest),this.animationFrameRequest=requestAnimationFrame(()=>{const e=this.getNewValue(t),i=this.activeThumb??"min",{stepValue:n}=c.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:e,role:i,currentValues:{1:this._valueMin,...typeof this._valueMax=="number"?{2:this._valueMax}:{}}});this.handleChange({value:n,role:i})})},this.handleMouseDown=t=>{var e;this.disabled||((e=t==null?void 0:t.preventDefault)==null||e.call(t),this.setActiveThumb(t),this.handleMouseMove(t),window==null||window.addEventListener("mousemove",this.handleMouseMove),window==null||window.addEventListener("touchmove",this.handleMouseMove),window==null||window.addEventListener("pointerup",this.handlePointerUp))},this.handlePointerUp=()=>{window==null||window.removeEventListener("mousemove",this.handleMouseMove),window==null||window.removeEventListener("touchmove",this.handleMouseMove),window==null||window.removeEventListener("pointerup",this.handlePointerUp)},this.handleKeydown=()=>{this.keyboardMode=!0},this.handlePointerOrMouseDown=()=>{this.keyboardMode=!1},this.onInputFocus=(t,e)=>{const i=t.currentTarget,n=e===1?"min":"max";this.editingField=n,i.type="number",i.step=String(this.step??1);const r=n==="min"?this._valueMin:this._valueMax;i.value=String(r??""),this.keyboardMode&&i.classList.add("focus-visible")},this.commitInputValue=(t,e)=>{const i=t.currentTarget,n=e===1?"min":"max",{stepValue:r}=c.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:Number(i.value),role:n,currentValues:{1:this._valueMin,...typeof this._valueMax=="number"?{2:this._valueMax}:{}}});this.handleChange({value:r,role:n}),this.isControlled(n)||(i.value=String(r))},this.onInputBlur=t=>{var i;this.editingField=void 0;const e=t.currentTarget;(i=e==null?void 0:e.classList)==null||i.remove("focus-visible")},this.onInputKeyDown=(t,e)=>{t.key==="Enter"&&(t.preventDefault(),this.commitInputValue(t,e))},this.onThumbKeyDown=(t,e)=>{if(!this.disabled&&(t.key==="ArrowLeft"||t.key==="ArrowRight")){t.preventDefault();const i=this.step??1,n=t.key==="ArrowLeft"?-i:i,r=e===1?"min":"max",p=(r==="min"?this._valueMin:this._valueMax)+n,{stepValue:y}=c.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:p,role:r,currentValues:{1:this._valueMin,...typeof this._valueMax=="number"?{2:this._valueMax}:{}}});this.handleChange({value:y,role:r})}}}get isRange(){return typeof this.initialValueMax=="number"||typeof this.valueMax=="number"}isControlled(t){return typeof(t==="min"?this.valueMin:this.valueMax)=="number"}willUpdate(t){super.willUpdate(t),typeof this.valueMin=="number"&&(this._valueMin=this.valueMin),typeof this.valueMax=="number"&&(this._valueMax=this.valueMax)}disconnectedCallback(){super.disconnectedCallback(),window==null||window.removeEventListener("mousemove",this.handleMouseMove),window==null||window.removeEventListener("touchmove",this.handleMouseMove),window==null||window.removeEventListener("pointerup",this.handlePointerUp),window==null||window.removeEventListener("keydown",this.handleKeydown),window==null||window.removeEventListener("mousedown",this.handlePointerOrMouseDown),window==null||window.removeEventListener("pointerdown",this.handlePointerOrMouseDown)}firstUpdated(t){super.firstUpdated(t),window==null||window.addEventListener("keydown",this.handleKeydown),window==null||window.addEventListener("mousedown",this.handlePointerOrMouseDown),window==null||window.addEventListener("pointerdown",this.handlePointerOrMouseDown),["min","max"].forEach(i=>{if(this.isControlled(i))return;const r=this[i==="min"?"initialValueMin":"initialValueMax"];if(typeof r!="number")return;const{stepValue:l}=c.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:r,role:i,currentValues:{1:this._valueMin,...typeof this._valueMax=="number"?{2:this._valueMax}:{}}});this[i==="min"?"_valueMin":"_valueMax"]!==l&&this.handleChange({value:l,role:i})})}getTrackPct(t){const e=this.max-this.min;return e===0?0:(t-this.min)/e*100}handleChange({value:t,role:e}){const i=D.roundToDecimals({value:t,fractionDigits:this.maximumFractionDigits}),n=e==="min"?"_valueMin":"_valueMax";this[n]!==i&&(this.isControlled(e)||(this[n]=i),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{role:e,value:i}})))}formatNumber(t){const e={value:t,locale:this.locale,...this.unitStyle&&{style:this.unitStyle},...this.currency&&{currency:this.currency},...this.unit&&{unit:this.unit},localeMatcher:this.localeMatcher,minimumIntegerDigits:this.minimumIntegerDigits,minimumFractionDigits:this.minimumFractionDigits,maximumFractionDigits:this.maximumFractionDigits,thousandSeparator:this.thousandSeparator,fractionSeparator:this.fractionSeparator,useGrouping:this.useGrouping};return T.formatNumber(e)}get rangeValuesTemplates(){const{formattedValue:t,unitSymbol:e,unitSymbolPosition:i}=this.formatNumber(this.min),n=this.unitSymbol??e,r=this.unitSymbolPosition??i,{formattedValue:l}=this.formatNumber(this.max);return o.html`
             <div class="range-value-text">
                 ${this.minLabel?o.html`<span class="range-value-label">${this.minLabel}</span>`:o.nothing}
-                ${r==="left"?o.html`<span>${s}</span>`:o.nothing}
+                ${r==="left"?o.html`<span>${n}</span>`:o.nothing}
                 <span>${t}</span>
-                ${r==="right"?o.html`<span>${s}</span>`:o.nothing}
+                ${r==="right"?o.html`<span>${n}</span>`:o.nothing}
             </div>
             <div class="range-value-text">
                 ${this.maxLabel?o.html` <span class="range-value-label">${this.maxLabel}</span>`:o.nothing}
-                ${r==="left"?o.html`<span>${s}</span>`:o.nothing}
+                ${r==="left"?o.html`<span>${n}</span>`:o.nothing}
                 <span>${l}</span>
-                ${r==="right"?o.html`<span>${s}</span>`:o.nothing}
+                ${r==="right"?o.html`<span>${n}</span>`:o.nothing}
             </div>
-        `}getThumbTemplate(t){const e=t===1?"min":"max",i=e==="min"?this.valueMin:this.valueMax,{minLimit:s,maxLimit:r}=c.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:i,role:e,currentValues:{1:this.valueMin,...typeof this.valueMax=="number"?{2:this.valueMax}:{}}}),l=this.getTrackPct(i);return o.html`
+        `}getThumbTemplate(t){const e=t===1?"min":"max",i=e==="min"?this._valueMin:this._valueMax,{minLimit:n,maxLimit:r}=c.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:i,role:e,currentValues:{1:this._valueMin,...typeof this._valueMax=="number"?{2:this._valueMax}:{}}}),l=this.getTrackPct(i);return o.html`
             <style>
                 .thumb${t} {
                     left: ${l}%;
@@ -25,7 +25,7 @@
                 tabindex=${this.disabled?-1:0}
                 aria-disabled=${String(!!this.disabled)}
                 aria-label=${t===1?"Minumum value":"Maximum Value"}
-                aria-valuemin=${s}
+                aria-valuemin=${n}
                 aria-valuemax=${r}
                 aria-valuenow=${i}
             >
@@ -40,8 +40,8 @@
             </div>
         `}get thumbTemplates(){return o.html`
             ${this.getThumbTemplate(1)}
-            ${typeof this.initialValueMax=="number"?this.getThumbTemplate(2):o.nothing}
-        `}get trackRangeTemplate(){let t,e;return typeof this.initialValueMax!="number"?(t=0,e=this.getTrackPct(this.valueMin)):(t=this.getTrackPct(this.valueMin),e=this.getTrackPct(this.valueMax)-t),o.html`
+            ${this.isRange?this.getThumbTemplate(2):o.nothing}
+        `}get trackRangeTemplate(){let t,e;return this.isRange?(t=this.getTrackPct(this._valueMin),e=this.getTrackPct(this._valueMax)-t):(t=0,e=this.getTrackPct(this._valueMin)),o.html`
             <style>
                 .track-range {
                     left: ${t}%;
@@ -49,31 +49,31 @@
                 }
             </style>
             <div class="track-range" role="presentation"></div>
-        `}getInputTemplate(t){const e=t===1?"min":"max",i=this.editingField===e,s=e==="min"?this.valueMin:this.valueMax,{formattedValue:r,unitSymbol:l,unitSymbolPosition:p}=this.formatNumber(s),y=this.unitSymbolPosition??p,b=this.unitSymbol??l,g=b?y==="left"?`${b} ${r}`:`${r} ${b}`:`${r}`,S=i?"number":"text",v=i?String(s??""):g,M=t===1?this.inputMinAriaLabel:this.inputMaxAriaLabel,x=typeof this.initialValueMax=="number"?t===1?"Start value":"End value":"Value",f=M??x;return o.html`
+        `}getInputTemplate(t){const e=t===1?"min":"max",i=this.editingField===e,n=e==="min"?this._valueMin:this._valueMax,{formattedValue:r,unitSymbol:l,unitSymbolPosition:p}=this.formatNumber(n),y=this.unitSymbolPosition??p,b=this.unitSymbol??l,g=b?y==="left"?`${b} ${r}`:`${r} ${b}`:`${r}`,S=i?"number":"text",v=i?String(n??""):g,M=t===1?this.inputMinAriaLabel:this.inputMaxAriaLabel,f=this.isRange?t===1?"Start value":"End value":"Value",x=M??f;return o.html`
             <div class="input-wrapper">
                 <input
                     class="input-value input-value-${t}"
                     type=${S}
-                    .value=${v}
+                    .value=${E.live(v)}
                     step=${String(this.step??1)}
                     ?disabled=${this.disabled}
                     tabindex=${this.disabled?-1:0}
                     aria-disabled=${String(!!this.disabled)}
-                    aria-label=${f}
+                    aria-label=${x}
                     ?readonly=${this.disabled}
-                    @focus=${h=>this.onInputFocus(h,t)}
+                    @focus=${m=>this.onInputFocus(m,t)}
                     @blur=${this.onInputBlur}
-                    @change=${h=>this.commitInputValue(h,t)}
-                    @keydown=${h=>this.onInputKeyDown(h,t)}
+                    @change=${m=>this.commitInputValue(m,t)}
+                    @keydown=${m=>this.onInputKeyDown(m,t)}
                     title=${v}
                 />
             </div>
         `}get inputsTemplate(){return o.html`
             <div class="inputs-container">
                 ${this.getInputTemplate(1)}
-                ${typeof this.initialValueMax=="number"?this.getInputTemplate(2):o.nothing}
+                ${this.isRange?this.getInputTemplate(2):o.nothing}
             </div>
-        `}get containerClasses(){var e;const t=typeof this.size=="string"?this.size:(e=this.size)==null?void 0:e[this.viewport];return{container:!0,[this.mode]:!!this.mode,[t]:!!t,disabled:!!this.disabled}}get styleTokens(){return P.htmlWithTokens`
+        `}get containerClasses(){var e;const t=typeof this.size=="string"?this.size:(e=this.size)==null?void 0:e[this.viewport];return{container:!0,[this.mode]:!!this.mode,[t]:!!t,disabled:!!this.disabled}}get styleTokens(){return L.htmlWithTokens`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -89,4 +89,4 @@
                 <div class="range-value-container">${this.rangeValuesTemplates}</div>
                 ${this.inputsTemplate}
             </div>
-        `}};exports.DsSlider.styles=[d.commonStyles,d.trackStyles,d.thumbStyles,d.currentValueStyles,d.rangeValueStyles];n([a.property({type:Number})],exports.DsSlider.prototype,"min",2);n([a.property({type:Number})],exports.DsSlider.prototype,"max",2);n([a.property({type:String,attribute:"min-label"})],exports.DsSlider.prototype,"minLabel",2);n([a.property({type:String,attribute:"max-label"})],exports.DsSlider.prototype,"maxLabel",2);n([a.property({type:Number})],exports.DsSlider.prototype,"step",2);n([a.property({type:Number,attribute:"initial-value-min"})],exports.DsSlider.prototype,"initialValueMin",2);n([a.property({type:Number,attribute:"initial-value-max"})],exports.DsSlider.prototype,"initialValueMax",2);n([a.property({type:String,reflect:!0})],exports.DsSlider.prototype,"mode",2);n([a.property({type:String,attribute:"locale"})],exports.DsSlider.prototype,"locale",2);n([a.property({type:String,attribute:"locale-matcher"})],exports.DsSlider.prototype,"localeMatcher",2);n([a.property({type:String,attribute:"unit-symbol"})],exports.DsSlider.prototype,"unitSymbol",2);n([a.property({type:String,attribute:"unit-symbol-position"})],exports.DsSlider.prototype,"unitSymbolPosition",2);n([a.property({type:String,attribute:"unit-style"})],exports.DsSlider.prototype,"unitStyle",2);n([a.property({type:String,attribute:"currency"})],exports.DsSlider.prototype,"currency",2);n([a.property({type:String,attribute:"unit"})],exports.DsSlider.prototype,"unit",2);n([a.property({type:String,attribute:"use-grouping",converter:u=>u==="auto"?"auto":typeof u=="boolean"?u:u==="true"||u===""?!0:u!=="false"})],exports.DsSlider.prototype,"useGrouping",2);n([a.property({type:Number,attribute:"minimum-integer-digits"})],exports.DsSlider.prototype,"minimumIntegerDigits",2);n([a.property({type:Number,attribute:"minimum-fraction-digits"})],exports.DsSlider.prototype,"minimumFractionDigits",2);n([a.property({type:Number,attribute:"maximum-fraction-digits"})],exports.DsSlider.prototype,"maximumFractionDigits",2);n([a.property({type:String,attribute:"thousand-separator"})],exports.DsSlider.prototype,"thousandSeparator",2);n([a.property({type:String,attribute:"fraction-separator"})],exports.DsSlider.prototype,"fractionSeparator",2);n([a.property({type:String,converter:k.objectConverter})],exports.DsSlider.prototype,"size",2);n([a.property({type:Boolean,converter:T.booleanConverter})],exports.DsSlider.prototype,"disabled",2);n([a.property({type:String,attribute:"input-min-aria-label"})],exports.DsSlider.prototype,"inputMinAriaLabel",2);n([a.property({type:String,attribute:"input-max-aria-label"})],exports.DsSlider.prototype,"inputMaxAriaLabel",2);n([E.query(".track")],exports.DsSlider.prototype,"track",2);n([m.state()],exports.DsSlider.prototype,"valueMin",2);n([m.state()],exports.DsSlider.prototype,"valueMax",2);n([m.state()],exports.DsSlider.prototype,"activeThumb",2);n([m.state()],exports.DsSlider.prototype,"animationFrameRequest",2);n([m.state()],exports.DsSlider.prototype,"editingField",2);n([m.state()],exports.DsSlider.prototype,"keyboardMode",2);exports.DsSlider=n([V.customUiKitElement("ds-slider")],exports.DsSlider);
+        `}};exports.DsSlider.styles=[d.commonStyles,d.trackStyles,d.thumbStyles,d.currentValueStyles,d.rangeValueStyles];s([a.property({type:Number})],exports.DsSlider.prototype,"min",2);s([a.property({type:Number})],exports.DsSlider.prototype,"max",2);s([a.property({type:String,attribute:"min-label"})],exports.DsSlider.prototype,"minLabel",2);s([a.property({type:String,attribute:"max-label"})],exports.DsSlider.prototype,"maxLabel",2);s([a.property({type:Number})],exports.DsSlider.prototype,"step",2);s([a.property({type:Number,attribute:"initial-value-min"})],exports.DsSlider.prototype,"initialValueMin",2);s([a.property({type:Number,attribute:"initial-value-max"})],exports.DsSlider.prototype,"initialValueMax",2);s([a.property({type:Number,attribute:"value-min"})],exports.DsSlider.prototype,"valueMin",2);s([a.property({type:Number,attribute:"value-max"})],exports.DsSlider.prototype,"valueMax",2);s([a.property({type:String,reflect:!0})],exports.DsSlider.prototype,"mode",2);s([a.property({type:String,attribute:"locale"})],exports.DsSlider.prototype,"locale",2);s([a.property({type:String,attribute:"locale-matcher"})],exports.DsSlider.prototype,"localeMatcher",2);s([a.property({type:String,attribute:"unit-symbol"})],exports.DsSlider.prototype,"unitSymbol",2);s([a.property({type:String,attribute:"unit-symbol-position"})],exports.DsSlider.prototype,"unitSymbolPosition",2);s([a.property({type:String,attribute:"unit-style"})],exports.DsSlider.prototype,"unitStyle",2);s([a.property({type:String,attribute:"currency"})],exports.DsSlider.prototype,"currency",2);s([a.property({type:String,attribute:"unit"})],exports.DsSlider.prototype,"unit",2);s([a.property({type:String,attribute:"use-grouping",converter:u=>u==="auto"?"auto":typeof u=="boolean"?u:u==="true"||u===""?!0:u!=="false"})],exports.DsSlider.prototype,"useGrouping",2);s([a.property({type:Number,attribute:"minimum-integer-digits"})],exports.DsSlider.prototype,"minimumIntegerDigits",2);s([a.property({type:Number,attribute:"minimum-fraction-digits"})],exports.DsSlider.prototype,"minimumFractionDigits",2);s([a.property({type:Number,attribute:"maximum-fraction-digits"})],exports.DsSlider.prototype,"maximumFractionDigits",2);s([a.property({type:String,attribute:"thousand-separator"})],exports.DsSlider.prototype,"thousandSeparator",2);s([a.property({type:String,attribute:"fraction-separator"})],exports.DsSlider.prototype,"fractionSeparator",2);s([a.property({type:String,converter:P.objectConverter})],exports.DsSlider.prototype,"size",2);s([a.property({type:Boolean,converter:_.booleanConverter})],exports.DsSlider.prototype,"disabled",2);s([a.property({type:String,attribute:"input-min-aria-label"})],exports.DsSlider.prototype,"inputMinAriaLabel",2);s([a.property({type:String,attribute:"input-max-aria-label"})],exports.DsSlider.prototype,"inputMaxAriaLabel",2);s([k.query(".track")],exports.DsSlider.prototype,"track",2);s([h.state()],exports.DsSlider.prototype,"_valueMin",2);s([h.state()],exports.DsSlider.prototype,"_valueMax",2);s([h.state()],exports.DsSlider.prototype,"activeThumb",2);s([h.state()],exports.DsSlider.prototype,"animationFrameRequest",2);s([h.state()],exports.DsSlider.prototype,"editingField",2);s([h.state()],exports.DsSlider.prototype,"keyboardMode",2);exports.DsSlider=s([$.customUiKitElement("ds-slider")],exports.DsSlider);

package/dist-react/cjs/components/ds-text-input/ds-text-input.cjs

@@ -1,14 +1,15 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../base/UiKitElement.cjs"),h=require("../../decorators/customUiKitElement.cjs"),c=require("../../mixins/inputStatesMixin.cjs"),d=require("../../utils/validateMaxLength.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const i=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),v=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),m=require("./styles/common.styles.cjs");var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,n=(o,t,s,e)=>{for(var r=e>1?void 0:e?x(t,s):t,p=o.length-1,l;p>=0;p--)(l=o[p])&&(r=(e?l(t,s,r):l(r))||r);return e&&r&&f(t,s,r),r};exports.DsTextInput=class extends c.inputStatesMixin(u.UiKitElement){constructor(){super(...arguments),this.keyboardMode=!1,this.size="medium",this.helperText="",this.forcedError="",this.invalidError="",this.dataAriaLabelRemoveButton="",this.handleClickIcon=()=>{this.nativeInput.value="",this.nativeInput.focus(),["input","change"].forEach(t=>this.nativeInput.dispatchEvent(new Event(t,{bubbles:!0,composed:!0})))}}get classes(){return{container:!0,error:!!this.forcedError,[this.size]:!!this.size,disabled:this.inputStates.disabled,filled:this.inputStates.filled,invalid:this.inputStates.invalid,focus:this.inputStates.focus,"focus-visible":this.inputStates.focusVisible}}render(){return i.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../base/UiKitElement.cjs"),h=require("../../decorators/customUiKitElement.cjs"),d=require("../../mixins/inputStatesMixin.cjs"),c=require("../../utils/validateMaxLength.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const e=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),v=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),m=require("./styles/common.styles.cjs");var y=Object.defineProperty,x=Object.getOwnPropertyDescriptor,s=(o,t,n,r)=>{for(var i=r>1?void 0:r?x(t,n):t,l=o.length-1,p;l>=0;l--)(p=o[l])&&(i=(r?p(t,n,i):p(i))||i);return r&&i&&y(t,n,i),i};exports.DsTextInput=class extends d.inputStatesMixin(u.UiKitElement){constructor(){super(...arguments),this.keyboardMode=!1,this.size="medium",this.helperText="",this.forcedError="",this.invalidError="",this.readonlyText="",this.dataAriaLabelRemoveButton="",this.handleClickIcon=()=>{this.nativeInput.value="",this.nativeInput.focus(),["input","change"].forEach(t=>this.nativeInput.dispatchEvent(new Event(t,{bubbles:!0,composed:!0})))}}get classes(){return{container:!0,error:!!this.forcedError,[this.size]:!!this.size,disabled:this.inputStates.disabled,readonly:this.inputStates.readonly,filled:this.inputStates.filled,invalid:this.inputStates.invalid,focus:this.inputStates.focus,"focus-visible":this.inputStates.focusVisible}}render(){return e.html`
             <div class=${v.classMap(this.classes)}>
                 <div class="input-container">
                     <div><slot></slot></div>
                     ${this.iconTemplate}
                 </div>
                 <div class="footer">
+                    ${this.readonlyTextTemplate}
                     ${this.helperTextTemplate}
                     ${this.forcedErrorTemplate}
                     ${this.invalidErrorTemplate}
                     ${this.lengthTemplate}
                 </div>
             </div>
-        `}get iconTemplate(){var t,s,e;return(s=(t=this.nativeInput)==null?void 0:t.value)!=null&&s.length?this.componentFactory.createIconButton({class:"icon-button","icon-name":"cross",size:this.size,disabled:!!((e=this.nativeInput)!=null&&e.disabled),variant:"naked","@click":this.handleClickIcon,"data-aria-label":this.dataAriaLabelRemoveButton||"remove button"}):i.nothing}get lengthTemplate(){var s,e,r;const t=(e=(s=this.nativeInput)==null?void 0:s.maxLength)==null?void 0:e.toString();return d.validateMaxLength(t)?i.html`<span class="char-counter">${((r=this.inputStates.currentValue)==null?void 0:r.length)||0}/${t}</span>`:i.nothing}get helperTextTemplate(){return this.forcedError||this.inputStates.invalid&&this.invalidError?i.nothing:i.html`<span class="support-text helper-text">${this.helperText}</span>`}get forcedErrorTemplate(){return this.forcedError?i.html`<span class="support-text error-text forced-error">${this.forcedError}</span>`:i.nothing}get invalidErrorTemplate(){return this.forcedError||!this.inputStates.invalid||!this.invalidError?i.nothing:i.html`<span class="support-text error-text invalid-error">${this.invalidError}</span>`}};exports.DsTextInput.styles=[m.commonStyles];n([a.property({type:String})],exports.DsTextInput.prototype,"size",2);n([a.property({type:String,attribute:"helper-text"})],exports.DsTextInput.prototype,"helperText",2);n([a.property({type:String,attribute:"forced-error"})],exports.DsTextInput.prototype,"forcedError",2);n([a.property({type:String,attribute:"invalid-error"})],exports.DsTextInput.prototype,"invalidError",2);n([a.property({type:String,attribute:"data-aria-label-remove-button"})],exports.DsTextInput.prototype,"dataAriaLabelRemoveButton",2);exports.DsTextInput=n([h.customUiKitElement("ds-text-input")],exports.DsTextInput);
+        `}get iconTemplate(){var t,n,r;return!((n=(t=this.nativeInput)==null?void 0:t.value)!=null&&n.length)||this.inputStates.readonly?e.nothing:this.componentFactory.createIconButton({class:"icon-button","icon-name":"cross",size:this.size,disabled:!!((r=this.nativeInput)!=null&&r.disabled),variant:"naked","@click":this.handleClickIcon,"data-aria-label":this.dataAriaLabelRemoveButton||"remove button"})}get lengthTemplate(){var n,r,i;const t=(r=(n=this.nativeInput)==null?void 0:n.maxLength)==null?void 0:r.toString();return c.validateMaxLength(t)?e.html`<span class="char-counter">${((i=this.inputStates.currentValue)==null?void 0:i.length)||0}/${t}</span>`:e.nothing}get helperTextTemplate(){return this.inputStates.readonly||this.forcedError||this.inputStates.invalid&&this.invalidError?e.nothing:e.html`<span class="support-text helper-text">${this.helperText}</span>`}get forcedErrorTemplate(){return this.inputStates.readonly||!this.forcedError?e.nothing:e.html`<span class="support-text error-text forced-error">${this.forcedError}</span>`}get readonlyTextTemplate(){return!this.inputStates.readonly||!this.readonlyText?e.nothing:e.html`<span class="support-text readonly-text">${this.readonlyText}</span>`}get invalidErrorTemplate(){return this.inputStates.readonly||this.forcedError||!this.inputStates.invalid||!this.invalidError?e.nothing:e.html`<span class="support-text error-text invalid-error">${this.invalidError}</span>`}};exports.DsTextInput.styles=[m.commonStyles];s([a.property({type:String})],exports.DsTextInput.prototype,"size",2);s([a.property({type:String,attribute:"helper-text"})],exports.DsTextInput.prototype,"helperText",2);s([a.property({type:String,attribute:"forced-error"})],exports.DsTextInput.prototype,"forcedError",2);s([a.property({type:String,attribute:"invalid-error"})],exports.DsTextInput.prototype,"invalidError",2);s([a.property({type:String,attribute:"readonly-text"})],exports.DsTextInput.prototype,"readonlyText",2);s([a.property({type:String,attribute:"data-aria-label-remove-button"})],exports.DsTextInput.prototype,"dataAriaLabelRemoveButton",2);exports.DsTextInput=s([h.customUiKitElement("ds-text-input")],exports.DsTextInput);