@cupra/ui-kit 2.0.0-canary.17 → 2.0.0-canary.170

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

@@ -0,0 +1,275 @@
+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 { r as n } 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 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 { 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 { o as c } 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-calendar-day/ds-calendar-day.js";
+import "../ds-icon-button/ds-icon-button.js";
+import { arrayConverter as l } from "../../utils/arrayConverter.js";
+import { commonStyles as u } from "./styles/common.styles.js";
+//#region src/components/ds-calendar/ds-calendar.ts
+var d, f = (d = class extends i {
+	constructor(...e) {
+		super(...e), this.variant = "plane", this.size = "large", this.locale = "en-US", this.firstDayOfWeek = 1, this.disabledDates = [], this.disabledWeekdays = [], this._viewDate = /* @__PURE__ */ new Date(), this._value = null, this._initialValueApplied = !1, this._viewDateInitialized = !1;
+	}
+	get selectedDate() {
+		if (this.value) {
+			let e = this.parseDate(this.value);
+			if (e) return e;
+		}
+		return this._value;
+	}
+	get viewDate() {
+		return this._viewDate;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.applyInitialValue();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), (!this._viewDateInitialized || e.has("value") || e.has("viewDateAttr")) && (this._viewDateInitialized = !0, this.initializeViewDate());
+	}
+	applyInitialValue() {
+		if (!this._initialValueApplied && (this._initialValueApplied = !0, this.initialValue)) {
+			let e = this.parseDate(this.initialValue);
+			e && (this._value = e);
+		}
+	}
+	initializeViewDate() {
+		if (this.viewDateAttr) {
+			let e = this.parseDate(this.viewDateAttr);
+			e && (this._viewDate = e);
+		} else if (this.value) {
+			let e = this.parseDate(this.value);
+			e && (this._viewDate = new Date(e));
+		} else this._value ? this._viewDate = new Date(this._value) : this._viewDate = /* @__PURE__ */ new Date();
+	}
+	parseDate(e) {
+		let t = e.split("-");
+		if (t.length >= 2) {
+			let e = Number.parseInt(t[0], 10), n = Number.parseInt(t[1], 10) - 1, r = t.length >= 3 ? Number.parseInt(t[2], 10) : 1, i = new Date(e, n, r);
+			if (!Number.isNaN(i.getTime())) return i;
+		}
+		return null;
+	}
+	get calendarClasses() {
+		return {
+			calendar: !0,
+			[this.variant]: !0,
+			[this.size]: !0
+		};
+	}
+	get weekdayNames() {
+		let e = new Intl.DateTimeFormat(this.locale, { weekday: "short" }), t = [], n = new Date(2024, 0, 1);
+		for (; n.getDay() !== this.firstDayOfWeek;) n.setDate(n.getDate() + 1);
+		for (let r = 0; r < 7; r++) {
+			let i = new Date(n);
+			i.setDate(n.getDate() + r);
+			let a = e.format(i);
+			t.push(a.slice(0, 2));
+		}
+		return t;
+	}
+	get monthYearLabel() {
+		return new Intl.DateTimeFormat(this.locale, {
+			month: "long",
+			year: "numeric"
+		}).format(this._viewDate);
+	}
+	getDaysInMonth(e, t) {
+		return new Date(e, t + 1, 0).getDate();
+	}
+	getFirstDayOfMonth(e, t) {
+		return new Date(e, t, 1).getDay();
+	}
+	get calendarDays() {
+		let e = this._viewDate.getFullYear(), t = this._viewDate.getMonth(), n = /* @__PURE__ */ new Date();
+		n.setHours(0, 0, 0, 0);
+		let r = this.getDaysInMonth(e, t), i = this.getFirstDayOfMonth(e, t) - this.firstDayOfWeek;
+		i < 0 && (i += 7);
+		let a = [], o = t === 0 ? 11 : t - 1, s = t === 0 ? e - 1 : e, c = this.getDaysInMonth(s, o);
+		for (let e = i - 1; e >= 0; e--) {
+			let t = c - e, r = new Date(s, o, t);
+			a.push(this.createCalendarDay(r, !1, n));
+		}
+		for (let i = 1; i <= r; i++) {
+			let r = new Date(e, t, i);
+			a.push(this.createCalendarDay(r, !0, n));
+		}
+		let l = 42 - a.length, u = t === 11 ? 0 : t + 1, d = t === 11 ? e + 1 : e;
+		for (let e = 1; e <= l; e++) {
+			let t = new Date(d, u, e);
+			a.push(this.createCalendarDay(t, !1, n));
+		}
+		return a;
+	}
+	createCalendarDay(e, t, n) {
+		e.setHours(0, 0, 0, 0);
+		let r = e.getDate(), i = e.getMonth(), a = e.getFullYear(), o = r === n.getDate() && i === n.getMonth() && a === n.getFullYear(), s = this.selectedDate;
+		return {
+			day: r,
+			month: i,
+			year: a,
+			date: e,
+			isCurrentMonth: t,
+			isToday: o,
+			isSelected: s ? r === s.getDate() && i === s.getMonth() && a === s.getFullYear() : !1,
+			isDisabled: !t || this.isDateDisabled(e)
+		};
+	}
+	isDateDisabled(e) {
+		if (this.minDate) {
+			let t = new Date(this.minDate);
+			if (t.setHours(0, 0, 0, 0), e < t) return !0;
+		}
+		if (this.maxDate) {
+			let t = new Date(this.maxDate);
+			if (t.setHours(0, 0, 0, 0), e > t) return !0;
+		}
+		if (this.disabledWeekdays && this.disabledWeekdays.length > 0) {
+			let t = e.getDay();
+			if (this.disabledWeekdays.some((e) => Number(e) === t)) return !0;
+		}
+		if (this.disabledDates && this.disabledDates.length > 0) {
+			let t = `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+			if (this.disabledDates.includes(t)) return !0;
+		}
+		return !1;
+	}
+	handlePrevMonth() {
+		let e = new Date(this._viewDate);
+		e.setMonth(e.getMonth() - 1), this._viewDate = e;
+	}
+	handleNextMonth() {
+		let e = new Date(this._viewDate);
+		e.setMonth(e.getMonth() + 1), this._viewDate = e;
+	}
+	handleDayChange(e) {
+		var t;
+		e.stopPropagation();
+		let n = e.target;
+		if (!n || !n.tagName.toLowerCase().startsWith("ds-calendar-day")) return;
+		let r = n.tagName.toLowerCase(), i = Array.from(((t = this.shadowRoot) == null ? void 0 : t.querySelectorAll(r)) || []).indexOf(n);
+		if (i === -1) return;
+		let a = this.calendarDays[i];
+		if (!a || a.isDisabled) return;
+		this._value = a.date, this._viewDate = new Date(a.date);
+		let o = `${a.date.getFullYear()}-${String(a.date.getMonth() + 1).padStart(2, "0")}-${String(a.date.getDate()).padStart(2, "0")}`;
+		this.dispatchEvent(new CustomEvent("ds-calendar-change", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				value: o,
+				date: a.date
+			}
+		}));
+	}
+	get navButtonSize() {
+		return this.size === "medium" ? "small" : "medium";
+	}
+	get prevButtonTemplate() {
+		return o`<ds-icon-button
+            class="nav-button"
+            icon-name="arrow-left"
+            data-aria-label="Previous month"
+            @click=${this.handlePrevMonth}
+            variant="naked"
+            size=${c(this.navButtonSize)}
+        ></ds-icon-button>`;
+	}
+	get nextButtonTemplate() {
+		return o`<ds-icon-button
+            class="nav-button"
+            icon-name="arrow-right"
+            data-aria-label="Next month"
+            @click=${this.handleNextMonth}
+            variant="naked"
+            size=${c(this.navButtonSize)}
+        ></ds-icon-button>`;
+	}
+	get weekdaysTemplate() {
+		return e`
+            <div class="weekdays">
+                ${this.weekdayNames.map((t) => e`<div class="weekday">${t}</div>`)}
+            </div>
+        `;
+	}
+	get daysTemplate() {
+		let t = this.calendarDays, n = [];
+		for (let e = 0; e < t.length; e += 7) n.push(t.slice(e, e + 7));
+		return e`
+            <div class="days-grid" role="grid" @ds-calendar-day-change=${this.handleDayChange}>
+                ${n.map((t) => e`
+                        <div class="days-row" role="row">
+                            ${t.map((e) => o`<ds-calendar-day
+                                    day=${e.day}
+                                    size=${c(this.size)}
+                                    ?disabled=${e.isDisabled}
+                                    ?selected=${e.isSelected}
+                                    ?today=${e.isToday}
+                                    ?outside-month=${!e.isCurrentMonth}
+                                ></ds-calendar-day>`)}
+                        </div>
+                    `)}
+            </div>
+        `;
+	}
+	render() {
+		return e`
+            <div class=${s(this.calendarClasses)} role="application" aria-label="Calendar">
+                <div class="header">
+                    ${this.prevButtonTemplate}
+                    <div class="month-year" aria-live="polite">${this.monthYearLabel}</div>
+                    ${this.nextButtonTemplate}
+                </div>
+                ${this.weekdaysTemplate} ${this.daysTemplate}
+            </div>
+        `;
+	}
+}, d.styles = [u], d);
+r([t({
+	type: String,
+	reflect: !0
+})], f.prototype, "value", void 0), r([t({
+	type: String,
+	reflect: !0
+})], f.prototype, "variant", void 0), r([t({
+	type: String,
+	reflect: !0
+})], f.prototype, "size", void 0), r([t({
+	type: String,
+	reflect: !0
+})], f.prototype, "locale", void 0), r([t({
+	type: Number,
+	reflect: !0,
+	attribute: "first-day-of-week"
+})], f.prototype, "firstDayOfWeek", void 0), r([t({
+	type: String,
+	reflect: !0,
+	attribute: "min-date"
+})], f.prototype, "minDate", void 0), r([t({
+	type: String,
+	reflect: !0,
+	attribute: "max-date"
+})], f.prototype, "maxDate", void 0), r([t({
+	attribute: "disabled-dates",
+	converter: l
+})], f.prototype, "disabledDates", void 0), r([t({
+	attribute: "disabled-weekdays",
+	converter: l
+})], f.prototype, "disabledWeekdays", void 0), r([t({
+	type: String,
+	reflect: !0,
+	attribute: "view-date"
+})], f.prototype, "viewDateAttr", void 0), r([t({
+	type: String,
+	attribute: "initial-value"
+})], f.prototype, "initialValue", void 0), r([n()], f.prototype, "_viewDate", void 0), r([n()], f.prototype, "_value", void 0), f = r([a("ds-calendar")], f);
+//#endregion

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

@@ -0,0 +1,47 @@
+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-calendar/styles/common.styles.ts
+var t = e`
+    :host {
+        display: inline-block;
+    }
+
+    .calendar {
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .month-year {
+        flex: 1;
+        text-align: center;
+    }
+
+    .weekdays {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+    }
+
+    .weekday {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .days-grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+    }
+
+    .days-row {
+        display: contents;
+    }
+`;
+//#endregion
+export { t as commonStyles };

package/dist/esm/components/ds-calendar-day/ds-calendar-day.js

@@ -0,0 +1,83 @@
+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 { booleanConverter as a } from "../../utils/booleanConverter.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 { commonStyles as s } from "./styles/common.styles.js";
+//#region src/components/ds-calendar-day/ds-calendar-day.ts
+var c, l = (c = class extends r {
+	constructor(...e) {
+		super(...e), this.size = "large", this.disabled = !1, this.selected = !1, this.today = !1, this.outsideMonth = !1;
+	}
+	get classes() {
+		return {
+			day: !0,
+			[this.size]: !0,
+			disabled: this.disabled,
+			selected: this.selected,
+			today: this.today,
+			"outside-month": this.outsideMonth
+		};
+	}
+	handleClick(e) {
+		if (this.disabled) {
+			e.preventDefault(), e.stopPropagation();
+			return;
+		}
+		this.dispatchEvent(new CustomEvent("ds-calendar-day-change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { day: this.day }
+		}));
+	}
+	handleKeyDown(e) {
+		this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick(e));
+	}
+	render() {
+		return e`
+            <button
+                class=${o(this.classes)}
+                ?disabled=${this.disabled}
+                aria-label=${this.day ? `Day ${this.day}` : ""}
+                role="gridcell"
+                aria-selected=${this.selected}
+                aria-current=${this.today ? "date" : "false"}
+                tabindex=${this.disabled ? -1 : 0}
+                @click=${this.handleClick}
+                @keydown=${this.handleKeyDown}
+            >
+                ${this.day}
+            </button>
+        `;
+	}
+}, c.styles = [s], c);
+n([t({
+	type: Number,
+	reflect: !0
+})], l.prototype, "day", void 0), n([t({
+	type: String,
+	reflect: !0
+})], l.prototype, "size", void 0), n([t({
+	type: Boolean,
+	converter: a,
+	reflect: !0
+})], l.prototype, "disabled", void 0), n([t({
+	type: Boolean,
+	converter: a,
+	reflect: !0
+})], l.prototype, "selected", void 0), n([t({
+	type: Boolean,
+	converter: a,
+	reflect: !0
+})], l.prototype, "today", void 0), n([t({
+	type: Boolean,
+	converter: a,
+	reflect: !0,
+	attribute: "outside-month"
+})], l.prototype, "outsideMonth", void 0), l = n([i("ds-calendar-day")], l);
+//#endregion

package/dist/esm/components/ds-calendar-day/styles/common.styles.js

@@ -0,0 +1,28 @@
+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-calendar-day/styles/common.styles.ts
+var t = e`
+    :host {
+        display: inline-flex;
+    }
+
+    .day {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        cursor: pointer;
+        user-select: none;
+        border: none;
+        background: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .day.disabled {
+        cursor: default;
+        pointer-events: none;
+    }
+`;
+//#endregion
+export { t as commonStyles };

package/dist/esm/components/ds-carousel-indicator/ds-carousel-indicator.js

@@ -1,63 +1,52 @@
-import { UiKitElement as u } from "../base/UiKitElement.js";
-import { customUiKitElement as h } 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 m, nothing as f } 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 d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { classMap as a } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as x } from "./styles/common.styles.js";
-var v = Object.defineProperty, N = Object.getOwnPropertyDescriptor, n = (i, t, e, s) => {
-  for (var r = s > 1 ? void 0 : s ? N(t, e) : t, l = i.length - 1, c; l >= 0; l--)
-    (c = i[l]) && (r = (s ? c(t, e, r) : c(r)) || r);
-  return s && r && v(t, e, r), r;
-};
-let o = class extends u {
-  constructor() {
-    super(...arguments), this.maxSelectorsShown = 6;
-  }
-  get classes() {
-    return {
-      container: !0,
-      infinite: this.selectorsNumber > this.maxSelectorsShown
-    };
-  }
-  get selectorsTemplate() {
-    const i = [], t = this.selectorsNumber > this.maxSelectorsShown;
-    for (let e = 0; e < this.selectorsNumber; e++) {
-      let s = !1;
-      const r = this.selectedIndex >= 3 && this.selectedIndex < this.selectorsNumber - 3, l = this.selectedIndex < 3, c = this.selectedIndex >= this.selectorsNumber - 3;
-      t && (r && (e < this.selectedIndex - 3 || e > this.selectedIndex + 3) || l && e >= 5 || c && e < this.selectorsNumber - 5) && (s = t);
-      const p = {
-        selector: !0,
-        selected: e === this.selectedIndex,
-        hidden: s
-      };
-      i.push(m` <div class=${a(p)}></div> `);
-    }
-    return i;
-  }
-  render() {
-    return this.selectorsNumber > 0 ? m`
-                  <div data-testid="ds-carousel-indicator-container" class=${a(this.classes)}>
+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 { 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-carousel-indicator/ds-carousel-indicator.ts
+var l, u = (l = class extends a {
+	constructor(...e) {
+		super(...e), this.maxSelectorsShown = 6;
+	}
+	get classes() {
+		return {
+			container: !0,
+			infinite: this.selectorsNumber > this.maxSelectorsShown
+		};
+	}
+	get selectorsTemplate() {
+		let e = [], n = this.selectorsNumber > this.maxSelectorsShown;
+		for (let r = 0; r < this.selectorsNumber; r++) {
+			let i = !1, a = this.selectedIndex >= 3 && this.selectedIndex < this.selectorsNumber - 3, o = this.selectedIndex < 3, c = this.selectedIndex >= this.selectorsNumber - 3;
+			n && (a && (r < this.selectedIndex - 3 || r > this.selectedIndex + 3) || o && r >= 5 || c && r < this.selectorsNumber - 5) && (i = n);
+			let l = {
+				selector: !0,
+				selected: r === this.selectedIndex,
+				hidden: i
+			};
+			e.push(t` <div class=${s(l)}></div> `);
+		}
+		return e;
+	}
+	render() {
+		return this.selectorsNumber > 0 ? t`
+                  <div data-testid="ds-carousel-indicator-container" class=${s(this.classes)}>
                       ${this.selectorsTemplate}
                   </div>
-              ` : f;
-  }
-};
-o.styles = [x];
-n([
-  d({ type: Number, attribute: "selectors-number" })
-], o.prototype, "selectorsNumber", 2);
-n([
-  d({ type: Number, attribute: "selected-index" })
-], o.prototype, "selectedIndex", 2);
-n([
-  b()
-], o.prototype, "maxSelectorsShown", 2);
-o = n([
-  h("ds-carousel-indicator")
-], o);
-export {
-  o as DsCarouselIndicator
-};
+              ` : e;
+	}
+}, l.styles = [c], l);
+i([n({
+	type: Number,
+	attribute: "selectors-number"
+})], u.prototype, "selectorsNumber", void 0), i([n({
+	type: Number,
+	attribute: "selected-index"
+})], u.prototype, "selectedIndex", void 0), i([r()], u.prototype, "maxSelectorsShown", void 0), u = i([o("ds-carousel-indicator")], u);
+//#endregion

package/dist/esm/components/ds-carousel-indicator/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 n = 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-carousel-indicator/styles/common.styles.ts
+var t = e`
     :host {
         display: flex;
         width: 100%;
@@ -14,6 +13,5 @@ const n = t`
         display: flex;
     }
 `;
-export {
-  n as commonStyles
-};
+//#endregion
+export { t as commonStyles };