@cupra/ui-kit 2.0.0-canary.19 → 2.0.0-canary.190

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

@@ -1,14 +1,12 @@
-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`
+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-chips/styles/common.styles.ts
+var t = e`
     .container {
         display: inline-flex;
         position: relative;
         max-width: 100%;
         position: relative;
-        --ds-chips-fade-width: 54px;
     }
 
     .chips-container {
@@ -20,40 +18,6 @@ const a = t`
         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,
@@ -76,8 +40,10 @@ const a = t`
     }
 
     .scroll-button {
+        display: block;
         position: absolute;
-        top: 0;
+        top: 50%;
+        transform: translateY(-50%);
         z-index: 2;
     }
 
@@ -89,6 +55,5 @@ const a = t`
         right: 0;
     }
 `;
-export {
-  a as commonStyles
-};
+//#endregion
+export { t as commonStyles };

package/dist-react/esm/components/ds-currency/ds-currency.js

@@ -1,139 +1,107 @@
-import { UiKitElement as y } from "../base/UiKitElement.js";
-import { customUiKitElement as g } from "../../decorators/customUiKitElement.js";
-import { formatNumber as l } from "../../utils/formatNumber/formatNumber.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 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 i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as m } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as d } from "./styles/common.styles.js";
-var S = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (n, r, s, p) => {
-  for (var o = p > 1 ? void 0 : p ? b(r, s) : r, u = n.length - 1, h; u >= 0; u--)
-    (h = n[u]) && (o = (p ? h(r, s, o) : h(o)) || o);
-  return p && o && S(r, s, o), o;
-};
-let t = class extends y {
-  constructor() {
-    super(...arguments), this.minimumFractionDigits = 0, this.maximumFractionDigits = 20, this.amountSize = "medium", this.amountWeight = "medium", this.currencySize = "medium", this.currencyWeight = "medium", this.periodSize = "medium", this.periodWeight = "medium", this.noteSize = "medium", this.noteWeight = "medium";
-  }
-  get valueTemplate() {
-    const { formattedValue: n, unitSymbol: r, unitSymbolPosition: s } = l({
-      value: this.amountNumber ?? 0,
-      locale: this.locale,
-      style: "currency",
-      currency: this.currencyCode,
-      localeMatcher: "lookup",
-      minimumFractionDigits: this.minimumFractionDigits,
-      maximumFractionDigits: this.maximumFractionDigits
-    }), p = this.amountText || n, o = {
-      amount: !0,
-      text: !0,
-      [`size-${this.amountSize}`]: !0,
-      [`weight-${this.amountWeight}`]: !0
-    }, u = {
-      currency: !0,
-      left: s === "left",
-      right: s === "right",
-      text: !0,
-      [`size-${this.currencySize}`]: !0,
-      [`weight-${this.currencyWeight}`]: !0
-    };
-    return a`
-            ${s === "left" ? a`<span class=${m(u)}>${r}</span>` : c}
-            <span class=${m(o)}>${p}</span>
-            ${s === "right" ? a`<span class=${m(u)}>${r}</span>` : c}
-        `;
-  }
-  get periodTemplate() {
-    if (!this.period) return c;
-    const n = new Intl.DisplayNames(this.locale, { type: "dateTimeField" }), r = {
-      period: !0,
-      text: !0,
-      [`size-${this.periodSize}`]: !0,
-      [`weight-${this.periodWeight}`]: !0
-    };
-    return a`
-            <span class=${m(r)}"period">/${n.of(this.period)}</span>
-        `;
-  }
-  get noteTemplate() {
-    if (!this.note) return c;
-    const n = {
-      note: !0,
-      text: !0,
-      [`size-${this.noteSize}`]: !0,
-      [`weight-${this.noteWeight}`]: !0
-    };
-    return a` <span class=${m(n)}>${this.note}</span> `;
-  }
-  render() {
-    return a`
-            <div class="container">
-                ${this.valueTemplate}
-                ${this.noteTemplate}
-                ${this.periodTemplate}
-            </div>
-        `;
-  }
-};
-t.styles = [d];
-e([
-  i({ type: String })
-], t.prototype, "locale", 2);
-e([
-  i({ type: String, attribute: "currency-code" })
-], t.prototype, "currencyCode", 2);
-e([
-  i({ type: String, attribute: "amount-text" })
-], t.prototype, "amountText", 2);
-e([
-  i({ type: Number, attribute: "amount-number" })
-], t.prototype, "amountNumber", 2);
-e([
-  i({ type: Number, attribute: "minimum-fraction-digits" })
-], t.prototype, "minimumFractionDigits", 2);
-e([
-  i({ type: Number, attribute: "maximum-fraction-digits" })
-], t.prototype, "maximumFractionDigits", 2);
-e([
-  i({ type: String })
-], t.prototype, "period", 2);
-e([
-  i({ type: String })
-], t.prototype, "note", 2);
-e([
-  i({ type: String, attribute: "thousand-separator" })
-], t.prototype, "thousandSeparator", 2);
-e([
-  i({ type: String, attribute: "fraction-separator" })
-], t.prototype, "fractionSeparator", 2);
-e([
-  i({ type: String, attribute: "amount-size" })
-], t.prototype, "amountSize", 2);
-e([
-  i({ type: String, attribute: "amount-weight" })
-], t.prototype, "amountWeight", 2);
-e([
-  i({ type: String, attribute: "currency-size" })
-], t.prototype, "currencySize", 2);
-e([
-  i({ type: String, attribute: "currency-weight" })
-], t.prototype, "currencyWeight", 2);
-e([
-  i({ type: String, attribute: "period-size" })
-], t.prototype, "periodSize", 2);
-e([
-  i({ type: String, attribute: "period-weight" })
-], t.prototype, "periodWeight", 2);
-e([
-  i({ type: String, attribute: "note-size" })
-], t.prototype, "noteSize", 2);
-e([
-  i({ type: String, attribute: "note-weight" })
-], t.prototype, "noteWeight", 2);
-t = e([
-  g("ds-currency")
-], t);
-export {
-  t as DsCurrency
-};
+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 "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as i } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import { e as o } 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 { formatNumber as s } from "../../utils/formatNumber/formatNumber.js";
+import { commonStyles as c } from "./styles/common.styles.js";
+//#region src/components/ds-currency/ds-currency.ts
+var l, u = (l = class extends i {
+	constructor(...e) {
+		super(...e), this.currencyDisplay = "symbol", this.minimumFractionDigits = 0, this.maximumFractionDigits = 20, this.amountSize = "medium", this.amountWeight = "medium", this.periodSize = "medium", this.periodWeight = "medium", this.noteSize = "medium", this.noteWeight = "medium", this.variant = "default";
+	}
+	get valueTemplate() {
+		let { formattedValue: e } = s({
+			value: this.amountNumber ?? 0,
+			locale: this.locale,
+			style: "currency",
+			currency: this.currencyCode,
+			localeMatcher: "lookup",
+			useGrouping: "always",
+			minimumFractionDigits: this.minimumFractionDigits,
+			maximumFractionDigits: this.maximumFractionDigits,
+			currencyDisplay: this.currencyDisplay
+		}), n = this.valueText || e;
+		return t`<span class=${o({
+			amount: !0,
+			text: !0,
+			[`size-${this.amountSize}`]: !0,
+			[`weight-${this.amountWeight}`]: !0
+		})}>${n}</span>`;
+	}
+	get periodTemplate() {
+		if (!this.period) return e;
+		let n = new Intl.DisplayNames(this.locale, { type: "dateTimeField" });
+		return t`<span class=${o({
+			period: !0,
+			text: !0,
+			[`size-${this.periodSize}`]: !0,
+			[`weight-${this.periodWeight}`]: !0
+		})}"period">/${n.of(this.period)}</span>`;
+	}
+	get noteTemplate() {
+		return this.note ? t`<span class=${o({
+			note: !0,
+			text: !0,
+			[`size-${this.noteSize}`]: !0,
+			[`weight-${this.noteWeight}`]: !0
+		})}>${this.note}</span>` : e;
+	}
+	render() {
+		let n = {
+			container: !0,
+			strikethrough: this.variant === "strikethrough"
+		}, r = this.variant === "strikethrough" ? t`<div class="strikethrough-line"></div>` : e;
+		return t`<div class=${o(n)}>
+            ${this.valueTemplate}${this.periodTemplate}${this.noteTemplate}${r}
+        </div>`;
+	}
+}, l.styles = [c], l);
+r([n({ type: String })], u.prototype, "locale", void 0), r([n({
+	type: String,
+	attribute: "currency-code"
+})], u.prototype, "currencyCode", void 0), r([n({
+	type: String,
+	attribute: "currency-display"
+})], u.prototype, "currencyDisplay", void 0), r([n({
+	type: String,
+	attribute: "value-text"
+})], u.prototype, "valueText", void 0), r([n({
+	type: Number,
+	attribute: "amount-number"
+})], u.prototype, "amountNumber", void 0), r([n({
+	type: Number,
+	attribute: "minimum-fraction-digits"
+})], u.prototype, "minimumFractionDigits", void 0), r([n({
+	type: Number,
+	attribute: "maximum-fraction-digits"
+})], u.prototype, "maximumFractionDigits", void 0), r([n({ type: String })], u.prototype, "period", void 0), r([n({ type: String })], u.prototype, "note", void 0), r([n({
+	type: String,
+	attribute: "thousand-separator"
+})], u.prototype, "thousandSeparator", void 0), r([n({
+	type: String,
+	attribute: "fraction-separator"
+})], u.prototype, "fractionSeparator", void 0), r([n({
+	type: String,
+	attribute: "amount-size"
+})], u.prototype, "amountSize", void 0), r([n({
+	type: String,
+	attribute: "amount-weight"
+})], u.prototype, "amountWeight", void 0), r([n({
+	type: String,
+	attribute: "period-size"
+})], u.prototype, "periodSize", void 0), r([n({
+	type: String,
+	attribute: "period-weight"
+})], u.prototype, "periodWeight", void 0), r([n({
+	type: String,
+	attribute: "note-size"
+})], u.prototype, "noteSize", void 0), r([n({
+	type: String,
+	attribute: "note-weight"
+})], u.prototype, "noteWeight", void 0), r([n({ type: String })], u.prototype, "variant", void 0), u = r([a("ds-currency")], u);
+//#endregion

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

