@cupra/ui-kit 2.0.0-canary.19 → 2.0.0-canary.191

package/dist-react/esm/components/ds-theme-switch/ds-theme-switch.js

@@ -0,0 +1,29 @@
+import { c as e } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/consume.js";
+import { themeContext as t } from "../ds-theme-provider/themeContext.js";
+import { E as n, x as r } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { i } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n as a } 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 o } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
+//#region src/components/ds-theme-switch/ds-theme-switch.ts
+var c = class extends i {
+	getMatchingTemplate() {
+		return this.activeTheme ? this.querySelector(`template[slot="${this.activeTheme}"]`) : null;
+	}
+	getDefaultTemplate() {
+		return this.querySelector("template[slot=\"default\"]");
+	}
+	render() {
+		let e = this.getMatchingTemplate();
+		if (e) return r`${e.content.cloneNode(!0)}`;
+		let t = this.getDefaultTemplate();
+		return t ? r`${t.content.cloneNode(!0)}` : n;
+	}
+};
+o([a({ attribute: !1 }), e({
+	context: t,
+	subscribe: !0
+})], c.prototype, "activeTheme", void 0), c = o([s("ds-theme-switch", { skipTagAsComponentName: !0 })], c);
+//#endregion

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

@@ -1,95 +1,82 @@
-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`
+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 { o as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/unsafe-html.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 { toastManager as d } from "./utils/ToastManager.js";
+import "../ds-toast-message/ds-toast-message.js";
+import { c as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/repeat.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/repeat.js";
+import { containerStyles as p, toastStyles as m } from "./styles/common.styles.js";
+//#region src/components/ds-toast/ds-toast.ts
+var h, g = (h = class extends a {
+	constructor(...e) {
+		super(...e), this.position = "top-right", this.toasts = [], this.unsubscribe = null;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.unsubscribe = d.subscribe((e) => {
+			this.toasts = e;
+		});
+	}
+	disconnectedCallback() {
+		this.unsubscribe && (this.unsubscribe(), this.unsubscribe = null), super.disconnectedCallback();
+	}
+	handleAnimationEnd(e) {
+		let t = e.target;
+		if (t.classList.contains("exiting") && (e.animationName === "toast-out-left" || e.animationName === "toast-out-right")) {
+			let e = t.getAttribute("data-id");
+			e && d.removeToast(e);
+		}
+	}
+	getToastMessageTemplate(n) {
+		let r = {
+			toast: !0,
+			[n.status]: !0,
+			exiting: n.exiting
+		}, i = e;
+		if (n.referenceId) {
+			let e = document.querySelector(`[data-id="${n.referenceId}"]`);
+			if (e) {
+				let t = e.cloneNode(!0);
+				t.setAttribute("data-template", "false"), t.setAttribute("data-id", n.id), i = s(t.outerHTML);
+			}
+		} else i = c`<ds-toast-message
+                data-id=${n.id}
+                data-template="false"
+                title=${u(n.title)}
+                text=${u(n.text)}
+                status=${u(n.status)}
+            ></ds-toast-message>`;
+		return t`<div class=${l(r)} data-id="${n.id}">${i}</div>`;
+	}
+	get containerClasses() {
+		return {
+			"toast-container": !0,
+			[this.position]: !0
+		};
+	}
+	render() {
+		return t`
             <div
                 part="toast-container"
-                class=${u(this.containerClasses)}
+                class=${l(this.containerClasses)}
                 @animationend=${this.handleAnimationEnd}
                 aria-live="polite"
             >
-                ${g(
-      this.toasts,
-      (t) => t.id,
-      (t) => this.getToastMessageTemplate(t)
-    )}
+                ${f(this.toasts, (e) => e.id, (e) => this.getToastMessageTemplate(e))}
             </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
-};
+	}
+}, h.styles = [p, m], h);
+i([n({ type: String })], g.prototype, "position", void 0), i([r()], g.prototype, "toasts", void 0), g = i([o("ds-toast")], g);
+//#endregion

package/dist-react/esm/components/ds-toast/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 n = 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-toast/styles/common.styles.ts
+var t = e`
     :host {
         display: contents;
     }
@@ -43,7 +42,7 @@ const n = t`
         left: 1rem;
         align-items: flex-start;
     }
