@cupra/ui-kit 2.0.0-canary.88 → 2.0.0-canary.89

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

@@ -1,105 +1,116 @@
-import { UiKitElement as m } from "../base/UiKitElement.js";
-import { customUiKitElement as b } from "../../decorators/customUiKitElement.js";
-import { ViewportMixin as f } from "../../mixins/ViewportMixin.js";
-import { booleanConverter as a } 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 l, 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 n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { fullScreenStyles as v, dialogStyles as y, fitStyles as g, commonStyles as B, alignStyles as C } from "./styles/common.styles.js";
-var S = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (e, s, c, r) => {
-  for (var i = r > 1 ? void 0 : r ? w(s, c) : s, u = e.length - 1, d; u >= 0; u--)
-    (d = e[u]) && (i = (r ? d(s, c, i) : d(i)) || i);
-  return r && i && S(s, c, i), i;
-};
-let t = class extends f(m) {
-  constructor() {
-    super(...arguments), this.withCloseButton = !0, this.variant = "fullScreen", this.zIndex = 2e3, this.disableScrollLock = !1, this.fullWidth = !1, this.vAlign = "default";
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), document.body.style.paddingRight = "0", document.body.style.overflow = "";
-  }
-  handleScroll() {
-    const e = this.open && !this.disableScrollLock, s = window.innerWidth > document.documentElement.clientWidth;
-    document.body.style.paddingRight = e && s ? `${window.innerWidth - document.documentElement.clientWidth}px` : "0", document.body.style.overflow = e ? "hidden" : "";
-  }
-  updated(e) {
-    super.updated(e), (e.has("open") || e.has("disableScrollLock")) && this.handleScroll();
-  }
-  get backdropClasses() {
-    return {
-      backdrop: !0,
-      animate: !0,
-      open: this.open,
-      close: !this.open
-    };
-  }
-  get backdropTemplate() {
-    return this.variant === "dialog" ? h`<div class=${p(this.backdropClasses)} />` : l;
-  }
-  get buttonSize() {
-    return ["xs", "s", "m"].includes(this.viewport) ? "medium" : "large";
-  }
-  get closeButtonSize() {
-    return this.variant === "dialog" || ["xs", "s"].includes(this.viewport) ? "small" : "medium";
-  }
-  get closeButtonTemplate() {
-    return this.withCloseButton ? this.componentFactory.createIconButton({
-      class: "close-button",
-      "data-aria-label": "close-button",
-      "@click": this.handleClickCloseButton,
-      size: this.closeButtonSize,
-      "icon-name": "cross",
-      mode: "light",
-      variant: "primary"
-    }) : l;
-  }
-  get iconTemplate() {
-    return this.iconName ? this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": this.iconName,
-      size: 64
-    }) : l;
-  }
-  get cancelButtonTemplate() {
-    return this.cancelButtonText ? this.componentFactory.createButton({
-      class: "cancel-button",
-      variant: "secondary",
-      size: this.buttonSize,
-      "@click": this.handleClickCancelButton,
-      children: this.cancelButtonText
-    }) : l;
-  }
-  get confirmButtonTemplate() {
-    return this.confirmButtonText ? this.componentFactory.createButton({
-      class: "confirm-button",
-      variant: "primary",
-      size: this.buttonSize,
-      "@click": this.handleClickConfirmButton,
-      children: this.confirmButtonText
-    }) : l;
-  }
-  get modalClasses() {
-    return {
-      container: !0,
-      animate: !0,
-      open: this.open,
-      close: !this.open,
-      dialog: this.variant === "dialog",
-      "full-screen": this.variant === "fullScreen" || this.variant === "fit",
-      fit: this.variant === "fit",
-      [`v-align-${this.vAlign}`]: !!this.vAlign
-    };
-  }
-  get contentClasses() {
-    return {
-      "content-container": !0,
-      "full-width": !!this.fullWidth
-    };
-  }
-  render() {
-    return h`
+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 { booleanConverter as o } from "../../utils/booleanConverter.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 { ViewportMixin as c } from "../../mixins/ViewportMixin.js";
+import { alignStyles as l, commonStyles as u, dialogStyles as d, fitStyles as f, fullScreenStyles as p } from "./styles/common.styles.js";
+//#region src/components/ds-modal/ds-modal.ts
+var m = class extends c(i) {
+	constructor(...e) {
+		super(...e), this.withCloseButton = !0, this.variant = "fullScreen", this.zIndex = 2e3, this.disableScrollLock = !1, this.fullWidth = !1, this.vAlign = "default";
+	}
+	static {
+		this.styles = [
+			p,
+			d,
+			f,
+			u,
+			l
+		];
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.body.style.paddingRight = "0", document.body.style.overflow = "";
+	}
+	handleScroll() {
+		let e = this.open && !this.disableScrollLock, t = window.innerWidth > document.documentElement.clientWidth;
+		document.body.style.paddingRight = e && t ? `${window.innerWidth - document.documentElement.clientWidth}px` : "0", document.body.style.overflow = e ? "hidden" : "";
+	}
+	updated(e) {
+		super.updated(e), (e.has("open") || e.has("disableScrollLock")) && this.handleScroll();
+	}
+	get backdropClasses() {
+		return {
+			backdrop: !0,
+			animate: !0,
+			open: this.open,
+			close: !this.open
+		};
+	}
+	get backdropTemplate() {
+		return this.variant === "dialog" ? t`<div class=${s(this.backdropClasses)} />` : e;
+	}
+	get buttonSize() {
+		return [
+			"xs",
+			"s",
+			"m"
+		].includes(this.viewport) ? "medium" : "large";
+	}
+	get closeButtonSize() {
+		return this.variant === "dialog" || ["xs", "s"].includes(this.viewport) ? "small" : "medium";
+	}
+	get closeButtonTemplate() {
+		return this.withCloseButton ? this.componentFactory.createIconButton({
+			class: "close-button",
+			"data-aria-label": "close-button",
+			"@click": this.handleClickCloseButton,
+			size: this.closeButtonSize,
+			"icon-name": "cross",
+			mode: "light",
+			variant: "primary"
+		}) : e;
+	}
+	get iconTemplate() {
+		return this.iconName ? this.componentFactory.createIcon({
+			class: "icon",
+			"icon-name": this.iconName,
+			size: 64
+		}) : e;
+	}
+	get cancelButtonTemplate() {
+		return this.cancelButtonText ? this.componentFactory.createButton({
+			class: "cancel-button",
+			variant: "secondary",
+			size: this.buttonSize,
+			"@click": this.handleClickCancelButton,
+			children: this.cancelButtonText
+		}) : e;
+	}
+	get confirmButtonTemplate() {
+		return this.confirmButtonText ? this.componentFactory.createButton({
+			class: "confirm-button",
+			variant: "primary",
+			size: this.buttonSize,
+			"@click": this.handleClickConfirmButton,
+			children: this.confirmButtonText
+		}) : e;
+	}
+	get modalClasses() {
+		return {
+			container: !0,
+			animate: !0,
+			open: this.open,
+			close: !this.open,
+			dialog: this.variant === "dialog",
+			"full-screen": this.variant === "fullScreen" || this.variant === "fit",
+			fit: this.variant === "fit",
+			[`v-align-${this.vAlign}`]: !!this.vAlign
+		};
+	}
+	get contentClasses() {
+		return {
+			"content-container": !0,
+			"full-width": !!this.fullWidth
+		};
+	}
+	render() {
+		return t`
             <style>
                 :host {
                     ${!this.open && "display: none;"}
@@ -112,12 +123,12 @@ let t = class extends f(m) {
             <div
                 role="dialog"
                 aria-labelledby="ds-modal-title"
-                class=${p(this.modalClasses)}
+                class=${s(this.modalClasses)}
                 @transitionend=${this.handleTransitionEnd}
             >
                 ${this.closeButtonTemplate}
                 ${this.iconTemplate}
-                <div class=${p(this.contentClasses)}>
+                <div class=${s(this.contentClasses)}>
                     <slot id="ds-modal-title" name="title"></slot>
                     <slot name="content"></slot>
                     ${this.cancelButtonTemplate}
@@ -125,91 +136,65 @@ let t = class extends f(m) {
                 </div>
             </div>
         `;
-  }
-  handleClickCancelButton() {
-    this.open = !1, this.dispatchEvent(
-      new CustomEvent("click-cancel-button", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleClickConfirmButton() {
-    this.dispatchEvent(
-      new CustomEvent("click-confirm-button", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleClickCloseButton() {
-    this.open = !1, this.dispatchEvent(
-      new CustomEvent("click-close-button", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleTransitionEnd(e) {
-    e.propertyName === "opacity" && (this.open ? this.dispatchEvent(
-      new CustomEvent("open-transition-end", {
-        bubbles: !0,
-        composed: !0
-      })
-    ) : this.dispatchEvent(
-      new CustomEvent("close-transition-end", {
-        bubbles: !0,
-        composed: !0
-      })
-    ));
-  }
-};
-t.styles = [v, y, g, B, C];
-o([
-  n({ type: Boolean, reflect: !0, converter: a })
-], t.prototype, "open", 2);
-o([
-  n({
-    type: Boolean,
-    attribute: "with-close-button",
-    converter: a
-  })
-], t.prototype, "withCloseButton", 2);
-o([
-  n({ type: String, attribute: "cancel-button-text" })
-], t.prototype, "cancelButtonText", 2);
-o([
-  n({ type: String, attribute: "confirm-button-text" })
-], t.prototype, "confirmButtonText", 2);
-o([
-  n({ type: String })
-], t.prototype, "variant", 2);
-o([
-  n({ type: Number, attribute: "z-index" })
-], t.prototype, "zIndex", 2);
-o([
-  n({
-    type: Boolean,
-    converter: a,
-    attribute: "disable-scroll-lock"
-  })
-], t.prototype, "disableScrollLock", 2);
-o([
-  n({ type: String, attribute: "icon-name" })
-], t.prototype, "iconName", 2);
-o([
-  n({
-    type: Boolean,
-    converter: a,
-    attribute: "full-width"
-  })
-], t.prototype, "fullWidth", 2);
-o([
-  n({ type: String, attribute: "v-align" })
-], t.prototype, "vAlign", 2);
-t = o([
-  b("ds-modal")
-], t);
-export {
-  t as DsModal
+	}
+	handleClickCancelButton() {
+		this.open = !1, this.dispatchEvent(new CustomEvent("click-cancel-button", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleClickConfirmButton() {
+		this.dispatchEvent(new CustomEvent("click-confirm-button", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleClickCloseButton() {
+		this.open = !1, this.dispatchEvent(new CustomEvent("click-close-button", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleTransitionEnd(e) {
+		e.propertyName === "opacity" && (this.open ? this.dispatchEvent(new CustomEvent("open-transition-end", {
+			bubbles: !0,
+			composed: !0
+		})) : this.dispatchEvent(new CustomEvent("close-transition-end", {
+			bubbles: !0,
+			composed: !0
+		})));
+	}
 };
+r([n({
+	type: Boolean,
+	reflect: !0,
+	converter: o
+})], m.prototype, "open", void 0), r([n({
+	type: Boolean,
+	attribute: "with-close-button",
+	converter: o
+})], m.prototype, "withCloseButton", void 0), r([n({
+	type: String,
+	attribute: "cancel-button-text"
+})], m.prototype, "cancelButtonText", void 0), r([n({
+	type: String,
+	attribute: "confirm-button-text"
+})], m.prototype, "confirmButtonText", void 0), r([n({ type: String })], m.prototype, "variant", void 0), r([n({
+	type: Number,
+	attribute: "z-index"
+})], m.prototype, "zIndex", void 0), r([n({
+	type: Boolean,
+	converter: o,
+	attribute: "disable-scroll-lock"
+})], m.prototype, "disableScrollLock", void 0), r([n({
+	type: String,
+	attribute: "icon-name"
+})], m.prototype, "iconName", void 0), r([n({
+	type: Boolean,
+	converter: o,
+	attribute: "full-width"
+})], m.prototype, "fullWidth", void 0), r([n({
+	type: String,
+	attribute: "v-align"
+})], m.prototype, "vAlign", void 0), m = r([a("ds-modal")], m);
+//#endregion

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

@@ -1,9 +1,8 @@
+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";
 import { cssQueries as t } from "../../../utils/cssQueries.js";
-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 n } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const l = n`
+//#region src/components/ds-modal/styles/common.styles.ts
+var n = e`
     :host {
         transition: display 300ms ease allow-discrete;
     }
@@ -139,7 +138,7 @@ const l = n`
                 '. cancelButton confirmButton';
         }
     }
-`, c = n`
+`, r = e`
     .container.full-screen {
         position: fixed;
         height: 100%;
@@ -156,7 +155,7 @@ const l = n`
     .icon {
         margin-bottom: 32px;
     }
-`, p = n`
+`, i = e`
     .container.dialog {
         position: fixed;
         height: auto;
@@ -190,11 +189,11 @@ const l = n`
             padding: 48px;
         }
     }
-`, d = n`
+`, a = e`
     .container.fit {
         position: absolute;
     }
-`, s = n`
+`, o = e`
     .container.full-screen.v-align-default {
         justify-content: flex-start;
         padding-top: 24px;
@@ -280,10 +279,5 @@ const l = n`
         margin-bottom: 24px;
     }
 `;
-export {
-  s as alignStyles,
-  l as commonStyles,
-  p as dialogStyles,
-  d as fitStyles,
-  c as fullScreenStyles
-};
+//#endregion
+export { o as alignStyles, n as commonStyles, i as dialogStyles, a as fitStyles, r as fullScreenStyles };

package/dist-react/esm/components/ds-navigation-controls/ds-navigation-controls.js

@@ -1,27 +1,21 @@
-import { UiKitElement as a } from "../base/UiKitElement.js";
-import { customUiKitElement as m } 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 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 { commonStyles as c } from "./styles/common.styles.js";
-var v = Object.getOwnPropertyDescriptor, f = (e, i, l, s) => {
-  for (var t = s > 1 ? void 0 : s ? v(i, l) : i, r = e.length - 1, n; r >= 0; r--)
-    (n = e[r]) && (t = n(t) || t);
-  return t;
-};
-let o = class extends a {
-  render() {
-    return p`
+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 { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { UiKitElement as n } from "../base/UiKitElement.js";
+import { customUiKitElement as r } from "../../decorators/customUiKitElement.js";
+import { commonStyles as i } from "./styles/common.styles.js";
+//#region src/components/ds-navigation-controls/ds-navigation-controls.ts
+var a = class extends n {
+	static {
+		this.styles = [i];
+	}
+	render() {
+		return e`
             <div part="container" class="container" role="group" aria-label="Navigation controls">
                 <slot></slot>
             </div>
         `;
-  }
-};
-o.styles = [c];
-o = f([
-  m("ds-navigation-controls")
-], o);
-export {
-  o as DsNavigationControls
+	}
 };
+a = t([r("ds-navigation-controls")], a);
+//#endregion

package/dist-react/esm/components/ds-navigation-controls/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 i } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const o = 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-navigation-controls/styles/common.styles.ts
+var t = e`
     :host {
         display: inline-flex;
     }
@@ -18,6 +17,5 @@ const o = i`
         align-items: center;
     }
 `;
-export {
-  o as commonStyles
-};
+//#endregion
+export { t as commonStyles };

package/dist-react/esm/components/ds-password-input/ds-password-input.js

@@ -1,43 +1,33 @@
-import { DsTextInput as u } from "../ds-text-input/ds-text-input.js";
-import { customUiKitElement as b } from "../../decorators/customUiKitElement.js";
-import { property as p } 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";
-var h = Object.defineProperty, c = Object.getOwnPropertyDescriptor, r = (e, a, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? c(a, o) : a, n = e.length - 1, l; n >= 0; n--)
-    (l = e[n]) && (t = (s ? l(a, o, t) : l(t)) || t);
-  return s && t && h(a, o, t), t;
-};
-let i = class extends u {
-  constructor() {
-    super(...arguments), this.dataAriaLabelHideButton = "", this.dataAriaLabelShowButton = "", this.visible = !1, this.handleClickIcon = () => {
-      this.visible ? (this.nativeInput.setAttribute("type", "password"), this.visible = !1) : (this.nativeInput.setAttribute("type", "text"), this.visible = !0);
-    };
-  }
-  get iconTemplate() {
-    var e;
-    return this.componentFactory.createIconButton({
-      class: "icon-button",
-      "icon-name": this.visible ? "eye-crossed-out" : "eye",
-      disabled: !!((e = this.nativeInput) != null && e.disabled),
-      size: this.size,
-      variant: "naked",
-      "@click": this.handleClickIcon,
-      "data-aria-label": this.visible ? this.dataAriaLabelHideButton || "hide" : this.dataAriaLabelShowButton || "show"
-    });
-  }
-};
-r([
-  p({ type: String, attribute: "data-aria-label-hide-button" })
-], i.prototype, "dataAriaLabelHideButton", 2);
-r([
-  p({ type: String, attribute: "data-aria-label-show-button" })
-], i.prototype, "dataAriaLabelShowButton", 2);
-r([
-  d()
-], i.prototype, "visible", 2);
-i = r([
-  b("ds-password-input", { extendComponentNames: ["ds-text-input"] })
-], i);
-export {
-  i as DsPasswordInput
+import { n as e } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { r as t } 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 n } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { customUiKitElement as r } from "../../decorators/customUiKitElement.js";
+import { DsTextInput as i } from "../ds-text-input/ds-text-input.js";
+//#region src/components/ds-password-input/ds-password-input.ts
+var a = class extends i {
+	constructor(...e) {
+		super(...e), this.dataAriaLabelHideButton = "", this.dataAriaLabelShowButton = "", this.visible = !1, this.handleClickIcon = () => {
+			this.visible ? (this.nativeInput.setAttribute("type", "password"), this.visible = !1) : (this.nativeInput.setAttribute("type", "text"), this.visible = !0);
+		};
+	}
+	get iconTemplate() {
+		return this.componentFactory.createIconButton({
+			class: "icon-button",
+			"icon-name": this.visible ? "eye-crossed-out" : "eye",
+			disabled: !!this.nativeInput?.disabled,
+			size: this.size,
+			variant: "naked",
+			"@click": this.handleClickIcon,
+			"data-aria-label": this.visible ? this.dataAriaLabelHideButton || "hide" : this.dataAriaLabelShowButton || "show"
+		});
+	}
 };
+n([e({
+	type: String,
+	attribute: "data-aria-label-hide-button"
+})], a.prototype, "dataAriaLabelHideButton", void 0), n([e({
+	type: String,
+	attribute: "data-aria-label-show-button"
+})], a.prototype, "dataAriaLabelShowButton", void 0), n([t()], a.prototype, "visible", void 0), a = n([r("ds-password-input", { extendComponentNames: ["ds-text-input"] })], a);
+//#endregion