@cupra/ui-kit 1.0.0-canary.9 → 1.0.0

package/dist-react/components/ds-badge/ds-badge.test.d.ts

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

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

@@ -0,0 +1,6 @@
+import type { CommonAttrs } from '../../types/types';
+export interface DsBadgeAttrs extends CommonAttrs {
+    number?: number;
+    variant?: 'base' | 'inverted';
+    size?: 'medium' | 'small';
+}

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

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

package/dist-react/components/ds-badge/styles/common.styles.js

@@ -0,0 +1,9 @@
+import { cssWithTokens as o } from "../../../utils/cssWithTokens.js";
+const t = o`
+    :host {
+        display: inline-flex;
+    }
+`;
+export {
+  t as commonStyles
+};

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

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

package/dist-react/components/ds-badge/styles/cupra-diagonal.styles.js

@@ -0,0 +1,47 @@
+import { cssWithTokens as e } from "../../../utils/cssWithTokens.js";
+const o = e`
+  .container {
+    border-radius: 50%;
+  }
+
+  .number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--dg-font-family-base);
+    font-weight: 400;
+  }
+
+  .number.size-medium {
+    width: var(--dg-size-24);
+    height: var(--dg-size-24);
+    font-size: var(--dg-font-size-body-s);
+    line-height: var(--dg-font-body-s-medium-line-height);
+  }
+
+  .number.size-small {
+    width: var(--dg-size-16);
+    height: var(--dg-size-16);
+    font-size: var(--dg-font-size-body-xs);
+    line-height: var(--dg-font-body-xs-medium-line-height);
+  }
+
+  .variant-base {
+    color: var(--dg-color-text-strong);
+    background-color: var(--dg-color-bg-base);
+  }
+
+  .variant-inverted {
+    background-color: var(--dg-color-bg-inverted);
+    color: var(--dg-color-text-inverted);
+  }
+
+  .dot {
+    width: var(--dg-size-08);
+    height: var(--dg-size-08);
+    background-color: var(--dg-color-bg-error);
+  }
+`;
+export {
+  o as cupraDiagonalStyles
+};

package/dist-react/components/ds-bullets/ds-bullets.js

@@ -0,0 +1,79 @@
+import { UiKitElement as a } from "../base/UiKitElement.js";
+import { customUiKitElement as h } from "../../decorators/customUiKitElement.js";
+import { htmlWithTokens as b } from "../../utils/htmlWithTokens.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as p, nothing as d } 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 n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.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 v } from "./styles/common.styles.js";
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (e, t, l, i) => {
+  for (var s = i > 1 ? void 0 : i ? y(t, l) : t, u = e.length - 1, m; u >= 0; u--)
+    (m = e[u]) && (s = (i ? m(t, l, s) : m(s)) || s);
+  return i && s && f(t, l, s), s;
+};
+let r = class extends a {
+  constructor() {
+    super(...arguments), this.mode = "light", this.activeBulletIndex = 0, this.handleClickChunk = (e) => () => {
+      this.activeBulletIndex !== e && (this.activeBulletIndex = e, this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            index: e
+          }
+        })
+      ));
+    };
+  }
+  get bulletsTemplate() {
+    const e = [];
+    for (let t = 0; t < this.bulletsNumber; t++) {
+      const l = {
+        bullet: !0,
+        active: t === this.activeBulletIndex
+      };
+      e.push(p`
+                <div @click=${this.handleClickChunk(t)} class=${c(l)}></div>
+            `);
+    }
+    return e;
+  }
+  get classes() {
+    return {
+      container: !0,
+      [this.mode]: !0
+    };
+  }
+  get styleTokens() {
+    return b`
+                <style>
+                    :host{
+                        color-scheme: ${this.mode};
+                    }
+                </style>
+        `;
+  }
+  render() {
+    return this.bulletsNumber > 0 ? p`
+                  ${this.styleTokens}
+                  <div class=${c(this.classes)}>${this.bulletsTemplate}</div>
+              ` : d;
+  }
+};
+r.styles = [v];
+o([
+  n({ type: String, reflect: !0 })
+], r.prototype, "mode", 2);
+o([
+  n({ type: Number, attribute: "bullets-number" })
+], r.prototype, "bulletsNumber", 2);
+o([
+  n({ type: Number, attribute: "active-bullet-index", reflect: !0 })
+], r.prototype, "activeBulletIndex", 2);
+r = o([
+  h("ds-bullets")
+], r);
+export {
+  r as DsBullets
+};

package/dist-react/components/ds-bullets/styles/common.styles.js

@@ -0,0 +1,26 @@
+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 l = o`
+    :host {
+        display: block;
+        width: 100%;
+    }
+
+    .container {
+        display: flex;
+    }
+
+    .bullet {
+        cursor: pointer;
+        background-clip: content-box;
+    }
+
+    .bullet.active {
+        cursor: auto;
+    }
+`;
+export {
+  l as commonStyles
+};

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

