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

package/dist-react/components/ds-interactive-card/ds-interactive-card.js

@@ -0,0 +1,90 @@
+import { UiKitElement as v } from "../base/UiKitElement.js";
+import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as h } 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 m, 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 p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as d } 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 y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (r, s, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? g(s, i) : s, l = r.length - 1, n; l >= 0; l--)
+    (n = r[l]) && (t = (o ? n(s, i, t) : n(t)) || t);
+  return o && t && y(s, i, t), t;
+};
+let e = class extends v {
+  constructor() {
+    super(...arguments), this.size = "medium", this.selected = !1, this.error = !1, this.handleClick = (r) => {
+      r.stopPropagation();
+    };
+  }
+  get classes() {
+    return {
+      container: !0,
+      selected: this.selected,
+      [this.size]: !!this.size
+    };
+  }
+  get errorClasses() {
+    return {
+      error: !0,
+      selected: this.selected,
+      [this.size]: !!this.size
+    };
+  }
+  get iconTemplate() {
+    return this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": "cross-circle",
+      size: 24
+    });
+  }
+  get contentTemplate() {
+    return this.error ? m : c`
+            <div part="container" class=${d(this.classes)} data-testid="ds-interactive-card-container" tabindex="0">
+                <header class="header" part="header">
+                    <div class="header-main">
+                        <slot name="title" class="title" part="title"></slot>
+                        <slot name="subtitle" class="subtitle" part="subtitle"></slot>
+                    </div>
+                    <div class="meta" part="meta"><slot name="meta"></slot></div>
+                </header>
+                <div data-testid="ds-interactive-card-content" class="content" part="content"><slot name="content"></slot></div>
+                <footer @click=${this.handleClick} class="cta" part="cta"><slot name="cta"></slot></footer>
+            </div>
+    `;
+  }
+  get errorTemplate() {
+    return this.error ? c`
+            <div part="error" class=${d(this.errorClasses)}>
+                ${this.iconTemplate}
+                <div class="error-content" part="error-text">
+                    <slot class="error-title" name="error-title"></slot>
+                    <slot class="error-text" name="error-text" data-testid="ds-interactive-card-error-text"></slot>
+                </div>
+            </div>
+    ` : m;
+  }
+  render() {
+    return c`
+            ${this.contentTemplate}
+            ${this.errorTemplate}
+        `;
+  }
+};
+e.styles = [f];
+a([
+  p({ type: String })
+], e.prototype, "size", 2);
+a([
+  p({ type: Boolean, converter: h })
+], e.prototype, "selected", 2);
+a([
+  p({ type: Boolean, converter: h })
+], e.prototype, "error", 2);
+e = a([
+  u("ds-interactive-card")
+], e);
+export {
+  e as DsInteractiveCard
+};

