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

package/dist/components/ds-toggle-switch/ds-toggle-switch.js

@@ -0,0 +1,100 @@
+import { UiKitElement as d } from "../base/UiKitElement.js";
+import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as n } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as m } 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 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 i } 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 b } from "./styles/common.styles.js";
+var k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (h, l, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? y(l, o) : l, a = h.length - 1, c; a >= 0; a--)
+    (c = h[a]) && (t = (r ? c(l, o, t) : c(t)) || t);
+  return r && t && k(l, o, t), t;
+};
+let e = class extends d {
+  constructor() {
+    super(...arguments), this.size = "medium", this.checked = !1, this.disabled = !1, this.mode = "light";
+  }
+  handleClick() {
+    this.checked = !this.checked, this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          checked: this.checked
+        }
+      })
+    );
+  }
+  handleClickOff() {
+    this.checked && this.handleClick();
+  }
+  handleClickOn() {
+    this.checked || this.handleClick();
+  }
+  get styleTokens() {
+    return m`
+            <style>
+                :host {
+                    color-scheme: ${this.mode};
+                }
+            </style>
+        `;
+  }
+  get labelClasses() {
+    return {
+      container: !0,
+      [this.size]: !!this.size,
+      checked: this.checked,
+      disabled: this.disabled,
+      [this.mode]: !!this.mode
+    };
+  }
+  render() {
+    return f`
+            ${this.styleTokens}
+            <div class=${u(this.labelClasses)} @click=${this.handleClick}>
+                <slot name="off" @click=${this.handleClickOff}></slot>
+                <slot name="label"></slot>
+                <button
+                    class="track-container"
+                    type="button"
+                    role="switch"
+                    aria-checked=${this.checked}
+                    aria-label=${this.dataAriaLabel}
+                    data-action="aria-switch"
+                    ?disabled=${this.disabled}
+                >
+                    <span class="track"></span>
+                    <span class="fill"></span>
+                    <span class="dot"></span>
+                </button>
+                <slot name="on" @click=${this.handleClickOn}></slot>
+            </div>
+        `;
+  }
+};
+e.styles = [b];
+s([
+  i({ type: String })
+], e.prototype, "size", 2);
+s([
+  i({ type: Boolean, converter: n, reflect: !0 })
+], e.prototype, "checked", 2);
+s([
+  i({ type: Boolean, converter: n, reflect: !0 })
+], e.prototype, "disabled", 2);
+s([
+  i({ type: String, reflect: !0 })
+], e.prototype, "mode", 2);
+s([
+  i({ type: String, attribute: "data-aria-label" })
+], e.prototype, "dataAriaLabel", 2);
+e = s([
+  p("ds-toggle-switch")
+], e);
+export {
+  e as DsToggleSwitch
+};

package/dist/components/ds-toggle-switch/styles/common.styles.js

@@ -0,0 +1,47 @@
+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`
+    .container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    ::slotted([slot='on']),
+    ::slotted([slot='off']) {
+        cursor: pointer;
+        transition: color 200ms ease-in-out;
+    }
+
+    .track-container {
+        display: inline-flex;
+        justify-content: flex-start;
+        align-items: center;
+        position: relative;
+        background: transparent;
+        border: none;
+        outline: none;
+        padding: 0;
+        cursor: pointer;
+    }
+
+    .fill {
+        transition: width 200ms ease-in-out;
+        position: absolute;
+        left: 0;
+        top: 50%;
+    }
+
+    .dot {
+        border-radius: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        transition: left 200ms ease-in-out;
+    }
+`;
+export {
+  s as commonStyles
+};

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

