@cupra/ui-kit 1.1.0-canary.8 → 2.0.0-canary.16

package/dist-react/esm/components/ds-list/styles/cupra-diagonal.styles.js

@@ -0,0 +1,42 @@
+import { cssWithTokens as t } from "../../../utils/cssWithTokens.js";
+const e = t`
+    .ds-list {
+        display: flex;
+        flex-direction: column;
+        row-gap: var(--dg-size-16);
+        font-family: var(--dg-font-family-base);
+    }
+
+    ::slotted([slot="title"]) {
+        color: var(--dg-global-color-neutral-10);
+        font-weight: 400;
+    }
+
+    ::slotted([slot="subtitle"]) {
+        color: var(--dg-global-color-neutral-60);
+        font-weight: 400;
+    }
+    
+    :host([size="small"]) ::slotted([slot="title"]) {
+        font-size: var(--dg-font-size-body-m);
+        line-height: var(--dg-font-body-xs-medium-line-height);
+    }
+
+    :host([size="medium"]) ::slotted([slot="title"]) {
+        font-size: var(--dg-font-size-body-l);
+        line-height: var(--dg-font-body-s-medium-line-height);
+    }
+
+    :host([size="small"]) ::slotted([slot="subtitle"]) {
+        font-size: var(--dg-font-size-body-m);
+        line-height: var(--dg-font-body-xs-medium-line-height);
+    }
+
+    :host([size="medium"]) ::slotted([slot="subtitle"]) {
+        font-size: var(--dg-font-size-body-l);
+        line-height: var(--dg-font-body-s-medium-line-height);
+    }
+`;
+export {
+  e as cupraDiagonalStyles
+};

package/dist-react/esm/components/ds-list-item/ds-list-item.js

