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

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

@@ -0,0 +1,87 @@
+import { UiKitElement as u } from "../base/UiKitElement.js";
+import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
+import { inputStatesMixin as c } from "../../mixins/inputStatesMixin.js";
+import { validateMaxLength as f } 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 l } 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 p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as x } from "./styles/common.styles.js";
+var g = Object.defineProperty, E = Object.getOwnPropertyDescriptor, a = (r, e, o, i) => {
+  for (var s = i > 1 ? void 0 : i ? E(e, o) : e, h = r.length - 1, d; h >= 0; h--)
+    (d = r[h]) && (s = (i ? d(e, o, s) : d(s)) || s);
+  return i && s && g(e, o, s), s;
+};
+let t = class extends c(u) {
+  constructor() {
+    super(...arguments), this.keyboardMode = !1, this.size = "medium", this.helperText = "", this.forcedError = "", this.invalidError = "", this.mode = "light";
+  }
+  onInputReady(r) {
+    r.classList.add("ds-scroll");
+  }
+  get classes() {
+    return {
+      container: !0,
+      error: !!this.forcedError,
+      [this.size]: !!this.size,
+      [this.mode]: !!this.mode,
+      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=${v(this.classes)}>
+                <div class="input-container">
+                    <slot></slot>
+                </div>
+                <div class="footer">
+                    ${this.helperTextTemplate}
+                    ${this.forcedErrorTemplate}
+                    ${this.invalidErrorTemplate}
+                    ${this.lengthTemplate}
+                </div>
+            </div>
+        `;
+  }
+  get lengthTemplate() {
+    var e, o, i;
+    const r = (o = (e = this.nativeInput) == null ? void 0 : e.maxLength) == null ? void 0 : o.toString();
+    return f(r) ? n`<span class="char-counter">${((i = this.inputStates.currentValue) == null ? void 0 : i.length) || 0}/${r}</span>` : l;
+  }
+  get helperTextTemplate() {
+    return this.forcedError || this.inputStates.invalid && this.invalidError ? l : 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>` : l;
+  }
+  get invalidErrorTemplate() {
+    return this.forcedError || !this.inputStates.invalid || !this.invalidError ? l : n`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
+  }
+};
+t.styles = [x];
+a([
+  p({ type: String })
+], t.prototype, "size", 2);
+a([
+  p({ type: String, attribute: "helper-text" })
+], t.prototype, "helperText", 2);
+a([
+  p({ type: String, attribute: "forced-error" })
+], t.prototype, "forcedError", 2);
+a([
+  p({ type: String, attribute: "invalid-error" })
+], t.prototype, "invalidError", 2);
+a([
+  p({ type: String })
+], t.prototype, "mode", 2);
+t = a([
+  m("ds-textarea")
+], t);
+export {
+  t as DsTextarea
+};

package/dist-react/components/ds-textarea/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
+};

package/dist-react/components/ds-theme-provider/ds-theme-provider.js

@@ -0,0 +1,90 @@
+import { THEME_STORAGE_KEY as p } from "../../core/theme.constants.js";
+import { customUiKitElement as f } from "../../decorators/customUiKitElement.js";
+import { provide as c } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.js";
+import { pubSub as u } from "../../utils/PubSub.js";
+import { booleanConverter as i } 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 y, html as $ } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { LitElement as v } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { fontsConfig as F } from "../../styles/fonts-config.js";
+import { themeContext as S } from "./themeContext.js";
+var w = Object.defineProperty, E = Object.getOwnPropertyDescriptor, h = (t, o, s, r) => {
+  for (var e = r > 1 ? void 0 : r ? E(o, s) : o, a = t.length - 1, n; a >= 0; a--)
+    (n = t[a]) && (e = (r ? n(o, s, e) : n(e)) || e);
+  return r && e && w(o, s, e), e;
+};
+let m = class extends v {
+  constructor() {
+    super(...arguments), this.loadFonts = !0, this.loadStyles = !0, this.cssLoaded = !1, this.loadedFonts = /* @__PURE__ */ new Set();
+  }
+  updated(t) {
+    super.updated(t), t.has("theme") && (u.publish("theme", this.theme), sessionStorage == null || sessionStorage.setItem(p, this.theme), this.loadThemeFonts(), this.loadThemeStyles().then(() => {
+      this.cssLoaded = !0;
+    }));
+  }
+  loadThemeFonts() {
+    var t;
+    (t = F[this.theme]) == null || t.fonts.forEach((o) => {
+      this.loadThemeFont(o);
+    });
+  }
+  async loadThemeFont({ weight: t, name: o, file: s }) {
+    if (!this.loadFonts) return Promise.resolve();
+    const r = `${o}-${t}`;
+    if (this.loadedFonts.has(r)) return;
+    const e = new FontFace(
+      o,
+      `url('https://ds-assets.cupra.com/fonts/${this.theme}/${s}.woff2') format('woff2'),
+            url('https://ds-assets.cupra.com/fonts/${this.theme}/${s}.woff') format('woff'),
+            url('https://ds-assets.cupra.com/fonts/${this.theme}/${s}.ttf') format('truetype'),
+            url('https://ds-assets.cupra.com/fonts/${this.theme}/${s}.otf') format('opentype')`,
+      {
+        style: "normal",
+        weight: t,
+        display: "swap"
+      }
+    );
+    try {
+      await e.load(), document.fonts.add(e), this.loadedFonts.add(r);
+    } catch (a) {
+      console.error(`Error loading "${o}" font with "${t}" weight:`, a);
+    }
+  }
+  loadThemeStyles() {
+    return this.loadStyles ? new Promise((t, o) => {
+      const s = "/1.0.0", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      if (document.head.querySelector(`link[href="${r}"]`)) t();
+      else {
+        const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");
+        n.id = e, n.rel = "stylesheet", n.href = r, n.onload = () => t(), n.onerror = () => o(new Error(`Failed to load theme CSS: ${r}`)), document.head.appendChild(n), a == null || a.remove();
+      }
+    }) : Promise.resolve();
+  }
+  render() {
+    return this.cssLoaded ? $`<slot></slot>` : y;
+  }
+};
+h([
+  d({ type: Boolean, converter: i, attribute: "load-fonts" })
+], m.prototype, "loadFonts", 2);
+h([
+  d({ type: Boolean, converter: i, attribute: "load-styles" })
+], m.prototype, "loadStyles", 2);
+h([
+  c({ context: S }),
+  d({ type: String })
+], m.prototype, "theme", 2);
+h([
+  l()
+], m.prototype, "cssLoaded", 2);
+h([
+  l()
+], m.prototype, "loadedFonts", 2);
+m = h([
+  f("ds-theme-provider")
+], m);
+export {
+  m as DsThemeProvider
+};

package/dist-react/components/ds-theme-provider/themeContext.js

@@ -0,0 +1,5 @@
+import { createContext as t } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/create-context.js";
+const o = t("theme");
+export {
+  o as themeContext
+};

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

@@ -0,0 +1,95 @@
+import { UiKitElement as p } from "../base/UiKitElement.js";
+import { toastManager as l } from "./utils/ToastManager.js";
+import { customUiKitElement as d } 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 f, html as m } 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 b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as h } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { repeat as g } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/repeat.js";
+import { unsafeHTML as v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
+import { containerStyles as y, toastStyles as M } from "./styles/common.styles.js";
+var T = Object.defineProperty, x = Object.getOwnPropertyDescriptor, c = (t, i, s, a) => {
+  for (var e = a > 1 ? void 0 : a ? x(i, s) : i, o = t.length - 1, n; o >= 0; o--)
+    (n = t[o]) && (e = (a ? n(i, s, e) : n(e)) || e);
+  return a && e && T(i, s, e), e;
+};
+let r = class extends p {
+  constructor() {
+    super(...arguments), this.position = "top-right", this.toasts = [], this.unsubscribe = null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.unsubscribe = l.subscribe((t) => {
+      this.toasts = t;
+    });
+  }
+  disconnectedCallback() {
+    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = null), super.disconnectedCallback();
+  }
+  handleAnimationEnd(t) {
+    const i = t.target;
+    if (i.classList.contains("exiting") && (t.animationName === "toast-out-left" || t.animationName === "toast-out-right")) {
+      const s = i.getAttribute("data-id");
+      s && l.removeToast(s);
+    }
+  }
+  getToastMessageTemplate(t) {
+    const i = {
+      toast: !0,
+      [t.status]: !0,
+      exiting: t.exiting
+    };
+    let s = f;
+    if (t.referenceId) {
+      const a = document.querySelector(`[data-id="${t.referenceId}"]`);
+      if (a) {
+        const e = a.cloneNode(!0);
+        e.setAttribute("data-template", "false"), e.setAttribute("data-id", t.id), s = v(e.outerHTML);
+      }
+    } else
+      s = this.componentFactory.createToastMessage({
+        "data-id": t.id,
+        "data-template": !1,
+        title: t.title,
+        text: t.text,
+        status: t.status
+      });
+    return m`<div class=${u(i)} data-id="${t.id}">${s}</div>`;
+  }
+  get containerClasses() {
+    return {
+      "toast-container": !0,
+      [this.position]: !0
+    };
+  }
+  render() {
+    return m`
+            <div
+                part="toast-container"
+                class=${u(this.containerClasses)}
+                @animationend=${this.handleAnimationEnd}
+                aria-live="polite"
+            >
+                ${g(
+      this.toasts,
+      (t) => t.id,
+      (t) => this.getToastMessageTemplate(t)
+    )}
+            </div>
+        `;
+  }
+};
+r.styles = [y, M];
+c([
+  b({ type: String })
+], r.prototype, "position", 2);
+c([
+  h()
+], r.prototype, "toasts", 2);
+r = c([
+  d("ds-toast")
+], r);
+export {
+  r as DsToast
+};

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

@@ -0,0 +1,112 @@
+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;
+    }
+
+    .toast-container {
+        position: fixed;
+        z-index: var(--ds-z-index-toast);
+        display: flex;
+        flex-direction: column-reverse;
+        pointer-events: none;
+    }
+
+    .toast-container.top-right {
+        top: 1rem;
+        right: 1rem;
+        align-items: flex-end;
+    }
+
+    .toast-container.top-left {
+        top: 1rem;
+        left: 1rem;
+        align-items: flex-start;
+    }
+
+    .toast-container.bottom-right,
+    .toast-container.bottom-left {
+        flex-direction: column;
+    }
+
+    .toast-container.bottom-right {
+        bottom: 1rem;
+        right: 1rem;
+        align-items: flex-end;
+    }
+
+    .toast-container.bottom-left {
+        bottom: 1rem;
+        left: 1rem;
+        align-items: flex-start;
+    }
+`, s = t`
+    .toast {
+        margin-bottom: 1rem;
+        animation: toast-in-top 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
+        transform: translateY(-1rem);
+    }
+
+    .toast-container.bottom-left .toast,
+    .toast-container.bottom-right .toast {
+        animation: toast-in-bottom 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
+        transform: translateY(1rem);
+    }
+
+    .toast-container.bottom-left .toast.exiting,
+    .toast-container.top-left .toast.exiting {
+        animation: toast-out-left 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
+    }
+
+    .toast-container.bottom-right .toast.exiting,
+    .toast-container.top-right .toast.exiting {
+        animation: toast-out-right 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
+    }
+
+    @keyframes toast-in-bottom {
+        from {
+            transform: translateY(1rem);
+        }
+        to {
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes toast-in-top {
+        from {
+            transform: translateY(-1rem);
+        }
+        to {
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes toast-out-left {
+        from {
+            opacity: 1;
+            transform: translateX(0);
+        }
+        to {
+            opacity: 0;
+            transform: translateX(-1rem);
+        }
+    }
+
+    @keyframes toast-out-right {
+        from {
+            opacity: 1;
+            transform: translateX(0);
+        }
+        to {
+            opacity: 0;
+            transform: translateX(1rem);
+        }
+    }
+`;
+export {
+  n as containerStyles,
+  s as toastStyles
+};

package/dist-react/components/ds-toast/utils/ToastManager.js

@@ -0,0 +1,48 @@
+const d = () => typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : Math.random().toString(36).substring(2);
+class n {
+  constructor() {
+    this.toasts = [], this.subscribers = [], this.defaultDuration = 1e4, this.handleAddToast = (s) => {
+      const { id: t = d(), status: e = "default", duration: i = this.defaultDuration, ...o } = s.detail || {}, r = {
+        id: t,
+        status: e,
+        ...o,
+        exiting: !1
+      };
+      r.timeoutId = window.setTimeout(() => {
+        this.toasts.find((a) => a.id === t).exiting = !0, this.notifySubscribers();
+      }, i), this.toasts = [...this.toasts, r], this.notifySubscribers();
+    }, this.handleRemoveToast = (s) => {
+      const { id: t, referenceId: e } = s.detail || {};
+      if (!t && !e) return;
+      let i;
+      t ? i = this.toasts.find((o) => o.id === t) : e && (i = this.toasts.find((o) => o.referenceId === e)), i && (i != null && i.timeoutId && window.clearTimeout(i.timeoutId), i.exiting = !0, this.notifySubscribers());
+    }, this.initialize();
+  }
+  initialize() {
+    window.addEventListener("toast:add", this.handleAddToast), window.addEventListener("toast:remove", this.handleRemoveToast);
+  }
+  static getInstance() {
+    return n.instance || (n.instance = new n()), n.instance;
+  }
+  removeToast(s) {
+    const t = this.toasts.find((e) => e.id === s);
+    t != null && t.timeoutId && window.clearTimeout(t.timeoutId), this.toasts = this.toasts.filter((e) => e.id !== s), this.notifySubscribers();
+  }
+  getToasts() {
+    return [...this.toasts];
+  }
+  subscribe(s) {
+    return this.subscribers.push(s), () => {
+      this.subscribers = this.subscribers.filter((t) => t !== s);
+    };
+  }
+  notifySubscribers() {
+    const s = this.getToasts();
+    this.subscribers.forEach((t) => t(s));
+  }
+}
+const u = n.getInstance();
+export {
+  d as generateId,
+  u as toastManager
+};

package/dist-react/components/ds-toast-message/ds-toast-message.js

@@ -0,0 +1,103 @@
+import { UiKitElement as u } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as h } 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 v, html as m } 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 { when as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import { toastMessageStyles as g } from "./styles/common.styles.js";
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (a, o, n, i) => {
+  for (var e = i > 1 ? void 0 : i ? b(o, n) : o, c = a.length - 1, l; c >= 0; c--)
+    (l = a[c]) && (e = (i ? l(o, n, e) : l(e)) || e);
+  return i && e && y(o, n, e), e;
+};
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.status = "default", this.dataId = "", this.title = "", this.text = "", this.dataTemplate = !0;
+  }
+  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() {
+    const a = new CustomEvent("toast:remove", {
+      bubbles: !0,
+      composed: !0,
+      detail: {
+        id: this.dataId
+      }
+    });
+    this.dispatchEvent(a);
+  }
+  get toastMessageClasses() {
+    return {
+      container: !0,
+      [this.status || "default"]: !0
+    };
+  }
+  get iconTemplate() {
+    return this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": this.getIconName(),
+      size: 24
+    });
+  }
+  get closeButtonTemplate() {
+    return this.componentFactory.createIconButton({
+      "data-aria-label": "close-button",
+      "@click": this.handleClickCloseButton,
+      "icon-name": "cross",
+      variant: "standard",
+      size: "medium"
+    });
+  }
+  render() {
+    return this.dataTemplate ? v : m`
+            <div class=${f(this.toastMessageClasses)}>
+                ${this.iconTemplate}
+                <div class="content">
+                    <div class="header">
+                        ${p(this.title, () => m`<div class="title">${this.title}</div>`)}
+                        ${p(this.text, () => m`<div class="message">${this.text}</div>`)}
+                    </div>
+                    <slot></slot>
+                </div>
+                ${this.closeButtonTemplate}
+            </div>
+        `;
+  }
+};
+t.styles = [g];
+s([
+  r({ type: String })
+], t.prototype, "status", 2);
+s([
+  r({ type: String, attribute: "data-id", reflect: !0 })
+], t.prototype, "dataId", 2);
+s([
+  r({ type: String })
+], t.prototype, "title", 2);
+s([
+  r({ type: String })
+], t.prototype, "text", 2);
+s([
+  r({ type: Boolean, converter: h, attribute: "data-template", reflect: !0 })
+], t.prototype, "dataTemplate", 2);
+t = s([
+  d("ds-toast-message")
+], t);
+export {
+  t as DsToastMessage
+};

