@cupra/ui-kit 2.0.0-canary.17 → 2.0.0-canary.171

package/dist/esm/components/ds-icon-button/ds-icon-button.js

@@ -1,47 +1,54 @@
-import { UiKitElement as c } from "../base/UiKitElement.js";
-import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
-import { ViewportMixin as b } from "../../mixins/ViewportMixin.js";
-import { booleanConverter as u } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as y } from "../../utils/htmlWithTokens.js";
-import { objectConverter as f } from "../../utils/objectConverter.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as g, html as n } from "../../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 { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { choose as v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
-import { classMap as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { buttonStyles as $ } from "./styles/common.styles.js";
-var S = Object.defineProperty, T = Object.getOwnPropertyDescriptor, e = (i, o, l, a) => {
-  for (var s = a > 1 ? void 0 : a ? T(o, l) : o, p = i.length - 1, m; p >= 0; p--)
-    (m = i[p]) && (s = (a ? m(o, l, s) : m(s)) || s);
-  return a && s && S(o, l, s), s;
-};
-let t = class extends b(c) {
-  constructor() {
-    super(...arguments), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.htmlTagName = "button";
-  }
-  get iconTemplate() {
-    return this.iconName ? this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": this.iconName
-    }) : g;
-  }
-  handleClick(i) {
-    this.href || i.preventDefault();
-  }
-  get classes() {
-    const i = typeof this.size == "string" ? this.size : this.size[this.viewport];
-    return {
-      button: !0,
-      custom: this.htmlTagName === "custom",
-      disabled: this.disabled,
-      [i]: !!i,
-      [this.mode]: !!this.mode,
-      [this.variant]: !!this.variant
-    };
-  }
-  get variantColorTokens() {
-    return y`
+import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as i } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
+import { booleanConverter as o } from "../../utils/booleanConverter.js";
+import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
+import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { o as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
+import { ViewportMixin as u } from "../../mixins/ViewportMixin.js";
+import { objectConverter as d } from "../../utils/objectConverter.js";
+import { r as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { buttonStyles as p } from "./styles/common.styles.js";
+//#region src/components/ds-icon-button/ds-icon-button.ts
+var m, h = (m = class extends u(i) {
+	constructor(...e) {
+		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.htmlTagName = "button";
+	}
+	get iconTemplate() {
+		return this.iconName ? s`<ds-icon class="icon" icon-name=${l(this.iconName)}></ds-icon>` : e;
+	}
+	handleClick(e) {
+		this.href || e.preventDefault();
+	}
+	handleCustomClick(e) {
+		var t;
+		let n = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot"), r = n == null ? void 0 : n.assignedElements()[0];
+		r && !r.contains(e.composedPath()[0]) && (e.stopPropagation(), r.click());
+	}
+	get classes() {
+		let e = typeof this.size == "string" ? this.size : this.size[this.viewport], t = !!(this.customBackground || this.customColor);
+		return {
+			button: !0,
+			[`tag-${this.htmlTagName}`]: !0,
+			[`variant-${this.variant}`]: !0,
+			custom: t,
+			disabled: this.disabled,
+			[e]: !!e,
+			[this.mode]: !!this.mode
+		};
+	}
+	updated(e) {
+		super.updated(e), this.customBackground ? this.style.setProperty("--ui-kit-private-button-custom-bg", this.customBackground) : this.style.removeProperty("--ui-kit-private-button-custom-bg"), this.customColor ? this.style.setProperty("--ui-kit-private-button-custom-color", this.customColor) : this.style.removeProperty("--ui-kit-private-button-custom-color");
+	}
+	get variantColorTokens() {
+		return t`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -49,34 +56,25 @@ let t = class extends b(c) {
                 }
             </style>
         `;
-  }
-  render() {
-    return n`
-            <style>
-                :host {
-                    pointer-events: ${this.disabled ? "none" : "visible"};
-                }
-            </style>
+	}
+	render() {
+		return t`
             ${this.variantColorTokens}
-            ${v(this.htmlTagName || "button", [
-      [
-        "button",
-        () => n`
+            ${f(this.htmlTagName || "button", [
+			["button", () => t`
                         <button
                             ?disabled=${this.disabled}
-                            class=${h(this.classes)}
+                            class=${c(this.classes)}
                             aria-label=${this.dataAriaLabel}
+                            aria-pressed=${l(this.dataAriaPressed)}
                         >
                             ${this.iconTemplate}
                         </button>
-                    `
-      ],
-      [
-        "a",
-        () => n`
+                    `],
+			["a", () => t`
                         <a
                             ?disabled=${this.disabled}
-                            class=${h(this.classes)}
+                            class=${c(this.classes)}
                             href=${this.href}
                             rel=${this.rel}
                             target=${this.target}
@@ -85,54 +83,54 @@ let t = class extends b(c) {
                         >
                             ${this.iconTemplate}
                         </a>
-                    `
-      ],
-      [
-        "custom",
-        () => n`
-                        <div class=${h(this.classes)}>
+                    `],
+			["custom", () => t`
+                        <div class=${c(this.classes)} @click=${this.handleCustomClick}>
                             <slot></slot>
                         </div>
-                    `
-      ]
-    ])}
+                    `]
+		])}
         `;
-  }
-};
-t.styles = [$];
-e([
-  r({ type: String })
-], t.prototype, "variant", 2);
-e([
-  r({ type: String, reflect: !0 })
-], t.prototype, "mode", 2);
-e([
-  r({ type: String, converter: f })
-], t.prototype, "size", 2);
-e([
-  r({ type: Boolean, converter: u })
-], t.prototype, "disabled", 2);
-e([
-  r({ type: String, attribute: "icon-name" })
-], t.prototype, "iconName", 2);
-e([
-  r({ type: String, attribute: "html-tag-name" })
-], t.prototype, "htmlTagName", 2);
-e([
-  r({ type: String, attribute: "data-aria-label" })
-], t.prototype, "dataAriaLabel", 2);
-e([
-  r({ type: String, reflect: !0 })
-], t.prototype, "href", 2);
-e([
-  r({ type: String, reflect: !0 })
-], t.prototype, "rel", 2);
-e([
-  r({ type: String, reflect: !0 })
-], t.prototype, "target", 2);
-t = e([
-  d("ds-icon-button")
-], t);
-export {
-  t as DsIconButton
-};
+	}
+}, m.styles = [p], m);
+r([n({
+	type: String,
+	reflect: !0
+})], h.prototype, "variant", void 0), r([n({
+	type: String,
+	attribute: "custom-background"
+})], h.prototype, "customBackground", void 0), r([n({
+	type: String,
+	attribute: "custom-color"
+})], h.prototype, "customColor", void 0), r([n({
+	type: String,
+	reflect: !0
+})], h.prototype, "mode", void 0), r([n({
+	type: String,
+	converter: d
+})], h.prototype, "size", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], h.prototype, "disabled", void 0), r([n({
+	type: String,
+	attribute: "icon-name"
+})], h.prototype, "iconName", void 0), r([n({
+	type: String,
+	attribute: "html-tag-name"
+})], h.prototype, "htmlTagName", void 0), r([n({
+	type: String,
+	attribute: "data-aria-label"
+})], h.prototype, "dataAriaLabel", void 0), r([n({
+	type: String,
+	attribute: "data-aria-pressed"
+})], h.prototype, "dataAriaPressed", void 0), r([n({
+	type: String,
+	reflect: !0
+})], h.prototype, "href", void 0), r([n({
+	type: String,
+	reflect: !0
+})], h.prototype, "rel", void 0), r([n({
+	type: String,
+	reflect: !0
+})], h.prototype, "target", void 0), h = r([a("ds-icon-button")], h);
+//#endregion

