@cupra/ui-kit 1.0.0-canary.8 → 1.0.0

package/dist-react/components/ds-tabs/ds-tabs.js

@@ -0,0 +1,203 @@
+import { UiKitElement as u } from "../base/UiKitElement.js";
+import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as v } from "../../utils/booleanConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as m, html as g } 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 n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as c } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as S } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import { classMap as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as y, navigationStyles as T, tabsStyles as x, panelsStyles as L } from "./styles/common.styles.js";
+import { themeConfig as E } from "./theme-config.js";
+var w = Object.defineProperty, A = Object.getOwnPropertyDescriptor, l = (t, e, s, i) => {
+  for (var a = i > 1 ? void 0 : i ? A(e, s) : e, o = t.length - 1, h; o >= 0; o--)
+    (h = t[o]) && (a = (i ? h(e, s, a) : h(a)) || a);
+  return i && a && w(e, s, a), a;
+};
+let r = class extends u {
+  constructor() {
+    super(...arguments), this.selectedTab = 0, this.mode = "light", this.variant = "primary", this.size = "large", this.disabled = !1, this.focusedTabIndex = -1, this.handleKeyDown = (t) => {
+      var e, s, i, a;
+      if (!(this.focusedTabIndex < 0))
+        switch (t.key) {
+          case "ArrowRight":
+          case "Right":
+            t.preventDefault(), this.focusedTabIndex + 1 < ((e = this.tabs) == null ? void 0 : e.length) && (this.focusedTabIndex += 1, (s = this.tabs[this.focusedTabIndex]) == null || s.focus());
+            break;
+          case "ArrowLeft":
+          case "Left":
+            t.preventDefault(), this.focusedTabIndex - 1 >= 0 && (this.focusedTabIndex -= 1, (i = this.tabs[this.focusedTabIndex]) == null || i.focus());
+            break;
+          case "Enter":
+          case " ":
+            t.preventDefault(), this.focusedTabIndex >= 0 && this.focusedTabIndex < ((a = this.tabs) == null ? void 0 : a.length) && this.handleChangeSelectedTab(this.focusedTabIndex);
+            break;
+        }
+    }, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
+      this.handleScrollNav();
+    }), this.handleScrollNav = () => {
+      var e, s, i, a;
+      const t = ((e = this.nav) == null ? void 0 : e.scrollLeft) + ((s = this.nav) == null ? void 0 : s.clientWidth);
+      this.hasScrollLeft = ((i = this.nav) == null ? void 0 : i.scrollLeft) > 0, this.hasScrollRight = t < ((a = this.nav) == null ? void 0 : a.scrollWidth);
+    }, this.handleScrollLeft = () => {
+      this.nav.scrollBy({ left: -150, behavior: "smooth" });
+    }, this.handleScrollRight = () => {
+      this.nav.scrollBy({ left: 150, behavior: "smooth" });
+    }, this.handleFocus = (t) => {
+      var i;
+      const e = t.target, s = ((i = this.tabs) == null ? void 0 : i.findIndex((a) => a === e)) ?? -1;
+      if (s < 0 || this.disabled) {
+        t.preventDefault();
+        return;
+      }
+      this.focusedTabIndex = s;
+    }, this.handleBlur = () => {
+      this.focusedTabIndex = -1;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.tabs = Array.from(this.querySelectorAll("[slot=tab]")), this.panels = Array.from(this.querySelectorAll("[slot=panel]"));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScrollNav);
+  }
+  getScrollButtonTemplate(t, e) {
+    var a;
+    if (!this.theme || t === "left" && !this.hasScrollLeft || t === "right" && !this.hasScrollRight)
+      return m;
+    const s = `arrow-${t}`, i = (a = E[this.theme]) == null ? void 0 : a["icon-button-variant"];
+    return this.componentFactory.createIconButton({
+      class: `nav-arrow ${t}`,
+      "data-aria-label": `nav-arrow-${t}`,
+      "@click": e,
+      size: ["xxsmall", "xsmall", "small"].includes(this.size) ? "medium" : "large",
+      "icon-name": s,
+      mode: this.mode,
+      variant: i
+    });
+  }
+  firstUpdated() {
+    this.handleScrollNav(), this.resizeObserver.observe(this.nav), this.tabs.forEach((t) => this.resizeObserver.observe(t)), window.addEventListener("resize", this.handleScrollNav), this.nav.addEventListener("scroll", this.handleScrollNav), this.setTabsFocusable();
+  }
+  updated(t) {
+    if (super.updated(t), t.has("selectedTab") && this.selectTab(this.selectedTab), t.has("variant")) {
+      const e = this.variant === "secondary" || this.variant === "primary" ? this.variant : "primary";
+      this.variant !== e && (this.variant = e);
+    }
+    this.setupTabAccessibility();
+  }
+  handleTabsSlotchange(t) {
+    this.tabs = t.target.assignedNodes({ flatten: !0 }), this.setTabsFocusable();
+  }
+  handlePanelSlotchange(t) {
+    this.panels = t.target.assignedNodes({ flatten: !0 }), this.setTabsFocusable();
+  }
+  setTabsFocusable() {
+    var t;
+    (t = this.tabs) == null || t.forEach((e) => {
+      e.setAttribute("tabindex", "0");
+    });
+  }
+  selectTab(t) {
+    var s, i, a, o, h;
+    (s = this.tabs) == null || s.forEach((d, f) => {
+      d.removeAttribute("selected"), d.setAttribute("aria-selected", f === t ? "true" : "false");
+    }), (i = this.tabs[t]) == null || i.setAttribute("selected", ""), this.panels.forEach((d) => d.removeAttribute("selected")), (a = this.panels[t]) == null || a.setAttribute("selected", "");
+    const e = (o = this.tabs) == null ? void 0 : o[this.selectedTab];
+    this.nav.scrollLeft = (e == null ? void 0 : e.offsetLeft) - ((h = this.nav) == null ? void 0 : h.offsetWidth) / 2;
+  }
+  setupTabAccessibility() {
+    var t;
+    (t = this.tabs) == null || t.forEach((e, s) => {
+      e.setAttribute("role", "tab"), e.setAttribute("tabindex", s === this.selectedTab && !this.disabled ? "0" : "-1"), e.addEventListener("focus", this.handleFocus), e.addEventListener("blur", this.handleBlur);
+    });
+  }
+  handleChangeSelectedTab(t) {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          selectedTab: t
+        }
+      })
+    ), this.selectedTab = t;
+  }
+  handleSelect(t) {
+    let e;
+    this.tabs.forEach((s, i) => {
+      (s === t.target || s.contains(t.target)) && (e = i);
+    }), !(typeof e != "number" || e === this.selectedTab) && this.handleChangeSelectedTab(e);
+  }
+  get classes() {
+    return {
+      container: !0,
+      [this.size]: !0,
+      [this.mode]: !0,
+      [this.variant]: !0,
+      disabled: this.disabled
+    };
+  }
+  get navContainerClasses() {
+    return {
+      "nav-container": !0,
+      "scroll-left": this.hasScrollLeft,
+      "scroll-right": this.hasScrollRight
+    };
+  }
+  render() {
+    return g`
+            <div part="container" class=${b(this.classes)}>
+                <div class=${b(this.navContainerClasses)}>
+                    ${this.getScrollButtonTemplate("left", this.handleScrollLeft)}
+                    <nav tabindex="-1" role="tablist" @scroll=${this.handleScrollNav} @keydown=${this.handleKeyDown}>
+                        <slot @slotchange=${this.handleTabsSlotchange} name="tab" @click=${this.handleSelect}></slot>
+                    </nav>
+                    ${this.getScrollButtonTemplate("right", this.handleScrollRight)}
+                </div>
+                <slot @slotchange=${this.handlePanelSlotchange} name="panel"></slot>
+            </div>
+        `;
+  }
+};
+r.styles = [y, T, x, L];
+l([
+  n({ type: Number, attribute: "selected-tab", reflect: !0 })
+], r.prototype, "selectedTab", 2);
+l([
+  n({ type: String, reflect: !0 })
+], r.prototype, "mode", 2);
+l([
+  n({ type: String, reflect: !0 })
+], r.prototype, "variant", 2);
+l([
+  n({ type: String })
+], r.prototype, "size", 2);
+l([
+  n({ type: Boolean, converter: v })
+], r.prototype, "disabled", 2);
+l([
+  c()
+], r.prototype, "focusedTabIndex", 2);
+l([
+  S("nav")
+], r.prototype, "nav", 2);
+l([
+  c()
+], r.prototype, "tabs", 2);
+l([
+  c()
+], r.prototype, "panels", 2);
+l([
+  c()
+], r.prototype, "hasScrollLeft", 2);
+l([
+  c()
+], r.prototype, "hasScrollRight", 2);
+r = l([
+  p("ds-tabs")
+], r);
+export {
+  r as DsTabs
+};

