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

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

@@ -0,0 +1,142 @@
+import { UiKitElement as m } from "../base/UiKitElement.js";
+import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
+import { FormAssociatedMixin as v } from "../../mixins/FormAssociatedMixin.js";
+import { booleanConverter as h } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as f } 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 n, 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 r } 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 b } from "./styles/common.styles.js";
+var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (o, s, p, c) => {
+  for (var i = c > 1 ? void 0 : c ? g(s, p) : s, l = o.length - 1, d; l >= 0; l--)
+    (d = o[l]) && (i = (c ? d(s, p, i) : d(i)) || i);
+  return c && i && x(s, p, i), i;
+};
+let e = class extends v(m) {
+  constructor() {
+    super(...arguments), this.inputPlacement = "left", this.checked = !1, this.required = !1, this.disabled = !1, this.mode = "light", this.size = "medium", this.helperText = "", this.infoText = "", this.forcedError = "", this.invalidError = "", this.indeterminate = !1;
+  }
+  handleChange(o) {
+    const s = o.target;
+    this.checked = s.checked, this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          checked: this.checked,
+          value: this.value
+        }
+      })
+    );
+  }
+  get classes() {
+    return {
+      container: !0,
+      [this.inputPlacement]: !!this.inputPlacement,
+      [this.mode]: !!this.mode,
+      [this.size]: !!this.size,
+      disabled: this.disabled,
+      checked: this.checked,
+      error: !!this.forcedError
+    };
+  }
+  get iconTemplate() {
+    if (!this.checked) return n;
+    const o = this.indeterminate ? "minus" : "check";
+    return this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": o
+    });
+  }
+  get styleTokens() {
+    return f`
+            <style>
+                :host{
+                    color-scheme: ${this.mode};
+                    pointer-events: ${this.disabled ? "none" : "visible"};
+                }
+            </style>
+        `;
+  }
+  render() {
+    return a`
+            ${this.styleTokens}
+            <div class=${y(this.classes)}>
+                <label>
+                    <span class="checkmark-container">
+                        <span class="checkmark">
+                            ${this.iconTemplate}
+                            <input
+                                tabindex="0"
+                                type="checkbox"
+                                name=${this.name}
+                                value=${this.value}
+                                ?required=${this.required}
+                                ?checked=${this.checked}
+                                ?disabled=${this.disabled}
+                                @change=${this.handleChange}
+                            />
+                        </span>
+                    </span>
+                    <div class="text-container">
+                        <div class="text">
+                            <slot></slot>
+                            ${this.infoText ? a` <div class="info-text">${this.infoText}</div> ` : n}
+                        </div>
+                        ${this.helperText ? a` <div class="helper-text">${this.helperText}</div> ` : n}
+                        ${this.forcedError ? a` <div class="error-text">${this.forcedError}</div> ` : n}
+                        ${this.invalidError && !this.forcedError ? a`<div class="error-text invalid-error">${this.invalidError}</div>` : n}
+                    </div>
+                </label>
+            </div>
+        `;
+  }
+};
+e.styles = [b];
+t([
+  r({ type: String })
+], e.prototype, "name", 2);
+t([
+  r({ type: String })
+], e.prototype, "value", 2);
+t([
+  r({ type: String, attribute: "input-placement" })
+], e.prototype, "inputPlacement", 2);
+t([
+  r({ type: Boolean, converter: h, reflect: !0 })
+], e.prototype, "checked", 2);
+t([
+  r({ type: Boolean, converter: h })
+], e.prototype, "required", 2);
+t([
+  r({ type: Boolean, converter: h })
+], e.prototype, "disabled", 2);
+t([
+  r({ type: String, reflect: !0 })
+], e.prototype, "mode", 2);
+t([
+  r({ type: String })
+], e.prototype, "size", 2);
+t([
+  r({ type: String, attribute: "helper-text" })
+], e.prototype, "helperText", 2);
+t([
+  r({ type: String, attribute: "info-text" })
+], e.prototype, "infoText", 2);
+t([
+  r({ type: String, attribute: "forced-error" })
+], e.prototype, "forcedError", 2);
+t([
+  r({ type: String, attribute: "invalid-error" })
+], e.prototype, "invalidError", 2);
+t([
+  r({ type: Boolean, converter: h })
+], e.prototype, "indeterminate", 2);
+e = t([
+  u("ds-checkbox")
+], e);
+export {
+  e as DsCheckbox
+};