package/dist-react/components/ds-interactive-card/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: contents;
+    }
+`;
+export {
+  p as commonStyles
+};

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

@@ -0,0 +1,120 @@
+import { UiKitElement as d } from "../base/UiKitElement.js";
+import { customUiKitElement as f } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as u } from "../../utils/booleanConverter.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 { nothing as r, 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 i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { choose as g } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.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 b } from "./styles/common.styles.js";
+var $ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, e = (s, n, a, l) => {
+  for (var o = l > 1 ? void 0 : l ? v(n, a) : n, p = s.length - 1, h; p >= 0; p--)
+    (h = s[p]) && (o = (l ? h(n, a, o) : h(o)) || o);
+  return l && o && $(n, a, o), o;
+};
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.mode = "light", this.size = "large", this.underline = !1, this.disabled = !1, this.iconName = "arrow-right", this.iconPosition = "right";
+  }
+  get iconTemplate() {
+    return this.iconName === "none" ? r : this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": this.iconName
+    });
+  }
+  get classes() {
+    return {
+      "link-button": !0,
+      disabled: !!this.disabled,
+      underline: !!this.underline,
+      [this.size]: !0,
+      [this.mode]: !!this.mode
+    };
+  }
+  handleClick(s) {
+    this.href || s.preventDefault();
+  }
+  get styleTokens() {
+    return y`
+            <style>
+                :host{
+                    color-scheme: ${this.mode};
+                    pointer-events: ${this.disabled ? "none" : "visible"};
+                }
+            </style>
+        `;
+  }
+  render() {
+    return m`
+            ${this.styleTokens}
+            ${g(this.htmlTagName || "button", [
+      [
+        "button",
+        () => m`
+                        <button class=${c(this.classes)} ?disabled=${this.disabled}>
+                            ${this.iconPosition === "left" ? this.iconTemplate : r}
+                            <slot></slot>
+                            ${this.iconPosition === "right" ? this.iconTemplate : r}
+                        </button>
+                    `
+      ],
+      [
+        "a",
+        () => m`
+                        <a
+                            class=${c(this.classes)}
+                            href=${this.href}
+                            rel=${this.rel}
+                            target=${this.target}
+                            @click=${this.handleClick}
+                            ?disabled=${this.disabled}
+                        >
+                            ${this.iconPosition === "left" ? this.iconTemplate : r}
+                            <slot></slot>
+                            ${this.iconPosition === "right" ? this.iconTemplate : r}
+                        </a>
+                    `
+      ]
+    ])}
+        `;
+  }
+};
+t.styles = [b];
+e([
+  i({ type: String, reflect: !0 })
+], t.prototype, "mode", 2);
+e([
+  i({ type: String })
+], t.prototype, "size", 2);
+e([
+  i({ type: Boolean, converter: u })
+], t.prototype, "underline", 2);
+e([
+  i({ type: Boolean, converter: u })
+], t.prototype, "disabled", 2);
+e([
+  i({ type: String, attribute: "html-tag-name" })
+], t.prototype, "htmlTagName", 2);
+e([
+  i({ type: String, reflect: !0 })
+], t.prototype, "href", 2);
+e([
+  i({ type: String, reflect: !0 })
+], t.prototype, "rel", 2);
+e([
+  i({ type: String, reflect: !0 })
+], t.prototype, "target", 2);
+e([
+  i({ type: String, attribute: "icon-name" })
+], t.prototype, "iconName", 2);
+e([
+  i({ type: String, attribute: "icon-position" })
+], t.prototype, "iconPosition", 2);
+t = e([
+  f("ds-link-button")
+], t);
+export {
+  t as DsLinkButton
+};

package/dist-react/components/ds-link-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 n } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const r = n`
+    :host {
+        display: inline-flex;
+    }
+
+    .link-button {
+        background: transparent;
+        border: none;
+        outline: none;
+        text-align: center;
+        padding: 0;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+    }
+`;
+export {
+  r as commonStyles
+};

package/dist-react/components/ds-loader-bar/ds-loader-bar.js

@@ -0,0 +1,23 @@
+import { DsBaseProgressBar as l } from "../base/ds-base-progress-bar/ds-base-progress-bar.js";
+import { customUiKitElement as i } 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 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 { commonStyles as f } from "./styles/common.styles.js";
+var _ = Object.getOwnPropertyDescriptor, c = Object.getPrototypeOf, g = Reflect.get, v = (r, t, s, m) => {
+  for (var o = m > 1 ? void 0 : m ? _(t, s) : t, a = r.length - 1, p; a >= 0; a--)
+    (p = r[a]) && (o = p(o) || o);
+  return o;
+}, u = (r, t, s) => g(c(r), s, t);
+let e = class extends l {
+  render() {
+    return this.show ? this.barTemplate : n;
+  }
+};
+e.styles = [...u(e, e, "styles"), f];
+e = v([
+  i("ds-loader-bar", { skipTagAsComponentName: !0 })
+], e);
+export {
+  e as DsLoaderBar
+};

package/dist-react/components/ds-loader-bar/styles/common.styles.js

@@ -0,0 +1,23 @@
+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 r } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const n = r`
+    .fill {
+        width: 33%;
+        transform: translateX(-100%);
+        animation: loader 1.4s linear infinite;
+    }
+
+    @keyframes loader {
+        0% {
+            transform: translateX(-100%);
+        }
+        100% {
+            transform: translateX(300%);
+        }
+    }
+`;
+export {
+  n as commonStyles
+};

package/dist-react/components/ds-loader-dots/ds-loader-dots.js

@@ -0,0 +1,62 @@
+import { UiKitElement as a } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as h } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as c } 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 f, html as v } 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 y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as u } from "./styles/common.styles.js";
+var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (n, s, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? _(s, i) : s, m = n.length - 1, l; m >= 0; m--)
+    (l = n[m]) && (t = (o ? l(s, i, t) : l(t)) || t);
+  return o && t && g(s, i, t), t;
+};
+let e = class extends a {
+  constructor() {
+    super(...arguments), this.show = !1, this.mode = "light", this.size = "large";
+  }
+  get classes() {
+    return {
+      container: !0,
+      [this.size]: !0,
+      [this.mode]: !!this.mode
+    };
+  }
+  get styleTokens() {
+    return c`
+                <style>
+                    :host {
+                        color-scheme: ${this.mode};
+                    }
+                </style>
+        `;
+  }
+  render() {
+    return this.show ? v`
+                  ${this.styleTokens}
+                  <div class=${y(this.classes)}>
+                      <div class="dot first"></div>
+                      <div class="dot middle"></div>
+                      <div class="dot last"></div>
+                  </div>
+              ` : f;
+  }
+};
+e.styles = [u];
+r([
+  p({ type: Boolean, converter: h })
+], e.prototype, "show", 2);
+r([
+  p({ type: String, reflect: !0 })
+], e.prototype, "mode", 2);
+r([
+  p({ type: String })
+], e.prototype, "size", 2);
+e = r([
+  d("ds-loader-dots")
+], e);
+export {
+  e as DsLoaderDots
+};

package/dist-react/components/ds-loader-dots/styles/common.styles.js

@@ -0,0 +1,35 @@
+import { cssWithTokens as i } from "../../../utils/cssWithTokens.js";
+const t = i`
+    .container {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+    
+    .dot.middle {
+        animation-delay: 0.4s;
+    }
+    
+    .dot.last {
+        animation-delay: 0.8s;
+    }
+    
+    .dot {
+        border-radius: 50%;
+        animation-name: loader;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+        animation-fill-mode: forwards;
+        animation-duration: 2s;
+    }
+
+    @keyframes loader {
+        0% { opacity: 1 }
+        18% { opacity: 0.2 }
+        82% { opacity: 0.6 }
+        100% { opacity: 1 }
+    }
+`;
+export {
+  t as commonStyles
+};

package/dist-react/components/ds-loader-logo/ds-loader-logo.js

@@ -0,0 +1,65 @@
+import { UiKitElement as h } from "../base/UiKitElement.js";
+import { customUiKitElement as y } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as d } from "../../utils/booleanConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as a, nothing 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 i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { commonStyles as f } from "./ds-loader-logo.styles.js";
+var u = Object.defineProperty, v = Object.getOwnPropertyDescriptor, t = (l, r, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? v(r, n) : r, p = l.length - 1, c; p >= 0; p--)
+    (c = l[p]) && (o = (s ? c(r, n, o) : c(o)) || o);
+  return s && o && u(r, n, o), o;
+};
+let e = class extends h {
+  constructor() {
+    super(...arguments), this.show = !1, this.zIndex = 2e3, this.iconName = "logo";
+  }
+  get styleTokens() {
+    return a`
+                <style>
+                    :host {
+                        --ds-icon-color: ${this.color || "var(--ds-loader-logo-icon-color)"};
+                    }
+                </style>
+        `;
+  }
+  get iconTemplate() {
+    return this.iconName ? this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": this.iconName
+    }) : m;
+  }
+  render() {
+    return this.show ? a`
+                  <style>
+                      .backdrop {
+                          z-index: ${this.zIndex};
+                      }
+                  </style>
+                  ${this.styleTokens}
+                  <div class="backdrop">
+                      <div class="container">${this.iconTemplate}</div>
+                  </div>
+              ` : m;
+  }
+};
+e.styles = [f];
+t([
+  i({ type: Boolean, converter: d })
+], e.prototype, "show", 2);
+t([
+  i({ type: Number, attribute: "z-index" })
+], e.prototype, "zIndex", 2);
+t([
+  i({ type: String, attribute: "icon-name" })
+], e.prototype, "iconName", 2);
+t([
+  i({ type: String })
+], e.prototype, "color", 2);
+e = t([
+  y("ds-loader-logo")
+], e);
+export {
+  e as DsLoaderLogo
+};

package/dist-react/components/ds-loader-logo/ds-loader-logo.styles.js

@@ -0,0 +1,67 @@
+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 i = t`
+    .backdrop {
+        display: flex;
+        position: fixed;
+        height: 100dvh;
+        width: 100dvw;
+        left: 0;
+        top: 0;
+        justify-content: center;
+        align-items: center;
+    }
+
+    /* WebKit and Opera browsers */
+    @-webkit-keyframes spinner {
+        from {
+            -webkit-transform: rotateY(0deg);
+        }
+        to {
+            -webkit-transform: rotateY(-360deg);
+        }
+    }
+
+    /* all other browsers */
+    @keyframes spinner {
+        from {
+            -moz-transform: rotateY(0deg);
+            -ms-transform: rotateY(0deg);
+            transform: rotateY(0deg);
+        }
+        to {
+            -moz-transform: rotateY(-360deg);
+            -ms-transform: rotateY(-360deg);
+            transform: rotateY(-360deg);
+        }
+    }
+
+    .container {
+        position: relative;
+        perspective: 1000px;
+        animation-name: spinner;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: infinite;
+        animation-duration: 2s;
+        transform-style: preserve-3d;
+    }
+
+    .logo {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .front-logo {
+        z-index: 1;
+    }
+
+    .back-logo {
+        z-index: 0;
+    }
+`;
+export {
+  i as commonStyles
+};

package/dist-react/components/ds-loader-spinner/ds-loader-spinner.js

@@ -0,0 +1,53 @@
+import { UiKitElement as a } from "../base/UiKitElement.js";
+import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as h } 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 f, html as v } 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 y } 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 u = Object.defineProperty, d = Object.getOwnPropertyDescriptor, s = (l, r, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? d(r, i) : r, n = l.length - 1, p; n >= 0; n--)
+    (p = l[n]) && (t = (o ? p(r, i, t) : p(t)) || t);
+  return o && t && u(r, i, t), t;
+};
+let e = class extends a {
+  constructor() {
+    super(...arguments), this.show = !1, this.mode = "light", this.orientation = "row";
+  }
+  get classes() {
+    return {
+      container: !0,
+      [this.mode]: !!this.mode,
+      [this.orientation]: !!this.orientation
+    };
+  }
+  render() {
+    return this.show ? v`
+                  <div class=${y(this.classes)}>
+                      <svg class="spinner" viewBox="0 0 50 50">
+                          <circle class="spinner-bg" cx="25" cy="25" r="20" />
+                          <circle class="spinner-fg" cx="25" cy="25" r="20" />
+                      </svg>
+                      <slot name="text"></slot>
+                  </div>
+              ` : f;
+  }
+};
+e.styles = g;
+s([
+  m({ type: Boolean, converter: h })
+], e.prototype, "show", 2);
+s([
+  m({ type: String, reflect: !0 })
+], e.prototype, "mode", 2);
+s([
+  m({ type: String })
+], e.prototype, "orientation", 2);
+e = s([
+  c("ds-loader-spinner")
+], e);
+export {
+  e as DsLoaderSpinner
+};

package/dist-react/components/ds-loader-spinner/styles/common.styles.js

@@ -0,0 +1,56 @@
+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 n } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const t = n`
+    :host {
+        display: contents;
+    }
+    .container {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .container.column {
+        flex-direction: column;
+    }
+
+    .container.default ::slotted([slot='text']) {
+        display: none;
+    }
+`, e = n`
+    .spinner {
+        width: 24px;
+        height: 24px;
+        animation: spin 1s linear infinite;
+    }
+
+    .spinner circle {
+        fill: none;
+    }
+
+    .spinner-bg {
+        stroke-width: 10;
+    }
+
+    .spinner-fg {
+        stroke-width: 6;
+        stroke-linecap: round;
+        stroke-dasharray: 90;
+        stroke-dashoffset: 10;
+        transform-origin: center;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+`, a = [t, e];
+export {
+  a as commonStyles
+};