package/dist-react/components/ds-tabs/styles/common.styles.js

@@ -0,0 +1,97 @@
+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 n = t`
+    :host {
+        display: block;
+        width: 100%;
+    }
+`, i = t`
+    nav {
+        display: flex;
+        justify-content: flex-start;
+        overflow-x: auto;
+        scroll-behavior: smooth;
+    }
+
+    nav::-webkit-scrollbar {
+        display: none;
+    }
+
+    .nav-container {
+        position: relative;
+        display: flex;
+    }
+
+    .nav-container.scroll-left nav {
+        mask-image: linear-gradient(
+            to left,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 90%,
+            rgba(0, 0, 0, 0.5) 95%,
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    .nav-container.scroll-right nav {
+        mask-image: linear-gradient(
+            to right,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 90%,
+            rgba(0, 0, 0, 0.5) 95%,
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    .nav-container.scroll-left.scroll-right nav {
+        mask-image: linear-gradient(
+            to right,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 0.5) 5%,
+            rgba(0, 0, 0, 1) 10%,
+            rgba(0, 0, 0, 1) 90%,
+            rgba(0, 0, 0, 0.5) 95%,
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    .nav-arrow {
+        visibility: hidden;
+    }
+
+    .nav-container:hover .nav-arrow {
+        visibility: visible;
+    }
+`, l = t`
+    ::slotted([slot='tab']) {
+        white-space: nowrap;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        cursor: pointer;
+        flex: 0 1 auto;
+        text-align: center;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    ::slotted([slot='tab'][selected]) {
+        cursor: auto;
+    }
+`, s = t`
+    ::slotted([slot='panel']) {
+        display: none;
+    }
+    ::slotted([slot='panel'][selected]) {
+        display: block;
+    }
+`;
+export {
+  n as commonStyles,
+  i as navigationStyles,
+  s as panelsStyles,
+  l as tabsStyles
+};

