@cupra/ui-kit 2.0.0-canary.19 → 2.0.0-canary.191

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

@@ -1,56 +1,51 @@
-import { DsBaseInput as m } from "../base/ds-base-input/ds-base-input.js";
-import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as u, 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 { property as r } 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";
-import { choose as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
-var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (t, s, n, l) => {
-  for (var a = l > 1 ? void 0 : l ? b(s, n) : s, o = t.length - 1, h; o >= 0; o--)
-    (h = t[o]) && (a = (l ? h(s, n, a) : h(a)) || a);
-  return l && a && f(s, n, a), a;
-};
-let e = class extends m {
-  constructor() {
-    super(...arguments), this.name = "", this.placeholder = "", this.type = "text", this.min = 0, this.max = 100, this.step = 1, this._hasPicker = !1, this.handleClickIcon = () => {
-      var t, s;
-      (s = (t = this.inputField) == null ? void 0 : t.showPicker) == null || s.call(t);
-    }, this.handleInput = (t) => {
-      const s = t.target;
-      this._value = s.value || "";
-    };
-  }
-  firstUpdated() {
-    var t;
-    super.firstUpdated(), this._hasPicker = !!((t = this.inputField) != null && t.showPicker);
-  }
-  get iconTemplate() {
-    if (this.type !== "time" && this.type !== "date") return u;
-    let t;
-    switch (this.type) {
-      case "date":
-        t = "calendar";
-        break;
-      case "time":
-        t = "clock";
-        break;
-    }
-    return p`
+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 { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
+import { uiKitHtml as o } from "../../utils/uiKitHtml.js";
+import { r as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { DsBaseInput as c } from "../base/ds-base-input/ds-base-input.js";
+//#region src/components/ds-input/ds-input.ts
+var l = class extends c {
+	constructor(...e) {
+		super(...e), this.name = "", this.placeholder = "", this.type = "text", this.min = 0, this.max = 100, this.step = 1, this._hasPicker = !1, this.handleClickIcon = () => {
+			var e, t;
+			(e = this.inputField) == null || (t = e.showPicker) == null || t.call(e);
+		}, this.handleInput = (e) => {
+			let t = e.target;
+			this._value = t.value || "";
+		};
+	}
+	firstUpdated() {
+		var e;
+		super.firstUpdated(), this._hasPicker = !!((e = this.inputField) != null && e.showPicker);
+	}
+	get iconTemplate() {
+		if (this.type !== "time" && this.type !== "date") return e;
+		let n;
+		switch (this.type) {
+			case "date":
+				n = "calendar";
+				break;
+			case "time":
+				n = "clock";
+				break;
+		}
+		return t`
             <style>
                 .icon {
                     cursor: ${this._hasPicker ? "pointer" : "auto"};
                 }
             </style>
-            ${this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": t,
-      "@click": this.handleClickIcon
-    })}
+            ${o`<ds-icon class="icon" icon-name=${n} @click=${this.handleClickIcon}></ds-icon>`}
         `;
-  }
-  get labelTemplate() {
-    return p`
+	}
+	get labelTemplate() {
+		return t`
             <label
                 id="label"
                 class="label"
@@ -59,13 +54,10 @@ let e = class extends m {
                 ${this.label}
             </label>
         `;
-  }
-  get inputTemplate() {
-    return p`
-            ${y(this.type === "number", [
-      [
-        !0,
-        () => p`
+	}
+	get inputTemplate() {
+		return t`
+            ${s(this.type === "number", [[!0, () => t`
                         <input
                             aria-labelledby="label"
                             class="input-field number"
@@ -80,11 +72,7 @@ let e = class extends m {
                             @blur=${this.handleBlur}
                             @input=${this.handleInput}
                         />
-                    `
-      ],
-      [
-        !1,
-        () => p`
+                    `], [!1, () => t`
                         <input
                             aria-labelledby="label"
                             class="input-field"
@@ -97,42 +85,15 @@ let e = class extends m {
                             @blur=${this.handleBlur}
                             @input=${this.handleInput}
                         />
-                    `
-      ]
-    ])}
+                    `]])}
         `;
-  }
-  get dropdownTemplate() {
-    return u;
-  }
-};
-i([
-  r({ type: String })
-], e.prototype, "name", 2);
-i([
-  r({ type: String })
-], e.prototype, "placeholder", 2);
-i([
-  r({ type: String, attribute: "max-length" })
-], e.prototype, "maxLength", 2);
-i([
-  r({ type: String })
-], e.prototype, "type", 2);
-i([
-  r({ type: Number })
-], e.prototype, "min", 2);
-i([
-  r({ type: Number })
-], e.prototype, "max", 2);
-i([
-  r({ type: Number })
-], e.prototype, "step", 2);
-i([
-  d()
-], e.prototype, "_hasPicker", 2);
-e = i([
-  c("ds-input", { skipTagAsComponentName: !0 })
-], e);
-export {
-  e as DsInput
+	}
+	get dropdownTemplate() {
+		return e;
+	}
 };
+i([n({ type: String })], l.prototype, "name", void 0), i([n({ type: String })], l.prototype, "placeholder", void 0), i([n({
+	type: String,
+	attribute: "max-length"
+})], l.prototype, "maxLength", void 0), i([n({ type: String })], l.prototype, "type", void 0), i([n({ type: Number })], l.prototype, "min", void 0), i([n({ type: Number })], l.prototype, "max", void 0), i([n({ type: Number })], l.prototype, "step", void 0), i([r()], l.prototype, "_hasPicker", void 0), l = i([a("ds-input", { skipTagAsComponentName: !0 })], l);
+//#endregion

package/dist-react/esm/components/ds-interactive-card/ds-interactive-card.js

@@ -1,47 +1,63 @@
-import { UiKitElement as v } from "../base/UiKitElement.js";
-import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as h } 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 m, 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 { property as p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as d } 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 y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (r, s, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? g(s, i) : s, l = r.length - 1, n; l >= 0; l--)
-    (n = r[l]) && (t = (o ? n(s, i, t) : n(t)) || t);
-  return o && t && y(s, i, t), t;
-};
-let e = class extends v {
-  constructor() {
-    super(...arguments), this.size = "medium", this.selected = !1, this.error = !1, this.handleClick = (r) => {
-      r.stopPropagation();
-    };
-  }
-  get classes() {
-    return {
-      container: !0,
-      selected: this.selected,
-      [this.size]: !!this.size
-    };
-  }
-  get errorClasses() {
-    return {
-      error: !0,
-      selected: this.selected,
-      [this.size]: !!this.size
-    };
-  }
-  get iconTemplate() {
-    return this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": "cross-circle",
-      size: 24
-    });
-  }
-  get contentTemplate() {
-    return this.error ? m : c`
-            <div part="container" class=${d(this.classes)} data-testid="ds-interactive-card-container" tabindex="0">
+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.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 "../ds-icon-button/ds-icon-button.js";
+import { commonStyles as l } from "./styles/common.styles.js";
+//#region src/components/ds-interactive-card/ds-interactive-card.ts
+var u, d = (u = class extends i {
+	constructor(...e) {
+		super(...e), this.size = "medium", this.selected = !1, this.error = !1, this.showClose = !1, this.handleClick = (e) => {
+			e.stopPropagation();
+		}, this.handleCloseButtonClick = (e) => {
+			e.stopPropagation();
+			let t = new CustomEvent("interactive-card:close", {
+				bubbles: !0,
+				composed: !0
+			});
+			this.dispatchEvent(t);
+		};
+	}
+	get classes() {
+		return {
+			container: !0,
+			selected: this.selected,
+			[this.size]: !!this.size,
+			"has-close": this.showClose
+		};
+	}
+	get errorClasses() {
+		return {
+			error: !0,
+			selected: this.selected,
+			[this.size]: !!this.size
+		};
+	}
+	get iconTemplate() {
+		return s`<ds-icon class="icon" icon-name="cross-circle" size="24"></ds-icon>`;
+	}
+	get closeButtonTemplate() {
+		return this.showClose ? s`<ds-icon-button
+            class="close-button"
+            data-aria-label="Close"
+            @click=${this.handleCloseButtonClick}
+            icon-name="cross"
+            variant="naked"
+            size="medium"
+        ></ds-icon-button>` : e;
+	}
+	get contentTemplate() {
+		return this.error ? e : t`
+            <div part="container" class=${c(this.classes)} data-testid="ds-interactive-card-container" tabindex="0">
+                ${this.closeButtonTemplate}
                 <header class="header" part="header">
                     <div class="header-main">
                         <slot name="title" class="title" part="title"></slot>
@@ -53,38 +69,34 @@ let e = class extends v {
                 <footer @click=${this.handleClick} class="cta" part="cta"><slot name="cta"></slot></footer>
             </div>
     `;
-  }
-  get errorTemplate() {
-    return this.error ? c`
-            <div part="error" class=${d(this.errorClasses)}>
+	}
+	get errorTemplate() {
+		return this.error ? t`
+            <div part="error" class=${c(this.errorClasses)}>
                 ${this.iconTemplate}
                 <div class="error-content" part="error-text">
                     <slot class="error-title" name="error-title"></slot>
                     <slot class="error-text" name="error-text" data-testid="ds-interactive-card-error-text"></slot>
                 </div>
             </div>
-    ` : m;
-  }
-  render() {
-    return c`
+    ` : e;
+	}
+	render() {
+		return t`
             ${this.contentTemplate}
             ${this.errorTemplate}
         `;
-  }
-};
-e.styles = [f];
-a([
-  p({ type: String })
-], e.prototype, "size", 2);
-a([
-  p({ type: Boolean, converter: h })
-], e.prototype, "selected", 2);
-a([
-  p({ type: Boolean, converter: h })
-], e.prototype, "error", 2);
-e = a([
-  u("ds-interactive-card")
-], e);
-export {
-  e as DsInteractiveCard
-};
+	}
+}, u.styles = [l], u);
+r([n({ type: String })], d.prototype, "size", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], d.prototype, "selected", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], d.prototype, "error", void 0), r([n({
+	type: Boolean,
+	converter: o,
+	attribute: "show-close"
+})], d.prototype, "showClose", void 0), d = r([a("ds-interactive-card")], d);
+//#endregion

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

@@ -1,12 +1,224 @@
-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 p = 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-interactive-card/styles/common.styles.ts
+var t = e`
     :host {
         display: contents;
     }
+
+    .container {
+        position: relative;
+        backdrop-filter: blur(60px);
+        border: 1px solid var(--ds-color-border-default);
+        border-radius: var(--ds-border-radius-m);
+        padding: var(--ds-spacing-m-2);
+        width: var(--ui-kit-interactive-card-width, 320px);
+        background: var(--ds-card-bg-color-default);
+        display: flex;
+        flex-direction: column;
+        cursor: pointer;
+        box-sizing: border-box;
+    }
+
+    .container:not(.error):hover {
+        background: var(--ds-card-bg-color-hover);
+    }
+    .container:not(.error):active {
+        background: var(--ds-card-bg-color-pressed);
+    }
+    .container:not(.error):focus-visible {
+        outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        outline-offset: 2px;
+    }
+    .container:not(.error).selected {
+        border: var(--ds-border-width-m) solid var(--ds-color-border-selected-subtle);
+        background: var(--ds-card-bg-color-default);
+    }
+
+    .container.error {
+        pointer-events: none;
+    }
+
+    .header {
+        display: flex;
+        padding: var(--ds-spacing-s-1);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+        align-self: stretch;
+    }
+
+    .header-main {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        gap: 8px;
+        width: 100%;
+    }
+
+    .title {
+        flex: 1 1 auto;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        color: var(--ds-color-text-default);
+        font-family: var(--ds-typography-family-primary), sans-serif;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        font-weight: 500;
+    }
+
+    .subtitle {
+        white-space: nowrap;
+        color: var(--ds-color-text-default-subtlest);
+        font-family: var(--ds-typography-family-primary), sans-serif;
+        font-weight: 350;
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .meta {
+        width: 100%;
+        color: var(--ds-color-text-default);
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        width: 100%;
+        color: var(--ds-color-text-default-subtlest);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-m);
+        font-style: normal;
+        font-weight: 400;
+        line-height: var(--ds-typography-height-body-m);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .cta {
+        width: 100%;
+    }
+
+    .error {
+        display: flex;
+        width: var(--ui-kit-interactive-card-width, 320px);
+        padding: var(--ds-spacing-m-2);
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+        border-radius: var(--ds-border-radius-m);
+        border: var(--ds-border-width-m) solid var(--ds-color-border-default);
+        background: var(--ds-card-bg-color-default);
+        backdrop-filter: blur(60px);
+    }
+
+    .error-content {
+        display: flex;
+        padding: var(--ds-spacing-s-1);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+        flex: 1 0 0;
+        align-self: stretch;
+    }
+
+    .error-title {
+        color: var(--ds-color-text-default);
+
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 500;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .error-text {
+        color: var(--ds-color-text-default);
+
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 350;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .large .error-title {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+    }
+
+    .large .error-text {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    .medium .error-title {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    .medium .error-text {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .icon {
+        --ui-kit-icon-color: var(--ds-color-icon-feedback-error);
+        --ui-kit-icon-width: 18px;
+        --ui-kit-icon-height: 18px;
+    }
+
+    .container.medium {
+        gap: var(--ds-spacing-s-5);
+    }
+
+    .container.medium .title {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    .container.medium .subtitle {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .container.medium .meta,
+    .container.medium .content {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .container.large {
+        gap: var(--ds-spacing-m-2);
+    }
+
+    .container.large .title {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+    }
+
+    .container.large .subtitle {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    .container.large .meta,
+    .container.medium .content {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    .close-button {
+        position: absolute;
+        top: var(--ds-spacing-s-5);
+        right: var(--ds-spacing-s-5);
+    }
+
+    .has-close .header-main {
+        box-sizing: border-box;
+        padding-right: var(--ds-spacing-l-2);
+    }
 `;
-export {
-  p as commonStyles
-};
+//#endregion
+export { t as commonStyles };