@cupra/ui-kit 2.0.0-canary.18 → 2.0.0-canary.181

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

@@ -1,73 +1,60 @@
-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 { x as e } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as r } from "../base/UiKitElement.js";
+import { customUiKitElement as i } from "../../decorators/customUiKitElement.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">
+import { booleanConverter as a } from "../../utils/booleanConverter.js";
+import { uiKitHtml as o } from "../../utils/uiKitHtml.js";
+import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { commonStyles as c } from "./styles/common.styles.js";
+//#region src/components/ds-rating/ds-rating.ts
+var l, u = (l = class extends r {
+	constructor(...e) {
+		super(...e), this.disabled = !1, this.hideRatingText = !1;
+	}
+	get displayValue() {
+		if (this.value === void 0 || this.value === null || this.value < 0) return 0;
+		let e = Math.max(0, Math.min(5, this.value)), t = Math.floor(e), n = Number((e - t).toFixed(2));
+		return t + Math.round(n / .5) * .5;
+	}
+	get classes() {
+		return {
+			container: !0,
+			disabled: this.disabled
+		};
+	}
+	getStarIconName(e, t) {
+		return t >= e ? "star-filled" : t >= e - .5 ? "half-star-filled" : "star";
+	}
+	get starsTemplate() {
+		let e = this.displayValue, t = [];
+		for (let n = 1; n <= 5; n++) {
+			let r = this.getStarIconName(n, e);
+			t.push(o`<ds-icon class="star-icon" icon-name=${r} size="16"></ds-icon>`);
+		}
+		return t;
+	}
+	render() {
+		let t = this.value !== void 0 && this.value >= 0 ? this.value : 0, n = Math.max(0, Math.min(5, t)).toString();
+		return e`
+            <div class=${s(this.classes)} aria-label=${`Rating: ${n} out of 5`} role="img">
                 <div class="stars-wrapper">${this.starsTemplate}</div>
-                ${this.hideRatingText ? "" : p`<span class="rating-text">${r}</span>`}
+                ${this.hideRatingText ? "" : e`<span class="rating-text">${n}</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
-};
+	}
+}, l.styles = [c], l);
+n([t({ type: Number })], u.prototype, "value", void 0), n([t({
+	type: Boolean,
+	converter: a,
+	reflect: !0
+})], u.prototype, "disabled", void 0), n([t({
+	type: Boolean,
+	converter: a,
+	attribute: "hide-rating-text"
+})], u.prototype, "hideRatingText", void 0), u = n([i("ds-rating")], u);
+//#endregion

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

@@ -1,14 +1,36 @@
-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`
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-rating/styles/common.styles.ts
+var t = e`
     .container,
     .stars-wrapper {
         display: flex;
         align-items: center;
     }
