@cupra/ui-kit 1.1.0-canary.13 → 1.1.0-canary.15

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

@@ -1,30 +1,33 @@
-import { UiKitElement as u } from "../base/UiKitElement.js";
-import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
-import { inputStatesMixin as c } from "../../mixins/inputStatesMixin.js";
-import { validateMaxLength as f } from "../../utils/validateMaxLength.js";
+import { UiKitElement as m } from "../base/UiKitElement.js";
+import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
+import { ViewportMixin as c } from "../../mixins/ViewportMixin.js";
+import { inputStatesMixin as f } from "../../mixins/inputStatesMixin.js";
+import { objectConverter as v } from "../../utils/objectConverter.js";
+import { validateMaxLength as x } from "../../utils/validateMaxLength.js";
 import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as n, nothing as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { html as a, nothing as l } 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 v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as x } from "./styles/common.styles.js";
-var g = Object.defineProperty, E = Object.getOwnPropertyDescriptor, a = (r, e, o, i) => {
-  for (var s = i > 1 ? void 0 : i ? E(e, o) : e, h = r.length - 1, d; h >= 0; h--)
-    (d = r[h]) && (s = (i ? d(e, o, s) : d(s)) || s);
-  return i && s && g(e, o, s), s;
+import { classMap as g } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as E } from "./styles/common.styles.js";
+var y = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (t, e, o, i) => {
+  for (var s = i > 1 ? void 0 : i ? S(e, o) : e, h = t.length - 1, d; h >= 0; h--)
+    (d = t[h]) && (s = (i ? d(e, o, s) : d(s)) || s);
+  return i && s && y(e, o, s), s;
 };
