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

package/dist/components/ds-dialog/styles/common.styles.js

@@ -0,0 +1,82 @@
+import { cssQueries as l } from "../../../utils/cssQueries.js";
+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 a = o`
+    :host {
+        transition: display 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
+    }
+
+    .container.close {
+        display: none;
+        opacity: 0;
+    }
+
+    .container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100dvw;
+        height: 100dvh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: var(--ds-z-index-modal);
+        transition:
+            opacity 0.3s cubic-bezier(0, 0, 0.2, 1),
+            display 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
+        opacity: 1;
+        @starting-style {
+            opacity: 0;
+        }
+    }
+
+    .dialog {
+        padding: 0;
+        position: relative;
+    }
+
+    .content-container {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .ds-scroll::-webkit-scrollbar,
+    .ds-scroll-global *::-webkit-scrollbar {
+        appearance: none;
+        display: initial;
+    }
+
+    .ds-scroll::-webkit-scrollbar-thumb,
+    .ds-scroll-global *::-webkit-scrollbar-thumb {
+        border-radius: var(--dg-border-radius-full);
+        background-clip: padding-box;
+        background-color: var(--dg-global-opacity-white-70);
+    }
+
+    .ds-scroll::-webkit-scrollbar-track,
+    .ds-scroll-global *::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    ${l.xs} {
+        .ds-scroll::-webkit-scrollbar,
+        .ds-scroll-global *::-webkit-scrollbar {
+            height: 4px;
+            width: 4px;
+        }
+    }
+
+    ${l.m} {
+        .ds-scroll::-webkit-scrollbar,
+        .ds-scroll-global *::-webkit-scrollbar {
+            height: 8px;
+            width: 8px;
+        }
+    }
+`;
+export {
+  a as commonStyles
+};

package/dist/components/ds-dialog-body/ds-dialog-body.js

@@ -0,0 +1,46 @@
+import { UiKitElement as a } from "../base/UiKitElement.js";
+import { customUiKitElement as n } from "../../decorators/customUiKitElement.js";
+import { htmlWithTokens as d } 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 } 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 { classMap as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as y } from "./styles/common.styles.js";
+var g = Object.getOwnPropertyDescriptor, f = (o, r, m, l) => {
+  for (var t = l > 1 ? void 0 : l ? g(r, m) : r, e = o.length - 1, i; e >= 0; e--)
+    (i = o[e]) && (t = i(t) || t);
+  return t;
+};
+let s = class extends a {
+  get classes() {
+    return {
+      container: !0
+    };
+  }
+  get styleTokens() {
+    return d`
+                <style>
+                    :host{
+                        grid-area: body;
+                    }
+                </style>
+        `;
+  }
+  render() {
+    return p`
+            ${this.styleTokens}
+            <div data-testid="ds-dialog-body-container" class=${c(this.classes)}>
+                <slot name="description"></slot>
+                <slot name="image"></slot>
+                <slot></slot>
+            </div>
+        `;
+  }
+};
+s.styles = [y];
+s = f([
+  n("ds-dialog-body")
+], s);
+export {
+  s as DsDialogBody
+};

package/dist/components/ds-dialog-body/styles/common.styles.js

@@ -0,0 +1,12 @@
+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 p = o`
+    :host {
+        display: inline-block;
+    }
+`;
+export {
+  p as commonStyles
+};

package/dist/components/ds-dialog-footer/ds-dialog-footer.js