+
+    .container {
+        gap: 8px;
+    }
+
+    .stars-wrapper {
+        padding: var(--ds-spacing-s-1);
+        gap: var(--ds-spacing-s-3);
+    }
+
+    .star-icon {
+        --ui-kit-icon-color: var(--ds-color-icon-selected);
+    }
+
+    .container.disabled .star-icon {
+        --ui-kit-icon-color: var(--ds-color-icon-disabled);
+    }
+
+    .rating-text {
+        font: 400 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
+            var(--ds-typography-family-primary);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        color: var(--ds-color-text-default);
+    }
 `;
-export {
-  e as commonStyles
-};
+//#endregion
+export { t as commonStyles };

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

@@ -1,107 +1,85 @@
-import { UiKitElement as m } from "../base/UiKitElement.js";
-import { customUiKitElement as y } from "../../decorators/customUiKitElement.js";
-import { FormAssociatedMixin as v } from "../../mixins/FormAssociatedMixin.js";
-import { booleanConverter as u } 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 { html as o, nothing 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 r } 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";
-import { query as g } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
-import { classMap as T } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as x, containerStyles as b, helperTextStyles as $, inputFieldStyles as S, inputContainerStyles as _ } from "./styles/common.styles.js";
-var C = Object.defineProperty, I = Object.getOwnPropertyDescriptor, t = (s, l, n, a) => {
-  for (var i = a > 1 ? void 0 : a ? I(l, n) : l, p = s.length - 1, h; p >= 0; p--)
-    (h = s[p]) && (i = (a ? h(l, n, i) : h(i)) || i);
-  return a && i && C(l, n, i), i;
-};
-let e = class extends v(m) {
-  constructor() {
-    super(...arguments), this.initialValue = "", this.label = "", this.helperText = "", this.errorText = "", this.disabled = !1, this.success = !1, this.mode = "light", this.size = "large", this.name = "", this.placeholder = "", this.type = "text", this.focused = !1, this.handleFocus = () => {
-      this.focused = !0;
-    }, this.handleBlur = () => {
-      this.focused = !1;
-    }, this.handleClickClearIcon = () => {
-      this._value = "", this.dispatchEvent(
-        new CustomEvent("ds-search:clear", {
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }, this.handleInput = (s) => {
-      const l = s.target;
-      this._value = l.value || "";
-    }, this.handleSuccess = (s) => {
-      this.dispatchEvent(
-        new CustomEvent("ds-search:position-success", {
-          bubbles: !0,
-          composed: !0,
-          detail: {
-            position: s
-          }
-        })
-      );
-    }, this.handleError = (s) => {
-      this.dispatchEvent(
-        new CustomEvent("ds-search:position-error", {
-          bubbles: !0,
-          composed: !0,
-          detail: {
-            error: s
-          }
-        })
-      );
-    };
-  }
-  firstUpdated() {
-    this._value = this.initialValue;
-  }
-  get value() {
-    return this._value;
-  }
-  set value(s) {
-    this._value = s;
-  }
-  get classes() {
-    return {
-      container: !0,
-      focused: this.focused,
-      error: !!this.errorText,
-      success: this.success,
-      disabled: this.disabled,
-      [this.size]: !0,
-      [this.mode]: !0
-    };
-  }
-  get searchIconTemplate() {
-    return o`
-            ${this.componentFactory.createIcon({
-      class: "search-icon",
-      "icon-name": "magnifying-glass"
-    })}
+import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { e as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as o } from "../base/UiKitElement.js";
+import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
+import { booleanConverter as c } from "../../utils/booleanConverter.js";
+import { uiKitHtml as l } from "../../utils/uiKitHtml.js";
+import { e as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { FormAssociatedMixin as d } from "../../mixins/FormAssociatedMixin.js";
+import { commonStyles as f, containerStyles as p, helperTextStyles as m, inputContainerStyles as h, inputFieldStyles as g } from "./styles/common.styles.js";
+//#region src/components/ds-search/ds-search.ts
+var _, v = (_ = class extends d(o) {
+	constructor(...e) {
+		super(...e), this.initialValue = "", this.label = "", this.helperText = "", this.errorText = "", this.disabled = !1, this.success = !1, this.mode = "light", this.size = "large", this.name = "", this.placeholder = "", this.type = "text", this.focused = !1, this.handleFocus = () => {
+			this.focused = !0;
+		}, this.handleBlur = () => {
+			this.focused = !1;
+		}, this.handleClickClearIcon = () => {
+			this._value = "", this.dispatchEvent(new CustomEvent("ds-search:clear", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.handleInput = (e) => {
+			let t = e.target;
+			this._value = t.value || "";
+		}, this.handleSuccess = (e) => {
+			this.dispatchEvent(new CustomEvent("ds-search:position-success", {
+				bubbles: !0,
+				composed: !0,
+				detail: { position: e }
+			}));
+		}, this.handleError = (e) => {
+			this.dispatchEvent(new CustomEvent("ds-search:position-error", {
+				bubbles: !0,
+				composed: !0,
+				detail: { error: e }
+			}));
+		};
+	}
+	firstUpdated() {
+		this._value = this.initialValue;
+	}
+	get value() {
+		return this._value;
+	}
+	set value(e) {
+		this._value = e;
+	}
+	get classes() {
+		return {
+			container: !0,
+			focused: this.focused,
+			error: !!this.errorText,
+			success: this.success,
+			disabled: this.disabled,
+			[this.size]: !0,
+			[this.mode]: !0
+		};
+	}
+	get searchIconTemplate() {
+		return t`
+            ${l`<ds-icon class="search-icon" icon-name="magnifying-glass"></ds-icon>`}
         `;
-  }
-  get positionIconTemplate() {
-    return o`
-            ${this.componentFactory.createIcon({
-      class: "position-icon",
-      "icon-name": "position"
-    })}
+	}
+	get positionIconTemplate() {
+		return t`
+            ${l`<ds-icon class="position-icon" icon-name="position"></ds-icon>`}
         `;
-  }
-  get clearIconTemplate() {
-    return o`
-            ${this.componentFactory.createIcon({
-      class: "clear-icon",
-      "data-testid": "clear-icon",
-      "icon-name": "cross",
-      "@click": this.handleClickClearIcon
-    })}
+	}
+	get clearIconTemplate() {
+		return t`
+            ${l`<ds-icon class="clear-icon" data-testid="clear-icon" icon-name="cross" @click=${this.handleClickClearIcon}></ds-icon>`}
         `;
-  }
-  get inputTemplate() {
-    return o`
+	}
+	get inputTemplate() {
+		return t`
             <input
                 class="input-field"
                 type=${this.type}
@@ -116,20 +94,20 @@ let e = class extends v(m) {
                 ?disabled=${this.disabled}
             />
         `;
-  }
-  get helperTextTemplate() {
-    return this.helperText ? o`
+	}
+	get helperTextTemplate() {
+		return this.helperText ? t`
             <div class="helper-text" @click=${this.handleClickHelperText}>
                 ${this.positionIconTemplate}
                 ${this.helperText}
             </div>
-        ` : c;
-  }
-  get errorTextTemplate() {
-    return this.errorText ? o`<div class="error-text">${this.errorText}</div>` : c;
-  }
-  get styleTokens() {
-    return f`
+        ` : e;
+	}
+	get errorTextTemplate() {
+		return this.errorText ? t`<div class="error-text">${this.errorText}</div>` : e;
+	}
+	get styleTokens() {
+		return t`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -137,14 +115,14 @@ let e = class extends v(m) {
                 }
             </style>
         `;
-  }
-  handleClickHelperText() {
-    navigator.geolocation.getCurrentPosition(this.handleSuccess, this.handleError);
-  }
-  render() {
-    return o`
+	}
+	handleClickHelperText() {
+		navigator.geolocation.getCurrentPosition(this.handleSuccess, this.handleError);
+	}
+	render() {
+		return t`
             ${this.styleTokens}
-            <div class=${T(this.classes)}>
+            <div class=${u(this.classes)}>
                 <div class="input-container">
                     ${this.searchIconTemplate}
                     ${this.inputTemplate}
@@ -154,57 +132,35 @@ let e = class extends v(m) {
                 ${this.helperTextTemplate}
             </div>
         `;
-  }
-};
-e.styles = [x, b, $, S, _];
-t([
-  r({ type: String, reflect: !0, attribute: "initial-value" })
-], e.prototype, "initialValue", 2);
-t([
-  r({ type: String })
-], e.prototype, "label", 2);
-t([
-  r({ type: String, attribute: "helper-text" })
-], e.prototype, "helperText", 2);
-t([
-  r({ type: String, attribute: "error-text" })
-], e.prototype, "errorText", 2);
-t([
-  r({ type: Boolean, converter: u })
-], e.prototype, "disabled", 2);
-t([
-  r({ type: Boolean, converter: u })
-], e.prototype, "success", 2);
-t([
-  r({ type: String, reflect: !0 })
-], e.prototype, "mode", 2);
-t([
-  r({ type: String })
-], e.prototype, "size", 2);
-t([
-  r({ type: String })
-], e.prototype, "name", 2);
-t([
-  r({ type: String })
-], e.prototype, "placeholder", 2);
-t([
-  r({ type: String, attribute: "max-length" })
-], e.prototype, "maxLength", 2);
-t([
-  r({ type: String })
-], e.prototype, "type", 2);
-t([
-  d()
-], e.prototype, "_value", 2);
-t([
-  d()
-], e.prototype, "focused", 2);
-t([
-  g(".input-field")
-], e.prototype, "inputField", 2);
-e = t([
-  y("ds-search")
-], e);
-export {
-  e as DsSearch
-};
+	}
+}, _.styles = [
+	f,
+	p,
+	m,
+	g,
+	h
+], _);
+a([n({
+	type: String,
+	reflect: !0,
+	attribute: "initial-value"
+})], v.prototype, "initialValue", void 0), a([n({ type: String })], v.prototype, "label", void 0), a([n({
+	type: String,
+	attribute: "helper-text"
+})], v.prototype, "helperText", void 0), a([n({
+	type: String,
+	attribute: "error-text"
+})], v.prototype, "errorText", void 0), a([n({
+	type: Boolean,
+	converter: c
+})], v.prototype, "disabled", void 0), a([n({
+	type: Boolean,
+	converter: c
+})], v.prototype, "success", void 0), a([n({
+	type: String,
+	reflect: !0
+})], v.prototype, "mode", void 0), a([n({ type: String })], v.prototype, "size", void 0), a([n({ type: String })], v.prototype, "name", void 0), a([n({ type: String })], v.prototype, "placeholder", void 0), a([n({
+	type: String,
+	attribute: "max-length"
+})], v.prototype, "maxLength", void 0), a([n({ type: String })], v.prototype, "type", void 0), a([r()], v.prototype, "_value", void 0), a([r()], v.prototype, "focused", void 0), a([i(".input-field")], v.prototype, "inputField", void 0), v = a([s("ds-search")], v);
+//#endregion

package/dist/esm/components/ds-search/styles/common.styles.js

@@ -1,8 +1,7 @@
-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 r = t`
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-search/styles/common.styles.ts
+var t = e`
     :host {
         display: block;
         width: 100%;
@@ -12,11 +11,11 @@ const r = t`
     .helper-text {
         user-select: none;
     }
-`, s = t`
+`, n = e`
     .container {
         position: relative;
     }
-`, l = t`
+`, r = e`
     .input-field::-webkit-search-decoration,
     .input-field::-webkit-search-cancel-button,
     .input-field::-webkit-search-results-button,
@@ -37,14 +36,14 @@ const r = t`
     .input-field:focus {
         outline: none;
     }
-`, c = t`
+`, i = e`
     .helper-text {
         cursor: pointer;
         display: flex;
         justify-content: flex-start;
         align-items: center;
     }
-`, p = t`
+`, a = e`
     .input-container {
         align-items: center;
         justify-content: center;
@@ -52,10 +51,5 @@ const r = t`
         position: relative;
     }
 `;
-export {
-  r as commonStyles,
-  s as containerStyles,
-  c as helperTextStyles,
-  p as inputContainerStyles,
-  l as inputFieldStyles
-};
+//#endregion
+export { t as commonStyles, n as containerStyles, i as helperTextStyles, a as inputContainerStyles, r as inputFieldStyles };