-let t = class extends c(u) {
+let r = class extends f(c(m)) {
   constructor() {
     super(...arguments), this.keyboardMode = !1, this.size = "medium", this.helperText = "", this.forcedError = "", this.invalidError = "", this.mode = "light";
   }
-  onInputReady(r) {
-    r.classList.add("ds-scroll");
+  onInputReady(t) {
+    t.classList.add("ds-scroll");
   }
   get classes() {
+    const t = typeof this.size == "string" ? this.size : this.size[this.viewport];
     return {
       container: !0,
       error: !!this.forcedError,
-      [this.size]: !!this.size,
+      [t]: !!t,
       [this.mode]: !!this.mode,
       disabled: this.inputStates.disabled,
       filled: this.inputStates.filled,
@@ -34,8 +37,8 @@ let t = class extends c(u) {
     };
   }
   render() {
-    return n`
-            <div class=${v(this.classes)}>
+    return a`
+            <div class=${g(this.classes)}>
                 <div class="input-container">
                     <slot></slot>
                 </div>
@@ -50,38 +53,38 @@ let t = class extends c(u) {
   }
   get lengthTemplate() {
     var e, o, i;
-    const r = (o = (e = this.nativeInput) == null ? void 0 : e.maxLength) == null ? void 0 : o.toString();
-    return f(r) ? n`<span class="char-counter">${((i = this.inputStates.currentValue) == null ? void 0 : i.length) || 0}/${r}</span>` : l;
+    const t = (o = (e = this.nativeInput) == null ? void 0 : e.maxLength) == null ? void 0 : o.toString();
+    return x(t) ? a`<span class="char-counter">${((i = this.inputStates.currentValue) == null ? void 0 : i.length) || 0}/${t}</span>` : l;
   }
   get helperTextTemplate() {
-    return this.forcedError || this.inputStates.invalid && this.invalidError ? l : n`<span class="support-text helper-text">${this.helperText}</span>`;
+    return this.forcedError || this.inputStates.invalid && this.invalidError ? l : a`<span class="support-text helper-text">${this.helperText}</span>`;
   }
   get forcedErrorTemplate() {
-    return this.forcedError ? n`<span class="support-text error-text forced-error">${this.forcedError}</span>` : l;
+    return this.forcedError ? a`<span class="support-text error-text forced-error">${this.forcedError}</span>` : l;
   }
   get invalidErrorTemplate() {
-    return this.forcedError || !this.inputStates.invalid || !this.invalidError ? l : n`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
+    return this.forcedError || !this.inputStates.invalid || !this.invalidError ? l : a`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
   }
 };
-t.styles = [x];
-a([
-  p({ type: String })
-], t.prototype, "size", 2);
-a([
+r.styles = [E];
+n([
+  p({ type: String, converter: v })
+], r.prototype, "size", 2);
+n([
   p({ type: String, attribute: "helper-text" })
-], t.prototype, "helperText", 2);
-a([
+], r.prototype, "helperText", 2);
+n([
   p({ type: String, attribute: "forced-error" })
-], t.prototype, "forcedError", 2);
-a([
+], r.prototype, "forcedError", 2);
+n([
   p({ type: String, attribute: "invalid-error" })
-], t.prototype, "invalidError", 2);
-a([
+], r.prototype, "invalidError", 2);
+n([
   p({ type: String })
-], t.prototype, "mode", 2);
-t = a([
-  m("ds-textarea")
-], t);
+], r.prototype, "mode", 2);
+r = n([
+  u("ds-textarea")
+], r);
 export {
-  t as DsTextarea
+  r as DsTextarea
 };

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

@@ -57,7 +57,7 @@ let m = class extends F {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/1.1.0-canary.13", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.1.0-canary.15", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");

package/dist-react/esm/index.js

@@ -64,7 +64,9 @@ import "./components/ds-toggle-button/ds-toggle-button.js";
 import "./components/ds-toggle-switch/ds-toggle-switch.js";
 import "./components/ds-tooltip/ds-tooltip.js";
 import "./components/ds-media-control/ds-media-control.js";
-import { iconNames as bo } from "./components/ds-icon/iconNames.js";
+import "./components/ds-list-item/ds-list-item.js";
+import "./components/ds-list/ds-list.js";
+import { iconNames as ho } from "./components/ds-icon/iconNames.js";
 export {
-  bo as iconNames
+  ho as iconNames
 };

package/dist-react/esm/utils/IconsManager.js

@@ -1,39 +1,39 @@
 import { THEME_STORAGE_KEY as r } from "../core/theme.constants.js";
-import { pubSub as l } from "./PubSub.js";
-class f {
+import { pubSub as f } from "./PubSub.js";
+class l {
   constructor() {
     this.icons = {}, this.handleChangeTheme = (e) => {
       if (this.theme === e) return;
       this.theme = e;
-      const i = Object.keys(this.icons);
-      this.icons = {}, i.forEach((s) => this.fetchIcon(s));
-    }, this.fetchIcon = async (e, i = {}) => {
+      const n = Object.keys(this.icons);
+      this.icons = {}, n.forEach((s) => this.fetchIcon(s));
+    }, this.fetchIcon = async (e, n = {}) => {
       const s = typeof sessionStorage < "u" ? sessionStorage == null ? void 0 : sessionStorage.getItem(r) : null;
       !this.theme && s && (this.theme = s);
       const t = this.icons[e];
       if (t) return await t;
-      const o = this.loadIcon(e, i).catch((a) => {
+      const o = this.loadIcon(e, n).catch((a) => {
         throw delete this.icons[e], a;
       });
       return this.icons[e] = o, o;
-    }, this.loadIcon = (e, { cache: i = "force-cache", ...s }) => this.theme ? fetch == null ? void 0 : fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`, {
-      cache: i,
+    }, this.loadIcon = (e, { cache: n = "force-cache", ...s }) => !this.theme || typeof fetch > "u" ? Promise.resolve('<svg class="ds-icon"></svg>') : fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`, {
+      cache: n,
       ...s
     }).then((t) => t.text()).catch((t) => {
       if ((t == null ? void 0 : t.name) === "AbortError") throw t;
       return console.error(`Failed to fetch icon "${e}":`, t), "";
-    }) : Promise.resolve('<svg class="ds-icon"></svg>'), l.subscribe("theme", this.handleChangeTheme);
+    }), f.subscribe("theme", this.handleChangeTheme);
   }
 }
-const c = Symbol.for("@cupra/ui-kit/icons-manager/1.1.0-canary.13"), h = globalThis;
-let n = h[c];
-n || (n = new f(), Object.defineProperty(h, c, {
-  value: n,
+const c = Symbol.for("@cupra/ui-kit/icons-manager/1.1.0-canary.15"), h = globalThis;
+let i = h[c];
+i || (i = new l(), Object.defineProperty(h, c, {
+  value: i,
   writable: !1,
   configurable: !1,
   enumerable: !1
 }));
-const b = n;
+const g = i;
 export {
-  b as iconsManager
+  g as iconsManager
 };

package/dist-react/esm/utils/PubSub.js

@@ -18,7 +18,7 @@ class e {
     });
   }
 }
-const u = Symbol.for("@cupra/ui-kit/pubsub/1.1.0-canary.13"), t = globalThis;
+const u = Symbol.for("@cupra/ui-kit/pubsub/1.1.0-canary.15"), t = globalThis;
 let b = t[u];
 b || (b = new e(), Object.defineProperty(t, u, {
   value: b,

package/dist-react/esm/utils/StylesRegistry/StylesRegistry.js

@@ -5,15 +5,16 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const c = `https://ds-assets.cupra.com/1.1.0-canary.13/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
-      if (r) return r;
-      const i = this.fetchStyle({ url: c }).then((n) => (n || this.stylePromises.delete(c), n));
-      return this.stylePromises.set(c, i), this.stylePromises.get(c);
+      const r = `https://ds-assets.cupra.com/1.1.0-canary.15/styles/${t}/components/${e}.css`, c = this.getCachedStyleSheetPromise({ url: r });
+      if (c) return c;
+      const i = this.fetchStyle({ url: r }).then((n) => (n || this.stylePromises.delete(r), n));
+      return this.stylePromises.set(r, i), this.stylePromises.get(r);
     };
   }
   async fetchStyle({ url: e }) {
     try {
-      const t = await (fetch == null ? void 0 : fetch(e, { cache: "force-cache" }));
+      if (typeof fetch > "u") return;
+      const t = await fetch(e, { cache: "force-cache" });
       if (t.ok) return t.text();
     } catch (t) {
       console.error(`Failed to fetch Style Sheet "${e}":`, t);

package/dist-react/esm/utils/cssWithTokens.js

@@ -3,7 +3,7 @@ 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 { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 function x(t, ...r) {
-  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-13"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-15"), i = n(e);
   return o`${i}`;
 }
 export {

package/dist-react/esm/utils/htmlWithTokens.js

@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 function x(t, ...r) {
-  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-13"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-15"), e = i(o);
   return n`${e}`;
 }
 export {

package/dist-react/types/components/ds-list/ds-list.d.ts

@@ -0,0 +1,10 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+export declare class DsList extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    size: 'small' | 'medium';
+    protected get classes(): {
+        [x: string]: boolean;
+        'ds-list': boolean;
+    };
+    render(): import("lit").TemplateResult<1>;
+}

package/dist-react/types/components/ds-list/ds-list.test.d.ts

@@ -0,0 +1,8 @@
+import type { DsList } from './ds-list';
+import './ds-list';
+import '../ds-theme-provider/ds-theme-provider.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-list': DsList;
+    }
+}

package/dist-react/types/components/ds-list/ds-list.types.d.ts

@@ -0,0 +1,4 @@
+import type { CommonAttrs } from '../../types/types';
+export interface DsListAttrs extends CommonAttrs {
+    size?: 'small' | 'medium';
+}

package/dist-react/types/components/ds-list/styles/common.styles.d.ts

@@ -0,0 +1 @@
+export declare const commonStyles: import("lit").CSSResult;

package/dist-react/types/components/ds-list/styles/cupra-diagonal.styles.d.ts

@@ -0,0 +1 @@
+export declare const cupraDiagonalStyles: import("lit").CSSResult;

package/dist-react/types/components/ds-list-item/ds-list-item.d.ts

@@ -0,0 +1,20 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+export declare class DsListItem extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    variant: 'selection' | 'action' | 'info';
+    selected: boolean;
+    disabled: boolean;
+    size: 'small' | 'medium';
+    protected get classes(): {
+        [x: string]: boolean;
+        content: boolean;
+        selected: boolean;
+        disabled: boolean;
+    };
+    connectedCallback(): void;
+    private renderSelectionTemplate;
+    private renderActionTemplate;
+    private renderInfoTemplate;
+    private renderByTemplate;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist-react/types/components/ds-list-item/ds-list-item.test.d.ts

@@ -0,0 +1,8 @@
+import type { DsListItem } from './ds-list-item';
+import './ds-list-item';
+import '../ds-list/ds-list';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-list-item': DsListItem;
+    }
+}

package/dist-react/types/components/ds-list-item/ds-list-item.types.d.ts

@@ -0,0 +1,7 @@
+import type { CommonAttrs } from '../../types/types';
+export interface DsListItemAttrs extends CommonAttrs {
+    variant?: 'selection' | 'action' | 'info';
+    selected?: boolean;
+    disabled?: boolean;
+    size?: 'small' | 'medium';
+}

package/dist-react/types/components/ds-list-item/styles/common.styles.d.ts

@@ -0,0 +1 @@
+export declare const commonStyles: import("lit").CSSResult;

package/dist-react/types/components/ds-list-item/styles/cupra-diagonal.styles.d.ts

@@ -0,0 +1 @@
+export declare const cupraDiagonalStyles: import("lit").CSSResult;

package/dist-react/types/components/ds-textarea/ds-textarea.d.ts

@@ -1,7 +1,7 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
 import { nothing } from 'lit';
 import type { DsTextareaAttrs } from './ds-textarea.types.ts';
-declare const DsTextarea_base: (new (...args: any[]) => import("../../mixins/inputStatesMixin.ts").InputStatesInterface) & typeof UiKitElement;
+declare const DsTextarea_base: (new (...args: any[]) => import("../../mixins/inputStatesMixin.ts").InputStatesInterface) & (new (...args: any[]) => import("../../mixins/ViewportMixin.ts").ViewportInterface) & typeof UiKitElement;
 export declare class DsTextarea extends DsTextarea_base {
     static styles: import("lit").CSSResult[];
     private keyboardMode;

package/dist-react/types/components/index.d.ts

@@ -64,3 +64,5 @@ import './ds-toggle-button/ds-toggle-button.ts';
 import './ds-toggle-switch/ds-toggle-switch.ts';
 import './ds-tooltip/ds-tooltip.ts';
 import './ds-media-control/ds-media-control.ts';
+import './ds-list-item/ds-list-item.ts';
+import './ds-list/ds-list.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-kit",
-  "version": "1.1.0-canary.13",
+  "version": "1.1.0-canary.15",
   "description": "Web components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",