package/dist-react/components/ds-tabs/theme-config.js

@@ -0,0 +1,14 @@
+const a = {
+  cupra: {
+    "icon-button-variant": "primary"
+  },
+  "cupra-diagonal": {
+    "icon-button-variant": "standard"
+  },
+  seat: {
+    "icon-button-variant": "primary"
+  }
+};
+export {
+  a as themeConfig
+};

package/dist-react/components/ds-tag/ds-tag.js

@@ -0,0 +1,87 @@
+import { UiKitElement as b } from "../base/UiKitElement.js";
+import { customUiKitElement as y } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as f } from "../../utils/booleanConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as m, 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 i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as v } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { classMap as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { when as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import { commonStyles as g, iconStyles as d } from "./styles/common.styles.js";
+var C = Object.defineProperty, P = Object.getOwnPropertyDescriptor, e = (r, s, c, n) => {
+  for (var o = n > 1 ? void 0 : n ? P(s, c) : s, l = r.length - 1, a; l >= 0; l--)
+    (a = r[l]) && (o = (n ? a(s, c, o) : a(o)) || o);
+  return n && o && C(s, c, o), o;
+};
+let t = class extends b {
+  constructor() {
+    super(...arguments), this.show = !0, this.clickableIcon = !1, this.iconPosition = "left", this.color = "black";
+  }
+  get classes() {
+    return {
+      container: !0,
+      [this.color]: !0
+    };
+  }
+  get iconClasses() {
+    return {
+      icon: !0,
+      clicable: !!this.clickableIcon
+    };
+  }
+  handleClickIcon() {
+    if (!this.clickableIcon) return;
+    const r = new CustomEvent("clickicon", {
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(r);
+  }
+  get iconTemplate() {
+    return this.iconName ? this.componentFactory.createIcon({
+      class: h(this.iconClasses),
+      "icon-name": this.iconName,
+      size: 16,
+      "@click": this.handleClickIcon
+    }) : m;
+  }
+  render() {
+    return this.show ? p`
+                  <div class=${h(this.classes)}>
+                      ${u(this.iconPosition === "left", () => p`${this.iconTemplate}`)}
+                      <slot></slot>
+                      ${u(this.iconPosition === "right", () => p`${this.iconTemplate}`)}
+                  </div>
+              ` : m;
+  }
+};
+t.styles = [g, d];
+e([
+  i({ type: Boolean, converter: f })
+], t.prototype, "show", 2);
+e([
+  i({
+    type: Boolean,
+    converter: f,
+    attribute: "clickable-icon"
+  })
+], t.prototype, "clickableIcon", 2);
+e([
+  i({ type: String, attribute: "icon-name" })
+], t.prototype, "iconName", 2);
+e([
+  i({ type: String, attribute: "icon-position" })
+], t.prototype, "iconPosition", 2);
+e([
+  i({ type: String, attribute: "color" })
+], t.prototype, "color", 2);
+e([
+  v()
+], t.prototype, "onClickHandler", 2);
+t = e([
+  y("ds-tag")
+], t);
+export {
+  t as DsTag
+};

package/dist-react/components/ds-tag/styles/common.styles.js

@@ -0,0 +1,20 @@
+import { cssWithTokens as n } from "../../../utils/cssWithTokens.js";
+const i = n`
+    :host {
+        display: inline-block;
+    }
+    
+    .container {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+`, o = n`
+    .icon.clicable {
+        cursor: pointer;
+    }
+`;
+export {
+  i as commonStyles,
+  o as iconStyles
+};

package/dist-react/components/ds-text/ds-text.js

@@ -0,0 +1,83 @@
+import { UiKitElement as h } from "../base/UiKitElement.js";
+import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as u } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as g } from "../../utils/htmlWithTokens.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as y, 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 { classMap as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { unsafeHTML as v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
+import { commonStyles as d } from "./styles/common.styles.js";
+var $ = Object.defineProperty, T = Object.getOwnPropertyDescriptor, e = (l, s, a, i) => {
+  for (var o = i > 1 ? void 0 : i ? T(s, a) : s, p = l.length - 1, m; p >= 0; p--)
+    (m = l[p]) && (o = (i ? m(s, a, o) : m(o)) || o);
+  return i && o && $(s, a, o), o;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.size = "medium", this.weight = "regular", this.variant = "body", this.mode = "light";
+  }
+  get classes() {
+    return {
+      container: !0,
+      [`size-${this.size}`]: !!this.size,
+      [`mode-${this.mode}`]: !!this.mode,
+      [`weight-${this.weight}`]: !!this.weight,
+      [`variant-${this.variant}`]: !!this.variant,
+      uppercase: this.uppercase
+    };
+  }
+  get customElementTemplate() {
+    return !this.htmlTagName || !this.value ? y : n`${v(`<${this.htmlTagName} class="text">${this.value}</${this.htmlTagName}>`)}`;
+  }
+  get styles() {
+    return g`
+                <style>
+                    .container {
+                        color: ${this.color || "var(--ds-text-color)"}
+                    }
+                </style>
+            `;
+  }
+  render() {
+    return n`
+            ${this.styles}
+            <div data-testid="ds-text-container" class=${f(this.classes)}>
+                ${this.customElementTemplate}
+                <slot></slot>
+            </div>
+        `;
+  }
+};
+t.styles = [d];
+e([
+  r({ type: String })
+], t.prototype, "size", 2);
+e([
+  r({ type: String })
+], t.prototype, "weight", 2);
+e([
+  r({ type: String })
+], t.prototype, "variant", 2);
+e([
+  r({ type: String, attribute: "html-tag-name" })
+], t.prototype, "htmlTagName", 2);
+e([
+  r({ type: String })
+], t.prototype, "value", 2);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "mode", 2);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "color", 2);
+e([
+  r({ type: Boolean, converter: u, reflect: !0 })
+], t.prototype, "uppercase", 2);
+t = e([
+  c("ds-text")
+], t);
+export {
+  t as DsText
+};