package/dist-react/components/ds-checkbox/styles/common.styles.js

@@ -0,0 +1,60 @@
+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 i } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const r = i`
+    :host {
+        display: block;
+        width: 100%;
+    }
+
+    label {
+        cursor: pointer;
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+
+    input {
+        position: absolute;
+        opacity: 0;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        margin: 0;
+        padding: 0;
+        z-index: 1;
+    }
+
+    .checkmark-container {
+        display: inline-flex;
+    }
+
+    .checkmark {
+        position: relative;
+        box-sizing: border-box;
+        border-style: solid;
+        transition: all 200ms ease-in-out;
+        display: inline-flex;
+        justify-content: center;
+        overflow: hidden;
+        align-items: center;
+    }
+
+    .invalid-error {
+        display: none;
+    }
+
+    .container:has(input:invalid) .invalid-error {
+        display: block;
+    }
+
+    .container:has(input:invalid) .helper-text,
+    .container.error .helper-text {
+        display: none;
+    }
+`;
+export {
+  r as commonStyles
+};

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

@@ -0,0 +1,131 @@
+import { UiKitElement as h } from "../base/UiKitElement.js";
+import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as d } 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 { nothing as u, html as y } 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 n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { classMap as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as v } from "./styles/common.styles.js";
+var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (e, l, r, s) => {
+  for (var o = s > 1 ? void 0 : s ? k(l, r) : l, a = e.length - 1, c; a >= 0; a--)
+    (c = e[a]) && (o = (s ? c(l, r, o) : c(o)) || o);
+  return s && o && g(l, r, o), o;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.mode = "light", this.size = "large", this.selected = !1, this.deselectable = !1, this.slottedText = "";
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e);
+    const r = this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 });
+    this.slottedText = r.filter((s) => s.nodeType === Node.TEXT_NODE).map((s) => s.textContent.trim()).join(" ");
+  }
+  get classes() {
+    return {
+      container: !0,
+      "ds-blur": !0,
+      [this.size]: !0,
+      [this.mode]: !!this.mode,
+      selected: this.selected,
+      deselectable: this.deselectable
+    };
+  }
+  get styleTokens() {
+    return m`
+                <style>
+                    :host{
+                        color-scheme: ${this.mode};
+                        pointer-events: ${this.selected ? "none" : "visible"};
+                    }
+                </style>
+        `;
+  }
+  handleClick() {
+    this.selected || this.dispatchEvent(
+      new CustomEvent("select", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          value: this.value
+        }
+      })
+    );
+  }
+  handleKeyDown(e) {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());
+  }
+  handleClickIcon(e) {
+    e.stopImmediatePropagation(), !(!this.deselectable || !this.selected) && this.dispatchEvent(
+      new CustomEvent("deselect", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          value: this.value
+        }
+      })
+    );
+  }
+  handleKeyDownIcon(e) {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClickIcon(e));
+  }
+  get iconTemplate() {
+    if (!this.selected || !this.deselectable) return u;
+    const e = this.mode === "light" ? "dark" : "light";
+    return this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": "cross",
+      "data-testid": "ds-chip-icon",
+      "@click": this.handleClickIcon,
+      "@keydown": this.handleKeyDownIcon,
+      role: "button",
+      "aria-label": `deselect ${this.slottedText}`,
+      tabindex: "0",
+      mode: e
+    });
+  }
+  render() {
+    return y`
+            ${this.styleTokens}
+            <div
+                role="button"
+                aria-label=${`chip ${this.slottedText}`}
+                tabindex="0"
+                data-testid="ds-chip-container"
+                class=${b(this.classes)}
+                @click=${this.handleClick}
+                @keydown=${this.handleKeyDown}
+            >
+                <slot></slot>
+                ${this.iconTemplate}
+            </div>
+        `;
+  }
+};
+t.styles = [v];
+i([
+  n({ type: String })
+], t.prototype, "value", 2);
+i([
+  n({ type: String, reflect: !0 })
+], t.prototype, "mode", 2);
+i([
+  n({ type: String, reflect: !0 })
+], t.prototype, "size", 2);
+i([
+  n({ type: Boolean, converter: d, reflect: !0 })
+], t.prototype, "selected", 2);
+i([
+  n({ type: Boolean, converter: d })
+], t.prototype, "deselectable", 2);
+i([
+  f()
+], t.prototype, "slottedText", 2);
+t = i([
+  p("ds-chip")
+], t);
+export {
+  t as DsChip
+};

