@cupra/ui-kit 2.0.0-canary.63 → 2.0.0-canary.65

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

@@ -1,24 +1,24 @@
-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 { 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 o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.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 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 { 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 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;
+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 g(f) {
+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;
   }
@@ -26,11 +26,11 @@ let t = class extends g(f) {
     this.closestForm = this.closest("form");
   }
   get classes() {
-    const i = typeof this.size == "string" ? this.size : this.size[this.viewport];
+    const o = typeof this.size == "string" ? this.size : this.size[this.viewport];
     return {
       button: !0,
       custom: this.htmlTagName === "custom",
-      [i]: !!i,
+      [o]: !!o,
       [this.mode]: !!this.mode,
       [this.variant]: !!this.variant,
       rounded: this.rounded,
@@ -39,14 +39,14 @@ let t = class extends g(f) {
       "full-width": this.fullWidth
     };
   }
-  handleClick(i) {
-    if (this.href || i.preventDefault(), this.closestForm && this.type === "submit") {
-      const n = new Event("submit", {
+  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(n);
+      this.closestForm.dispatchEvent(r);
     }
   }
   get iconTemplate() {
@@ -56,7 +56,7 @@ let t = class extends g(f) {
     }) : u;
   }
   get loadingTemplate() {
-    return this.loading ? o`
+    return this.loading ? s`
             <span class="loading-dots">
                 <span>.</span>
                 <span>.</span>
@@ -64,8 +64,11 @@ let t = class extends g(f) {
             </span>
         ` : u;
   }
+  get contentTemplate() {
+    return this.loading && this.textLoading ? s`${this.textLoading}` : s`<slot></slot>`;
+  }
   get cssTokens() {
-    return b`
+    return $`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -78,60 +81,65 @@ let t = class extends g(f) {
             </style>`;
   }
   render() {
-    return o`
+    return s`
             ${this.cssTokens}
             ${T(this.htmlTagName || "button", [
       [
         "button",
         () => {
-          var i;
-          return o`
-                        <button
-                            aria-label=${(i = this.textContent) == null ? void 0 : i.replace(/^\s+|\s+$/g, "")}
-                            class=${d(this.classes)}
-                            type=${this.type}
-                            @click=${this.handleClick}
-                            ?disabled=${this.disabled}
-                        >
-                            ${p(this.iconPosition === "left", () => o` ${this.iconTemplate} `)}
-                            <span class="container">
-                                <slot></slot>
-                                ${this.loadingTemplate}
-                            </span>
-                            ${p(this.iconPosition === "right", () => o` ${this.iconTemplate} `)}
-                        </button>
+          var o;
+          return s`
+                        <div class=${d(this.classes)}>
+                            <button
+                                class="inner"
+                                aria-label=${(o = this.textContent) == null ? void 0 : o.replace(/^\s+|\s+$/g, "")}
+                                type=${this.type}
+                                @click=${this.handleClick}
+                                ?disabled=${this.disabled}
+                            >
+                                ${a(this.iconPosition === "left", () => s` ${this.iconTemplate} `)}
+                                <span class="container">
+                                    ${this.contentTemplate}
+                                    ${this.loadingTemplate}
+                                </span>
+                                ${a(this.iconPosition === "right", () => s` ${this.iconTemplate} `)}
+                            </button>
+                        </div>
                     `;
         }
       ],
       [
         "a",
         () => {
-          var i;
-          return o`
-                        <a
-                            aria-label=${(i = this.textContent) == null ? void 0 : i.replace(/^\s+|\s+$/g, "")}
-                            class=${d(this.classes)}
-                            href=${this.href}
-                            rel=${this.rel}
-                            target=${this.target}
-                            @click=${this.handleClick}
-                            ?disabled=${this.disabled}
-                        >
-                            ${p(this.iconPosition === "left", () => o`${this.iconTemplate}`)}
-                            <span class="container">
-                                <slot></slot>
-                                ${this.loadingTemplate}
-                            </span>
-                            ${p(this.iconPosition === "right", () => o`${this.iconTemplate}`)}
-                        </a>
+          var o;
+          return s`
+                        <div class=${d(this.classes)}>
+                            <a
+                                class="inner"
+                                aria-label=${(o = this.textContent) == null ? void 0 : o.replace(/^\s+|\s+$/g, "")}
+                                href=${this.href}
+                                rel=${this.rel}
+                                target=${this.target}
+                                @click=${this.handleClick}
+                            >
+                                ${a(this.iconPosition === "left", () => s`${this.iconTemplate}`)}
+                                <span class="container">
+                                    ${this.contentTemplate}
+                                    ${this.loadingTemplate}
+                                </span>
+                                ${a(this.iconPosition === "right", () => s`${this.iconTemplate}`)}
+                            </a>
+                        </div>
                     `;
         }
       ],
       [
         "custom",
-        () => o`
+        () => s`
                         <div class=${d(this.classes)}>
-                            <slot></slot>
+                            ${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}`)}
                         </div>
                     `
       ]
@@ -139,57 +147,60 @@ let t = class extends g(f) {
         `;
   }
 };
-t.styles = [S, P, w];
+t.styles = [S, x, P];
 e([
-  s({ type: String })
+  i({ type: String })
 ], t.prototype, "variant", 2);
 e([
-  s({ type: String, reflect: !0 })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "mode", 2);
 e([
-  s({ type: String, converter: v })
+  i({ type: String, converter: b })
 ], t.prototype, "size", 2);
 e([
-  s({ type: Boolean, converter: a })
+  i({ type: Boolean, converter: l })
 ], t.prototype, "disabled", 2);
 e([
-  s({ type: Boolean, converter: a })
+  i({ type: Boolean, converter: l })
 ], t.prototype, "destructive", 2);
 e([
-  s({ type: String, attribute: "icon-name" })
+  i({ type: String, attribute: "icon-name" })
 ], t.prototype, "iconName", 2);
 e([
-  s({ type: String, attribute: "html-tag-name" })
+  i({ type: String, attribute: "html-tag-name" })
 ], t.prototype, "htmlTagName", 2);
 e([
-  s({ type: String, reflect: !0 })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "href", 2);
 e([
-  s({ type: String, reflect: !0 })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "rel", 2);
 e([
-  s({ type: String, reflect: !0 })
+  i({ type: String, reflect: !0 })
 ], t.prototype, "target", 2);
 e([
-  s({ type: String })
+  i({ type: String })
 ], t.prototype, "type", 2);
 e([
-  s({ type: String, attribute: "icon-position" })
+  i({ type: String, attribute: "icon-position" })
 ], t.prototype, "iconPosition", 2);
 e([
-  s({ type: Boolean, converter: a })
+  i({ type: Boolean, converter: l })
 ], t.prototype, "rounded", 2);
 e([
-  s({ type: Boolean, converter: a, attribute: "full-width" })
+  i({ type: Boolean, converter: l, attribute: "full-width" })
 ], t.prototype, "fullWidth", 2);
 e([
-  s({ type: Boolean, converter: a })
+  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([
-  y("ds-button")
+  f("ds-button")
 ], t);
 export {
   t as DsButton

package/dist/esm/components/ds-button/styles/common.styles.js

@@ -2,7 +2,7 @@ import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@li
 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`
+const a = t`
     :host {
         display: contents;
     }
@@ -22,6 +22,44 @@ const e = t`
     .button.full-width {
         width: 100%;
     }
+
+    .inner,
+    .custom ::slotted(*) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        gap: var(--ui-kit-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;
+    }
+
+    .custom ::slotted(*) {
+        width: auto;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .custom ::slotted(*:disabled),
+    .custom.disabled ::slotted(*) {
+        pointer-events: none;
+        cursor: default;
+    }
+
+    .custom ::slotted(*:focus-visible) {
+        outline: none;
+    }
 `, s = t`
     .naked.container {
         display: inline-flex;
@@ -32,7 +70,7 @@ const e = t`
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-`, l = t`
+`, d = t`
     .loading-dots {
         display: inline-flex;
         align-items: baseline;
@@ -110,7 +148,7 @@ const e = t`
     }
 `;
 export {
-  e as buttonStyles,
-  l as loadingDotsStyles,
+  a as buttonStyles,
+  d as loadingDotsStyles,
   s as textStyles
 };

package/dist/esm/components/ds-chips/styles/common.styles.js

@@ -41,11 +41,18 @@ const e = o`
     }
 
     .scroll-button {
+        display: none;
         position: absolute;
         top: 0;
         z-index: 2;
     }
 
+    @media (min-width: 768px) {
+        .scroll-button {
+            display: block;
+        }
+    }
+
     .scroll-button.left {
         left: 0;
     }