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

package/dist-react/components/ds-icon/iconNames.js

@@ -0,0 +1,394 @@
+const o = [
+  "9-circles",
+  "ad-color",
+  "ae-color",
+  "af-color",
+  "ag-color",
+  "ai-color",
+  "al-color",
+  "am-color",
+  "an-color",
+  "ao-color",
+  "ar-color",
+  "arrow-down",
+  "arrow-down-line",
+  "arrow-download",
+  "arrow-exit",
+  "arrow-expand",
+  "arrow-external-link",
+  "arrow-left",
+  "arrow-left-line",
+  "arrow-reload",
+  "arrow-right",
+  "arrow-right-line",
+  "arrow-rotate-360",
+  "arrow-rotate-360-horizontal",
+  "arrow-switch",
+  "arrow-up",
+  "arrow-up-line",
+  "arrow-upload",
+  "at-color",
+  "au-color",
+  "aw-color",
+  "ax-color",
+  "az-color",
+  "b-color",
+  "ba-color",
+  "battery-g-4-01",
+  "battery-inclined-fill",
+  "battery-vertical-100",
+  "battery-2-sub-arrows-up",
+  "battery-3-sub-arrows-up",
+  "bb-color",
+  "bd-color",
+  "be-color",
+  "bell",
+  "bf-color",
+  "bg-color",
+  "bh-color",
+  "bi-color",
+  "bill",
+  "bin",
+  "bj-color",
+  "bm-color",
+  "bn-color",
+  "bo-color",
+  "book-mark",
+  "box",
+  "br-color",
+  "bs-color",
+  "bt-color",
+  "bw-color",
+  "by-color",
+  "bz-color",
+  "c-color",
+  "ca-color",
+  "cable",
+  "caf-color",
+  "calendar",
+  "camera",
+  "car-arrow-down",
+  "car-compare",
+  "car-door",
+  "car-frontal",
+  "car-imodel",
+  "car-in-window",
+  "car-lateral",
+  "car-model",
+  "car-seat",
+  "cart",
+  "cart-down",
+  "cas-color",
+  "cd-color",
+  "cercle-ribbon-check",
+  "ceu-color",
+  "cf-color",
+  "cg-color",
+  "ch-color",
+  "charger-acc",
+  "charger-type-2",
+  "chat-bubble",
+  "check",
+  "check-mark-circle",
+  "ci-color",
+  "city",
+  "cl-color",
+  "clock",
+  "cloud-co-2",
+  "cm-color",
+  "cn-color",
+  "cna-color",
+  "co-color",
+  "coc-color",
+  "computer-display",
+  "cr-color",
+  "credit-card",
+  "cross",
+  "cross-circle",
+  "csa-color",
+  "cu-color",
+  "cv-color",
+  "cy-color",
+  "cz-color",
+  "de-color",
+  "dj-color",
+  "dk-color",
+  "dm-color",
+  "do-color",
+  "document",
+  "document-check",
+  "document-copy",
+  "document-download",
+  "document-time",
+  "dot",
+  "dz-color",
+  "ec-color",
+  "eco-color",
+  "ee-color",
+  "eg-color",
+  "electric-station",
+  "engine",
+  "envelope",
+  "equals-sign",
+  "er-color",
+  "es-color",
+  "et-color",
+  "eu-color",
+  "euro",
+  "exclamation-mark-circle",
+  "exclamation-mark-triangle",
+  "eye",
+  "eye-crossed-out",
+  "facebook",
+  "fi-color",
+  "filter",
+  "fj-color",
+  "fk-color",
+  "fm-color",
+  "fr-color",
+  "fuel-station",
+  "ga-color",
+  "garage",
+  "gb-color",
+  "gd-color",
+  "ge-color",
+  "gear",
+  "gg-color",
+  "gh-color",
+  "gi-color",
+  "globe",
+  "gm-color",
+  "gn-color",
+  "gq-color",
+  "gr-color",
+  "gt-color",
+  "gw-color",
+  "gy-color",
+  "half-star-filled",
+  "headlight",
+  "heart",
+  "heart-filled",
+  "highway",
+  "hk-color",
+  "hn-color",
+  "hr-color",
+  "ht-color",
+  "hu-color",
+  "id-color",
+  "ie-color",
+  "il-color",
+  "im-color",
+  "in-color",
+  "info-circle",
+  "info-triangle",
+  "instagram",
+  "iq-color",
+  "ir-color",
+  "is-color",
+  "it-color",
+  "je-color",
+  "jm-color",
+  "jo-color",
+  "jp-color",
+  "ke-color",
+  "key",
+  "kg-color",
+  "kh-color",
+  "km-color",
+  "kn-color",
+  "kp-color",
+  "kr-color",
+  "kw-color",
+  "ky-color",
+  "kz-color",
+  "la-color",
+  "label-a-color",
+  "label-b-color",
+  "label-c-color",
+  "label-d-color",
+  "label-e-color",
+  "label-f-color",
+  "label-g-color",
+  "label-h-color",
+  "label-i-color",
+  "label-j-color",
+  "label-k-color",
+  "label-l-color",
+  "label-m-color",
+  "lb-color",
+  "lc-color",
+  "li-color",
+  "light",
+  "lightning",
+  "link",
+  "linkedin",
+  "list",
+  "lk-color",
+  "loader",
+  "location-poi",
+  "lock-locked",
+  "lock-unlocked",
+  "logo",
+  "logo-light",
+  "logo-lockup",
+  "logo-wordmark",
+  "lr-color",
+  "ls-color",
+  "lt-color",
+  "lu-color",
+  "lv-color",
+  "ly-color",
+  "ma-color",
+  "magnifying-glass",
+  "magnifying-glass-minus",
+  "magnifying-glass-plus",
+  "math-symbols-square",
+  "mc-color",
+  "md-color",
+  "me-color",
+  "menu",
+  "mg-color",
+  "micro",
+  "micro-crossed-out",
+  "minus",
+  "mk-color",
+  "ml-color",
+  "mm-color",
+  "mn-color",
+  "mo-color",
+  "mobile",
+  "moon",
+  "mountains",
+  "mr-color",
+  "ms-color",
+  "mt-color",
+  "mu-color",
+  "mv-color",
+  "mw-color",
+  "mx-color",
+  "my-color",
+  "mz-color",
+  "na-color",
+  "ne-color",
+  "ng-color",
+  "ni-color",
+  "nl-color",
+  "no-color",
+  "np-color",
+  "nz-color",
+  "om-color",
+  "pa-color",
+  "parking",
+  "pause",
+  "pause-loading",
+  "pcircle",
+  "pe-color",
+  "pen",
+  "pen-paper",
+  "person-open-arms",
+  "pf-color",
+  "pg-color",
+  "ph-color",
+  "phone-contact",
+  "pig-coin",
+  "pk-color",
+  "pl-color",
+  "play",
+  "play-circle",
+  "plug-regular",
+  "plus",
+  "position",
+  "pr-color",
+  "pt-color",
+  "pw-color",
+  "py-color",
+  "qa-color",
+  "question-mark",
+  "ro-color",
+  "road",
+  "road-mountain",
+  "rs-color",
+  "ru-color",
+  "rw-color",
+  "sa-color",
+  "sb-color",
+  "scan-qr",
+  "sc-color",
+  "sd-color",
+  "se-color",
+  "seat-front",
+  "sg-color",
+  "sh-color",
+  "share",
+  "shopping-bag",
+  "si-color",
+  "sk-color",
+  "sl-color",
+  "sm-color",
+  "sn-color",
+  "so-color",
+  "speaker",
+  "speaker-crossed-out",
+  "spray",
+  "sr-color",
+  "st-color",
+  "star",
+  "star-filled",
+  "store",
+  "suitcase",
+  "sun",
+  "sv-color",
+  "sy-color",
+  "sz-color",
+  "tag",
+  "tc-color",
+  "td-color",
+  "telegram",
+  "tg-color",
+  "th-color",
+  "ticket",
+  "tj-color",
+  "tl-color",
+  "tm-color",
+  "tn-color",
+  "to-color",
+  "tr-color",
+  "transmission-automatic",
+  "transmission-manual",
+  "triple-dot-h",
+  "triple-dot-v",
+  "tt-color",
+  "tw-color",
+  "twitter",
+  "tz-color",
+  "ua-color",
+  "ug-color",
+  "us-color",
+  "user",
+  "uy-color",
+  "uz-color",
+  "vc-color",
+  "ve-color",
+  "vg-color",
+  "video-camera",
+  "video-camera-crossed-out",
+  "vimeo",
+  "vn-color",
+  "vu-color",
+  "wall-charger",
+  "whatsapp",
+  "wheel",
+  "wifi",
+  "wrench-hammer",
+  "ws-color",
+  "ww-color",
+  "ye-color",
+  "youtube",
+  "za-color",
+  "zero-color",
+  "zm-color",
+  "zw-color"
+];
+export {
+  o as iconNames
+};

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

