@cupra/ui-kit 2.0.0-canary.16 → 2.0.0-canary.160

package/dist/esm/components/ds-chip/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 e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const r = e`
+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-chip/styles/common.styles.ts
+var t = e`
     :host {
         display: inline-block;
     }
@@ -20,6 +19,5 @@ const r = e`
         pointer-events: visible;
     }
 `;
-export {
-  r as commonStyles
-};
+//#endregion
+export { t as commonStyles };

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

@@ -1,100 +1,98 @@
-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: "naked",
-      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`
+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 { o as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as o } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { UiKitElement as s } from "../base/UiKitElement.js";
+import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as l } from "../../utils/booleanConverter.js";
+import { uiKitHtml as u } from "../../utils/uiKitHtml.js";
+import { e as d } 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 f } 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 { arrayConverter as p } from "../../utils/arrayConverter.js";
+import { commonStyles as m } from "./styles/common.styles.js";
+//#region src/components/ds-chips/ds-chips.ts
+var h = class extends s {
+	constructor(...e) {
+		super(...e), this.multiChoice = null, this.size = "medium", this.mode = "light", this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
+			this.handleScrollNav();
+		}), this.handleScrollNav = () => {
+			let e = this.chipsContainer?.scrollLeft + this.chipsContainer?.clientWidth;
+			this.hasScrollLeft = this.chipsContainer?.scrollLeft > 0, this.hasScrollRight = e < this.chipsContainer?.scrollWidth;
+		}, this.handleScrollLeft = () => {
+			this.chipsContainer.scrollBy({
+				left: -150,
+				behavior: "smooth"
+			});
+		}, this.handleScrollRight = () => {
+			this.chipsContainer.scrollBy({
+				left: 150,
+				behavior: "smooth"
+			});
+		};
+	}
+	static {
+		this.styles = [m];
+	}
+	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(t, n) {
+		if (t === "left" && !this.hasScrollLeft || t === "right" && !this.hasScrollRight) return e;
+		let r = `arrow-${t}`;
+		return u`<ds-icon-button
+            class=${`scroll-button ${t}`}
+            data-testid=${`scroll-button-${t}`}
+            data-aria-label=${`scroll-button-${t}`}
+            @click=${n}
+            size=${this.size || "large"}
+            icon-name=${r}
+            variant="rounded"
+            mode=${f(this.mode)}
+        ></ds-icon-button>`;
+	}
+	updated(e) {
+		super.updated(e), (e.has("selectedChips") || e.has("multiChoice") || e.has("size") || e.has("mode")) && this.updateChildChips();
+	}
+	updateChildChips() {
+		this.chips?.forEach((e) => {
+			e.size = this.size, e.selected = this.selectedChips?.includes?.(e.value), e.deselectable = !!this.multiChoice, e.mode = this.mode;
+		});
+	}
+	get chipsContainerClasses() {
+		return {
+			"chips-container": !0,
+			"scroll-left": this.hasScrollLeft,
+			"scroll-right": this.hasScrollRight
+		};
+	}
+	handleSelect(e) {
+		let t;
+		t = this.multiChoice && !this.selectedChips?.includes?.(e.detail.value) ? [...this.selectedChips || [], e.detail.value] : [e.detail.value], this.selectedChips = t, this.updateChildChips(), this.dispatchEvent(new CustomEvent("ds-chips:change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { selectedChips: t }
+		}));
+	}
+	handleDeselect(e) {
+		let t = [...(this.selectedChips || []).filter((t) => t !== e.detail.value)];
+		this.selectedChips = t, this.updateChildChips(), this.dispatchEvent(new CustomEvent("ds-chips:change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { selectedChips: t }
+		}));
+	}
+	render() {
+		return t`
             <div
                 class="container"
                 data-testid="ds-chips-container"
@@ -102,42 +100,25 @@ let l = class extends p {
                 @deselect=${this.handleDeselect}
             >
                 ${this.getScrollButtonTemplate("left", this.handleScrollLeft)}
-                <nav tabindex="0" class=${b(this.chipsContainerClasses)}>
+                <nav tabindex="0" class=${d(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
+	}
 };
+o([n({
+	type: Array,
+	attribute: "selected-chips",
+	converter: p,
+	reflect: !0
+})], h.prototype, "selectedChips", void 0), o([n({
+	type: Boolean,
+	attribute: "multi-choice",
+	converter: l
+})], h.prototype, "multiChoice", void 0), o([n({ type: String })], h.prototype, "size", void 0), o([n({
+	type: String,
+	reflect: !0
+})], h.prototype, "mode", void 0), o([r()], h.prototype, "hasScrollLeft", void 0), o([r()], h.prototype, "hasScrollRight", void 0), o([a({ slot: "" })], h.prototype, "chips", void 0), o([i(".chips-container")], h.prototype, "chipsContainer", void 0), h = o([c("ds-chips")], h);
+//#endregion

package/dist/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/esm/components/ds-currency/ds-currency.js

@@ -1,139 +1,110 @@
-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.122.0/helpers/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 = 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";
+	}
+	static {
+		this.styles = [c];
+	}
+	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>`;
+	}
 };
+r([n({ type: String })], l.prototype, "locale", void 0), r([n({
+	type: String,
+	attribute: "currency-code"
+})], l.prototype, "currencyCode", void 0), r([n({
+	type: String,
+	attribute: "currency-display"
+})], l.prototype, "currencyDisplay", void 0), r([n({
+	type: String,
+	attribute: "value-text"
+})], l.prototype, "valueText", void 0), r([n({
+	type: Number,
+	attribute: "amount-number"
+})], l.prototype, "amountNumber", void 0), r([n({
+	type: Number,
+	attribute: "minimum-fraction-digits"
+})], l.prototype, "minimumFractionDigits", void 0), r([n({
+	type: Number,
+	attribute: "maximum-fraction-digits"
+})], l.prototype, "maximumFractionDigits", void 0), r([n({ type: String })], l.prototype, "period", void 0), r([n({ type: String })], l.prototype, "note", void 0), r([n({
+	type: String,
+	attribute: "thousand-separator"
+})], l.prototype, "thousandSeparator", void 0), r([n({
+	type: String,
+	attribute: "fraction-separator"
+})], l.prototype, "fractionSeparator", void 0), r([n({
+	type: String,
+	attribute: "amount-size"
+})], l.prototype, "amountSize", void 0), r([n({
+	type: String,
+	attribute: "amount-weight"
+})], l.prototype, "amountWeight", void 0), r([n({
+	type: String,
+	attribute: "period-size"
+})], l.prototype, "periodSize", void 0), r([n({
+	type: String,
+	attribute: "period-weight"
+})], l.prototype, "periodWeight", void 0), r([n({
+	type: String,
+	attribute: "note-size"
+})], l.prototype, "noteSize", void 0), r([n({
+	type: String,
+	attribute: "note-weight"
+})], l.prototype, "noteWeight", void 0), r([n({ type: String })], l.prototype, "variant", void 0), l = r([a("ds-currency")], l);
+//#endregion