@@ -0,0 +1,47 @@
+import { UiKitElement as p } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as v } from "../../utils/booleanConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as c, html as m } 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 f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as h } from "./styles/common.styles.js";
+var D = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (l, r, i, e) => {
+  for (var t = e > 1 ? void 0 : e ? g(r, i) : r, s = l.length - 1, a; s >= 0; s--)
+    (a = l[s]) && (t = (e ? a(r, i, t) : a(t)) || t);
+  return e && t && D(r, i, t), t;
+};
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.withDivider = !0;
+  }
+  get classes() {
+    return {
+      container: !0
+    };
+  }
+  render() {
+    return m`
+            <div data-testid="ds-dialog-footer-container" class=${u(this.classes)}>
+                ${this.withDivider ? m`<div class="divider"></div>` : c}
+                <slot></slot>
+                <slot name="actions"></slot>
+            </div>
+        `;
+  }
+};
+o.styles = [h];
+n([
+  f({
+    type: Boolean,
+    attribute: "with-divider",
+    converter: v
+  })
+], o.prototype, "withDivider", 2);
+o = n([
+  d("ds-dialog-footer")
+], o);
+export {
+  o as DsDialogFooter
+};

package/dist/components/ds-dialog-footer/styles/common.styles.js

@@ -0,0 +1,16 @@
+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 s = o`
+    :host {
+        display: flex;
+    }
+
+    .container {
+        width: 100%;
+    }
+`;
+export {
+  s as commonStyles
+};

package/dist/components/ds-dialog-header/ds-dialog-header.js

@@ -0,0 +1,68 @@
+import { UiKitElement as c } from "../base/UiKitElement.js";
+import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
+import { htmlWithTokens as h } from "../../utils/htmlWithTokens.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as d, html as u } 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 l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, s = (m, i, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? g(i, o) : i, n = m.length - 1, a; n >= 0; n--)
+    (a = m[n]) && (t = (r ? a(i, o, t) : a(t)) || t);
+  return r && t && v(i, o, t), t;
+};
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.title = "primary", this.iconSize = 32;
+  }
+  get classes() {
+    return {
+      container: !0
+    };
+  }
+  get styleTokens() {
+    return h`
+                <style>
+                    :host{
+                        grid-area: header;
+                    }
+                </style>
+        `;
+  }
+  get iconTemplate() {
+    return this.iconName ? this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": this.iconName,
+      size: this.iconSize
+    }) : d;
+  }
+  render() {
+    return u`
+            ${this.styleTokens}
+            <div data-testid="ds-dialog-header-container" class=${y(this.classes)}>
+                <div class="title-container">
+                    ${this.iconTemplate}
+                    <div class="title">${this.title}</div>
+                </div>
+                <slot name="subtitle"></slot>
+            </div>
+        `;
+  }
+};
+e.styles = [f];
+s([
+  l({ type: String })
+], e.prototype, "title", 2);
+s([
+  l({ type: String, attribute: "icon-name" })
+], e.prototype, "iconName", 2);
+s([
+  l({ type: Number, attribute: "icon-size" })
+], e.prototype, "iconSize", 2);
+e = s([
+  p("ds-dialog-header")
+], e);
+export {
+  e as DsDialogHeader
+};

package/dist/components/ds-dialog-header/styles/common.styles.js

@@ -0,0 +1,12 @@
+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 p = o`
+    :host {
+        display: block;
+    }
+`;
+export {
+  p as commonStyles
+};

package/dist/components/ds-divider/ds-divider.js

@@ -0,0 +1,58 @@
+import { UiKitElement as l } from "../base/UiKitElement.js";
+import { customUiKitElement as h } from "../../decorators/customUiKitElement.js";
+import { htmlWithTokens as y } 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 c } 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 m } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { orientationStyles as v } from "./styles/common.styles.js";
+var d = Object.defineProperty, u = Object.getOwnPropertyDescriptor, o = (p, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? u(e, s) : e, n = p.length - 1, a; n >= 0; n--)
+    (a = p[n]) && (t = (i ? a(e, s, t) : a(t)) || t);
+  return i && t && d(e, s, t), t;
+};
+let r = class extends l {
+  constructor() {
+    super(...arguments), this.orientation = "horizontal", this.variant = "primary", this.mode = "light";
+  }
+  get classes() {
+    return {
+      divider: !0,
+      [this.orientation]: !!this.orientation,
+      [this.variant]: !!this.variant,
+      [this.mode]: !!this.mode
+    };
+  }
+  get styleTokens() {
+    return y`
+            <style>
+                :host{
+                    color-scheme: ${this.mode};
+                }
+            </style>
+        `;
+  }
+  render() {
+    return c`
+            ${this.styleTokens}
+            <hr aria-orientation=${this.orientation} class=${f(this.classes)} />
+        `;
+  }
+};
+r.styles = [v];
+o([
+  m({ type: String })
+], r.prototype, "orientation", 2);
+o([
+  m({ type: String })
+], r.prototype, "variant", 2);
+o([
+  m({ type: String, reflect: !0 })
+], r.prototype, "mode", 2);
+r = o([
+  h("ds-divider")
+], r);
+export {
+  r as DsDivider
+};

