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

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

@@ -1,63 +1,73 @@
-import { UiKitElement as d } 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 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 h } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as u, iconStyles as f } from "./styles/common.styles.js";
-import { themeConfig as w } from "./theme-config.js";
-var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, c = (e, t, n, s) => {
-  for (var o = s > 1 ? void 0 : s ? b(t, n) : t, a = e.length - 1, i; a >= 0; a--)
-    (i = e[a]) && (o = (s ? i(t, n, o) : i(o)) || o);
-  return s && o && y(t, n, o), o;
-};
-let r = class extends d {
-  constructor() {
-    super(...arguments), this.open = !1, this.handleOverlayClick = () => {
-      this.dispatchEvent(
-        new Event("ds-drawer:close", {
-          bubbles: !0,
-          composed: !0
-        })
-      ), this.open = !1;
-    }, this.handleKeyDown = (e) => {
-      (e.key === "Escape" || e.key === "Esc") && this.open && this.handleOverlayClick();
-    };
-  }
-  get classes() {
-    return {
-      container: !0,
-      open: !!this.open
-    };
-  }
-  getIconButtonTemplate() {
-    var t;
-    const e = (t = w[this.theme]) == null ? void 0 : t["icon-button-variant"];
-    return this.componentFactory.createIconButton({
-      class: "close-button visible",
-      "data-testid": "close-button",
-      "data-aria-label": "close-button",
-      "@click": this.handleOverlayClick,
-      size: "medium",
-      "icon-name": "cross",
-      variant: e,
-      mode: "dark"
-    });
-  }
-  updated(e) {
-    var t;
-    (t = super.updated) == null || t.call(this, e), e.has && e.has("open") && window.addEventListener("keydown", this.handleKeyDown);
-  }
-  disconnectedCallback() {
-    window.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback();
-  }
-  render() {
-    return v`          
-            <div class=${l({ overlay: !0, open: !!this.open })} @click=${this.handleOverlayClick}></div>
-            <div data-testid="ds-drawer-container" class=${l(this.classes)}>
-                <div class="scroll-area">
+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 { 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 { 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 { commonStyles as u, iconStyles as d } from "./styles/common.styles.js";
+import { themeConfig as f } from "./theme-config.js";
+//#region src/components/ds-drawer/ds-drawer.ts
+var p, m = (p = class extends i {
+	constructor(...e) {
+		super(...e), this._open = void 0, this._openState = !1, this.handleOverlayClick = () => {
+			this.dispatchEvent(new Event("ds-drawer:close", {
+				bubbles: !0,
+				composed: !0
+			})), this._openState = !1, this._open = void 0;
+		}, this.handleKeyDown = (e) => {
+			(e.key === "Escape" || e.key === "Esc") && this.open && this.handleOverlayClick();
+		};
+	}
+	get open() {
+		return this._open ?? this._openState;
+	}
+	set open(e) {
+		this._open = e;
+	}
+	get classes() {
+		return {
+			container: !0,
+			open: !!this.open
+		};
+	}
+	getIconButtonTemplate() {
+		var e;
+		let t = (e = f[this.theme]) == null ? void 0 : e["icon-button-variant"];
+		return s`<ds-icon-button
+            class="close-button visible"
+            data-testid="close-button"
+            data-aria-label="close-button"
+            @click=${this.handleOverlayClick}
+            size="medium"
+            icon-name="cross"
+            variant=${l(t)}
+            mode="dark"
+        ></ds-icon-button>`;
+	}
+	updated(e) {
+		var t;
+		(t = super.updated) == null || t.call(this, e), e.has && (e.has("_open") || e.has("_openState")) && window.addEventListener("keydown", this.handleKeyDown);
+	}
+	disconnectedCallback() {
+		window.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback();
+	}
+	render() {
+		return e`          
+            <div class=${c({
+			overlay: !0,
+			open: !!this.open
+		})} @click=${this.handleOverlayClick}></div>
+            <div data-testid="ds-drawer-container" class=${c(this.classes)}>
+                <div class="scroll-area" tabindex="0">
                     <div class="drawer-header">
                         <slot name="header"></slot>                        
                         ${this.getIconButtonTemplate()}
@@ -73,15 +83,11 @@ let r = class extends d {
                 </div>
             </div>
         `;
-  }
-};
-r.styles = [u, f];
-c([
-  h({ type: Boolean, converter: m })
-], r.prototype, "open", 2);
-r = c([
-  p("ds-drawer")
-], r);
-export {
-  r as DsDrawer
-};
+	}
+}, p.styles = [u, d], p);
+r([t({
+	type: Boolean,
+	attribute: "open",
+	converter: o
+})], m.prototype, "_open", void 0), r([n()], m.prototype, "_openState", void 0), m = r([a("ds-drawer")], m);
+//#endregion

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

@@ -1,19 +1,19 @@
-import { cssQueries as o } from "../../../utils/cssQueries.js";
-import { cssWithTokens as a } from "../../../utils/cssWithTokens.js";
-const e = a`
+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";
+//#region src/components/ds-drawer/styles/common.styles.ts
+var n = e`
     :host {
         display: block;
     }
 
     .overlay {
         position: fixed;
-        inset: 0;        
+        inset: 0;
         opacity: 0;
         pointer-events: none;
         transition: opacity 300ms ease;
         z-index: 9998;
-        background: var(--dg-global-opacity-black-40);
-        backdrop-filter: var(--dg-elevation-blur-soft);
     }
 
     .overlay.open {
@@ -23,95 +23,69 @@ const e = a`
 
     .container {
         position: fixed;
-        z-index: 9999;        
+        z-index: 9999;
         transition: transform 320ms ease;
         will-change: transform;
         display: flex;
         flex-direction: column;
-        overflow: auto;  
-        border-radius: 0;  
-        height: 100vh; 
+        overflow: auto;
+        border-radius: 0;
+        height: 100vh;
         width: 100%;
-        bottom: 0; 
+        bottom: 0;
         right: 0;
         transform: translateY(100%);
 
-        ${o.m} {
-            border-radius: var(--dg-border-radius-m) 0px 0px var(--dg-border-radius-m);           
-            top: 0;           
+        ${t.m} {
+            top: 0;
             transform: translateX(100%);
-            width: 491px;         
+            width: 491px;
         }
 
-        ${o.l} {            
+        ${t.l} {
             width: 579px;
         }
 
-        ${o.xl} {             
+        ${t.xl} {
             width: 588px;
         }
 
-        ${o.xxl} {             
+        ${t.xxl} {
             width: 780px;
         }
-    }     
-      
-    .container.open { 
+    }
+
+    .container.open {
         transform: translateY(0);
-        ${o.m} {
+        ${t.m} {
             transform: translateX(0);
-            box-shadow: 0 -8px 32px 0 var(--ds-opacity-black-60, rgba(9, 9, 11, 0.60));
-        }  
-    }    
-
-    .drawer-header,
-    .drawer-content,
-    .drawer-footer {
-        padding-left: var(--dg-layout-margin); 
-        padding-right: var(--dg-layout-margin);       
-    }  
-
-    .drawer-header {
-        padding-top: var(--dg-spacing-layout-s); 
-        padding-bottom: var(--dg-spacing-m-3);
-        ${o.m} {
-            padding-bottom: var(--dg-spacing-layout-m); 
-        }  
-    }
-    
-    .drawer-footer {
-        padding-top: var(--dg-spacing-layout-m);   
-        padding-bottom: var(--dg-spacing-layout-l);            
+            box-shadow: 0 -8px 32px 0 var(--ds-opacity-black-60, rgba(9, 9, 11, 0.6));
+        }
     }
 
     .drawer-footer ::slotted(*) {
         display: flex;
         flex-direction: column;
-        gap: var(--dg-spacing-m-2);
-        ${o.s} {
+        ${t.s} {
             flex-direction: row;
-        }  
+        }
     }
 
-    .drawer-content {       
-        flex: 0 0 auto;       
+    .drawer-content {
+        flex: 0 0 auto;
     }
-   
+
     .scroll-area {
         display: flex;
         flex-direction: column;
         height: 100%;
         overflow: auto;
-        -webkit-overflow-scrolling: touch;        
-    }    
-`, i = a`
-   .close-button {
+        -webkit-overflow-scrolling: touch;
+    }
+`, r = e`
+    .close-button {
         position: absolute;
-        top: calc(var(--dg-spacing-layout-s) - 2px);
-        right: var(--dg-spacing-layout-xl);         
     }
 `;
-export {
-  e as commonStyles,
-  i as iconStyles
-};
+//#endregion
+export { n as commonStyles, r as iconStyles };

package/dist-react/esm/components/ds-drawer/theme-config.js

@@ -1,14 +1,8 @@
-const t = {
-  cupra: {
-    "icon-button-variant": "primary"
-  },
-  "cupra-diagonal": {
-    "icon-button-variant": "tertiary"
-  },
-  seat: {
-    "icon-button-variant": "rounded"
-  }
-};
-export {
-  t as themeConfig
+//#region src/components/ds-drawer/theme-config.ts
+var e = {
+	cupra: { "icon-button-variant": "primary" },
+	"cupra-diagonal": { "icon-button-variant": "tertiary" },
+	seat: { "icon-button-variant": "tertiary" }
 };
+//#endregion
+export { e as themeConfig };

package/dist-react/esm/components/ds-favourite-action/ds-favourite-action.js

@@ -0,0 +1,78 @@
+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 "../ds-icon/ds-icon.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 { commonStyles as l } from "./styles/common.styles.js";
+//#region src/components/ds-favourite-action/ds-favourite-action.ts
+var u, d = (u = class extends i {
+	constructor(...e) {
+		super(...e), this.initialSelected = !1, this.disabled = !1, this._selected = !1, this._initializedFromInitialSelected = !1;
+	}
+	willUpdate(e) {
+		!this._initializedFromInitialSelected && e.has("initialSelected") && (this._selected = this.initialSelected, this._initializedFromInitialSelected = !0);
+	}
+	get currentSelected() {
+		return this.selected ?? this._selected;
+	}
+	handleClick() {
+		if (this.disabled) return;
+		let e = !this.currentSelected;
+		this.selected === void 0 && (this._selected = e), this.dispatchEvent(new CustomEvent("ds-favourite-action:change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { selected: e }
+		}));
+	}
+	get iconName() {
+		return this.currentSelected ? "heart-filled" : "heart";
+	}
+	get iconTemplate() {
+		return s`<ds-icon class="icon" icon-name=${this.iconName}></ds-icon>`;
+	}
+	get classes() {
+		return {
+			button: !0,
+			selected: this.currentSelected,
+			disabled: this.disabled
+		};
+	}
+	render() {
+		return e`
+            <button
+                type="button"
+                class=${c(this.classes)}
+                ?disabled=${this.disabled}
+                aria-pressed=${this.currentSelected}
+                aria-label=${this.dataAriaLabel || (this.currentSelected ? "Remove from favourites" : "Add to favourites")}
+                @click=${this.handleClick}
+            >
+                ${this.iconTemplate}
+            </button>
+        `;
+	}
+}, u.styles = [l], u);
+r([t({
+	type: Boolean,
+	converter: o,
+	attribute: "initial-selected"
+})], d.prototype, "initialSelected", void 0), r([t({
+	type: Boolean,
+	attribute: "selected"
+})], d.prototype, "selected", void 0), r([t({
+	type: Boolean,
+	converter: o,
+	reflect: !0
+})], d.prototype, "disabled", void 0), r([t({
+	type: String,
+	attribute: "data-aria-label"
+})], d.prototype, "dataAriaLabel", void 0), r([n()], d.prototype, "_selected", void 0), d = r([a("ds-favourite-action")], d);
+//#endregion

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

@@ -0,0 +1,21 @@
+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-favourite-action/styles/common.styles.ts
+var t = e`
+    :host {
+        display: inline-flex;
+    }
+
+    .button {
+        display: inline-flex;
+        box-sizing: border-box;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        border: none;
+        padding: 0;
+        background: transparent;
+    }
+`;
+//#endregion
+export { t as commonStyles };

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

@@ -1,58 +1,48 @@
-import { UiKitElement as c } from "../base/UiKitElement.js";
-import { customUiKitElement as f } from "../../decorators/customUiKitElement.js";
-import { htmlWithTokens as y } from "../../utils/htmlWithTokens.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { 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 s } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { choose as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
-import { classMap as n } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as g } from "./styles/common.styles.js";
-var $ = Object.defineProperty, d = Object.getOwnPropertyDescriptor, r = (o, i, p, l) => {
-  for (var e = l > 1 ? void 0 : l ? d(i, p) : i, m = o.length - 1, h; m >= 0; m--)
-    (h = o[m]) && (e = (l ? h(i, p, e) : h(e)) || e);
-  return l && e && $(i, p, e), e;
-};
-let t = class extends c {
-  constructor() {
-    super(...arguments), this.htmlTagName = "a", this.mode = "light", this.size = "large";
-  }
-  handleClick(o) {
-    this.href || o.preventDefault();
-  }
-  get styleTokens() {
-    return y`
+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 { r as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { commonStyles as s } from "./styles/common.styles.js";
+//#region src/components/ds-hyperlink/ds-hyperlink.ts
+var c, l = (c = class extends r {
+	constructor(...e) {
+		super(...e), this.htmlTagName = "a", this.mode = "light", this.size = "large";
+	}
+	handleClick(e) {
+		this.href || e.preventDefault();
+	}
+	get styleTokens() {
+		return e`
             <style>
                 :host {
                     color-scheme: ${this.mode};
                 }
             </style>
         `;
-  }
-  get classes() {
-    return {
-      hyperlink: !0,
-      [this.size]: !!this.size,
-      [this.mode]: !!this.mode
-    };
-  }
-  render() {
-    return a`
+	}
+	get classes() {
+		return {
+			hyperlink: !0,
+			[this.size]: !!this.size,
+			[this.mode]: !!this.mode
+		};
+	}
+	render() {
+		return e`
             ${this.styleTokens}
-            ${u(this.htmlTagName || "a", [
-      [
-        "button",
-        () => a`
-                        <button class=${n(this.classes)}>
+            ${o(this.htmlTagName || "a", [["button", () => e`
+                        <button class=${a(this.classes)}>
                             <slot></slot>
                         </button>
-                    `
-      ],
-      [
-        "a",
-        () => a`
+                    `], ["a", () => e`
                         <a
-                            class=${n(this.classes)}
+                            class=${a(this.classes)}
                             href=${this.href}
                             rel=${this.rel}
                             target=${this.target}
@@ -60,34 +50,24 @@ let t = class extends c {
                         >
                             <slot></slot>
                         </a>
-                    `
-      ]
-    ])}
+                    `]])}
         `;
-  }
-};
-t.styles = [g];
-r([
-  s({ type: String, attribute: "html-tag-name" })
-], t.prototype, "htmlTagName", 2);
-r([
-  s({ type: String, reflect: !0 })
-], t.prototype, "href", 2);
-r([
-  s({ type: String, reflect: !0 })
-], t.prototype, "rel", 2);
-r([
-  s({ type: String, reflect: !0 })
-], t.prototype, "target", 2);
-r([
-  s({ type: String, reflect: !0 })
-], t.prototype, "mode", 2);
-r([
-  s({ type: String })
-], t.prototype, "size", 2);
-t = r([
-  f("ds-hyperlink")
-], t);
-export {
-  t as DsHyperlinkButton
-};
+	}
+}, c.styles = [s], c);
+n([t({
+	type: String,
+	attribute: "html-tag-name"
+})], l.prototype, "htmlTagName", void 0), n([t({
+	type: String,
+	reflect: !0
+})], l.prototype, "href", void 0), n([t({
+	type: String,
+	reflect: !0
+})], l.prototype, "rel", void 0), n([t({
+	type: String,
+	reflect: !0
+})], l.prototype, "target", void 0), n([t({
+	type: String,
+	reflect: !0
+})], l.prototype, "mode", void 0), n([t({ type: String })], l.prototype, "size", void 0), l = n([i("ds-hyperlink")], l);
+//#endregion

package/dist-react/esm/components/ds-hyperlink/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 e = 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-hyperlink/styles/common.styles.ts
+var t = e`
     :host {
         display: inline-flex;
     }
@@ -17,6 +16,5 @@ const e = o`
         background: transparent;
     }
 `;
-export {
-  e as commonStyles
-};
+//#endregion
+export { t as commonStyles };