@cupra/ui-kit 2.0.0-canary.88 → 2.0.0-canary.89

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

@@ -1,74 +1,79 @@
-import { UiKitElement as g } from "../base/UiKitElement.js";
-import { customUiKitElement as f } from "../../decorators/customUiKitElement.js";
-import { ViewportMixin as y } from "../../mixins/ViewportMixin.js";
-import { booleanConverter as l } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as $ } from "../../utils/htmlWithTokens.js";
-import { objectConverter as b } 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 u, html as s } 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 { choose as T } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
-import { classMap as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { when as a } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-import { buttonStyles as S, textStyles as x, loadingDotsStyles as P } from "./styles/common.styles.js";
-var w = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (o, r, h, p) => {
-  for (var n = p > 1 ? void 0 : p ? C(r, h) : r, c = o.length - 1, m; c >= 0; c--)
-    (m = o[c]) && (n = (p ? m(r, h, n) : m(n)) || n);
-  return p && n && w(r, h, n), n;
-};
-let t = class extends y(g) {
-  constructor() {
-    super(...arguments), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.destructive = !1, this.htmlTagName = "button", this.type = "button", this.iconPosition = "left", this.rounded = !1, this.fullWidth = !1, this.loading = !1;
-  }
-  firstUpdated() {
-    this.closestForm = this.closest("form");
-  }
-  get classes() {
-    const o = typeof this.size == "string" ? this.size : this.size[this.viewport];
-    return {
-      button: !0,
-      custom: this.htmlTagName === "custom",
-      [o]: !!o,
-      [this.mode]: !!this.mode,
-      [this.variant]: !!this.variant,
-      rounded: this.rounded,
-      disabled: this.disabled || this.loading,
-      destructive: this.destructive,
-      "full-width": this.fullWidth
-    };
-  }
-  handleClick(o) {
-    if (this.href || o.preventDefault(), this.closestForm && this.type === "submit") {
-      const r = new Event("submit", {
-        bubbles: !0,
-        composed: !0,
-        cancelable: !0
-      });
-      this.closestForm.dispatchEvent(r);
-    }
-  }
-  get iconTemplate() {
-    return this.iconName ? this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": this.iconName
-    }) : u;
-  }
-  get loadingTemplate() {
-    return this.loading ? s`
+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.122.0/helpers/decorate.js";
+import { UiKitElement as a } from "../base/UiKitElement.js";
+import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as s } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as c } from "../../utils/htmlWithTokens.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 { 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 { n as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import { buttonStyles as m, loadingDotsStyles as h, textStyles as g } from "./styles/common.styles.js";
+//#region src/components/ds-button/ds-button.ts
+var _ = class extends u(a) {
+	constructor(...e) {
+		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.destructive = !1, this.htmlTagName = "button", this.type = "button", this.iconPosition = "left", this.rounded = !1, this.fullWidth = !1, this.loading = !1;
+	}
+	static {
+		this.styles = [
+			m,
+			g,
+			h
+		];
+	}
+	firstUpdated() {
+		this.closestForm = this.closest("form");
+	}
+	get classes() {
+		let e = typeof this.size == "string" ? this.size : this.size[this.viewport];
+		return {
+			button: !0,
+			custom: this.htmlTagName === "custom",
+			[e]: !!e,
+			[this.mode]: !!this.mode,
+			[this.variant]: !!this.variant,
+			rounded: this.rounded,
+			disabled: this.disabled || this.loading,
+			destructive: this.destructive,
+			"full-width": this.fullWidth
+		};
+	}
+	handleClick(e) {
+		if (this.href || e.preventDefault(), this.closestForm && this.type === "submit") {
+			let e = new Event("submit", {
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0
+			});
+			this.closestForm.dispatchEvent(e);
+		}
+	}
+	get iconTemplate() {
+		return this.iconName ? this.componentFactory.createIcon({
+			class: "icon",
+			"icon-name": this.iconName
+		}) : e;
+	}
+	get loadingTemplate() {
+		return this.loading ? t`
             <span class="loading-dots">
                 <span>.</span>
                 <span>.</span>
                 <span>.</span>
             </span>
-        ` : u;
-  }
-  get contentTemplate() {
-    return this.loading && this.textLoading ? s`${this.textLoading}` : s`<slot></slot>`;
-  }
-  get cssTokens() {
-    return $`
+        ` : e;
+	}
+	get contentTemplate() {
+		return this.loading && this.textLoading ? t`${this.textLoading}` : t`<slot></slot>`;
+	}
+	get cssTokens() {
+		return c`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -79,129 +84,102 @@ let t = class extends y(g) {
                     pointer-events: none;
                 }
             </style>`;
-  }
-  render() {
-    return s`
+	}
+	render() {
+		return t`
             ${this.cssTokens}
-            ${T(this.htmlTagName || "button", [
-      [
-        "button",
-        () => {
-          var o;
-          return s`
-                        <div class=${d(this.classes)}>
+            ${f(this.htmlTagName || "button", [
+			["button", () => t`
+                        <div class=${l(this.classes)}>
                             <button
                                 class="inner"
-                                aria-label=${(o = this.textContent) == null ? void 0 : o.replace(/^\s+|\s+$/g, "")}
+                                aria-label=${this.textContent?.replace(/^\s+|\s+$/g, "")}
                                 type=${this.type}
                                 @click=${this.handleClick}
                                 ?disabled=${this.disabled}
                             >
-                                ${a(this.iconPosition === "left", () => s` ${this.iconTemplate} `)}
+                                ${p(this.iconPosition === "left", () => t` ${this.iconTemplate} `)}
                                 <span class="container">
                                     ${this.contentTemplate}
                                     ${this.loadingTemplate}
                                 </span>
-                                ${a(this.iconPosition === "right", () => s` ${this.iconTemplate} `)}
+                                ${p(this.iconPosition === "right", () => t` ${this.iconTemplate} `)}
                             </button>
                         </div>
-                    `;
-        }
-      ],
-      [
-        "a",
-        () => {
-          var o;
-          return s`
-                        <div class=${d(this.classes)}>
+                    `],
+			["a", () => t`
+                        <div class=${l(this.classes)}>
                             <a
                                 class="inner"
-                                aria-label=${(o = this.textContent) == null ? void 0 : o.replace(/^\s+|\s+$/g, "")}
+                                aria-label=${this.textContent?.replace(/^\s+|\s+$/g, "")}
                                 href=${this.href}
                                 rel=${this.rel}
                                 target=${this.target}
                                 @click=${this.handleClick}
                             >
-                                ${a(this.iconPosition === "left", () => s`${this.iconTemplate}`)}
+                                ${p(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
                                 <span class="container">
                                     ${this.contentTemplate}
                                     ${this.loadingTemplate}
                                 </span>
-                                ${a(this.iconPosition === "right", () => s`${this.iconTemplate}`)}
+                                ${p(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
                             </a>
                         </div>
-                    `;
-        }
-      ],
-      [
-        "custom",
-        () => s`
-                        <div class=${d(this.classes)}>
-                            ${a(this.iconPosition === "left", () => s`${this.iconTemplate}`)}
-                            ${this.loading && this.textLoading ? s`<span class="container">${this.textLoading}${this.loadingTemplate}</span>` : s`<slot></slot>${this.loadingTemplate}`}
-                            ${a(this.iconPosition === "right", () => s`${this.iconTemplate}`)}
+                    `],
+			["custom", () => t`
+                        <div class=${l(this.classes)}>
+                            ${p(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
+                            ${this.loading && this.textLoading ? t`<span class="container">${this.textLoading}${this.loadingTemplate}</span>` : t`<slot></slot>${this.loadingTemplate}`}
+                            ${p(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
                         </div>
-                    `
-      ]
-    ])}
+                    `]
+		])}
         `;