@@ -0,0 +1,138 @@
+import { UiKitElement as c } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import { ViewportMixin as b } from "../../mixins/ViewportMixin.js";
+import { booleanConverter as u } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as y } from "../../utils/htmlWithTokens.js";
+import { objectConverter as f } 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 g, html as n } 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 r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { choose as v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { classMap as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { buttonStyles as $ } from "./styles/common.styles.js";
+var S = Object.defineProperty, T = Object.getOwnPropertyDescriptor, e = (i, o, l, a) => {
+  for (var s = a > 1 ? void 0 : a ? T(o, l) : o, p = i.length - 1, m; p >= 0; p--)
+    (m = i[p]) && (s = (a ? m(o, l, s) : m(s)) || s);
+  return a && s && S(o, l, s), s;
+};
+let t = class extends b(c) {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.htmlTagName = "button";
+  }
+  get iconTemplate() {
+    return this.iconName ? this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": this.iconName
+    }) : g;
+  }
+  handleClick(i) {
+    this.href || i.preventDefault();
+  }
+  get classes() {
+    const i = typeof this.size == "string" ? this.size : this.size[this.viewport];
+    return {
+      button: !0,
+      custom: this.htmlTagName === "custom",
+      disabled: this.disabled,
+      [i]: !!i,
+      [this.mode]: !!this.mode,
+      [this.variant]: !!this.variant
+    };
+  }
+  get variantColorTokens() {
+    return y`
+            <style>
+                :host{
+                    color-scheme: ${this.mode};
+                    pointer-events: ${this.disabled ? "none" : "visible"};
+                }
+            </style>
+        `;
+  }
+  render() {
+    return n`
+            <style>
+                :host {
+                    pointer-events: ${this.disabled ? "none" : "visible"};
+                }
+            </style>
+            ${this.variantColorTokens}
+            ${v(this.htmlTagName || "button", [
+      [
+        "button",
+        () => n`
+                        <button
+                            ?disabled=${this.disabled}
+                            class=${h(this.classes)}
+                            aria-label=${this.dataAriaLabel}
+                        >
+                            ${this.iconTemplate}
+                        </button>
+                    `
+      ],
+      [
+        "a",
+        () => n`
+                        <a
+                            ?disabled=${this.disabled}
+                            class=${h(this.classes)}
+                            href=${this.href}
+                            rel=${this.rel}
+                            target=${this.target}
+                            @click=${this.handleClick}
+                            aria-label=${this.dataAriaLabel}
+                        >
+                            ${this.iconTemplate}
+                        </a>
+                    `
+      ],
+      [
+        "custom",
+        () => n`
+                        <div class=${h(this.classes)}>
+                            <slot></slot>
+                        </div>
+                    `
+      ]
+    ])}
+        `;
+  }
+};
+t.styles = [$];
+e([
+  r({ type: String })
+], t.prototype, "variant", 2);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "mode", 2);
+e([
+  r({ type: String, converter: f })
+], t.prototype, "size", 2);
+e([
+  r({ type: Boolean, converter: u })
+], t.prototype, "disabled", 2);
+e([
+  r({ type: String, attribute: "icon-name" })
+], t.prototype, "iconName", 2);
+e([
+  r({ type: String, attribute: "html-tag-name" })
+], t.prototype, "htmlTagName", 2);
+e([
+  r({ type: String, attribute: "data-aria-label" })
+], t.prototype, "dataAriaLabel", 2);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "href", 2);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "rel", 2);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "target", 2);
+t = e([
+  d("ds-icon-button")
+], t);
+export {
+  t as DsIconButton
+};

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