@@ -0,0 +1,198 @@
+import { UiKitElement as m } from "../base/UiKitElement.js";
+import { customUiKitElement as f } from "../../decorators/customUiKitElement.js";
+import { ViewportMixin as y } from "../../mixins/ViewportMixin.js";
+import { booleanConverter as b } from "../../utils/booleanConverter.js";
+import { debounce as v } from "../../utils/debounce.js";
+import { htmlWithTokens as x } 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 a, 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 h } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { query as p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.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 g, tooltipStyles as w, arrowStyles as T } from "./styles/common.styles.js";
+var C = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, s = (t, n, r, i) => {
+  for (var o = i > 1 ? void 0 : i ? $(n, r) : n, l = t.length - 1, d; l >= 0; l--)
+    (d = t[l]) && (o = (i ? d(n, r, o) : d(o)) || o);
+  return i && o && C(n, r, o), o;
+};
+let e = class extends y(m) {
+  constructor() {
+    super(...arguments), this.mode = "light", this.titleText = "", this.bodyText = "", this.position = "bottom", this.align = "center", this.show = !1, this.zIndex = 2e3, this.bodyWidth = "unset", this.handleResize = v({ func: () => this.requestUpdate() }), this.handleClickOutside = (t) => {
+      var r;
+      const n = t.target;
+      n !== this && !this.contains(n) && !((r = this.shadowRoot) != null && r.contains(n)) && (this.show = !1);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("resize", this.handleResize);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("resize", this.handleResize);
+  }
+  willUpdate(t) {
+    t.has("show") && (this.show ? document.addEventListener("click", this.handleClickOutside) : document.removeEventListener("click", this.handleClickOutside));
+  }
+  get arrowClasses() {
+    var t;
+    return {
+      arrow: !0,
+      [this.position]: !0,
+      [this.align]: !0,
+      [this.mode]: !0,
+      "not-positionable": (this == null ? void 0 : this.offsetWidth) > ((t = this.tooltip) == null ? void 0 : t.offsetWidth)
+    };
+  }
+  get tooltipClasses() {
+    return {
+      tooltip: !0,
+      [this.position]: !0,
+      [this.align]: !0,
+      [this.mode]: !0,
+      complex: this.cancelButtonText || this.confirmButtonText
+    };
+  }
+  get buttonsTemplate() {
+    if (!this.cancelButtonText && !this.confirmButtonText) return a;
+    const t = this.mode === "light" ? "dark" : "light";
+    return c`
+            <div class="buttons-container">
+                ${this.cancelButtonText ? this.componentFactory.createButton({
+      class: "cancel-button",
+      "@click": this.handleClickCancelButton,
+      size: "small",
+      variant: "secondary",
+      mode: t,
+      children: this.cancelButtonText
+    }) : a}
+                ${this.confirmButtonText ? this.componentFactory.createButton({
+      class: "confirm-button",
+      "@click": this.handleClickConfirmButton,
+      size: "small",
+      variant: "primary",
+      mode: t,
+      children: this.confirmButtonText
+    }) : a}
+            </div>
+        `;
+  }
+  get tooltipTemplate() {
+    return this.show ? c`
+                  <div class=${u(this.arrowClasses)} @mouseout="${this.handleMouseOut}"></div>
+                  <div class=${u(this.tooltipClasses)} @mouseout=${this.handleMouseOut}>
+                      ${this.titleText ? c`<div class="title">${this.titleText}</div>` : a}
+                      ${this.bodyText ? c`<div class="body">${this.bodyText}</div>` : a}
+                      ${this.buttonsTemplate}
+                  </div>
+              ` : a;
+  }
+  getTooltipWidth() {
+    const i = this.offsetLeft + this.scrollLeft + this.clientLeft, o = document.body.clientWidth - i - this.clientWidth;
+    let l;
+    return this.position === "left" ? l = i - 13 : this.position === "right" ? l = o - 13 : this.align === "center" ? l = (i < o ? i : o) * 2 + this.clientWidth : this.align === "start" ? l = document.body.clientWidth - i : this.align === "end" && (l = i + this.clientWidth), `${l - 16 - 32}px`;
+  }
+  get styleTokens() {
+    return x`
+            <style>
+                :host {
+                    color-scheme: ${this.mode};
+                }
+            </style>
+        `;
+  }
+  render() {
+    return c`
+            <style>
+                .tooltip {
+                    max-width: ${this.getTooltipWidth()};
+                }
+                .tooltip,
+                .arrow {
+                    z-index: ${this.zIndex};
+                }
+                .body {
+                    max-width: ${this.bodyWidth};
+                }
+            </style>
+            ${this.styleTokens}
+            <slot
+                @mouseover="${this.handleMouseOver}"
+                @mouseout="${this.handleMouseOut}"
+                @click=${this.handleClickSlot}
+            ></slot>
+
+            ${this.tooltipTemplate}
+        `;
+  }
+  handleClickSlot() {
+    ["xs", "s", "m"].includes(this.viewport) && (this.show = !this.show);
+  }
+  handleMouseOver() {
+    ["xs", "s", "m"].includes(this.viewport) || (this.show = !0);
+  }
+  handleMouseOut() {
+    ["xs", "s", "m"].includes(this.viewport) || setTimeout(() => {
+      var t, n, r, i, o;
+      !((n = (t = this.tooltip) == null ? void 0 : t.matches) != null && n.call(t, ":hover")) && !((i = (r = this.arrow) == null ? void 0 : r.matches) != null && i.call(r, ":hover")) && !((o = this == null ? void 0 : this.matches) != null && o.call(this, ":hover")) && (this.show = !1);
+    }, 150);
+  }
+  handleClickCancelButton() {
+    this.dispatchEvent(
+      new CustomEvent("click-cancel-button", {
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.show = !1;
+  }
+  handleClickConfirmButton() {
+    this.dispatchEvent(
+      new CustomEvent("click-confirm-button", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+e.styles = [g, w, T];
+s([
+  h({ type: String, reflect: !0 })
+], e.prototype, "mode", 2);
+s([
+  h({ type: String, attribute: "title-text" })
+], e.prototype, "titleText", 2);
+s([
+  h({ type: String, attribute: "body-text" })
+], e.prototype, "bodyText", 2);
+s([
+  h({ type: String })
+], e.prototype, "position", 2);
+s([
+  h({ type: String })
+], e.prototype, "align", 2);
+s([
+  h({ type: String, attribute: "cancel-button-text" })
+], e.prototype, "cancelButtonText", 2);
+s([
+  h({ type: String, attribute: "confirm-button-text" })
+], e.prototype, "confirmButtonText", 2);
+s([
+  h({ type: Boolean, reflect: !0, converter: b })
+], e.prototype, "show", 2);
+s([
+  h({ type: Number, attribute: "z-index" })
+], e.prototype, "zIndex", 2);
+s([
+  h({ type: String, attribute: "body-width" })
+], e.prototype, "bodyWidth", 2);
+s([
+  p(".tooltip")
+], e.prototype, "tooltip", 2);
+s([
+  p(".arrow")
+], e.prototype, "arrow", 2);
+e = s([
+  f("ds-tooltip")
+], e);
+export {
+  e as DsTooltip
+};

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

@@ -0,0 +1,163 @@
+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 {
+        position: relative;
+        display: inline-block;
+    }
+
+    .title {
+        text-align: left;
+    }
+
+    .body {
+        text-align: left;
+    }
+
+    .buttons-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        justify-content: flex-end;
+    }
+`, p = t`
+    .tooltip {
+        width: max-content;
+        white-space: normal;
+        box-sizing: border-box;
+        position: absolute;
+    }
+
+    .tooltip.complex {
+        padding: 12px;
+    }
+
+    .tooltip.top {
+        bottom: 100%;
+        margin-bottom: 13px;
+    }
+
+    .tooltip.bottom {
+        top: 100%;
+        margin-top: 13px;
+    }
+
+    .tooltip.left {
+        right: 100%;
+        margin-right: 13px;
+    }
+
+    .tooltip.right {
+        left: 100%;
+        margin-left: 13px;
+    }
+
+    .tooltip.top.center,
+    .tooltip.bottom.center {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .tooltip.left.center,
+    .tooltip.right.center {
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .tooltip.top.start,
+    .tooltip.bottom.start {
+        left: 0;
+        transform: none;
+    }
+
+    .tooltip.left.start,
+    .tooltip.right.start {
+        top: 0;
+        transform: none;
+    }
+
+    .tooltip.top.end,
+    .tooltip.bottom.end {
+        left: auto;
+        right: 0;
+        transform: none;
+    }
+
+    .tooltip.left.end,
+    .tooltip.right.end {
+        top: auto;
+        bottom: 0;
+        transform: none;
+    }
+`, a = t`
+    .arrow {
+        width: 0;
+        height: 0;
+        border-style: solid;
+        position: absolute;
+    }
+
+    .arrow.top {
+        border-width: 5px 6px 0 6px;
+        bottom: calc(100% + 9px);
+    }
+
+    .arrow.bottom {
+        border-width: 0 6px 5px 6px;
+        top: calc(100% + 9px);
+    }
+
+    .arrow.left {
+        border-width: 6px 0 6px 5px;
+        right: calc(100% + 9px);
+    }
+
+    .arrow.right {
+        border-width: 6px 5px 6px 0;
+        left: calc(100% + 9px);
+    }
+
+    .arrow.top,
+    .arrow.bottom {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .arrow.left,
+    .arrow.right {
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .arrow.top.start.not-positionable,
+    .arrow.bottom.start.not-positionable {
+        left: 6px;
+        transform: none;
+    }
+
+    .arrow.top.end.not-positionable,
+    .arrow.bottom.end.not-positionable {
+        left: auto;
+        right: 6px;
+        transform: none;
+    }
+
+    .arrow.left.start.not-positionable,
+    .arrow.right.start.not-positionable {
+        top: 6px;
+        transform: none;
+    }
+
+    .arrow.left.end.not-positionable,
+    .arrow.right.end.not-positionable {
+        top: auto;
+        bottom: 6px;
+        transform: none;
+    }
+`;
+export {
+  a as arrowStyles,
+  e as commonStyles,
+  p as tooltipStyles
+};

package/dist/decorators/customUiKitElement.js

@@ -0,0 +1,23 @@
+import { reactFactory as T, standardFactory as i } from "../utils/componentFactory.js";
+function d(r, e) {
+  return function(a) {
+    var l, n, t, u;
+    if (!(a != null && a.prototype))
+      throw new TypeError("@customUiKitElement requires a class that extends HTMLElement.");
+    const c = typeof __UIKIT_TARGET__ < "u" && __UIKIT_TARGET__ === "react", s = c ? `${r}-react` : r;
+    if ((l = globalThis == null ? void 0 : globalThis.customElements) != null && l.get(s)) return;
+    let m = e != null && e.skipTagAsComponentName ? [] : [r];
+    Array.isArray(e == null ? void 0 : e.extendComponentNames) && (m = [...e.extendComponentNames, ...m]), (u = (n = globalThis == null ? void 0 : globalThis.customElements) == null ? void 0 : n.define) == null || u.call(
+      n,
+      s,
+      (t = class extends a {
+        constructor() {
+          super(...arguments), this.componentFactory = c ? T : i;
+        }
+      }, t.componentName = m, t)
+    );
+  };
+}
+export {
+  d as customUiKitElement
+};

package/dist/index.d.ts

@@ -1 +1,2 @@
 import './components/index';
+export { iconNames } from './components/ds-icon/iconNames.ts';