-  }
-};
-t.styles = [S, x, P];
-e([
-  i({ type: String })
-], t.prototype, "variant", 2);
-e([
-  i({ type: String, reflect: !0 })
-], t.prototype, "mode", 2);
-e([
-  i({ type: String, converter: b })
-], t.prototype, "size", 2);
-e([
-  i({ type: Boolean, converter: l })
-], t.prototype, "disabled", 2);
-e([
-  i({ type: Boolean, converter: l })
-], t.prototype, "destructive", 2);
-e([
-  i({ type: String, attribute: "icon-name" })
-], t.prototype, "iconName", 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 })
-], t.prototype, "type", 2);
-e([
-  i({ type: String, attribute: "icon-position" })
-], t.prototype, "iconPosition", 2);
-e([
-  i({ type: Boolean, converter: l })
-], t.prototype, "rounded", 2);
-e([
-  i({ type: Boolean, converter: l, attribute: "full-width" })
-], t.prototype, "fullWidth", 2);
-e([
-  i({ type: Boolean, converter: l })
-], t.prototype, "loading", 2);
-e([
-  i({ type: String, attribute: "text-loading" })
-], t.prototype, "textLoading", 2);
-e([
-  v()
-], t.prototype, "closestForm", 2);
-t = e([
-  f("ds-button")
-], t);
-export {
-  t as DsButton
+	}
 };