package/dist/esm/components/ds-icon-button/styles/common.styles.js

@@ -1,8 +1,7 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-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 { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const s = t`
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-icon-button/styles/common.styles.ts
+var t = e`
     :host {
         display: inline-flex;
     }
@@ -19,6 +18,5 @@ const s = t`
         padding: 0;
     }
 `;
-export {
-  s as buttonStyles
-};
+//#endregion
+export { t as buttonStyles };

package/dist/esm/components/ds-icon-button-group/ds-icon-button-group.js

@@ -0,0 +1,18 @@
+import { x as e } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as n } from "../base/UiKitElement.js";
+import { customUiKitElement as r } from "../../decorators/customUiKitElement.js";
+import { commonStyles as i } from "./styles/common.styles.js";
+//#region src/components/ds-icon-button-group/ds-icon-button-group.ts
+var a, o = (a = class extends n {
+	render() {
+		return e`
+            <div part="container" class="container">
+                <slot></slot>
+            </div>
+        `;
+	}
+}, a.styles = [i], a);
+o = t([r("ds-icon-button-group")], o);
+//#endregion

package/dist/esm/components/ds-icon-button-group/styles/common.styles.js

@@ -0,0 +1,19 @@
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-icon-button-group/styles/common.styles.ts
+var t = e`
+    :host {
+        display: inline-flex;
+    }
+
+    .container {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-1, 0px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-icon-button-border-color-secondary-default, #5a5c67);
+        border-radius: var(--ds-border-radius-xs, 6px);
+        overflow: hidden;
+    }
+`;
+//#endregion
+export { t as commonStyles };

package/dist/esm/components/ds-inline-alert/ds-inline-alert.js

