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

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

@@ -1,71 +1,74 @@
-import { UiKitElement as f } from "../base/UiKitElement.js";
-import { customUiKitElement as y } from "../../decorators/customUiKitElement.js";
-import { ViewportMixin as g } from "../../mixins/ViewportMixin.js";
-import { booleanConverter as a } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as b } from "../../utils/htmlWithTokens.js";
-import { objectConverter as v } 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 o } 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 s } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as $ } 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 p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-import { buttonStyles as S, textStyles as P, loadingDotsStyles as w } from "./styles/common.styles.js";
-var C = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (i, n, h, l) => {
-  for (var r = l > 1 ? void 0 : l ? x(n, h) : n, c = i.length - 1, m; c >= 0; c--)
-    (m = i[c]) && (r = (l ? m(n, h, r) : m(r)) || r);
-  return l && r && C(n, h, r), r;
-};
-let t = class extends g(f) {
-  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 i = typeof this.size == "string" ? this.size : this.size[this.viewport];
-    return {
-      button: !0,
-      custom: this.htmlTagName === "custom",
-      [i]: !!i,
-      [this.mode]: !!this.mode,
-      [this.variant]: !!this.variant,
-      rounded: this.rounded,
-      disabled: this.disabled || this.loading,
-      destructive: this.destructive,
-      "full-width": this.fullWidth
-    };
-  }
-  handleClick(i) {
-    if (this.href || i.preventDefault(), this.closestForm && this.type === "submit") {
-      const n = new Event("submit", {
-        bubbles: !0,
-        composed: !0,
-        cancelable: !0
-      });
-      this.closestForm.dispatchEvent(n);
-    }
-  }
-  get iconTemplate() {
-    return this.iconName ? this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": this.iconName
-    }) : u;
-  }
-  get loadingTemplate() {
-    return this.loading ? o`
+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 { ViewportMixin as l } from "../../mixins/ViewportMixin.js";
+import { objectConverter as u } from "../../utils/objectConverter.js";
+import { r as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { n as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import { buttonStyles as p, loadingDotsStyles as m, textStyles as h } from "./styles/common.styles.js";
+//#region src/components/ds-button/ds-button.ts
+var g, _ = (g = class extends l(i) {
+	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;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.closestForm = this.closest("form");
+	}
+	get classes() {
+		let e = typeof this.size == "string" ? this.size : this.size[this.viewport];
+		return {
+			button: !0,
+			[`tag-${this.htmlTagName}`]: !0,
+			[`variant-${this.variant}`]: !0,
+			[e]: !!e,
+			[this.mode]: !!this.mode,
+			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);
+		}
+	}
+	handleCustomClick(e) {
+		var t;
+		let n = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot"), r = n == null ? void 0 : n.assignedElements()[0];
+		r && !r.contains(e.composedPath()[0]) && (e.stopPropagation(), r.click());
+	}
+	get iconTemplate() {
+		return this.iconName ? s`<ds-icon class="icon" icon-name=${this.iconName}></ds-icon>` : e;
+	}
+	get loadingTemplate() {
+		return this.loading ? t`
             <span class="loading-dots">
                 <span>.</span>
                 <span>.</span>
                 <span>.</span>
             </span>
-        ` : u;
-  }
-  get cssTokens() {
-    return b`
+        ` : e;
+	}
+	get contentTemplate() {
+		return this.loading && this.textLoading ? t`${this.textLoading}` : t`<slot></slot>`;
+	}
+	get cssTokens() {
+		return t`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -76,121 +79,111 @@ let t = class extends g(f) {
                     pointer-events: none;
                 }
             </style>`;
-  }
-  render() {
-    return o`
+	}
+	render() {
+		return t`
             ${this.cssTokens}
-            ${T(this.htmlTagName || "button", [
-      [
-        "button",
-        () => {
-          var i;
-          return o`
+            ${d(this.htmlTagName || "button", [
+			["button", () => {
+				var e;
+				return t`
                         <button
-                            aria-label=${(i = this.textContent) == null ? void 0 : i.replace(/^\s+|\s+$/g, "")}
-                            class=${d(this.classes)}
+                            class=${c(this.classes)}
+                            aria-label=${(e = this.textContent) == null ? void 0 : e.replace(/^\s+|\s+$/g, "")}
                             type=${this.type}
                             @click=${this.handleClick}
                             ?disabled=${this.disabled}
                         >
-                            ${p(this.iconPosition === "left", () => o` ${this.iconTemplate} `)}
+                            ${f(this.iconPosition === "left", () => t` ${this.iconTemplate} `)}
                             <span class="container">
-                                <slot></slot>
+                                ${this.contentTemplate}
                                 ${this.loadingTemplate}
                             </span>
-                            ${p(this.iconPosition === "right", () => o` ${this.iconTemplate} `)}
+                            ${f(this.iconPosition === "right", () => t` ${this.iconTemplate} `)}
                         </button>
                     `;
-        }
-      ],
-      [
-        "a",
-        () => {
-          var i;
-          return o`
+			}],
+			["a", () => {
+				var e;
+				return t`
                         <a
-                            aria-label=${(i = this.textContent) == null ? void 0 : i.replace(/^\s+|\s+$/g, "")}
-                            class=${d(this.classes)}
+                            class=${c(this.classes)}
+                            aria-label=${(e = this.textContent) == null ? void 0 : e.replace(/^\s+|\s+$/g, "")}
                             href=${this.href}
                             rel=${this.rel}
                             target=${this.target}
                             @click=${this.handleClick}
-                            ?disabled=${this.disabled}
                         >
-                            ${p(this.iconPosition === "left", () => o`${this.iconTemplate}`)}
+                            ${f(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
                             <span class="container">
-                                <slot></slot>
+                                ${this.contentTemplate}
                                 ${this.loadingTemplate}
                             </span>
-                            ${p(this.iconPosition === "right", () => o`${this.iconTemplate}`)}
+                            ${f(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
                         </a>
                     `;
-        }
-      ],
-      [
-        "custom",
-        () => o`
-                        <div class=${d(this.classes)}>
-                            <slot></slot>
+			}],
+			["custom", () => t`
+                        <div class=${c(this.classes)} @click=${this.handleCustomClick}>
+                            ${f(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
+                            ${this.loading && this.textLoading ? t`<span class="container">${this.textLoading}${this.loadingTemplate}</span>` : t`<slot></slot>${this.loadingTemplate}`}
+                            ${f(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
                         </div>
-                    `
-      ]
-    ])}
+                    `]
+		])}
         `;
-  }
-};
-t.styles = [S, P, w];
-e([
-  s({ type: String })
-], t.prototype, "variant", 2);
-e([
-  s({ type: String, reflect: !0 })
-], t.prototype, "mode", 2);
-e([
-  s({ type: String, converter: v })
-], t.prototype, "size", 2);
-e([
-  s({ type: Boolean, converter: a })
-], t.prototype, "disabled", 2);
-e([
-  s({ type: Boolean, converter: a })
-], t.prototype, "destructive", 2);
-e([
-  s({ type: String, attribute: "icon-name" })
-], t.prototype, "iconName", 2);
-e([
-  s({ type: String, attribute: "html-tag-name" })
-], t.prototype, "htmlTagName", 2);
-e([
-  s({ type: String, reflect: !0 })
-], t.prototype, "href", 2);
-e([
-  s({ type: String, reflect: !0 })
-], t.prototype, "rel", 2);
-e([
-  s({ type: String, reflect: !0 })
-], t.prototype, "target", 2);
-e([
-  s({ type: String })
-], t.prototype, "type", 2);
-e([
-  s({ type: String, attribute: "icon-position" })
-], t.prototype, "iconPosition", 2);
-e([
-  s({ type: Boolean, converter: a })
-], t.prototype, "rounded", 2);
-e([
-  s({ type: Boolean, converter: a, attribute: "full-width" })
-], t.prototype, "fullWidth", 2);
-e([
-  s({ type: Boolean, converter: a })
-], t.prototype, "loading", 2);
-e([
-  $()
-], t.prototype, "closestForm", 2);
-t = e([
-  y("ds-button")
-], t);
-export {
-  t as DsButton
-};
+	}
+}, g.styles = [
+	p,
+	h,
+	m
+], g);
+r([n({
+	type: String,
+	reflect: !0
+})], _.prototype, "variant", void 0), r([n({
+	type: String,
+	reflect: !0
+})], _.prototype, "mode", void 0), r([n({
+	type: String,
+	converter: u
+})], _.prototype, "size", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], _.prototype, "disabled", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], _.prototype, "destructive", void 0), r([n({
+	type: String,
+	attribute: "icon-name"
+})], _.prototype, "iconName", void 0), r([n({
+	type: String,
+	attribute: "html-tag-name"
+})], _.prototype, "htmlTagName", void 0), r([n({
+	type: String,
+	reflect: !0
+})], _.prototype, "href", void 0), r([n({
+	type: String,
+	reflect: !0
+})], _.prototype, "rel", void 0), r([n({
+	type: String,
+	reflect: !0
+})], _.prototype, "target", void 0), r([n({ type: String })], _.prototype, "type", void 0), r([n({
+	type: String,
+	attribute: "icon-position"
+})], _.prototype, "iconPosition", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], _.prototype, "rounded", void 0), r([n({
+	type: Boolean,
+	converter: o,
+	attribute: "full-width"
+})], _.prototype, "fullWidth", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], _.prototype, "loading", void 0), r([n({
+	type: String,
+	attribute: "text-loading"
+})], _.prototype, "textLoading", void 0), _ = r([a("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 e = 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;
     }
@@ -14,6 +13,15 @@ const e = t`
         box-sizing: border-box;
         justify-content: center;
         align-items: center;
+        gap: var(--ui-kit-private-button-gap, 0);
+        padding: 0;
+        margin: 0;
+        background: transparent;
+        border: none;
+        color: inherit;
+        font: inherit;
+        text-transform: inherit;
+        letter-spacing: inherit;
         cursor: pointer;
         outline-style: solid;
         max-width: 100%;
@@ -22,7 +30,39 @@ const e = t`
     .button.full-width {
         width: 100%;
     }
-`, s = t`
+
+    .tag-custom ::slotted(*) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        flex: 1;
+        min-width: 0;
+        gap: var(--ui-kit-private-button-gap, 0);
+        padding: 0;
+        margin: 0;
+        background: transparent;
+        border: none;
+        color: inherit;
+        font: inherit;
+        text-transform: inherit;
+        letter-spacing: inherit;
+        text-decoration: none;
+        cursor: inherit;
+        outline: none;
+        box-sizing: border-box;
+    }
+
+    .tag-custom ::slotted(*:disabled),
+    .tag-custom.disabled ::slotted(*) {
+        pointer-events: none;
+        cursor: default;
+    }
+
+    .tag-custom ::slotted(*:focus-visible) {
+        outline: none;
+    }
+`, n = e`
     .naked.container {
         display: inline-flex;
     }
@@ -32,7 +72,7 @@ const e = t`
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-`, l = t`
+`, r = e`
     .loading-dots {
         display: inline-flex;
         align-items: baseline;
@@ -109,8 +149,5 @@ const e = t`
         }
     }
 `;
-export {
-  e as buttonStyles,
-  l as loadingDotsStyles,
-  s as textStyles
-};
+//#endregion
+export { t as buttonStyles, r as loadingDotsStyles, n as textStyles };