+i([n({ type: String })], _.prototype, "variant", void 0), i([n({
+	type: String,
+	reflect: !0
+})], _.prototype, "mode", void 0), i([n({
+	type: String,
+	converter: d
+})], _.prototype, "size", void 0), i([n({
+	type: Boolean,
+	converter: s
+})], _.prototype, "disabled", void 0), i([n({
+	type: Boolean,
+	converter: s
+})], _.prototype, "destructive", void 0), i([n({
+	type: String,
+	attribute: "icon-name"
+})], _.prototype, "iconName", void 0), i([n({
+	type: String,
+	attribute: "html-tag-name"
+})], _.prototype, "htmlTagName", void 0), i([n({
+	type: String,
+	reflect: !0
+})], _.prototype, "href", void 0), i([n({
+	type: String,
+	reflect: !0
+})], _.prototype, "rel", void 0), i([n({
+	type: String,
+	reflect: !0
+})], _.prototype, "target", void 0), i([n({ type: String })], _.prototype, "type", void 0), i([n({
+	type: String,
+	attribute: "icon-position"
+})], _.prototype, "iconPosition", void 0), i([n({
+	type: Boolean,
+	converter: s
+})], _.prototype, "rounded", void 0), i([n({
+	type: Boolean,
+	converter: s,
+	attribute: "full-width"
+})], _.prototype, "fullWidth", void 0), i([n({
+	type: Boolean,
+	converter: s
+})], _.prototype, "loading", void 0), i([n({
+	type: String,
+	attribute: "text-loading"
+})], _.prototype, "textLoading", void 0), i([r()], _.prototype, "closestForm", void 0), _ = i([o("ds-button")], _);
+//#endregion
+export { _ as DsButton };

package/dist-react/esm/components/ds-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 a = 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-button/styles/common.styles.ts
+var t = e`
     :host {
         display: contents;
     }
@@ -60,7 +59,7 @@ const a = t`
     .custom ::slotted(*:focus-visible) {
         outline: none;
     }
-`, s = t`
+`, n = e`
     .naked.container {
         display: inline-flex;
     }
@@ -70,7 +69,7 @@ const a = t`
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-`, d = t`
+`, r = e`
     .loading-dots {
         display: inline-flex;
         align-items: baseline;
@@ -147,8 +146,5 @@ const a = t`
         }
     }
 `;
-export {
-  a as buttonStyles,
-  d as loadingDotsStyles,
-  s as textStyles
-};
+//#endregion
+export { t as buttonStyles, r as loadingDotsStyles, n as textStyles };