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

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

@@ -1,57 +1,56 @@
-import { UiKitElement as a } from "../base/UiKitElement.js";
-import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as m } 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 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 d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.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 u } from "./styles/common.styles.js";
-var v = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (n, t, r, s) => {
-  for (var e = s > 1 ? void 0 : s ? k(t, r) : t, o = n.length - 1, i; o >= 0; o--)
-    (i = n[o]) && (e = (s ? i(t, r, e) : i(e)) || e);
-  return s && e && v(t, r, e), e;
-};
-let c = class extends a {
-  get iconTemplate() {
-    return this.componentFactory.createIcon({
-      class: "icon",
-      size: 40,
-      "icon-name": this.checked ? "check" : "plus"
-    });
-  }
-  get classes() {
-    return {
-      container: !0,
-      checked: this.checked
-    };
-  }
-  handleClick() {
-    this.checked = !this.checked, this.dispatchEvent(
-      new CustomEvent("change", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          checked: this.checked
-        }
-      })
-    );
-  }
-  render() {
-    return h`
-            <span data-testid="ds-selection-container" class=${f(this.classes)} @click=${this.handleClick}>
+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 { 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 { 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 { commonStyles as l } from "./styles/common.styles.js";
+//#region src/components/ds-selection/ds-selection.ts
+var u, d = (u = class extends r {
+	get iconTemplate() {
+		return o`<ds-icon class="icon" size="40" icon-name=${this.checked ? "check" : "plus"}></ds-icon>`;
+	}
+	get classes() {
+		return {
+			container: !0,
+			checked: this.checked
+		};
+	}
+	handleClick() {
+		this.checked = !this.checked, this.dispatchEvent(new CustomEvent("change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { checked: this.checked }
+		}));
+	}
+	render() {
+		return e`
+            <span
+                data-testid="ds-selection-container"
+                class=${s(this.classes)}
+                role="checkbox"
+                aria-checked=${this.checked ?? !1}
+                aria-label=${c(this.dataAriaLabel)}
+                @click=${this.handleClick}
+            >
                 ${this.iconTemplate}
             </span>
         `;
-  }
-};
-c.styles = [u];
-l([
-  d({ type: Boolean, converter: m })
-], c.prototype, "checked", 2);
-c = l([
-  p("ds-selection")
-], c);
-export {
-  c as DsSelection
-};
+	}
+}, u.styles = [l], u);
+n([t({
+	type: Boolean,
+	converter: a
+})], d.prototype, "checked", void 0), n([t({
+	type: String,
+	attribute: "data-aria-label"
+})], d.prototype, "dataAriaLabel", void 0), d = n([i("ds-selection")], d);
+//#endregion

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

package/dist/esm/components/ds-sidebar-navigation/ds-sidebar-navigation.js

@@ -1,102 +1,121 @@
-import { UiKitElement as m } from "../base/UiKitElement.js";
-import { customUiKitElement as p } 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 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 { state as d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { queryAssignedElements as h } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as f } from "./styles/common.styles.js";
-var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (t, e, a, o) => {
-  for (var s = o > 1 ? void 0 : o ? v(e, a) : e, l = t.length - 1, n; l >= 0; l--)
-    (n = t[l]) && (s = (o ? n(e, a, s) : n(s)) || s);
-  return o && s && g(e, a, s), s;
-};
-let i = class extends m {
-  constructor() {
-    super(...arguments), this.open = !1, this.toggleModal = () => {
-      this.open = !this.open;
-    }, this.handleSlotChange = (t) => {
-      const o = t.target.assignedElements().find((s) => s.tagName === "DS-BUTTON");
-      this.setMainCtaSize(o);
-    }, this.setMainCtaSize = (t) => {
-      t && t.setAttribute(
-        "size",
-        JSON.stringify({
-          xxl: "large",
-          xl: "large",
-          l: "medium",
-          m: "medium",
-          s: "small",
-          xs: "small",
-          xxs: "small"
-        })
-      );
-    };
-  }
-  firstUpdated(t) {
-    var a;
-    super.firstUpdated(t);
-    const e = (a = this.mainCtas) == null ? void 0 : a[0];
-    e && this.setMainCtaSize(e);
-  }
-  modalButtonTemplate() {
-    return this.componentFactory.createIconButton({
-      class: "modal-button",
-      "icon-name": this.open ? "cross" : "triple-dot-v",
-      "@click": this.toggleModal,
-      "data-testid": "modal-button",
-      "data-aria-label": "more actions",
-      size: JSON.stringify({
-        xxl: "large",
-        xl: "large",
-        l: "medium",
-        m: "medium",
-        s: "small",
-        xs: "small",
-        xxs: "small"
-      })
-    });
-  }
-  classes() {
-    return {
-      container: !0,
-      open: this.open
-    };
-  }
-  render() {
-    return c`
-      <div class=${u(this.classes())}>
-        <nav class="nav" part="bar">
-          <div class="aside" part="aside">
-            <slot name="aside-text"></slot>
-            <span class="helper-text-container">
-                <slot name="aside-icon"></slot>
-                <slot name="aside-helper-text"></slot>
-            </span>
-          </div>
-          <div class="actions-container" part="actions-container">
-            <slot name="main-cta" @slotchange=${this.handleSlotChange}></slot>
-            ${this.modalButtonTemplate()}
-          </div>
-        </nav>
-          <div part="modal" class="modal">
-              <slot name="ctas"></slot>
-          </div>
-      </div>
-    `;
-  }
-};
-i.styles = [f];
-r([
-  d()
-], i.prototype, "open", 2);
-r([
-  h({ slot: "main-cta", selector: "ds-button", flatten: !0 })
-], i.prototype, "mainCtas", 2);
-i = r([
-  p("ds-sidebar-navigation")
-], i);
-export {
-  i as DsSidebarNavigation
-};
+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 { o as n } 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 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 { booleanConverter as o } from "../../utils/booleanConverter.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 "../ds-icon-button/ds-icon-button.js";
+import { scrollLock as l } from "../../utils/scrollLock.js";
+import { commonStyles as u } from "./styles/common.styles.js";
+//#region src/components/ds-sidebar-navigation/ds-sidebar-navigation.ts
+var d, f = (d = class extends i {
+	constructor(...e) {
+		super(...e), this.open = !1, this.scrollLocked = !1, this.toggleModal = () => {
+			this.open = !this.open, this.open ? this.dispatchEvent(new Event("ds-sidebar-navigation:open", {
+				bubbles: !0,
+				composed: !0
+			})) : this.dispatchEvent(new Event("ds-sidebar-navigation:close", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.handleModalClick = (e) => {
+			e.target === e.currentTarget && this.toggleModal();
+		}, this.handleClick = (e) => {
+			e.stopPropagation();
+		}, this.handleSlotChange = (e) => {
+			let t = e.target.assignedElements().find((e) => e.tagName === "DS-BUTTON" || e.tagName.startsWith("DS-BUTTON--"));
+			this.setMainCtaSize(t);
+		}, this.handleCtasSlotChange = (e) => {
+			e.target.assignedElements().filter((e) => e.tagName === "DS-BUTTON" || e.tagName.startsWith("DS-BUTTON--")).forEach((e) => this.setButtonSize(e));
+		}, this.setMainCtaSize = (e) => {
+			e && this.setButtonSize(e);
+		}, this.setButtonSize = (e) => {
+			e && e.setAttribute("size", JSON.stringify({
+				xxl: "large",
+				xl: "large",
+				l: "medium",
+				m: "medium",
+				s: "small",
+				xs: "small",
+				xxs: "small"
+			}));
+		};
+	}
+	firstUpdated(e) {
+		var t, n;
+		super.firstUpdated(e);
+		let r = (t = this.mainCtas) == null ? void 0 : t.find((e) => e.tagName === "DS-BUTTON" || e.tagName.startsWith("DS-BUTTON--"));
+		r && this.setMainCtaSize(r), (n = this.ctasButtons) == null || n.filter((e) => e.tagName === "DS-BUTTON" || e.tagName.startsWith("DS-BUTTON--")).forEach((e) => this.setButtonSize(e));
+	}
+	updated(e) {
+		super.updated(e), e.has("open") && (this.open ? (l.lock(), this.scrollLocked = !0) : this.scrollLocked && (l.unlock(), this.scrollLocked = !1));
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.scrollLocked && (l.unlock(), this.scrollLocked = !1);
+	}
+	modalButtonTemplate() {
+		return s`<ds-icon-button
+            class="modal-button"
+            icon-name=${this.open ? "cross" : "triple-dot-v"}
+            @click=${this.toggleModal}
+            data-testid="modal-button"
+            data-aria-label="more actions"
+            variant="tertiary"
+            size=${JSON.stringify({
+			xxl: "large",
+			xl: "large",
+			l: "medium",
+			m: "medium",
+			s: "small",
+			xs: "small",
+			xxs: "small"
+		})}
+        ></ds-icon-button>`;
+	}
+	classes() {
+		return {
+			container: !0,
+			open: this.open
+		};
+	}
+	render() {
+		return e`
+            <div class=${c(this.classes())} @click=${this.handleClick}>
+                <nav class="nav" part="bar">
+                    <div class="aside" part="aside">
+                        <slot name="aside-text"></slot>
+                        <span class="helper-text-container">
+                            <slot name="aside-icon"></slot>
+                            <slot name="aside-helper-text"></slot>
+                        </span>
+                    </div>
+                    <div class="actions-container" part="actions-container">
+                        <slot name="main-cta" @slotchange=${this.handleSlotChange}></slot>
+                        ${this.modalButtonTemplate()}
+                    </div>
+                </nav>
+                <div part="modal" class="modal" @click=${this.handleModalClick}>
+                    <slot name="ctas" @slotchange=${this.handleCtasSlotChange}></slot>
+                </div>
+            </div>
+        `;
+	}
+}, d.styles = [u], d);
+r([t({
+	type: Boolean,
+	converter: o,
+	reflect: !0
+})], f.prototype, "open", void 0), r([n({
+	slot: "main-cta",
+	flatten: !0
+})], f.prototype, "mainCtas", void 0), r([n({
+	slot: "ctas",
+	flatten: !0
+})], f.prototype, "ctasButtons", void 0), f = r([a("ds-sidebar-navigation")], f);
+//#endregion

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

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

@@ -0,0 +1,43 @@
+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 { e as a } 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 } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/style-map.js";
+import { commonStyles as s } from "./styles/common.styles.js";
+//#region src/components/ds-skeleton/ds-skeleton.ts
+var c, l = (c = class extends r {
+	constructor(...e) {
+		super(...e), this.variant = "text", this.animation = "shimmer";
+	}
+	get classes() {
+		return {
+			skeleton: !0,
+			[`variant-${this.variant}`]: !0,
+			[`animation-${this.animation}`]: !0
+		};
+	}
+	get inlineStyles() {
+		return {
+			width: this.width ?? void 0,
+			height: this.height ?? void 0
+		};
+	}
+	render() {
+		return e`
+            <div
+                class=${a(this.classes)}
+                style=${o(this.inlineStyles)}
+                role="presentation"
+                aria-hidden="true"
+            ></div>
+        `;
+	}
+}, c.styles = [s], c);
+n([t({ type: String })], l.prototype, "variant", void 0), n([t({ type: String })], l.prototype, "width", void 0), n([t({ type: String })], l.prototype, "height", void 0), n([t({ type: String })], l.prototype, "animation", void 0), l = n([i("ds-skeleton")], l);
+//#endregion

package/dist/esm/components/ds-skeleton/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-skeleton/styles/common.styles.ts
+var t = e`
+    :host {
+        display: block;
+    }
+`;
+//#endregion
+export { t as commonStyles };