package/dist-react/components/ds-chip/styles/common.styles.js

@@ -0,0 +1,25 @@
+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 e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const r = e`
+    :host {
+        display: inline-block;
+    }
+
+    .container {
+        cursor: pointer;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        user-select: none;
+    }
+
+    .icon {
+        cursor: pointer;
+        pointer-events: visible;
+    }
+`;
+export {
+  r as commonStyles
+};

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

@@ -0,0 +1,143 @@
+import { UiKitElement as p } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import { arrayConverter as m } from "../../utils/arrayConverter.js";
+import { booleanConverter as u } 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 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 o } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import { queryAssignedElements as S } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { classMap as b } 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.defineProperty, z = Object.getOwnPropertyDescriptor, h = (e, t, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? z(t, s) : t, a = e.length - 1, c; a >= 0; a--)
+    (c = e[a]) && (r = (i ? c(t, s, r) : c(r)) || r);
+  return i && r && g(t, s, r), r;
+};
+let l = class extends p {
+  constructor() {
+    super(...arguments), this.multiChoice = null, this.size = "medium", this.mode = "light", this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
+      this.handleScrollNav();
+    }), this.handleScrollNav = () => {
+      var t, s, i, r;
+      const e = ((t = this.chipsContainer) == null ? void 0 : t.scrollLeft) + ((s = this.chipsContainer) == null ? void 0 : s.clientWidth);
+      this.hasScrollLeft = ((i = this.chipsContainer) == null ? void 0 : i.scrollLeft) > 0, this.hasScrollRight = e < ((r = this.chipsContainer) == null ? void 0 : r.scrollWidth);
+    }, this.handleScrollLeft = () => {
+      this.chipsContainer.scrollBy({ left: -150, behavior: "smooth" });
+    }, this.handleScrollRight = () => {
+      this.chipsContainer.scrollBy({ left: 150, behavior: "smooth" });
+    };
+  }
+  firstUpdated() {
+    this.handleScrollNav(), this.resizeObserver.observe(this.chipsContainer), this.chips.forEach((e) => this.resizeObserver.observe(e)), window.addEventListener("resize", this.handleScrollNav), this.chipsContainer.addEventListener("scroll", this.handleScrollNav);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScrollNav), this.chipsContainer.removeEventListener("scroll", this.handleScrollNav);
+  }
+  getScrollButtonTemplate(e, t) {
+    if (e === "left" && !this.hasScrollLeft || e === "right" && !this.hasScrollRight)
+      return C;
+    const s = `arrow-${e}`;
+    return this.componentFactory.createIconButton({
+      class: `scroll-button ${e}`,
+      "data-testid": `scroll-button-${e}`,
+      "data-aria-label": `scroll-button-${e}`,
+      "@click": t,
+      size: this.size || "large",
+      "icon-name": s,
+      variant: "standard",
+      mode: this.mode
+    });
+  }
+  updated(e) {
+    super.updated(e), (e.has("selectedChips") || e.has("multiChoice") || e.has("size") || e.has("mode")) && this.updateChildChips();
+  }
+  updateChildChips() {
+    var e;
+    (e = this.chips) == null || e.forEach((t) => {
+      var s, i;
+      t.size = this.size, t.selected = (i = (s = this.selectedChips) == null ? void 0 : s.includes) == null ? void 0 : i.call(s, t.value), t.deselectable = !!this.multiChoice, t.mode = this.mode;
+    });
+  }
+  get chipsContainerClasses() {
+    return {
+      "chips-container": !0,
+      "scroll-left": this.hasScrollLeft,
+      "scroll-right": this.hasScrollRight
+    };
+  }
+  handleSelect(e) {
+    var s, i;
+    let t;
+    this.multiChoice && !((i = (s = this.selectedChips) == null ? void 0 : s.includes) != null && i.call(s, e.detail.value)) ? t = [...this.selectedChips || [], e.detail.value] : t = [e.detail.value], this.selectedChips = t, this.updateChildChips(), this.dispatchEvent(
+      new CustomEvent("ds-chips:change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          selectedChips: t
+        }
+      })
+    );
+  }
+  handleDeselect(e) {
+    const t = [...(this.selectedChips || []).filter((s) => s !== e.detail.value)];
+    this.selectedChips = t, this.updateChildChips(), this.dispatchEvent(
+      new CustomEvent("ds-chips:change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          selectedChips: t
+        }
+      })
+    );
+  }
+  render() {
+    return v`
+            <div
+                class="container"
+                data-testid="ds-chips-container"
+                @select=${this.handleSelect}
+                @deselect=${this.handleDeselect}
+            >
+                ${this.getScrollButtonTemplate("left", this.handleScrollLeft)}
+                <nav tabindex="0" class=${b(this.chipsContainerClasses)}>
+                    <slot @slotchange=${this.updateChildChips}></slot>
+                </nav>
+                ${this.getScrollButtonTemplate("right", this.handleScrollRight)}
+            </div>
+        `;
+  }
+};
+l.styles = [y];
+h([
+  o({ type: Array, attribute: "selected-chips", converter: m, reflect: !0 })
+], l.prototype, "selectedChips", 2);
+h([
+  o({ type: Boolean, attribute: "multi-choice", converter: u })
+], l.prototype, "multiChoice", 2);
+h([
+  o({ type: String })
+], l.prototype, "size", 2);
+h([
+  o({ type: String, reflect: !0 })
+], l.prototype, "mode", 2);
+h([
+  n()
+], l.prototype, "hasScrollLeft", 2);
+h([
+  n()
+], l.prototype, "hasScrollRight", 2);
+h([
+  S({ slot: "" })
+], l.prototype, "chips", 2);
+h([
+  f(".chips-container")
+], l.prototype, "chipsContainer", 2);
+l = h([
+  d("ds-chips")
+], l);
+export {
+  l as DsChips
+};

