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

package/dist-react/esm/components/ds-interactive-card/ds-interactive-card.js

@@ -1,47 +1,63 @@
-import { UiKitElement as v } from "../base/UiKitElement.js";
-import { customUiKitElement as u } 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 m, html as c } 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 d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as f } from "./styles/common.styles.js";
-var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (r, s, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? g(s, i) : s, l = r.length - 1, n; l >= 0; l--)
-    (n = r[l]) && (t = (o ? n(s, i, t) : n(t)) || t);
-  return o && t && y(s, i, t), t;
-};
-let e = class extends v {
-  constructor() {
-    super(...arguments), this.size = "medium", this.selected = !1, this.error = !1, this.handleClick = (r) => {
-      r.stopPropagation();
-    };
-  }
-  get classes() {
-    return {
-      container: !0,
-      selected: this.selected,
-      [this.size]: !!this.size
-    };
-  }
-  get errorClasses() {
-    return {
-      error: !0,
-      selected: this.selected,
-      [this.size]: !!this.size
-    };
-  }
-  get iconTemplate() {
-    return this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": "cross-circle",
-      size: 24
-    });
-  }
-  get contentTemplate() {
-    return this.error ? m : c`
-            <div part="container" class=${d(this.classes)} data-testid="ds-interactive-card-container" tabindex="0">
+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 "../ds-icon-button/ds-icon-button.js";
+import { commonStyles as l } from "./styles/common.styles.js";
+//#region src/components/ds-interactive-card/ds-interactive-card.ts
+var u, d = (u = class extends i {
+	constructor(...e) {
+		super(...e), this.size = "medium", this.selected = !1, this.error = !1, this.showClose = !1, this.handleClick = (e) => {
+			e.stopPropagation();
+		}, this.handleCloseButtonClick = (e) => {
+			e.stopPropagation();
+			let t = new CustomEvent("interactive-card:close", {
+				bubbles: !0,
+				composed: !0
+			});
+			this.dispatchEvent(t);
+		};
+	}
+	get classes() {
+		return {
+			container: !0,
+			selected: this.selected,
+			[this.size]: !!this.size,
+			"has-close": this.showClose
+		};
+	}
+	get errorClasses() {
+		return {
+			error: !0,
+			selected: this.selected,
+			[this.size]: !!this.size
+		};
+	}
+	get iconTemplate() {
+		return s`<ds-icon class="icon" icon-name="cross-circle" size="24"></ds-icon>`;
+	}
+	get closeButtonTemplate() {
+		return this.showClose ? s`<ds-icon-button
+            class="close-button"
+            data-aria-label="Close"
+            @click=${this.handleCloseButtonClick}
+            icon-name="cross"
+            variant="naked"
+            size="medium"
+        ></ds-icon-button>` : e;
+	}
+	get contentTemplate() {
+		return this.error ? e : t`
+            <div part="container" class=${c(this.classes)} data-testid="ds-interactive-card-container" tabindex="0">
+                ${this.closeButtonTemplate}
                 <header class="header" part="header">
                     <div class="header-main">
                         <slot name="title" class="title" part="title"></slot>
@@ -53,38 +69,34 @@ let e = class extends v {
                 <footer @click=${this.handleClick} class="cta" part="cta"><slot name="cta"></slot></footer>
             </div>
     `;
-  }
-  get errorTemplate() {
-    return this.error ? c`
-            <div part="error" class=${d(this.errorClasses)}>
+	}
+	get errorTemplate() {
+		return this.error ? t`
+            <div part="error" class=${c(this.errorClasses)}>
                 ${this.iconTemplate}
                 <div class="error-content" part="error-text">
                     <slot class="error-title" name="error-title"></slot>
                     <slot class="error-text" name="error-text" data-testid="ds-interactive-card-error-text"></slot>
                 </div>
             </div>
-    ` : m;
-  }
-  render() {
-    return c`
+    ` : e;
+	}
+	render() {
+		return t`
             ${this.contentTemplate}
             ${this.errorTemplate}
         `;
-  }
-};
-e.styles = [f];
-a([
-  p({ type: String })
-], e.prototype, "size", 2);
-a([
-  p({ type: Boolean, converter: h })
-], e.prototype, "selected", 2);
-a([
-  p({ type: Boolean, converter: h })
-], e.prototype, "error", 2);
-e = a([
-  u("ds-interactive-card")
-], e);
-export {
-  e as DsInteractiveCard
-};
+	}
+}, u.styles = [l], u);
+r([n({ type: String })], d.prototype, "size", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], d.prototype, "selected", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], d.prototype, "error", void 0), r([n({
+	type: Boolean,
+	converter: o,
+	attribute: "show-close"
+})], d.prototype, "showClose", void 0), d = r([a("ds-interactive-card")], d);
+//#endregion