-`, s = t`
+`, n = e`
     .toast {
         margin-bottom: 1rem;
         animation: toast-in-top 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
@@ -106,7 +105,5 @@ const n = t`
         }
     }
 `;
-export {
-  n as containerStyles,
-  s as toastStyles
-};
+//#endregion
+export { t as containerStyles, n as toastStyles };

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

@@ -1,48 +1,45 @@
-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
-};
+//#region src/components/ds-toast/utils/ToastManager.ts
+var e = 1e4, t = () => typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : Math.random().toString(36).substring(2), n = class n {
+	constructor() {
+		this.toasts = [], this.subscribers = [], this.defaultDuration = e, this.handleAddToast = (e) => {
+			let { id: n = t(), status: r = "default", duration: i = this.defaultDuration, ...a } = e.detail || {}, o = {
+				id: n,
+				status: r,
+				...a,
+				exiting: !1
+			};
+			o.timeoutId = window.setTimeout(() => {
+				this.toasts.find((e) => e.id === n).exiting = !0, this.notifySubscribers();
+			}, i), this.toasts = [...this.toasts, o], this.notifySubscribers();
+		}, this.handleRemoveToast = (e) => {
+			let { id: t, referenceId: n } = e.detail || {};
+			if (!t && !n) return;
+			let r;
+			t ? r = this.toasts.find((e) => e.id === t) : n && (r = this.toasts.find((e) => e.referenceId === n)), r && (r != null && r.timeoutId && window.clearTimeout(r.timeoutId), r.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(e) {
+		let t = this.toasts.find((t) => t.id === e);
+		t != null && t.timeoutId && window.clearTimeout(t.timeoutId), this.toasts = this.toasts.filter((t) => t.id !== e), this.notifySubscribers();
+	}
+	getToasts() {
+		return [...this.toasts];
+	}
+	subscribe(e) {
+		return this.subscribers.push(e), () => {
+			this.subscribers = this.subscribers.filter((t) => t !== e);
+		};
+	}
+	notifySubscribers() {
+		let e = this.getToasts();
+		this.subscribers.forEach((t) => t(e));
+	}
+}.getInstance();
+//#endregion
+export { n as toastManager };

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

@@ -1,103 +1,84 @@
-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: "naked",
-      size: "medium"
-    });
-  }
-  render() {
-    return this.dataTemplate ? v : m`
-            <div class=${f(this.toastMessageClasses)}>
+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 "../ds-icon-button/ds-icon-button.js";
+import { n as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import { toastMessageStyles as d } from "./styles/common.styles.js";
+//#region src/components/ds-toast-message/ds-toast-message.ts
+var f, p = (f = class extends i {
+	constructor(...e) {
+		super(...e), 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() {
+		let e = new CustomEvent("toast:remove", {
+			bubbles: !0,
+			composed: !0,
+			detail: { id: this.dataId }
+		});
+		this.dispatchEvent(e);
+	}
+	get toastMessageClasses() {
+		return {
+			container: !0,
+			[this.status || "default"]: !0
+		};
+	}
+	get iconTemplate() {
+		return s`<ds-icon class="icon" icon-name=${l(this.getIconName())} size="24"></ds-icon>`;
+	}
+	get closeButtonTemplate() {
+		return s`<ds-icon-button
+            data-aria-label="close-button"
+            @click=${this.handleClickCloseButton}
+            icon-name="cross"
+            variant="naked"
+            size="medium"
+        ></ds-icon-button>`;
+	}
+	render() {
+		return this.dataTemplate ? e : t`
+            <div class=${c(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>`)}
+                        ${u(this.title, () => t`<div class="title">${this.title}</div>`)}
+                        ${u(this.text, () => t`<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
-};
+	}
+}, f.styles = [d], f);
+r([n({ type: String })], p.prototype, "status", void 0), r([n({
+	type: String,
+	attribute: "data-id",
+	reflect: !0
+})], p.prototype, "dataId", void 0), r([n({ type: String })], p.prototype, "title", void 0), r([n({ type: String })], p.prototype, "text", void 0), r([n({
+	type: Boolean,
+	converter: o,
+	attribute: "data-template",
+	reflect: !0
+})], p.prototype, "dataTemplate", void 0), p = r([a("ds-toast-message")], p);
+//#endregion