@cupra/ui-kit 0.2.0-canary.0 → 1.0.0-canary.10

package/dist-react/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-react/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-react/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-react/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-react/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-react/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-react/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-react/components/ds-icon/ds-icon.js

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