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

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

@@ -0,0 +1,185 @@
+import { UiKitElement as d } from "../base/UiKitElement.js";
+import { radioGroupErrorContext as b, radioGroupErrorTextContext as m, radioGroupDisabledContext as x, radioGroupHelperTextContext as v, radioGroupSizeContext as f } from "../ds-radio-button-group/ds-radio-button-group.js";
+import { customUiKitElement as y } from "../../decorators/customUiKitElement.js";
+import { ContextConsumer as C } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/controllers/context-consumer.js";
+import { booleanConverter as G } 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 h } 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 p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { queryAssignedElements as T } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { classMap as _ } 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 k = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (t, e, s, o) => {
+  for (var a = o > 1 ? void 0 : o ? A(e, s) : e, u = t.length - 1, l; u >= 0; u--)
+    (l = t[u]) && (a = (o ? l(e, s, a) : l(a)) || a);
+  return o && a && k(e, s, a), a;
+};
+let r = class extends d {
+  constructor() {
+    super(...arguments), this.inputPlacement = "left", this._size = "medium", this.errorText = "", this.helperText = "", this._disabled = !1, this.handleChange = (t) => {
+      this.checkInputState(t.target);
+    }, this.handleClick = () => {
+      var t;
+      (t = this.input[0]) == null || t.click();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), queueMicrotask(() => {
+      this.createContextConsumers([
+        {
+          context: b,
+          callback: (t) => {
+            this.errorGroup = t;
+          }
+        },
+        {
+          context: m,
+          callback: (t) => {
+            this.errorTextGroup = t;
+          }
+        },
+        {
+          context: x,
+          callback: (t) => {
+            this.disabledGroup = t;
+          }
+        },
+        {
+          context: v,
+          callback: (t) => {
+            this.helperTextGroup = t;
+          }
+        },
+        {
+          context: f,
+          callback: (t) => {
+            this.sizeGroup = t;
+          }
+        }
+      ]);
+    });
+  }
+  firstUpdated(t) {
+    var s;
+    super.firstUpdated(t);
+    const e = (s = this.input) == null ? void 0 : s[0];
+    e && (e.addEventListener("change", this.handleChange), this.observeInputAttributes(), this.checkInputState(e), this.applyAriaAttributes());
+  }
+  createContextConsumers(t) {
+    t.forEach(({ context: e, callback: s }) => {
+      new C(this, {
+        context: e,
+        callback: s,
+        subscribe: !0
+      });
+    });
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback();
+    const t = (e = this.input) == null ? void 0 : e[0];
+    t && (t.removeEventListener("change", this.handleChange), this.inputMutationObserver.disconnect());
+  }
+  checkInputState(t) {
+    this._disabled = this.disabledGroup ?? (t == null ? void 0 : t.disabled);
+  }
+  observeInputAttributes() {
+    const t = new MutationObserver(() => {
+      this.checkInputState(this.input[0]);
+    });
+    t.observe(this.input[0], {
+      attributes: !0,
+      attributeFilter: ["required", "disabled"]
+    }), this.inputMutationObserver = t;
+  }
+  updated(t) {
+    super.updated(t), (t.has("error") || t.has("errorText") || t.has("helperText")) && this.applyAriaAttributes();
+  }
+  applyAriaAttributes() {
+    var o;
+    const t = (o = this.input) == null ? void 0 : o[0];
+    if (!t) return;
+    const e = !!this.error, s = e ? this.errorText || this.errorTextGroup : this.helperText || this.helperTextGroup || null;
+    t.setAttribute("aria-disabled", this.disabled ? "true" : "false"), t.setAttribute("aria-invalid", e ? "true" : "false"), s ? t.setAttribute("aria-description", s) : t.removeAttribute("aria-description");
+  }
+  get containerClasses() {
+    return {
+      container: !0,
+      error: this.error,
+      disabled: this.disabled,
+      [this.size]: !0,
+      [this.inputPlacement]: !0
+    };
+  }
+  get error() {
+    return this._error ?? this.errorGroup;
+  }
+  get disabled() {
+    return this.disabledGroup ?? this._disabled;
+  }
+  get size() {
+    return this.sizeGroup || this._size;
+  }
+  render() {
+    return h`
+            <div @click=${this.handleClick} class=${_(this.containerClasses)}>
+                <span class="input-container">
+                    <slot name="input"></slot>
+                </span>
+                <div class="text-container">
+                    <slot name="label"></slot>
+                    ${!(this.error && this.errorText) && this.helperText ? h`<div class="helper-text" > ${this.helperText}</div>` : c}
+                    ${this.error && this.errorText ? h`<div class="error-text">${this.errorText}</div>` : c}
+                </div>
+            </div>
+        `;
+  }
+};
+r.styles = [g];
+i([
+  n({ type: String, attribute: "input-placement" })
+], r.prototype, "inputPlacement", 2);
+i([
+  n({ type: String, attribute: "size" })
+], r.prototype, "_size", 2);
+i([
+  n({ type: Boolean, attribute: "error", converter: G })
+], r.prototype, "_error", 2);
+i([
+  n({ type: String, attribute: "error-text" })
+], r.prototype, "errorText", 2);
+i([
+  n({ type: String, attribute: "helper-text" })
+], r.prototype, "helperText", 2);
+i([
+  p()
+], r.prototype, "errorGroup", 2);
+i([
+  p()
+], r.prototype, "errorTextGroup", 2);
+i([
+  p()
+], r.prototype, "disabledGroup", 2);
+i([
+  p()
+], r.prototype, "helperTextGroup", 2);
+i([
+  p()
+], r.prototype, "sizeGroup", 2);
+i([
+  p()
+], r.prototype, "_disabled", 2);
+i([
+  p()
+], r.prototype, "inputMutationObserver", 2);
+i([
+  T({ slot: "input", selector: "input" })
+], r.prototype, "input", 2);
+r = i([
+  y("ds-radio-button")
+], r);
+export {
+  r as DsRadioButton
+};