package/dist-react/components/ds-chips/styles/common.styles.js

@@ -0,0 +1,94 @@
+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 a = t`
+    .container {
+        display: inline-flex;
+        position: relative;
+        max-width: 100%;
+        position: relative;
+        --ds-chips-fade-width: 54px;
+    }
+
+    .chips-container {
+        box-sizing: border-box;
+        display: inline-flex;
+        justify-content: flex-start;
+        overflow-y: auto;
+        scrollbar-width: none;
+        scroll-behavior: smooth;
+    }
+
+    .chips-container.scroll-left:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: var(--ds-chips-fade-width);
+        height: 100%;
+        pointer-events: none;
+        background: linear-gradient(
+            to right,
+            var(--ds-chips-fade-color) 0%,
+            var(--ds-chips-fade-color) 40%,
+            rgba(255, 255, 255, 0) 100%
+        );
+        z-index: var(--ds-z-index-default, 1);
+    }
+
+    .chips-container.scroll-right:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: var(--ds-chips-fade-width);
+        height: 100%;
+        pointer-events: none;
+        background: linear-gradient(
+            to left,
+            var(--ds-chips-fade-color) 0%,
+            var(--ds-chips-fade-color) 40%,
+            rgba(255, 255, 255, 0) 100%
+        );
+        z-index: var(--ds-z-index-default, 1);
+    }
+
+    //.chips-container.scroll-left.scroll-right {
+    //    mask-image: linear-gradient(
+    //        to right,
+    //        rgba(0, 0, 0, 0) 0px,
+    //        rgba(0, 0, 0, 0) 32px,
+    //        rgba(0, 0, 0, 1) 48px,
+    //        rgba(0, 0, 0, 1) calc(100% - 48px),
+    //        rgba(0, 0, 0, 0) calc(100% - 32px),
+    //        rgba(0, 0, 0, 0) 100%
+    //    );
+    //}
+
+    .chips-container::-webkit-scrollbar {
+        display: none;
+    }
+
+    ::slotted(*) {
+        white-space: nowrap;
+        flex: 0 1 auto;
+    }
+
+    .scroll-button {
+        position: absolute;
+        top: 0;
+        z-index: 2;
+    }
+
+    .scroll-button.left {
+        left: 0;
+    }
+
+    .scroll-button.right {
+        right: 0;
+    }
+`;
+export {
+  a as commonStyles
+};