@@ -0,0 +1,91 @@
+import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as a } from "../base/UiKitElement.js";
+import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
+import { booleanConverter as s } from "../../utils/booleanConverter.js";
+import { uiKitHtml as c } from "../../utils/uiKitHtml.js";
+import { e as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { o as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
+import { n as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import "../ds-icon-button/ds-icon-button.js";
+import { inlineAlertStyles as f } from "./styles/common.styles.js";
+//#region src/components/ds-inline-alert/ds-inline-alert.ts
+var p, m = (p = class extends a {
+	constructor(...e) {
+		super(...e), this.status = "default", this.title = "", this.text = "", this.showClose = !0, this._show = void 0, this._showState = !0;
+	}
+	get show() {
+		return this._show ?? this._showState;
+	}
+	set show(e) {
+		this._show = e;
+	}
+	getIconName() {
+		switch (this.status) {
+			case "success": return "check-mark-circle";
+			case "error": return "cross-circle";
+			case "warning": return "exclamation-mark-circle";
+			case "info": return "info-circle";
+			default: return "chat-bubble";
+		}
+	}
+	handleClickCloseButton() {
+		let e = new CustomEvent("inline-alert:close", {
+			bubbles: !0,
+			composed: !0
+		});
+		this.dispatchEvent(e), this._showState = !1;
+	}
+	get inlineAlertClasses() {
+		return {
+			container: !0,
+			[this.status || "default"]: !0,
+			show: this.show
+		};
+	}
+	get iconTemplate() {
+		return c`<ds-icon class="icon" icon-name=${u(this.getIconName())} size="24"></ds-icon>`;
+	}
+	get closeButtonTemplate() {
+		return this.showClose ? c`<ds-icon-button
+            data-aria-label="close-button"
+            @click=${this.handleClickCloseButton}
+            icon-name="cross"
+            variant="naked"
+            size="medium"
+        ></ds-icon-button>` : e;
+	}
+	render() {
+		return this.show ? t`
+            <div class=${l(this.inlineAlertClasses)} part="container">
+                ${this.iconTemplate}
+                <div class="content">
+                    <div class="header">
+                        ${d(this.title, () => t`<div class="title">${this.title}</div>`)}
+                        ${d(this.text, () => t`<div class="message">${this.text}</div>`)}
+                    </div>
+                    <slot></slot>
+                </div>
+                ${this.closeButtonTemplate}
+            </div>
+        ` : e;
+	}
+}, p.styles = [f], p);
+i([n({ type: String })], m.prototype, "status", void 0), i([n({ type: String })], m.prototype, "title", void 0), i([n({ type: String })], m.prototype, "text", void 0), i([n({
+	attribute: "show-close",
+	type: Boolean,
+	converter: s,
+	reflect: !0
+})], m.prototype, "showClose", void 0), i([n({
+	type: Boolean,
+	attribute: "show",
+	converter: s
+})], m.prototype, "_show", void 0), i([r()], m.prototype, "_showState", void 0), m = i([o("ds-inline-alert")], m);
+//#endregion

package/dist/esm/components/ds-inline-alert/styles/common.styles.js

@@ -0,0 +1,42 @@
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-inline-alert/styles/common.styles.ts
+var t = e`
+    :host {
+        display: contents;
+    }
+
+    .container {
+        display: none;
+        align-items: flex-start;
+        gap: var(--ds-spacing-m-1, 12px);
+        padding: var(--ds-spacing-m-3, 20px) var(--ds-spacing-m-2, 16px);
+        border-radius: var(--ds-button-border-radius-base, 6px);
+        background: var(--ds-color-surface-container-default, rgba(250, 250, 250, 0.05));
+        box-shadow: 0 4px 4px 0 var(--ds-opacity-black-20, rgba(9, 9, 11, 0.2));
+        width: 100%;
+    }
+
+    .container.show {
+        display: flex;
+    }
+
+    .icon {
+        flex: 0 0 auto;
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        min-inline-size: 0;
+    }
+
+    .header {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+`;
+//#endregion
+export { t as inlineAlertStyles };

package/dist/esm/components/ds-input/ds-input.js

@@ -1,56 +1,51 @@
-import { DsBaseInput as m } from "../base/ds-base-input/ds-base-input.js";
-import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as u, html as p } from "../../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 { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { choose as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
-var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (t, s, n, l) => {
-  for (var a = l > 1 ? void 0 : l ? b(s, n) : s, o = t.length - 1, h; o >= 0; o--)
-    (h = t[o]) && (a = (l ? h(s, n, a) : h(a)) || a);
-  return l && a && f(s, n, a), a;
-};
-let e = class extends m {
-  constructor() {
-    super(...arguments), this.name = "", this.placeholder = "", this.type = "text", this.min = 0, this.max = 100, this.step = 1, this._hasPicker = !1, this.handleClickIcon = () => {
-      var t, s;
-      (s = (t = this.inputField) == null ? void 0 : t.showPicker) == null || s.call(t);
-    }, this.handleInput = (t) => {
-      const s = t.target;
-      this._value = s.value || "";
-    };
-  }
-  firstUpdated() {
-    var t;
-    super.firstUpdated(), this._hasPicker = !!((t = this.inputField) != null && t.showPicker);
-  }
-  get iconTemplate() {
-    if (this.type !== "time" && this.type !== "date") return u;
-    let t;
-    switch (this.type) {
-      case "date":
-        t = "calendar";
-        break;
-      case "time":
-        t = "clock";
-        break;
-    }
-    return p`
+import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
+import { uiKitHtml as o } from "../../utils/uiKitHtml.js";
+import { r as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { DsBaseInput as c } from "../base/ds-base-input/ds-base-input.js";
+//#region src/components/ds-input/ds-input.ts
+var l = class extends c {
+	constructor(...e) {
+		super(...e), this.name = "", this.placeholder = "", this.type = "text", this.min = 0, this.max = 100, this.step = 1, this._hasPicker = !1, this.handleClickIcon = () => {
+			var e, t;
+			(e = this.inputField) == null || (t = e.showPicker) == null || t.call(e);
+		}, this.handleInput = (e) => {
+			let t = e.target;
+			this._value = t.value || "";
+		};
+	}
+	firstUpdated() {
+		var e;
+		super.firstUpdated(), this._hasPicker = !!((e = this.inputField) != null && e.showPicker);
+	}
+	get iconTemplate() {
+		if (this.type !== "time" && this.type !== "date") return e;
+		let n;
+		switch (this.type) {
+			case "date":
+				n = "calendar";
+				break;
+			case "time":
+				n = "clock";
+				break;
+		}
+		return t`
             <style>
                 .icon {
                     cursor: ${this._hasPicker ? "pointer" : "auto"};
                 }
             </style>
-            ${this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": t,
-      "@click": this.handleClickIcon
-    })}
+            ${o`<ds-icon class="icon" icon-name=${n} @click=${this.handleClickIcon}></ds-icon>`}
         `;
-  }
-  get labelTemplate() {
-    return p`
+	}
+	get labelTemplate() {
+		return t`
             <label
                 id="label"
                 class="label"
@@ -59,13 +54,10 @@ let e = class extends m {
                 ${this.label}
             </label>
         `;
-  }
-  get inputTemplate() {
-    return p`
-            ${y(this.type === "number", [
-      [
-        !0,
-        () => p`
+	}
+	get inputTemplate() {
+		return t`
+            ${s(this.type === "number", [[!0, () => t`
                         <input
                             aria-labelledby="label"
                             class="input-field number"
@@ -80,11 +72,7 @@ let e = class extends m {
                             @blur=${this.handleBlur}
                             @input=${this.handleInput}
                         />
-                    `
-      ],
-      [
-        !1,
-        () => p`
+                    `], [!1, () => t`
                         <input
                             aria-labelledby="label"
                             class="input-field"
@@ -97,42 +85,15 @@ let e = class extends m {
                             @blur=${this.handleBlur}
                             @input=${this.handleInput}
                         />
-                    `
-      ]
-    ])}
+                    `]])}
         `;
-  }
-  get dropdownTemplate() {
-    return u;
-  }
-};
-i([
-  r({ type: String })
-], e.prototype, "name", 2);
-i([
-  r({ type: String })
-], e.prototype, "placeholder", 2);
-i([
-  r({ type: String, attribute: "max-length" })
-], e.prototype, "maxLength", 2);
-i([
-  r({ type: String })
-], e.prototype, "type", 2);
-i([
-  r({ type: Number })
-], e.prototype, "min", 2);
-i([
-  r({ type: Number })
-], e.prototype, "max", 2);
-i([
-  r({ type: Number })
-], e.prototype, "step", 2);
-i([
-  d()
-], e.prototype, "_hasPicker", 2);
-e = i([
-  c("ds-input", { skipTagAsComponentName: !0 })
-], e);
-export {
-  e as DsInput
+	}
+	get dropdownTemplate() {
+		return e;
+	}
 };
+i([n({ type: String })], l.prototype, "name", void 0), i([n({ type: String })], l.prototype, "placeholder", void 0), i([n({
+	type: String,
+	attribute: "max-length"
+})], l.prototype, "maxLength", void 0), i([n({ type: String })], l.prototype, "type", void 0), i([n({ type: Number })], l.prototype, "min", void 0), i([n({ type: Number })], l.prototype, "max", void 0), i([n({ type: Number })], l.prototype, "step", void 0), i([r()], l.prototype, "_hasPicker", void 0), l = i([a("ds-input", { skipTagAsComponentName: !0 })], l);
+//#endregion