package/dist/components/ds-divider/styles/common.styles.js

@@ -0,0 +1,13 @@
+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 m = o`
+    .divider {
+        border: none;
+        margin: 0;
+    }
+`;
+export {
+  m as orientationStyles
+};

package/dist/components/ds-hyperlink/ds-hyperlink.js

@@ -0,0 +1,93 @@
+import { UiKitElement as c } from "../base/UiKitElement.js";
+import { customUiKitElement as f } from "../../decorators/customUiKitElement.js";
+import { htmlWithTokens as y } 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 a } 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 { choose as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { classMap as n } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as g } from "./styles/common.styles.js";
+var $ = Object.defineProperty, d = Object.getOwnPropertyDescriptor, r = (o, i, p, l) => {
+  for (var e = l > 1 ? void 0 : l ? d(i, p) : i, m = o.length - 1, h; m >= 0; m--)
+    (h = o[m]) && (e = (l ? h(i, p, e) : h(e)) || e);
+  return l && e && $(i, p, e), e;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.htmlTagName = "a", this.mode = "light", this.size = "large";
+  }
+  handleClick(o) {
+    this.href || o.preventDefault();
+  }
+  get styleTokens() {
+    return y`
+            <style>
+                :host {
+                    color-scheme: ${this.mode};
+                }
+            </style>
+        `;
+  }
+  get classes() {
+    return {
+      hyperlink: !0,
+      [this.size]: !!this.size,
+      [this.mode]: !!this.mode
+    };
+  }
+  render() {
+    return a`
+            ${this.styleTokens}
+            ${u(this.htmlTagName || "a", [
+      [
+        "button",
+        () => a`
+                        <button class=${n(this.classes)}>
+                            <slot></slot>
+                        </button>
+                    `
+      ],
+      [
+        "a",
+        () => a`
+                        <a
+                            class=${n(this.classes)}
+                            href=${this.href}
+                            rel=${this.rel}
+                            target=${this.target}
+                            @click=${this.handleClick}
+                        >
+                            <slot></slot>
+                        </a>
+                    `
+      ]
+    ])}
+        `;
+  }
+};
+t.styles = [g];
+r([
+  s({ type: String, attribute: "html-tag-name" })
+], t.prototype, "htmlTagName", 2);
+r([
+  s({ type: String, reflect: !0 })
+], t.prototype, "href", 2);
+r([
+  s({ type: String, reflect: !0 })
+], t.prototype, "rel", 2);
+r([
+  s({ type: String, reflect: !0 })
+], t.prototype, "target", 2);
+r([
+  s({ type: String, reflect: !0 })
+], t.prototype, "mode", 2);
+r([
+  s({ type: String })
+], t.prototype, "size", 2);
+t = r([
+  f("ds-hyperlink")
+], t);
+export {
+  t as DsHyperlinkButton
+};

package/dist/components/ds-hyperlink/styles/common.styles.js

@@ -0,0 +1,22 @@
+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 e = o`
+    :host {
+        display: inline-flex;
+    }
+
+    .hyperlink {
+        box-sizing: border-box;
+        display: inline-block;
+        text-align: center;
+        cursor: pointer;
+        text-decoration: none;
+        padding: 0;
+        background: transparent;
+    }
+`;
+export {
+  e as commonStyles
+};