@@ -0,0 +1,24 @@
+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 s = t`
+    :host {
+        display: inline-flex;
+    }
+
+    .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;
+        padding: 0;
+    }
+`;
+export {
+  s as buttonStyles
+};

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

@@ -0,0 +1,138 @@
+import { DsBaseInput as m } from "../base/ds-base-input/ds-base-input.js";
+import { customUiKitElement as c } from "../../decorators/customUiKitElement.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 p } 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 r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { choose as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (t, s, n, l) => {
+  for (var a = l > 1 ? void 0 : l ? b(s, n) : s, o = t.length - 1, h; o >= 0; o--)
+    (h = t[o]) && (a = (l ? h(s, n, a) : h(a)) || a);
+  return l && a && f(s, n, a), a;
+};
+let e = class extends m {
+  constructor() {
+    super(...arguments), this.name = "", this.placeholder = "", this.type = "text", this.min = 0, this.max = 100, this.step = 1, this._hasPicker = !1, this.handleClickIcon = () => {
+      var t, s;
+      (s = (t = this.inputField) == null ? void 0 : t.showPicker) == null || s.call(t);
+    }, this.handleInput = (t) => {
+      const s = t.target;
+      this._value = s.value || "";
+    };
+  }
+  firstUpdated() {
+    var t;
+    super.firstUpdated(), this._hasPicker = !!((t = this.inputField) != null && t.showPicker);
+  }
+  get iconTemplate() {
+    if (this.type !== "time" && this.type !== "date") return u;
+    let t;
+    switch (this.type) {
+      case "date":
+        t = "calendar";
+        break;
+      case "time":
+        t = "clock";
+        break;
+    }
+    return p`
+            <style>
+                .icon {
+                    cursor: ${this._hasPicker ? "pointer" : "auto"};
+                }
+            </style>
+            ${this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": t,
+      "@click": this.handleClickIcon
+    })}
+        `;
+  }
+  get labelTemplate() {
+    return p`
+            <label
+                id="label"
+                class="label"
+                style=${this.focused || this._value || ["date", "time"].includes(this.type) ? "transform: translateY(-18px); font-size: 12px;" : "transform: translateY(0);"}
+            >
+                ${this.label}
+            </label>
+        `;
+  }
+  get inputTemplate() {
+    return p`
+            ${y(this.type === "number", [
+      [
+        !0,
+        () => p`
+                        <input
+                            aria-labelledby="label"
+                            class="input-field number"
+                            type=${this.type}
+                            min="${this.min}"
+                            max="${this.max}"
+                            step="${this.step}"
+                            name=${this.name}
+                            placeholder=${this.focused ? this.placeholder : ""}
+                            value=${this._value}
+                            @focus=${this.handleFocus}
+                            @blur=${this.handleBlur}
+                            @input=${this.handleInput}
+                        />
+                    `
+      ],
+      [
+        !1,
+        () => p`
+                        <input
+                            aria-labelledby="label"
+                            class="input-field"
+                            type=${this.type}
+                            maxlength=${this.maxLength}
+                            name=${this.name}
+                            placeholder=${this.focused ? this.placeholder : ""}
+                            value=${this._value}
+                            @focus=${this.handleFocus}
+                            @blur=${this.handleBlur}
+                            @input=${this.handleInput}
+                        />
+                    `
+      ]
+    ])}
+        `;
+  }
+  get dropdownTemplate() {
+    return u;
+  }
+};
+i([
+  r({ type: String })
+], e.prototype, "name", 2);
+i([
+  r({ type: String })
+], e.prototype, "placeholder", 2);
+i([
+  r({ type: String, attribute: "max-length" })
+], e.prototype, "maxLength", 2);
+i([
+  r({ type: String })
+], e.prototype, "type", 2);
+i([
+  r({ type: Number })
+], e.prototype, "min", 2);
+i([
+  r({ type: Number })
+], e.prototype, "max", 2);
+i([
+  r({ type: Number })
+], e.prototype, "step", 2);
+i([
+  d()
+], e.prototype, "_hasPicker", 2);
+e = i([
+  c("ds-input", { skipTagAsComponentName: !0 })
+], e);
+export {
+  e as DsInput
+};