package/dist-react/components/ds-text/styles/common.styles.js

@@ -0,0 +1,29 @@
+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 n = t`
+    :host {
+        display: contents;
+    }
+
+    ::slotted(*),
+    .text {
+        color: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        margin: 0;
+    }
+
+    .text + ::slotted(*) {
+        display: none;
+    }
+
+    .uppercase {
+        text-transform: uppercase;
+    }
+`;
+export {
+  n as commonStyles
+};

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

@@ -0,0 +1,100 @@
+import { UiKitElement as c } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import { inputStatesMixin as m } from "../../mixins/inputStatesMixin.js";
+import { validateMaxLength as v } from "../../utils/validateMaxLength.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as n, nothing 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 l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as b } from "./styles/common.styles.js";
+var g = Object.defineProperty, E = Object.getOwnPropertyDescriptor, o = (t, e, r, s) => {
+  for (var a = s > 1 ? void 0 : s ? E(e, r) : e, u = t.length - 1, h; u >= 0; u--)
+    (h = t[u]) && (a = (s ? h(e, r, a) : h(a)) || a);
+  return s && a && g(e, r, a), a;
+};
+let i = class extends m(c) {
+  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 n`
+            <div class=${f(this.classes)}>
+                <div class="input-container">
+                    <div><slot></slot></div>
+                    ${this.iconTemplate}
+                </div>
+                <div class="footer">
+                    ${this.helperTextTemplate}
+                    ${this.forcedErrorTemplate}
+                    ${this.invalidErrorTemplate}
+                    ${this.lengthTemplate}
+                </div>
+            </div>
+        `;
+  }
+  get iconTemplate() {
+    var t, e, r;
+    return (e = (t = this.nativeInput) == null ? void 0 : t.value) != null && e.length ? this.componentFactory.createIconButton({
+      class: "icon-button",
+      "icon-name": "cross",
+      size: this.size,
+      disabled: !!((r = this.nativeInput) != null && r.disabled),
+      variant: "standard",
+      "@click": this.handleClickIcon,
+      "data-aria-label": this.dataAriaLabelRemoveButton || "remove button"
+    }) : p;
+  }
+  get lengthTemplate() {
+    var e, r, s;
+    const t = (r = (e = this.nativeInput) == null ? void 0 : e.maxLength) == null ? void 0 : r.toString();
+    return v(t) ? n`<span class="char-counter">${((s = this.inputStates.currentValue) == null ? void 0 : s.length) || 0}/${t}</span>` : p;
+  }
+  get helperTextTemplate() {
+    return this.forcedError || this.inputStates.invalid && this.invalidError ? p : n`<span class="support-text helper-text">${this.helperText}</span>`;
+  }
+  get forcedErrorTemplate() {
+    return this.forcedError ? n`<span class="support-text error-text forced-error">${this.forcedError}</span>` : p;
+  }
+  get invalidErrorTemplate() {
+    return this.forcedError || !this.inputStates.invalid || !this.invalidError ? p : n`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
+  }
+};
+i.styles = [b];
+o([
+  l({ type: String })
+], i.prototype, "size", 2);
+o([
+  l({ type: String, attribute: "helper-text" })
+], i.prototype, "helperText", 2);
+o([
+  l({ type: String, attribute: "forced-error" })
+], i.prototype, "forcedError", 2);
+o([
+  l({ type: String, attribute: "invalid-error" })
+], i.prototype, "invalidError", 2);
+o([
+  l({ type: String, attribute: "data-aria-label-remove-button" })
+], i.prototype, "dataAriaLabelRemoveButton", 2);
+i = o([
+  d("ds-text-input")
+], i);
+export {
+  i as DsTextInput
+};

package/dist-react/components/ds-text-input/styles/common.styles.js

@@ -0,0 +1,12 @@
+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 o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const p = o`
+    :host {
+        display: contents;
+    }
+`;
+export {
+  p as commonStyles
+};