package/dist-react/components/ds-radio-button/styles/common.styles.js

@@ -0,0 +1,52 @@
+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 n = t`
+    :host {
+        display: block;
+        flex: 0 0 auto;
+    }
+
+    :host:has(.disabled) {
+        pointer-events: none;
+    }
+
+    .container {
+        cursor: pointer;
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+
+    ::slotted([slot='input']) {
+        cursor: inherit;
+        appearance: none;
+        background-color: transparent;
+        margin: 0;
+        font: inherit;
+        border-radius: 100%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        border-style: solid;
+    }
+
+    ::slotted([slot='input'])::after {
+        content: '';
+        border-radius: 100%;
+        transform: scale(0);
+        transition: 200ms transform ease-in-out;
+    }
+
+    ::slotted([slot='input']:checked)::after {
+        transform: scale(1);
+    }
+
+    ::slotted([slot='label']) {
+        cursor: pointer;
+    }
+`;
+export {
+  n as commonStyles
+};

package/dist-react/components/ds-radio-button-group/ds-radio-button-group.js

@@ -0,0 +1,83 @@
+import { UiKitElement as h } from "../base/UiKitElement.js";
+import { customUiKitElement as b } from "../../decorators/customUiKitElement.js";
+import { createContext as i } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/create-context.js";
+import { provide as s } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.js";
+import { booleanConverter as x } 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 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 o } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as v } 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 f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, e = (m, n, a, p) => {
+  for (var r = p > 1 ? void 0 : p ? g(n, a) : n, l = m.length - 1, d; l >= 0; l--)
+    (d = m[l]) && (r = (p ? d(n, a, r) : d(r)) || r);
+  return p && r && f(n, a, r), r;
+};
+const S = i(Symbol("ds-radio-button-group:disabled")), T = i(Symbol("ds-radio-button-group:error")), C = i(Symbol("ds-radio-button-group:error-text")), $ = i(Symbol("ds-radio-button-group:helper-text")), G = i(Symbol("ds-radio-button-group:size"));
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.error = !1, this.errorText = "", this.helperText = "", this.disabled = !1, this.size = "medium", this.orientation = "vertical";
+  }
+  get classes() {
+    return {
+      container: !0,
+      error: this.error,
+      disabled: !!this.disabled,
+      [this.size]: !0,
+      [this.orientation]: !0
+    };
+  }
+  render() {
+    return u`
+            <div
+                data-testid="ds-radio-button-group-container"
+                class=${v(this.classes)}
+                .aria-invalid=${this.error}
+            >   
+                <slot name="title"></slot>
+                <slot name="description"></slot>
+                <div class="radio-buttons-container">
+                    <slot></slot>
+                </div>
+                ${!this.error && this.helperText ? u`<div class = 'helper-text' > ${this.helperText}</div>` : c}
+                ${this.error && this.errorText ? u`<div class="error-text">${this.errorText}</div>` : c}
+            </div>
+        `;
+  }
+};
+t.styles = [y];
+e([
+  s({ context: T }),
+  o({ type: Boolean, converter: x })
+], t.prototype, "error", 2);
+e([
+  s({ context: C }),
+  o({ type: String, attribute: "error-text" })
+], t.prototype, "errorText", 2);
+e([
+  s({ context: $ }),
+  o({ type: String, attribute: "helper-text" })
+], t.prototype, "helperText", 2);
+e([
+  s({ context: S }),
+  o({ type: Boolean, converter: x })
+], t.prototype, "disabled", 2);
+e([
+  s({ context: G }),
+  o({ type: String })
+], t.prototype, "size", 2);
+e([
+  o({ type: String, reflect: !0 })
+], t.prototype, "orientation", 2);
+t = e([
+  b("ds-radio-button-group")
+], t);
+export {
+  t as DsRadioButtonGroup,
+  S as radioGroupDisabledContext,
+  T as radioGroupErrorContext,
+  C as radioGroupErrorTextContext,
+  $ as radioGroupHelperTextContext,
+  G as radioGroupSizeContext
+};