package/dist-react/esm/components/ds-interactive-card/styles/common.styles.js

@@ -1,12 +1,10 @@
-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`
+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-interactive-card/styles/common.styles.ts
+var t = e`
     :host {
         display: contents;
     }
 `;
-export {
-  p as commonStyles
-};
+//#endregion
+export { t as commonStyles };

package/dist-react/esm/components/ds-link-button/ds-link-button.js

@@ -1,43 +1,42 @@
-import { UiKitElement as d } from "../base/UiKitElement.js";
-import { customUiKitElement as f } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as u } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as y } 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 r, 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 i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { choose as g } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
-import { classMap as c } 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 $ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, e = (s, n, a, l) => {
-  for (var o = l > 1 ? void 0 : l ? v(n, a) : n, p = s.length - 1, h; p >= 0; p--)
-    (h = s[p]) && (o = (l ? h(n, a, o) : h(o)) || o);
-  return l && o && $(n, a, o), o;
-};
-let t = class extends d {
-  constructor() {
-    super(...arguments), this.mode = "light", this.size = "large", this.underline = !1, this.disabled = !1, this.iconName = "arrow-right", this.iconPosition = "right";
-  }
-  get iconTemplate() {
-    return this.iconName === "none" ? r : this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": this.iconName
-    });
-  }
-  get classes() {
-    return {
-      "link-button": !0,
-      disabled: !!this.disabled,
-      underline: !!this.underline,
-      [this.size]: !0,
-      [this.mode]: !!this.mode
-    };
-  }
-  handleClick(s) {
-    this.href || s.preventDefault();
-  }
-  get styleTokens() {
-    return y`
+import "../ds-theme-provider/themeContext.js";
+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 { r as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { commonStyles as d } from "./styles/common.styles.js";
+//#region src/components/ds-link-button/ds-link-button.ts
+var f, p = (f = class extends i {
+	constructor(...e) {
+		super(...e), this.mode = "light", this.size = "large", this.underline = !1, this.disabled = !1, this.iconName = "arrow-right", this.iconPosition = "right";
+	}
+	get iconTemplate() {
+		return this.iconName === "none" ? e : s`<ds-icon class="icon" icon-name=${l(this.iconName)}></ds-icon>`;
+	}
+	get classes() {
+		return {
+			"link-button": !0,
+			disabled: !!this.disabled,
+			underline: !!this.underline,
+			[this.size]: !0,
+			[this.mode]: !!this.mode
+		};
+	}
+	handleClick(e) {
+		this.href || e.preventDefault();
+	}
+	get styleTokens() {
+		return t`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -45,24 +44,17 @@ let t = class extends d {
                 }
             </style>
         `;
-  }
-  render() {
-    return m`
+	}
+	render() {
+		return t`
             ${this.styleTokens}
-            ${g(this.htmlTagName || "button", [
-      [
-        "button",
-        () => m`
+            ${u(this.htmlTagName || "button", [["button", () => t`
                         <button class=${c(this.classes)} ?disabled=${this.disabled}>
-                            ${this.iconPosition === "left" ? this.iconTemplate : r}
-                            <slot></slot>
-                            ${this.iconPosition === "right" ? this.iconTemplate : r}
+                            ${this.iconPosition === "left" ? this.iconTemplate : e}
+                            <span class="label"><slot></slot></span>
+                            ${this.iconPosition === "right" ? this.iconTemplate : e}
                         </button>
-                    `
-      ],
-      [
-        "a",
-        () => m`
+                    `], ["a", () => t`
                         <a
                             class=${c(this.classes)}
                             href=${this.href}
@@ -71,50 +63,40 @@ let t = class extends d {
                             @click=${this.handleClick}
                             ?disabled=${this.disabled}
                         >
-                            ${this.iconPosition === "left" ? this.iconTemplate : r}
-                            <slot></slot>
-                            ${this.iconPosition === "right" ? this.iconTemplate : r}
+                            ${this.iconPosition === "left" ? this.iconTemplate : e}
+                            <span class="label"><slot></slot></span>
+                            ${this.iconPosition === "right" ? this.iconTemplate : e}
                         </a>
-                    `
-      ]
-    ])}
+                    `]])}
         `;
-  }
-};
-t.styles = [b];
-e([
-  i({ type: String, reflect: !0 })
-], t.prototype, "mode", 2);
-e([
-  i({ type: String })
-], t.prototype, "size", 2);
-e([
-  i({ type: Boolean, converter: u })
-], t.prototype, "underline", 2);
-e([
-  i({ type: Boolean, converter: u })
-], t.prototype, "disabled", 2);
-e([
-  i({ type: String, attribute: "html-tag-name" })
-], t.prototype, "htmlTagName", 2);
-e([
-  i({ type: String, reflect: !0 })
-], t.prototype, "href", 2);
-e([
-  i({ type: String, reflect: !0 })
-], t.prototype, "rel", 2);
-e([
-  i({ type: String, reflect: !0 })
-], t.prototype, "target", 2);
-e([
-  i({ type: String, attribute: "icon-name" })
-], t.prototype, "iconName", 2);
-e([
-  i({ type: String, attribute: "icon-position" })
-], t.prototype, "iconPosition", 2);
-t = e([
-  f("ds-link-button")
-], t);
-export {
-  t as DsLinkButton
-};
+	}
+}, f.styles = [d], f);
+r([n({
+	type: String,
+	reflect: !0
+})], p.prototype, "mode", void 0), r([n({ type: String })], p.prototype, "size", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], p.prototype, "underline", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], p.prototype, "disabled", void 0), r([n({
+	type: String,
+	attribute: "html-tag-name"
+})], p.prototype, "htmlTagName", void 0), r([n({
+	type: String,
+	reflect: !0
+})], p.prototype, "href", void 0), r([n({
+	type: String,
+	reflect: !0
+})], p.prototype, "rel", void 0), r([n({
+	type: String,
+	reflect: !0
+})], p.prototype, "target", void 0), r([n({
+	type: String,
+	attribute: "icon-name"
+})], p.prototype, "iconName", void 0), r([n({
+	type: String,
+	attribute: "icon-position"
+})], p.prototype, "iconPosition", void 0), p = r([a("ds-link-button")], p);
+//#endregion

package/dist-react/esm/components/ds-link-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 n } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const r = n`
+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-link-button/styles/common.styles.ts
+var t = e`
     :host {
         display: inline-flex;
     }
@@ -19,6 +18,5 @@ const r = n`
         cursor: pointer;
     }
 `;
-export {
-  r as commonStyles
-};
+//#endregion
+export { t as commonStyles };

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

@@ -1,30 +1,27 @@
-import { UiKitElement as a } from "../base/UiKitElement.js";
-import { customUiKitElement as n } from "../../decorators/customUiKitElement.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as u } 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 f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as v } from "./styles/common.styles.js";
-import { cupraDiagonalStyles as d } from "./styles/cupra-diagonal.styles.js";
-var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (m, s, i, e) => {
-  for (var t = e > 1 ? void 0 : e ? _(s, i) : s, o = m.length - 1, l; o >= 0; o--)
-    (l = m[o]) && (t = (e ? l(s, i, t) : l(t)) || t);
-  return e && t && y(s, i, t), t;
-};
-let r = class extends a {
-  constructor() {
-    super(...arguments), this.size = "medium";
-  }
-  get classes() {
-    return {
-      "ds-list": !0,
-      [`size-${this.size}`]: !0
-    };
-  }
-  render() {
-    return u`
-            <div class=${f(this.classes)}>
+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 { n as t } 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 n } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as r } from "../base/UiKitElement.js";
+import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
+import { e as a } 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 { commonStyles as o } from "./styles/common.styles.js";
+//#region src/components/ds-list/ds-list.ts
+var s, c = (s = class extends r {
+	constructor(...e) {
+		super(...e), this.size = "large";
+	}
+	get classes() {
+		return {
+			"ds-list": !0,
+			[`size-${this.size}`]: !0
+		};
+	}
+	render() {
+		return e`
+            <div class=${a(this.classes)}>
                 <slot name="title"></slot>
                 <slot name="subtitle"></slot>
                 <div role="list">
@@ -32,15 +29,10 @@ let r = class extends a {
                 </div>
             </div>
         `;
-  }
-};
-r.styles = [v, d];
-p([
-  c({ type: String, reflect: !0 })
-], r.prototype, "size", 2);
-r = p([
-  n("ds-list")
-], r);
-export {
-  r as DsList
-};
+	}
+}, s.styles = [o], s);
+n([t({
+	type: String,
+	reflect: !0
+})], c.prototype, "size", void 0), c = n([i("ds-list")], c);
+//#endregion

package/dist-react/esm/components/ds-list/styles/common.styles.js

@@ -1,11 +1,12 @@
-import { cssWithTokens as o } from "../../../utils/cssWithTokens.js";
-const s = o`
+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-list/styles/common.styles.ts
+var t = e`
     :host {
         display: block;
         width: fit-content;
         padding: 16px 0;
     }
 `;
-export {
-  s as commonStyles
-};
+//#endregion
+export { t as commonStyles };