package/dist-react/components/ds-toast-message/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 t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const r = t`
+    :host {
+        display: contents;
+    }
+`;
+export {
+  r as toastMessageStyles
+};

package/dist-react/components/ds-toggle-button/ds-toggle-button.js

@@ -0,0 +1,73 @@
+import { DsButton as u } from "../ds-button/ds-button.js";
+import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as l } from "../../utils/booleanConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as a } 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 c } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { when as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+var k = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (e, i, n, r) => {
+  for (var t = r > 1 ? void 0 : r ? f(i, n) : i, h = e.length - 1, p; h >= 0; h--)
+    (p = e[h]) && (t = (r ? p(i, n, t) : p(t)) || t);
+  return r && t && k(i, n, t), t;
+};
+let s = class extends u {
+  constructor() {
+    super(...arguments), this.checked = !1, this.checkedText = "", this.uncheckedText = "", this.rounded = !0;
+  }
+  updated(e) {
+    super.updated(e), this.iconName = this.checked ? "minus" : "plus", this.variant = this.checked ? "primary" : "secondary";
+  }
+  handleClick() {
+    this.checked = !this.checked, this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          checked: this.checked
+        }
+      })
+    );
+  }
+  render() {
+    var e;
+    return a`
+            <style>
+                :host {
+                    pointer-events: ${this.disabled ? "none" : "visible"};
+                }
+            </style>
+            ${this.cssTokens}
+            <button
+                aria-label=${(e = this.textContent) == null ? void 0 : e.replace(/^\s+|\s+$/g, "")}
+                class=${b(this.classes)}
+                ?disabled=${this.disabled}
+                type=${this.type}
+                @click=${this.handleClick}
+            >
+                ${d(this.iconPosition === "left", () => a`${this.iconTemplate}`)}
+                ${this.checked ? this.checkedText : this.uncheckedText}
+                ${d(this.iconPosition === "right", () => a`${this.iconTemplate}`)}
+            </button>
+        `;
+  }
+};
+o([
+  c({ type: Boolean, converter: l, reflect: !0 })
+], s.prototype, "checked", 2);
+o([
+  c({ type: String, attribute: "checked-text" })
+], s.prototype, "checkedText", 2);
+o([
+  c({ type: String, attribute: "unchecked-text" })
+], s.prototype, "uncheckedText", 2);
+o([
+  c({ type: Boolean, converter: l })
+], s.prototype, "rounded", 2);
+s = o([
+  m("ds-toggle-button", { skipTagAsComponentName: !0, extendComponentNames: ["ds-button"] })
+], s);
+export {
+  s as DsToggleButton
+};