package/dist-react/components/ds-radio-button-group/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 o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const s = o`
+    :host {
+        display: contents;
+    }
+
+    .container {
+        display: block;
+    }
+
+    .container.vertical ::slotted(ds-radio-button) {
+        display: block;
+    }
+
+    .container.horizontal ::slotted(ds-radio-button) {
+        display: inline-flex;
+        vertical-align: top;
+    }
+`;
+export {
+  s as commonStyles
+};

package/dist-react/components/ds-radio-group/ds-radio-group.js

@@ -0,0 +1,79 @@
+import { customUiKitElement as n } from "../../decorators/customUiKitElement.js";
+import { FormAssociatedMixin as l } from "../../mixins/FormAssociatedMixin.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { LitElement as h } from "../../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 { queryAssignedElements as c } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.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 y } from "./ds-radio-group.styles.js";
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? v(t, s) : t, m = e.length - 1, d; m >= 0; m--)
+    (d = e[m]) && (o = (i ? d(t, s, o) : d(o)) || o);
+  return i && o && g(t, s, o), o;
+};
+let r = class extends l(h) {
+  constructor() {
+    super(...arguments), this.mode = "light", this.size = "large";
+  }
+  updateRadioChecked() {
+    requestAnimationFrame(() => {
+      this.radioElements.forEach((e) => {
+        e.checked = e.value === this.value;
+      });
+    });
+  }
+  setRadioProps(e) {
+    requestAnimationFrame(() => {
+      ["name", "size", "mode"].forEach((s) => {
+        e.has(s) && this.radioElements.forEach((i) => {
+          i[s] = this[s];
+        });
+      });
+    });
+  }
+  updated(e) {
+    super.updated(e), this.setRadioProps(e);
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.updateRadioChecked(), this.setRadioProps(e);
+  }
+  handleChangeRadio(e) {
+    var t;
+    this.value = (t = e.detail) == null ? void 0 : t.value;
+  }
+  get classes() {
+    return {
+      container: !0
+    };
+  }
+  render() {
+    return u`
+            <fieldset class=${f(this.classes)} @change=${this.handleChangeRadio}>
+                <slot></slot>
+            </fieldset>
+        `;
+  }
+};
+r.styles = [y];
+a([
+  p({ type: String })
+], r.prototype, "name", 2);
+a([
+  p({ type: String, reflect: !0 })
+], r.prototype, "value", 2);
+a([
+  p({ type: String, reflect: !0 })
+], r.prototype, "mode", 2);
+a([
+  p({ type: String })
+], r.prototype, "size", 2);
+a([
+  c({ selector: "ds-radio" })
+], r.prototype, "radioElements", 2);
+r = a([
+  n("ds-radio-group", { skipTagAsComponentName: !0 })
+], r);
+export {
+  r as DsRadioGroup
+};