package/dist/components/ds-icon/Icons.type.d.ts

@@ -1 +1 @@
-export type Icons = '9-circles' | 'ad-color' | 'ae-color' | 'af-color' | 'ag-color' | 'ai-color' | 'al-color' | 'am-color' | 'an-color' | 'ao-color' | 'ar-color' | 'arrow-down-line' | 'arrow-down' | 'arrow-download' | 'arrow-exit' | 'arrow-expand' | 'arrow-external-link' | 'arrow-left-line' | 'arrow-left' | 'arrow-reload' | 'arrow-right-line' | 'arrow-right' | 'arrow-rotate-360-horizontal' | 'arrow-rotate-360' | 'arrow-switch' | 'arrow-up-line' | 'arrow-up' | '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-down' | 'cart' | '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-circle' | 'cross' | 'csa-color' | 'cu-color' | 'cv-color' | 'cy-color' | 'cz-color' | 'de-color' | 'dj-color' | 'dk-color' | 'dm-color' | 'do-color' | 'document-check' | 'document-copy' | 'document-download' | 'document-time' | 'document' | '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-crossed-out' | 'eye' | '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-filled' | 'heart' | '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-light' | 'logo-lockup' | 'logo-wordmark' | 'logo' | 'lr-color' | 'ls-color' | 'lt-color' | 'lu-color' | 'lv-color' | 'ly-color' | 'ma-color' | 'magnifying-glass-minus' | 'magnifying-glass-plus' | 'magnifying-glass' | 'math-symbols-square' | 'mc-color' | 'md-color' | 'me-color' | 'menu' | 'mg-color' | 'micro-crossed-out' | 'micro' | '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-loading' | 'pause' | 'pcircle' | 'pe-color' | 'pen-paper' | 'pen' | '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-mountain' | 'road' | 'rs-color' | 'ru-color' | 'rw-color' | 'sa-color' | 'sb-color' | '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-crossed-out' | 'speaker' | 'spray' | 'sr-color' | 'st-color' | 'star-filled' | 'star' | '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-crossed-out' | 'video-camera' | '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 type Icons = '9-circles' | 'ad-color' | 'ae-color' | 'af-color' | 'ag-color' | 'ai-color' | 'al-color' | 'am-color' | 'an-color' | 'ao-color' | 'ar-color' | 'arrow-down-line' | 'arrow-down' | 'arrow-download' | 'arrow-exit' | 'arrow-expand' | 'arrow-external-link' | 'arrow-left-line' | 'arrow-left' | 'arrow-reload' | 'arrow-right-line' | 'arrow-right' | 'arrow-rotate-360-horizontal' | 'arrow-rotate-360' | 'arrow-switch' | 'arrow-up-line' | 'arrow-up' | '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-down' | 'cart' | '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-circle' | 'cross' | 'csa-color' | 'cu-color' | 'cv-color' | 'cy-color' | 'cz-color' | 'de-color' | 'dj-color' | 'dk-color' | 'dm-color' | 'do-color' | 'document-check' | 'document-copy' | 'document-download' | 'document-time' | 'document' | '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-crossed-out' | 'eye' | '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-filled' | 'heart' | '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-light' | 'logo-lockup' | 'logo-wordmark' | 'logo' | 'lr-color' | 'ls-color' | 'lt-color' | 'lu-color' | 'lv-color' | 'ly-color' | 'ma-color' | 'magnifying-glass-minus' | 'magnifying-glass-plus' | 'magnifying-glass' | 'math-symbols-square' | 'mc-color' | 'md-color' | 'me-color' | 'menu' | 'mg-color' | 'micro-crossed-out' | 'micro' | '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-loading' | 'pause' | 'pcircle' | 'pe-color' | 'pen-paper' | 'pen' | '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-mountain' | 'road' | '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-crossed-out' | 'speaker' | 'spray' | 'sr-color' | 'st-color' | 'star-filled' | 'star' | '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-crossed-out' | 'video-camera' | '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';

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