@@ -0,0 +1,114 @@
+import { UiKitElement as p } from "../base/UiKitElement.js";
+import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as i, nothing as d } 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 f } 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";
+import { cupraDiagonalStyles as v } from "./styles/cupra-diagonal.styles.js";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (t, e, a, n) => {
+  for (var s = n > 1 ? void 0 : n ? x(e, a) : e, m = t.length - 1, c; m >= 0; m--)
+    (c = t[m]) && (s = (n ? c(e, a, s) : c(s)) || s);
+  return n && s && y(e, a, s), s;
+};
+let r = class extends p {
+  constructor() {
+    super(...arguments), this.variant = "selection", this.selected = !1, this.disabled = !1, this.size = "medium";
+  }
+  get classes() {
+    return {
+      content: !0,
+      [this.size]: !0,
+      [`${this.variant}-variant`]: !0,
+      selected: this.selected,
+      disabled: this.disabled
+    };
+  }
+  connectedCallback() {
+    var t;
+    if ((t = super.connectedCallback) == null || t.call(this), !this.hasAttribute("size")) {
+      const e = this.closest("ds-list");
+      e && (this.size = e.size);
+    }
+  }
+  renderSelectionTemplate() {
+    return i`
+            <slot name="input-left"></slot>
+            <slot name="icon"></slot>
+            <div class="container-text">
+                <slot name="primary-text"></slot>
+                <slot name="description-text"></slot>
+            </div>
+            <slot name="secondary-text"></slot>
+            <slot name="input-right"></slot>
+        `;
+  }
+  renderActionTemplate() {
+    return i`
+            <slot name="image-square"></slot>
+            <slot name="image-wide"></slot>
+            <slot name="icon-left"></slot>
+            <div class="container-text">
+                <slot name="primary-text"></slot>
+                <slot name="description-text"></slot>
+            </div>
+            <slot name="secondary-text"></slot>
+            <slot name="icon-right"></slot>
+        `;
+  }
+  renderInfoTemplate() {
+    return i`
+            <slot name="icon"></slot>
+            <div class="container-text">
+                <div class="container">
+                    <slot name="primary-text"></slot>
+                    <slot name="primary-subtext"></slot>
+                </div>
+                <slot name="description-text"></slot>
+            </div>
+            <slot name="aside"></slot>
+        `;
+  }
+  renderByTemplate() {
+    switch (this.variant) {
+      case "selection":
+        return this.renderSelectionTemplate();
+      case "action":
+        return this.renderActionTemplate();
+      case "info":
+        return this.renderInfoTemplate();
+      default:
+        return d;
+    }
+  }
+  render() {
+    const t = this.variant !== "info";
+    return i`
+            <li class=${f(this.classes)} role="listitem" tabindex="0" ?aria-disabled=${this.disabled}>
+                ${this.renderByTemplate()}
+            </li>
+
+            ${t ? i`<ds-divider orientation="horizontal" variant="primary"></ds-divider>` : d}
+        `;
+  }
+};
+r.styles = [h, v];
+o([
+  l({ type: String, reflect: !0 })
+], r.prototype, "variant", 2);
+o([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "selected", 2);
+o([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+o([
+  l({ type: String, reflect: !0 })
+], r.prototype, "size", 2);
+r = o([
+  u("ds-list-item")
+], r);
+export {
+  r as DsListItem
+};

package/dist-react/esm/components/ds-list-item/styles/common.styles.js

@@ -0,0 +1,10 @@
+import { cssWithTokens as o } from "../../../utils/cssWithTokens.js";
+const s = o`
+    :host {
+        display: block;
+        width: fit-content;
+    }
+`;
+export {
+  s as commonStyles
+};

package/dist-react/esm/components/ds-list-item/styles/cupra-diagonal.styles.js

@@ -0,0 +1,112 @@
+import { cssWithTokens as t } from "../../../utils/cssWithTokens.js";
+const o = t`
+    .content {
+        display: flex;
+        align-items: center;
+        padding: var(--dg-size-08) 0;
+        font-family: var(--dg-font-family-base);
+        font-weight: 400;
+        gap: var(--dg-size-08);
+    }
+    
+    .container {
+        display: flex;
+        gap: var(--dg-size-08);
+    }
+    
+    .container-text {
+        padding-right: var(--dg-size-24);
+    }
+    
+    .content.info-variant,
+    .content.action-variant {
+        padding: var(--dg-size-08);
+    }
+    
+    ::slotted([slot="input-left"]),
+    ::slotted([slot="input-right"]) {
+        width: unset;
+    }
+    
+    ::slotted([slot="primary-text"]) {
+        color: var(--dg-global-color-neutral-10);
+    }
+    
+    ::slotted([slot="primary-subtext"]),
+    ::slotted([slot="secondary-text"]),
+    ::slotted([slot="description-text"]) {
+        color: var(--dg-global-color-neutral-60);
+    }
+    
+    ::slotted([slot="description-text"]) {
+        padding-top: var(--dg-size-08);
+    }
+    
+    :host([size="medium"]) ::slotted([slot="image-square"]) {
+        width: var(--dg-size-48);
+        height: var(--dg-size-48);
+    }
+    
+    :host([size="small"]) ::slotted([slot="image-square"]) {
+        width: var(--dg-size-32);
+        height: var(--dg-size-32);
+    }
+    
+    ::slotted([slot="image-wide"]) {
+        object-fit: cover;
+    }
+    
+    :host([size="medium"]) ::slotted([slot="image-wide"]) {
+        width: var(--dg-size-96);
+        height: var(--dg-size-48);
+    }
+    
+    :host([size="small"]) ::slotted([slot="image-wide"]) {
+        width: var(--dg-size-64);
+        height: var(--dg-size-32);
+    }
+    
+    :host([size="small"]) ::slotted([slot="primary-text"]),
+    :host([size="small"]) ::slotted([slot="secondary-text"]),
+    :host([size="small"]) ::slotted([slot="description-text"]),
+    :host([size="small"]) ::slotted([slot="primary-subtext"]),
+    :host([size="small"]) ::slotted([slot="aside"]) {
+        font-size: var(--dg-font-size-body-m);
+        line-height: var(--dg-font-body-xs-medium-line-height);
+    }
+    
+    :host([size="medium"]) ::slotted([slot="primary-text"]),
+    :host([size="medium"]) ::slotted([slot="secondary-text"]),
+    :host([size="medium"]) ::slotted([slot="description-text"]),
+    :host([size="medium"]) ::slotted([slot="primary-subtext"]),
+    :host([size="medium"]) ::slotted([slot="aside"]) {
+        font-size: var(--dg-font-size-body-l);
+        line-height: var(--dg-font-body-s-medium-line-height);
+    }
+    
+    .content:hover {
+        background: var(--dg-color-field-bg-hover);
+    }
+    
+    .content:active {
+        background: var(--dg-button-bg-color-action-pressed);
+    }
+    
+    .content:focus-visible {
+        outline: var(--dg-border-width-02) solid var(--dg-outline-color-focus);
+        background-color: var(--dg-color-field-bg-focus);
+    }
+
+    .selected {
+        background: var(--dg-button-bg-color-action-hover);
+        border-left: var(--dg-size-04) solid var(--dg-color-field-bg-selected);
+    }
+
+    .disabled {
+        opacity: 0.25;
+        pointer-events: none;
+    }
+`;
+export {
+  o as cupraDiagonalStyles
+};

package/dist-react/esm/components/ds-password-input/ds-password-input.js

@@ -0,0 +1,43 @@
+import { DsTextInput as u } from "../ds-text-input/ds-text-input.js";
+import { customUiKitElement as b } from "../../decorators/customUiKitElement.js";
+import { property as p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+var h = Object.defineProperty, c = Object.getOwnPropertyDescriptor, r = (e, a, o, s) => {
+  for (var t = s > 1 ? void 0 : s ? c(a, o) : a, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (t = (s ? l(a, o, t) : l(t)) || t);
+  return s && t && h(a, o, t), t;
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.dataAriaLabelHideButton = "", this.dataAriaLabelShowButton = "", this.visible = !1, this.handleClickIcon = () => {
+      this.visible ? (this.nativeInput.setAttribute("type", "password"), this.visible = !1) : (this.nativeInput.setAttribute("type", "text"), this.visible = !0);
+    };
+  }
+  get iconTemplate() {
+    var e;
+    return this.componentFactory.createIconButton({
+      class: "icon-button",
+      "icon-name": this.visible ? "eye-crossed-out" : "eye",
+      disabled: !!((e = this.nativeInput) != null && e.disabled),
+      size: this.size,
+      variant: "naked",
+      "@click": this.handleClickIcon,
+      "data-aria-label": this.visible ? this.dataAriaLabelHideButton || "hide" : this.dataAriaLabelShowButton || "show"
+    });
+  }
+};
+r([
+  p({ type: String, attribute: "data-aria-label-hide-button" })
+], i.prototype, "dataAriaLabelHideButton", 2);
+r([
+  p({ type: String, attribute: "data-aria-label-show-button" })
+], i.prototype, "dataAriaLabelShowButton", 2);
+r([
+  d()
+], i.prototype, "visible", 2);
+i = r([
+  b("ds-password-input", { extendComponentNames: ["ds-text-input"] })
+], i);
+export {
+  i as DsPasswordInput
+};

package/dist-react/esm/components/ds-search-input/ds-search-input.js

@@ -0,0 +1,158 @@
+import { UiKitElement as d } from "../base/UiKitElement.js";
+import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
+import { inputStatesMixin as v } from "../../mixins/inputStatesMixin.js";
+import { booleanConverter as c } from "../../utils/booleanConverter.js";
+import { validateMaxLength as f } from "../../utils/validateMaxLength.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as l, nothing 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 { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.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 g } from "./styles/common.styles.js";
+var y = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (t, e, o, a) => {
+  for (var s = a > 1 ? void 0 : a ? E(e, o) : e, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (s = (a ? u(e, o, s) : u(s)) || s);
+  return a && s && y(e, o, s), s;
+};
+let i = class extends v(d) {
+  constructor() {
+    super(...arguments), this.size = "medium", this.variant = "primary", this.loading = !1, this.helperText = "", this.forcedError = "", this.invalidError = "", this.dataAriaLabelRemoveButton = "", this.dataAriaLabelPositionButton = "", this.withPositionButton = !0, this.handleRemove = () => {
+      this.nativeInput.value = "", this.nativeInput.focus(), ["input", "change"].forEach(
+        (t) => this.nativeInput.dispatchEvent(new Event(t, { bubbles: !0, composed: !0 }))
+      );
+    }, this.handleClickPositionButton = () => {
+      this.dispatchEvent(
+        new Event("ds-search-input:click-position-button", {
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    };
+  }
+  get classes() {
+    return {
+      container: !0,
+      error: !!this.forcedError,
+      loading: this.loading,
+      [this.size]: !!this.size,
+      [this.variant]: !!this.variant,
+      disabled: this.inputStates.disabled,
+      filled: this.inputStates.filled,
+      invalid: this.inputStates.invalid,
+      focus: this.inputStates.focus,
+      "focus-visible": this.inputStates.focusVisible
+    };
+  }
+  render() {
+    return l`
+            <div part="container" class=${b(this.classes)}>
+                <div part="input-container" class="input-container">
+                    ${this.searchIconTemplate}
+                    <slot></slot>
+                    <span class="buttons-container">
+                        ${this.removeTemplate}
+                        ${this.positionTemplate}
+                        ${this.loaderSpinnerTemplate}
+                    </span>
+                </div>
+                ${this.footerTemplate}
+            </div>
+        `;
+  }
+  get searchIconTemplate() {
+    return this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": "magnifying-glass",
+      variant: "standard"
+    });
+  }
+  get removeTemplate() {
+    var t, e, o;
+    return !((e = (t = this.nativeInput) == null ? void 0 : t.value) != null && e.length) || this.loading ? p : this.componentFactory.createIconButton({
+      class: "remove-icon-button",
+      "icon-name": "cross",
+      disabled: !!((o = this.nativeInput) != null && o.disabled),
+      size: this.size,
+      variant: "naked",
+      "@click": this.handleRemove,
+      "data-aria-label": this.dataAriaLabelRemoveButton || "remove button"
+    });
+  }
+  get positionTemplate() {
+    var t;
+    return this.loading || !this.withPositionButton ? p : this.componentFactory.createIconButton({
+      class: "position-icon-button",
+      "icon-name": "position",
+      disabled: !!((t = this.nativeInput) != null && t.disabled),
+      size: this.size,
+      variant: "naked",
+      "@click": this.handleClickPositionButton,
+      "data-aria-label": this.dataAriaLabelPositionButton || "position button"
+    });
+  }
+  get loaderSpinnerTemplate() {
+    return this.componentFactory.createLoaderSpinner({
+      show: this.loading
+    });
+  }
+  get footerTemplate() {
+    var t, e;
+    return !((t = this.helperText) != null && t.length) && !this.forcedError && (!this.inputStates.invalid || !this.invalidError) && Number((e = this.nativeInput) == null ? void 0 : e.maxLength) < 0 ? p : l`
+            <div class="footer">
+                ${this.helperTextTemplate}
+                ${this.forcedErrorTemplate}
+                ${this.invalidErrorTemplate}
+                ${this.lengthTemplate}
+            </div>
+        `;
+  }
+  get helperTextTemplate() {
+    var t;
+    return this.forcedError || this.inputStates.invalid && this.invalidError || !((t = this.helperText) != null && t.length) ? p : l`<span class="support-text helper-text">${this.helperText}</span>`;
+  }
+  get forcedErrorTemplate() {
+    return this.forcedError ? l`<span class="support-text error-text forced-error">${this.forcedError}</span>` : p;
+  }
+  get invalidErrorTemplate() {
+    return this.forcedError || !this.inputStates.invalid || !this.invalidError ? p : l`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
+  }
+  get lengthTemplate() {
+    var e, o, a;
+    const t = (o = (e = this.nativeInput) == null ? void 0 : e.maxLength) == null ? void 0 : o.toString();
+    return f(t) ? l`<span class="char-counter">${((a = this.inputStates.currentValue) == null ? void 0 : a.length) || 0}/${t}</span>` : p;
+  }
+};
+i.styles = [g];
+r([
+  n({ type: String })
+], i.prototype, "size", 2);
+r([
+  n({ type: String })
+], i.prototype, "variant", 2);
+r([
+  n({ type: Boolean, converter: c })
+], i.prototype, "loading", 2);
+r([
+  n({ type: String, attribute: "helper-text" })
+], i.prototype, "helperText", 2);
+r([
+  n({ type: String, attribute: "forced-error" })
+], i.prototype, "forcedError", 2);
+r([
+  n({ type: String, attribute: "invalid-error" })
+], i.prototype, "invalidError", 2);
+r([
+  n({ type: String, attribute: "data-aria-label-remove-button" })
+], i.prototype, "dataAriaLabelRemoveButton", 2);
+r([
+  n({ type: String, attribute: "data-aria-label-position-button" })
+], i.prototype, "dataAriaLabelPositionButton", 2);
+r([
+  n({ type: Boolean, converter: c, attribute: "with-position-button" })
+], i.prototype, "withPositionButton", 2);
+i = r([
+  m("ds-search-input")
+], i);
+export {
+  i as DsSearchInput
+};

package/dist-react/esm/components/ds-tabs/theme-config.js

@@ -0,0 +1,14 @@
+const a = {
+  cupra: {
+    "icon-button-variant": "primary"
+  },
+  "cupra-diagonal": {
+    "icon-button-variant": "naked"
+  },
+  seat: {
+    "icon-button-variant": "primary"
+  }
+};
+export {
+  a as themeConfig
+};

package/dist-react/esm/components/ds-text-input/ds-text-input.js

@@ -0,0 +1,100 @@
+import { UiKitElement as c } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import { inputStatesMixin as m } from "../../mixins/inputStatesMixin.js";
+import { validateMaxLength as v } from "../../utils/validateMaxLength.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as n, nothing 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 { property as l } 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 { commonStyles as b } from "./styles/common.styles.js";
+var g = Object.defineProperty, E = Object.getOwnPropertyDescriptor, o = (t, e, r, s) => {
+  for (var a = s > 1 ? void 0 : s ? E(e, r) : e, u = t.length - 1, h; u >= 0; u--)
+    (h = t[u]) && (a = (s ? h(e, r, a) : h(a)) || a);
+  return s && a && g(e, r, a), a;
+};
+let i = class extends m(c) {
+  constructor() {
+    super(...arguments), this.keyboardMode = !1, this.size = "medium", this.helperText = "", this.forcedError = "", this.invalidError = "", this.dataAriaLabelRemoveButton = "", this.handleClickIcon = () => {
+      this.nativeInput.value = "", this.nativeInput.focus(), ["input", "change"].forEach(
+        (t) => this.nativeInput.dispatchEvent(new Event(t, { bubbles: !0, composed: !0 }))
+      );
+    };
+  }
+  get classes() {
+    return {
+      container: !0,
+      error: !!this.forcedError,
+      [this.size]: !!this.size,
+      disabled: this.inputStates.disabled,
+      filled: this.inputStates.filled,
+      invalid: this.inputStates.invalid,
+      focus: this.inputStates.focus,
+      "focus-visible": this.inputStates.focusVisible
+    };
+  }
+  render() {
+    return n`
+            <div class=${f(this.classes)}>
+                <div class="input-container">
+                    <div><slot></slot></div>
+                    ${this.iconTemplate}
+                </div>
+                <div class="footer">
+                    ${this.helperTextTemplate}
+                    ${this.forcedErrorTemplate}
+                    ${this.invalidErrorTemplate}
+                    ${this.lengthTemplate}
+                </div>
+            </div>
+        `;
+  }
+  get iconTemplate() {
+    var t, e, r;
+    return (e = (t = this.nativeInput) == null ? void 0 : t.value) != null && e.length ? this.componentFactory.createIconButton({
+      class: "icon-button",
+      "icon-name": "cross",
+      size: this.size,
+      disabled: !!((r = this.nativeInput) != null && r.disabled),
+      variant: "naked",
+      "@click": this.handleClickIcon,
+      "data-aria-label": this.dataAriaLabelRemoveButton || "remove button"
+    }) : p;
+  }
+  get lengthTemplate() {
+    var e, r, s;
+    const t = (r = (e = this.nativeInput) == null ? void 0 : e.maxLength) == null ? void 0 : r.toString();
+    return v(t) ? n`<span class="char-counter">${((s = this.inputStates.currentValue) == null ? void 0 : s.length) || 0}/${t}</span>` : p;
+  }
+  get helperTextTemplate() {
+    return this.forcedError || this.inputStates.invalid && this.invalidError ? p : n`<span class="support-text helper-text">${this.helperText}</span>`;
+  }
+  get forcedErrorTemplate() {
+    return this.forcedError ? n`<span class="support-text error-text forced-error">${this.forcedError}</span>` : p;
+  }
+  get invalidErrorTemplate() {
+    return this.forcedError || !this.inputStates.invalid || !this.invalidError ? p : n`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
+  }
+};
+i.styles = [b];
+o([
+  l({ type: String })
+], i.prototype, "size", 2);
+o([
+  l({ type: String, attribute: "helper-text" })
+], i.prototype, "helperText", 2);
+o([
+  l({ type: String, attribute: "forced-error" })
+], i.prototype, "forcedError", 2);
+o([
+  l({ type: String, attribute: "invalid-error" })
+], i.prototype, "invalidError", 2);
+o([
+  l({ type: String, attribute: "data-aria-label-remove-button" })
+], i.prototype, "dataAriaLabelRemoveButton", 2);
+i = o([
+  d("ds-text-input")
+], i);
+export {
+  i as DsTextInput
+};