@cupra/ui-kit 2.0.0-canary.16 → 2.0.0-canary.161

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

@@ -1,10 +1,10 @@
-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-map-pin/styles/common.styles.ts
+var t = e`
     :host {
         display: inline-block;
+        --ui-kit-icon-color: var(--ui-kit-private-map-pin-icon-color);
     }
 
     .container {
@@ -22,22 +22,13 @@ const n = t`
     .cluster-count {
         display: flex;
         position: absolute;
-        border-radius: var(--dg-border-radius-full);
-        background: var(--dg-color-bg-base);
         align-items: center;
         justify-content: center;
         top: -8px;
         right: -6px;
         width: 24px;
         height: 24px;
-        font-size: var(--dg-font-size-body-s, 12px);
-        font-style: normal;
-        font-weight: 400;
-        line-height: var(--dg-font-height-body-s, 16px); /* 133.333% */
-        letter-spacing: var(--dg-font-letter-spacing-m, 0.5px);
-        color: var(--dg-color-text-strong);
     }
 `;
-export {
-  n as mapPinStyles
-};
+//#endregion
+export { t as mapPinStyles };

package/dist-react/esm/components/ds-media-control/ds-media-control.js

@@ -1,85 +1,93 @@
-import { UiKitElement as u } from "../base/UiKitElement.js";
-import { customUiKitElement as d } 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 { property as l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as g } 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, v = Object.getOwnPropertyDescriptor, c = (e, s, r, o) => {
-  for (var t = o > 1 ? void 0 : o ? v(s, r) : s, a = e.length - 1, n; a >= 0; a--)
-    (n = e[a]) && (t = (o ? n(s, r, t) : n(t)) || t);
-  return o && t && y(s, r, t), t;
-};
-let i = class extends u {
-  constructor() {
-    super(...arguments), this.state = "pause", this.size = "medium", this.progress = 0, this.handleToggle = (e) => {
-      e.stopPropagation();
-      const s = this.state === "play" ? "pause" : "play";
-      this.state = s;
-      const r = s === "play" ? "ds-media-control:play" : "ds-media-control:pause";
-      this.dispatchEvent(new CustomEvent(r, { bubbles: !0, composed: !0 }));
-    }, this.onKeyDown = (e) => {
-      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleToggle(e));
-    };
-  }
-  get normalizedProgress() {
-    const e = Number(this.progress ?? 0);
-    return Number.isNaN(e) ? 0 : Math.min(100, Math.max(0, e));
-  }
-  get classes() {
-    return {
-      container: !0,
-      [this.size]: !!this.size,
-      [this.state]: !!this.state
-    };
-  }
-  get iconSize() {
-    switch (this.size) {
-      case "large":
-        return 24;
-      case "small":
-        return 16;
-      default:
-        return 20;
-    }
-  }
-  get iconName() {
-    return this.state === "play" ? "pause" : "play";
-  }
-  get iconTemplate() {
-    return this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": this.iconName,
-      size: this.iconSize
-    });
-  }
-  get progressTemplate() {
-    const e = this.size === "large" ? 46 : this.size === "small" ? 30 : 38, r = e / 2 - 2 / 2, o = r - 1, t = 2 * Math.PI * r, a = this.normalizedProgress / 100, n = t.toFixed(3), m = (t * (1 - a)).toFixed(3), h = `${-e / 2} ${-e / 2} ${e} ${e}`;
-    return p`
-            <svg part="progress" class="progress" viewBox="${h}" aria-hidden="true" focusable="false">
+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.122.0/helpers/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 { 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-media-control/ds-media-control.ts
+var u = class extends i {
+	constructor(...e) {
+		super(...e), this._state = void 0, this._stateValue = "pause", this.size = "medium", this.progress = 0, this.handleToggle = (e) => {
+			e.stopPropagation();
+			let t = this.state === "play" ? "pause" : "play";
+			this._stateValue = t, this._state = void 0;
+			let n = t === "play" ? "ds-media-control:play" : "ds-media-control:pause";
+			this.dispatchEvent(new CustomEvent(n, {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.onKeyDown = (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleToggle(e));
+		};
+	}
+	static {
+		this.styles = [l];
+	}
+	get state() {
+		return this._state ?? this._stateValue;
+	}
+	set state(e) {
+		this._state = e;
+	}
+	get normalizedProgress() {
+		let e = Number(this.progress ?? 0);
+		return Number.isNaN(e) ? 0 : Math.min(100, Math.max(0, e));
+	}
+	get classes() {
+		return {
+			container: !0,
+			[this.size]: !!this.size,
+			[this.state]: !!this.state
+		};
+	}
+	get iconSize() {
+		switch (this.size) {
+			case "large": return 24;
+			case "small": return 16;
+			default: return 20;
+		}
+	}
+	get iconName() {
+		return this.state === "play" ? "pause" : "play";
+	}
+	get iconTemplate() {
+		return o`<ds-icon class="icon" icon-name=${this.iconName} size=${c(this.iconSize)}></ds-icon>`;
+	}
+	get progressTemplate() {
+		let t = this.size === "large" ? 46 : this.size === "small" ? 30 : 38, n = t / 2 - 2 / 2, r = n - 1, i = 2 * Math.PI * n, a = this.normalizedProgress / 100, o = i.toFixed(3), s = (i * (1 - a)).toFixed(3);
+		return e`
+            <svg part="progress" class="progress" viewBox="${`${-t / 2} ${-t / 2} ${t} ${t}`}" aria-hidden="true" focusable="false">
                 <circle
                     class="indicator"
                     cx="0"
                     cy="0"
-                    r="${o}"
+                    r="${r}"
                     fill="none"
-                    stroke-dasharray="${n}"
-                    stroke-dashoffset="${m}"
+                    stroke-dasharray="${o}"
+                    stroke-dashoffset="${s}"
                     vector-effect="non-scaling-stroke"
                 ></circle>
             </svg>
         `;
-  }
-  render() {
-    const e = this.state === "play" ? "pause" : "play";
-    return p`
+	}
+	render() {
+		let t = this.state === "play" ? "pause" : "play";
+		return e`
             <div
                 part="container"
-                class=${g(this.classes)}
+                class=${s(this.classes)}
                 role="button"
                 tabindex="0"
-                aria-label=${`${e} media ${this.size}`}
+                aria-label=${`${t} media ${this.size}`}
                 @click=${this.handleToggle}
                 @keydown=${this.onKeyDown}
             >
@@ -87,21 +95,17 @@ let i = class extends u {
                 ${this.iconTemplate}
             </div>
         `;
-  }
-};
-i.styles = [f];
-c([
-  l({ type: String, reflect: !0 })
-], i.prototype, "state", 2);
-c([
-  l({ type: String, reflect: !0 })
-], i.prototype, "size", 2);
-c([
-  l({ type: Number, reflect: !0 })
-], i.prototype, "progress", 2);
-i = c([
-  d("ds-media-control")
-], i);
-export {
-  i as DsMediaControl
+	}
 };
+r([t({
+	type: String,
+	attribute: "state",
+	reflect: !0
+})], u.prototype, "_state", void 0), r([n()], u.prototype, "_stateValue", void 0), r([t({
+	type: String,
+	reflect: !0
+})], u.prototype, "size", void 0), r([t({
+	type: Number,
+	reflect: !0
+})], u.prototype, "progress", void 0), u = r([a("ds-media-control")], u);
+//#endregion

package/dist-react/esm/components/ds-media-control/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 r } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const s = r`
+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-media-control/styles/common.styles.ts
+var t = e`
     :host {
         display: contents;
     }
@@ -40,15 +39,14 @@ const s = r`
     }
 
     .progress .indicator {
-        stroke: var(--ds-icon-color);
+        stroke: var(--ds-color-icon-default-subtlest, #d3d6d9);
         stroke-width: 1.5px;
         transform: rotate(-90deg);
     }
 
     [part='container']:focus-visible {
-        box-shadow: 0 0 0 2px var(--ds-color-focus-ring, rgba(255, 255, 255, 0.6));
+        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
     }
 `;
-export {
-  s as commonStyles
-};
+//#endregion
+export { t as commonStyles };