@@ -0,0 +1,105 @@
+import { UiKitElement as f } from "../base/UiKitElement.js";
+import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
+import { iconsManager as y } from "../../utils/IconsManager.js";
+import { pubSub as _ } from "../../utils/PubSub.js";
+import { htmlWithTokens as g } 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 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 a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as w } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { unsafeHTML as x } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
+import { css as $ } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+var k = Object.defineProperty, H = Object.getOwnPropertyDescriptor, m = (t) => {
+  throw TypeError(t);
+}, n = (t, e, i, s) => {
+  for (var r = s > 1 ? void 0 : s ? H(e, i) : e, h = t.length - 1, p; h >= 0; h--)
+    (p = t[h]) && (r = (s ? p(e, i, r) : p(r)) || r);
+  return s && r && k(e, i, r), r;
+}, d = (t, e, i) => e.has(t) || m("Cannot " + i), v = (t, e, i) => (d(t, e, "read from private field"), i ? i.call(t) : e.get(t)), I = (t, e, i) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), D = (t, e, i, s) => (d(t, e, "write to private field"), e.set(t, i), i), N = (t, e, i, s) => ({
+  set _(r) {
+    D(t, e, r);
+  },
+  get _() {
+    return v(t, e, s);
+  }
+}), c;
+let o = class extends f {
+  constructor() {
+    super(), this.iconHtml = "", I(this, c, 0), this.getIcon = async () => {
+      const t = ++N(this, c)._, e = await y.fetchIcon(this.iconName);
+      t === v(this, c) && (this.iconHtml = e);
+    }, _.subscribe("theme", this.getIcon);
+  }
+  async updated(t) {
+    super.updated(t), (t.has("iconName") || !this.iconHtml) && await this.getIcon();
+  }
+  getDimension(t, e, i) {
+    return t ? `${t}px` : e ? "auto" : this.size ? `${this.size}px` : i;
+  }
+  get styleTokens() {
+    const t = this.getDimension(
+      this.width,
+      this.height,
+      "var(--private-ds-icon-width, var(--ds-icon-width, 20px))"
+    ), e = this.getDimension(
+      this.height,
+      this.width,
+      "var(--private-ds-icon-height, var(--ds-icon-height, 20px))"
+    );
+    return g`
+            <style>
+                .ds-icon {
+                    display: inline-block;
+                    width: ${t};
+                    height: ${e};
+                }
+
+                .ds-icon-color {
+                    fill: ${this.color ? this.color : "var(--private-ds-icon-color, var(--ds-icon-color, black))"};
+                }
+
+                .ds-icon-color-stroke {
+                    stroke: ${this.color ? this.color : "var(--private-ds-icon-color, var(--ds-icon-color, black))"};
+                }
+            </style>
+        `;
+  }
+  render() {
+    return l`
+            ${this.styleTokens}
+            ${this.iconHtml ? x(this.iconHtml) : l`<svg class="ds-icon">x</svg>`}
+        `;
+  }
+};
+c = /* @__PURE__ */ new WeakMap();
+o.styles = $`
+        :host {
+            line-height: 0;
+            display: inline-block;
+        }
+    `;
+n([
+  a({ type: String, attribute: "icon-name" })
+], o.prototype, "iconName", 2);
+n([
+  a({ type: String, attribute: "color" })
+], o.prototype, "color", 2);
+n([
+  a({ type: Number })
+], o.prototype, "width", 2);
+n([
+  a({ type: Number })
+], o.prototype, "height", 2);
+n([
+  a({ type: Number, attribute: "size" })
+], o.prototype, "size", 2);
+n([
+  w()
+], o.prototype, "iconHtml", 2);
+o = n([
+  u("ds-icon")
+], o);
+export {
+  o as DsIcon
+};