@@ -0,0 +1,196 @@
+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`
+            <span class="loading-dots">
+                <span>.</span>
+                <span>.</span>
+                <span>.</span>
+            </span>
+        ` : u;
+  }
+  get cssTokens() {
+    return b`
+            <style>
+                :host{
+                    color-scheme: ${this.mode};
+                    pointer-events: ${this.loading || this.disabled ? "none" : "visible"};
+                }
+
+                :host:has(::slotted(*:disabled)){
+                    pointer-events: none;
+                }
+            </style>`;
+  }
+  render() {
+    return o`
+            ${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>
+                    `;
+        }
+      ],
+      [
+        "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>
+                    `;
+        }
+      ],
+      [
+        "custom",
+        () => o`
+                        <div class=${d(this.classes)}>
+                            <slot></slot>
+                        </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
+};

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

@@ -0,0 +1,116 @@
+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`
+    :host {
+        display: contents;
+    }
+
+    .button {
+        text-decoration: none;
+        user-select: none;
+        display: inline-flex;
+        box-sizing: border-box;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        outline-style: solid;
+        max-width: 100%;
+    }
+
+    .button.full-width {
+        width: 100%;
+    }
+`, s = t`
+    .text.container {
+        display: inline-flex;
+    }
+
+    .container {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+`, l = t`
+    .loading-dots {
+        display: inline-flex;
+        align-items: baseline;
+    }
+
+    .loading-dots span {
+        animation-duration: 1.5s;
+        animation-iteration-count: infinite;
+    }
+
+    .loading-dots span:nth-child(1) {
+        animation-name: dot1;
+    }
+
+    .loading-dots span:nth-child(2) {
+        animation-name: dot2;
+    }
+
+    .loading-dots span:nth-child(3) {
+        animation-name: dot3;
+    }
+
+    @keyframes dot1 {
+        0% {
+            opacity: 0;
+        }
+
+        20% {
+            opacity: 0;
+        }
+
+        30% {
+            opacity: 1;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes dot2 {
+        0% {
+            opacity: 0;
+        }
+
+        45% {
+            opacity: 0;
+        }
+
+        55% {
+            opacity: 1;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes dot3 {
+        0% {
+            opacity: 0;
+        }
+
+        70% {
+            opacity: 0;
+        }
+
+        80% {
+            opacity: 1;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+`;
+export {
+  e as buttonStyles,
+  l as loadingDotsStyles,
+  s as textStyles
+};

package/dist-react/components/ds-carousel-indicator/ds-carousel-indicator.js

@@ -0,0 +1,63 @@
+import { UiKitElement as u } from "../base/UiKitElement.js";
+import { customUiKitElement as h } 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 m, nothing as f } 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 d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { classMap as a } 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 v = Object.defineProperty, N = Object.getOwnPropertyDescriptor, n = (i, t, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? N(t, e) : t, l = i.length - 1, c; l >= 0; l--)
+    (c = i[l]) && (r = (s ? c(t, e, r) : c(r)) || r);
+  return s && r && v(t, e, r), r;
+};
+let o = class extends u {
+  constructor() {
+    super(...arguments), this.maxSelectorsShown = 6;
+  }
+  get classes() {
+    return {
+      container: !0,
+      infinite: this.selectorsNumber > this.maxSelectorsShown
+    };
+  }
+  get selectorsTemplate() {
+    const i = [], t = this.selectorsNumber > this.maxSelectorsShown;
+    for (let e = 0; e < this.selectorsNumber; e++) {
+      let s = !1;
+      const r = this.selectedIndex >= 3 && this.selectedIndex < this.selectorsNumber - 3, l = this.selectedIndex < 3, c = this.selectedIndex >= this.selectorsNumber - 3;
+      t && (r && (e < this.selectedIndex - 3 || e > this.selectedIndex + 3) || l && e >= 5 || c && e < this.selectorsNumber - 5) && (s = t);
+      const p = {
+        selector: !0,
+        selected: e === this.selectedIndex,
+        hidden: s
+      };
+      i.push(m` <div class=${a(p)}></div> `);
+    }
+    return i;
+  }
+  render() {
+    return this.selectorsNumber > 0 ? m`
+                  <div data-testid="ds-carousel-indicator-container" class=${a(this.classes)}>
+                      ${this.selectorsTemplate}
+                  </div>
+              ` : f;
+  }
+};
+o.styles = [x];
+n([
+  d({ type: Number, attribute: "selectors-number" })
+], o.prototype, "selectorsNumber", 2);
+n([
+  d({ type: Number, attribute: "selected-index" })
+], o.prototype, "selectedIndex", 2);
+n([
+  b()
+], o.prototype, "maxSelectorsShown", 2);
+o = n([
+  h("ds-carousel-indicator")
+], o);
+export {
+  o as DsCarouselIndicator
+};

package/dist-react/components/ds-carousel-indicator/styles/common.styles.js

@@ -0,0 +1,19 @@
+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 n = t`
+    :host {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .container {
+        display: flex;
+    }
+`;
+export {
+  n as commonStyles
+};