package/dist-react/components/ds-radio-group/ds-radio-group.styles.js

@@ -0,0 +1,21 @@
+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 r = o`
+    :host {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        width: 100%;
+    }
+
+    .container {
+        padding: 0;
+        border: none;
+        display: contents;
+    }
+`;
+export {
+  r as commonStyles
+};

package/dist-react/components/ds-rating/ds-rating.d.ts

@@ -0,0 +1,14 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-icon/ds-icon.ts';
+import type { DsRatingAttrs } from './ds-rating.types';
+export declare class DsRating extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    value: DsRatingAttrs['value'];
+    disabled: DsRatingAttrs['disabled'];
+    hideRatingText: DsRatingAttrs['hide-rating-text'];
+    private get displayValue();
+    private get classes();
+    private getStarIconName;
+    protected get starsTemplate(): any[];
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,73 @@
+import { UiKitElement as c } from "../base/UiKitElement.js";
+import { customUiKitElement as h } from "../../decorators/customUiKitElement.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 { html 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 m } 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 "../ds-icon/ds-icon.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, t, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? g(t, r) : t, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (s = (a ? n(t, r, s) : n(s)) || s);
+  return a && s && v(t, r, s), s;
+};
+let i = class extends c {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.hideRatingText = !1;
+  }
+  get displayValue() {
+    if (this.value === void 0 || this.value === null || this.value < 0) return 0;
+    const e = Math.max(0, Math.min(5, this.value)), t = Math.floor(e), r = Number((e - t).toFixed(2));
+    return t + Math.round(r / 0.5) * 0.5;
+  }
+  get classes() {
+    return {
+      container: !0,
+      disabled: this.disabled
+    };
+  }
+  getStarIconName(e, t) {
+    return t >= e ? "star-filled" : t >= e - 0.5 ? "half-star-filled" : "star";
+  }
+  get starsTemplate() {
+    const e = this.displayValue, t = [];
+    for (let r = 1; r <= 5; r++) {
+      const a = this.getStarIconName(r, e);
+      a && t.push(
+        this.componentFactory.createIcon({
+          class: "star-icon",
+          "icon-name": a,
+          size: 16
+        })
+      );
+    }
+    return t;
+  }
+  render() {
+    const e = this.value !== void 0 && this.value >= 0 ? this.value : 0, r = Math.max(0, Math.min(5, e)).toString();
+    return p`
+            <div class=${d(this.classes)} aria-label=${`Rating: ${r} out of 5`} role="img">
+                <div class="stars-wrapper">${this.starsTemplate}</div>
+                ${this.hideRatingText ? "" : p`<span class="rating-text">${r}</span>`}
+            </div>
+        `;
+  }
+};
+i.styles = [f];
+o([
+  m({ type: Number })
+], i.prototype, "value", 2);
+o([
+  m({ type: Boolean, converter: u, reflect: !0 })
+], i.prototype, "disabled", 2);
+o([
+  m({ type: Boolean, converter: u, attribute: "hide-rating-text" })
+], i.prototype, "hideRatingText", 2);
+i = o([
+  h("ds-rating")
+], i);
+export {
+  i as DsRating
+};

package/dist-react/components/ds-rating/ds-rating.test.d.ts

@@ -0,0 +1,8 @@
+import type { DsRating } from './ds-rating';
+import './ds-rating';
+import '../ds-theme-provider/ds-theme-provider.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-rating': DsRating;
+    }
+}

package/dist-react/components/ds-rating/ds-rating.types.d.ts

@@ -0,0 +1,6 @@
+import type { CommonAttrs } from '../../types/types.ts';
+export type DsRatingAttrs = {
+    value?: number;
+    disabled?: boolean;
+    'hide-rating-text'?: boolean;
+} & CommonAttrs;

package/dist-react/components/ds-rating/styles/common.styles.d.ts

@@ -0,0 +1 @@
+export declare const commonStyles: import("lit").CSSResult;

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

@@ -0,0 +1,14 @@
+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 e = r`
+    .container,
+    .stars-wrapper {
+        display: flex;
+        align-items: center;
+    }
+`;
+export {
+  e as commonStyles
+};