@@ -1,17 +1,24 @@
-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 s = i`
+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-currency/styles/common.styles.ts
+var t = e`
     :host {
-        display: inline;
+        display: contents;
     }
 
     .container {
         display: inline-flex;
-        align-items: flex-end;
+        align-items: baseline;
+        position: relative;
+    }
+
+    .strikethrough-line {
+        position: absolute;
+        height: 1px;
+        left: 0;
+        right: 0;
+        top: 50%;
     }
 `;
-export {
-  s as commonStyles
-};
+//#endregion
+export { t as commonStyles };

package/dist-react/esm/components/ds-date-picker/ds-date-picker.js

@@ -0,0 +1,121 @@
+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 "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as a } from "../base/UiKitElement.js";
+import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
+import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
+import { e as c } 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 { o as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
+import "../ds-icon-button/ds-icon-button.js";
+import { inputStatesMixin as u } from "../../mixins/inputStatesMixin.js";
+import { commonStyles as d } from "./styles/common.styles.js";
+//#region src/components/ds-date-picker/ds-date-picker.ts
+var f, p, m = (f = class extends u(a) {
+	constructor(...e) {
+		super(...e), this.size = "large", this.helperText = "", this.forcedError = "", this.invalidError = "", this.readonlyText = "", this.dataAriaLabelCalendarButton = "", this.isExpanded = !1, this.handleCalendarButtonClick = () => {
+			this.inputStates.disabled || this.inputStates.readonly || (this.isExpanded = !this.isExpanded);
+		}, this.handleCalendarChange = (e) => {
+			e.stopPropagation();
+			let t = e.detail.value;
+			this.nativeInput && (this.nativeInput.value = t, this.nativeInput.dispatchEvent(new Event("input", { bubbles: !0 }))), this.isExpanded = !1;
+		}, this.handleDocumentClick = (e) => {
+			this.isExpanded && !this.contains(e.target) && (this.isExpanded = !1);
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.classList.add("ds-date-picker"), document.addEventListener("click", this.handleDocumentClick), this.addEventListener("ds-calendar-change", this.handleCalendarChange), p.injectNativeInputStyles();
+	}
+	static injectNativeInputStyles() {
+		if (p.nativeStylesInjected) return;
+		p.nativeStylesInjected = !0;
+		let e = document.createElement("style");
+		e.textContent = [".ds-date-picker input[type=\"date\"]::-webkit-calendar-picker-indicator { display: none !important; }", ".ds-date-picker input[type=\"date\"]::-webkit-inner-spin-button { display: none !important; }"].join("\n"), document.head.appendChild(e);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.removeEventListener("click", this.handleDocumentClick), this.removeEventListener("ds-calendar-change", this.handleCalendarChange);
+	}
+	get classes() {
+		return {
+			container: !0,
+			error: !!this.forcedError,
+			[this.size]: !!this.size,
+			disabled: this.inputStates.disabled,
+			readonly: this.inputStates.readonly,
+			filled: this.inputStates.filled,
+			invalid: this.inputStates.invalid,
+			focus: this.inputStates.focus,
+			"focus-visible": this.inputStates.focusVisible,
+			expanded: this.isExpanded
+		};
+	}
+	render() {
+		return t`
+            <div class=${c(this.classes)}>
+                <div class="input-container">
+                    <div><slot></slot></div>
+                    ${this.calendarButtonTemplate}
+                </div>
+                ${this.calendarDropdownTemplate}
+                <div class="footer">
+                    ${this.readonlyTextTemplate}
+                    ${this.helperTextTemplate}
+                    ${this.forcedErrorTemplate}
+                    ${this.invalidErrorTemplate}
+                </div>
+            </div>
+        `;
+	}
+	get calendarDropdownTemplate() {
+		return t`
+            <div class="calendar-dropdown" ?hidden=${!this.isExpanded}>
+                <slot name="calendar"></slot>
+            </div>
+        `;
+	}
+	get calendarButtonTemplate() {
+		var e;
+		return s`<ds-icon-button
+            class="calendar-button"
+            icon-name="calendar"
+            size=${l(this.size)}
+            ?disabled=${!!((e = this.nativeInput) != null && e.disabled)}
+            variant="naked"
+            @click=${this.handleCalendarButtonClick}
+            data-aria-label=${this.dataAriaLabelCalendarButton || "open calendar"}
+        ></ds-icon-button>`;
+	}
+	get helperTextTemplate() {
+		return this.inputStates.readonly || this.forcedError || this.inputStates.invalid && this.invalidError ? e : t`<span class="support-text helper-text">${this.helperText}</span>`;
+	}
+	get forcedErrorTemplate() {
+		return this.inputStates.readonly || !this.forcedError ? e : t`<span class="support-text error-text forced-error">${this.forcedError}</span>`;
+	}
+	get readonlyTextTemplate() {
+		return !this.inputStates.readonly || !this.readonlyText ? e : t`<span class="support-text readonly-text">${this.readonlyText}</span>`;
+	}
+	get invalidErrorTemplate() {
+		return this.inputStates.readonly || this.forcedError || !this.inputStates.invalid || !this.invalidError ? e : t`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
+	}
+}, p = f, f.styles = [d], f.nativeStylesInjected = !1, f);
+i([n({ type: String })], m.prototype, "size", void 0), i([n({
+	type: String,
+	attribute: "helper-text"
+})], m.prototype, "helperText", void 0), i([n({
+	type: String,
+	attribute: "forced-error"
+})], m.prototype, "forcedError", void 0), i([n({
+	type: String,
+	attribute: "invalid-error"
+})], m.prototype, "invalidError", void 0), i([n({
+	type: String,
+	attribute: "readonly-text"
+})], m.prototype, "readonlyText", void 0), i([n({
+	type: String,
+	attribute: "data-aria-label-calendar-button"
+})], m.prototype, "dataAriaLabelCalendarButton", void 0), i([r()], m.prototype, "isExpanded", void 0), m = p = i([o("ds-date-picker")], m);
+//#endregion

package/dist-react/esm/components/ds-date-picker/styles/common.styles.js

@@ -0,0 +1,10 @@
+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-date-picker/styles/common.styles.ts
+var t = e`
+    :host {
+        display: contents;
+    }
+`;
+//#endregion
+export { t as commonStyles };