@cupra/ui-kit 1.0.0-canary.13 → 1.0.0-canary.14

package/dist/components/ds-rating/ds-rating.d.ts

@@ -0,0 +1,14 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-icon/ds-icon.ts';
+import type { DsRatingAttrs } from './ds-rating.types';
+export declare class DsRating extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    value: DsRatingAttrs['value'];
+    disabled: DsRatingAttrs['disabled'];
+    hideRatingText: DsRatingAttrs['hide-rating-text'];
+    private get displayValue();
+    private get classes();
+    private getStarIconName;
+    protected get starsTemplate(): any[];
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/ds-rating/ds-rating.js

@@ -0,0 +1,73 @@
+import { UiKitElement as c } from "../base/UiKitElement.js";
+import { customUiKitElement as h } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as u } 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 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 m } 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 "../ds-icon/ds-icon.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, t, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? g(t, r) : t, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (s = (a ? n(t, r, s) : n(s)) || s);
+  return a && s && v(t, r, s), s;
+};
+let i = class extends c {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.hideRatingText = !1;
+  }
+  get displayValue() {
+    if (this.value === void 0 || this.value === null || this.value < 0) return 0;
+    const e = Math.max(0, Math.min(5, this.value)), t = Math.floor(e), r = Number((e - t).toFixed(2));
+    return t + Math.round(r / 0.5) * 0.5;
+  }
+  get classes() {
+    return {
+      container: !0,
+      disabled: this.disabled
+    };
+  }
+  getStarIconName(e, t) {
+    return t >= e ? "star-filled" : t >= e - 0.5 ? "half-star-filled" : "star";
+  }
+  get starsTemplate() {
+    const e = this.displayValue, t = [];
+    for (let r = 1; r <= 5; r++) {
+      const a = this.getStarIconName(r, e);
+      a && t.push(
+        this.componentFactory.createIcon({
+          class: "star-icon",
+          "icon-name": a,
+          size: 16
+        })
+      );
+    }
+    return t;
+  }
+  render() {
+    const e = this.value !== void 0 && this.value >= 0 ? this.value : 0, r = Math.max(0, Math.min(5, e)).toString();
+    return p`
+            <div class=${d(this.classes)} aria-label=${`Rating: ${r} out of 5`} role="img">
+                <div class="stars-wrapper">${this.starsTemplate}</div>
+                ${this.hideRatingText ? "" : p`<span class="rating-text">${r}</span>`}
+            </div>
+        `;
+  }
+};
+i.styles = [f];
+o([
+  m({ type: Number })
+], i.prototype, "value", 2);
+o([
+  m({ type: Boolean, converter: u, reflect: !0 })
+], i.prototype, "disabled", 2);
+o([
+  m({ type: Boolean, converter: u, attribute: "hide-rating-text" })
+], i.prototype, "hideRatingText", 2);
+i = o([
+  h("ds-rating")
+], i);
+export {
+  i as DsRating
+};

package/dist/components/ds-rating/ds-rating.test.d.ts

@@ -0,0 +1,8 @@
+import type { DsRating } from './ds-rating';
+import './ds-rating';
+import '../ds-theme-provider/ds-theme-provider.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-rating': DsRating;
+    }
+}

package/dist/components/ds-rating/ds-rating.types.d.ts

@@ -0,0 +1,6 @@
+import type { CommonAttrs } from '../../types/types.ts';
+export type DsRatingAttrs = {
+    value?: number;
+    disabled?: boolean;
+    'hide-rating-text'?: boolean;
+} & CommonAttrs;

package/dist/components/ds-rating/styles/common.styles.d.ts

@@ -0,0 +1 @@
+export declare const commonStyles: import("lit").CSSResult;

package/dist/components/ds-rating/styles/common.styles.js

@@ -0,0 +1,14 @@
+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 e = r`
+    .container,
+    .stars-wrapper {
+        display: flex;
+        align-items: center;
+    }
+`;
+export {
+  e as commonStyles
+};

package/dist/components/ds-theme-provider/ds-theme-provider.js

@@ -53,7 +53,7 @@ let m = class extends $ {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/1.0.0-canary.13", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.0.0-canary.14", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");

package/dist/components/index.d.ts

@@ -27,9 +27,10 @@ import './ds-password-input/ds-password-input.ts';
 import './ds-picker-item/ds-picker-item.ts';
 import './ds-portal/ds-portal.ts';
 import './ds-progress-bar/ds-progress-bar.ts';
+import './ds-radio/ds-radio.ts';
 import './ds-radio-button/ds-radio-button.ts';
 import './ds-radio-group/ds-radio-group.ts';
-import './ds-radio/ds-radio.ts';
+import './ds-rating/ds-rating.ts';
 import './ds-search-input/ds-search-input.ts';
 import './ds-search/ds-search.ts';
 import './ds-secondary-navigation/ds-secondary-navigation.ts';

package/dist/index.js

@@ -27,9 +27,10 @@ import "./components/ds-password-input/ds-password-input.js";
 import "./components/ds-picker-item/ds-picker-item.js";
 import "./components/ds-portal/ds-portal.js";
 import "./components/ds-progress-bar/ds-progress-bar.js";
+import "./components/ds-radio/ds-radio.js";
 import "./components/ds-radio-button/ds-radio-button.js";
 import "./components/ds-radio-group/ds-radio-group.js";
-import "./components/ds-radio/ds-radio.js";
+import "./components/ds-rating/ds-rating.js";
 import "./components/ds-search-input/ds-search-input.js";
 import "./components/ds-search/ds-search.js";
 import "./components/ds-secondary-navigation/ds-secondary-navigation.js";
@@ -54,7 +55,7 @@ import "./components/ds-static-box/ds-static-box.js";
 import "./components/ds-interactive-card/ds-interactive-card.js";
 import "./components/ds-radio-button-group/ds-radio-button-group.js";
 import "./components/ds-sidebar-navigation/ds-sidebar-navigation.js";
-import { iconNames as po } from "./components/ds-icon/iconNames.js";
+import { iconNames as to } from "./components/ds-icon/iconNames.js";
 export {
-  po as iconNames
+  to as iconNames
 };

package/dist/utils/StylesRegistry/StylesRegistry.js

@@ -5,7 +5,7 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const c = `https://ds-assets.cupra.com/1.0.0-canary.13/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      const c = `https://ds-assets.cupra.com/1.0.0-canary.14/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
       if (r) return r;
       const i = this.fetchStyle({ url: c }).then((n) => (n || this.stylePromises.delete(c), n));
       return this.stylePromises.set(c, i), this.stylePromises.get(c);

package/dist/utils/cssWithTokens.js

@@ -3,7 +3,7 @@ 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 { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 function x(t, ...r) {
-  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-13"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-14"), i = n(e);
   return o`${i}`;
 }
 export {

package/dist/utils/htmlWithTokens.js

@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 function x(t, ...r) {
-  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-13"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-14"), e = i(o);
   return n`${e}`;
 }
 export {

package/dist-react/components/ds-rating/ds-rating.d.ts

@@ -0,0 +1,14 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-icon/ds-icon.ts';
+import type { DsRatingAttrs } from './ds-rating.types';
+export declare class DsRating extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    value: DsRatingAttrs['value'];
+    disabled: DsRatingAttrs['disabled'];
+    hideRatingText: DsRatingAttrs['hide-rating-text'];
+    private get displayValue();
+    private get classes();
+    private getStarIconName;
+    protected get starsTemplate(): any[];
+    render(): import("lit").TemplateResult<1>;
+}

package/dist-react/components/ds-rating/ds-rating.js

@@ -0,0 +1,73 @@
+import { UiKitElement as c } from "../base/UiKitElement.js";
+import { customUiKitElement as h } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as u } 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 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 m } 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 "../ds-icon/ds-icon.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, t, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? g(t, r) : t, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (s = (a ? n(t, r, s) : n(s)) || s);
+  return a && s && v(t, r, s), s;
+};
+let i = class extends c {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.hideRatingText = !1;
+  }
+  get displayValue() {
+    if (this.value === void 0 || this.value === null || this.value < 0) return 0;
+    const e = Math.max(0, Math.min(5, this.value)), t = Math.floor(e), r = Number((e - t).toFixed(2));
+    return t + Math.round(r / 0.5) * 0.5;
+  }
+  get classes() {
+    return {
+      container: !0,
+      disabled: this.disabled
+    };
+  }
+  getStarIconName(e, t) {
+    return t >= e ? "star-filled" : t >= e - 0.5 ? "half-star-filled" : "star";
+  }
+  get starsTemplate() {
+    const e = this.displayValue, t = [];
+    for (let r = 1; r <= 5; r++) {
+      const a = this.getStarIconName(r, e);
+      a && t.push(
+        this.componentFactory.createIcon({
+          class: "star-icon",
+          "icon-name": a,
+          size: 16
+        })
+      );
+    }
+    return t;
+  }
+  render() {
+    const e = this.value !== void 0 && this.value >= 0 ? this.value : 0, r = Math.max(0, Math.min(5, e)).toString();
+    return p`
+            <div class=${d(this.classes)} aria-label=${`Rating: ${r} out of 5`} role="img">
+                <div class="stars-wrapper">${this.starsTemplate}</div>
+                ${this.hideRatingText ? "" : p`<span class="rating-text">${r}</span>`}
+            </div>
+        `;
+  }
+};
+i.styles = [f];
+o([
+  m({ type: Number })
+], i.prototype, "value", 2);
+o([
+  m({ type: Boolean, converter: u, reflect: !0 })
+], i.prototype, "disabled", 2);
+o([
+  m({ type: Boolean, converter: u, attribute: "hide-rating-text" })
+], i.prototype, "hideRatingText", 2);
+i = o([
+  h("ds-rating")
+], i);
+export {
+  i as DsRating
+};

package/dist-react/components/ds-rating/ds-rating.test.d.ts

@@ -0,0 +1,8 @@
+import type { DsRating } from './ds-rating';
+import './ds-rating';
+import '../ds-theme-provider/ds-theme-provider.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-rating': DsRating;
+    }
+}

package/dist-react/components/ds-rating/ds-rating.types.d.ts

@@ -0,0 +1,6 @@
+import type { CommonAttrs } from '../../types/types.ts';
+export type DsRatingAttrs = {
+    value?: number;
+    disabled?: boolean;
+    'hide-rating-text'?: boolean;
+} & CommonAttrs;

package/dist-react/components/ds-rating/styles/common.styles.d.ts

@@ -0,0 +1 @@
+export declare const commonStyles: import("lit").CSSResult;

package/dist-react/components/ds-rating/styles/common.styles.js

@@ -0,0 +1,14 @@
+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 e = r`
+    .container,
+    .stars-wrapper {
+        display: flex;
+        align-items: center;
+    }
+`;
+export {
+  e as commonStyles
+};

package/dist-react/components/ds-theme-provider/ds-theme-provider.js

@@ -53,7 +53,7 @@ let m = class extends $ {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/1.0.0-canary.13", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.0.0-canary.14", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");

package/dist-react/components/index.d.ts

@@ -27,9 +27,10 @@ import './ds-password-input/ds-password-input.ts';
 import './ds-picker-item/ds-picker-item.ts';
 import './ds-portal/ds-portal.ts';
 import './ds-progress-bar/ds-progress-bar.ts';
+import './ds-radio/ds-radio.ts';
 import './ds-radio-button/ds-radio-button.ts';
 import './ds-radio-group/ds-radio-group.ts';
-import './ds-radio/ds-radio.ts';
+import './ds-rating/ds-rating.ts';
 import './ds-search-input/ds-search-input.ts';
 import './ds-search/ds-search.ts';
 import './ds-secondary-navigation/ds-secondary-navigation.ts';

package/dist-react/index.js

@@ -27,9 +27,10 @@ import "./components/ds-password-input/ds-password-input.js";
 import "./components/ds-picker-item/ds-picker-item.js";
 import "./components/ds-portal/ds-portal.js";
 import "./components/ds-progress-bar/ds-progress-bar.js";
+import "./components/ds-radio/ds-radio.js";
 import "./components/ds-radio-button/ds-radio-button.js";
 import "./components/ds-radio-group/ds-radio-group.js";
-import "./components/ds-radio/ds-radio.js";
+import "./components/ds-rating/ds-rating.js";
 import "./components/ds-search-input/ds-search-input.js";
 import "./components/ds-search/ds-search.js";
 import "./components/ds-secondary-navigation/ds-secondary-navigation.js";
@@ -54,7 +55,7 @@ import "./components/ds-static-box/ds-static-box.js";
 import "./components/ds-interactive-card/ds-interactive-card.js";
 import "./components/ds-radio-button-group/ds-radio-button-group.js";
 import "./components/ds-sidebar-navigation/ds-sidebar-navigation.js";
-import { iconNames as po } from "./components/ds-icon/iconNames.js";
+import { iconNames as to } from "./components/ds-icon/iconNames.js";
 export {
-  po as iconNames
+  to as iconNames
 };

package/dist-react/utils/StylesRegistry/StylesRegistry.js

@@ -5,7 +5,7 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const c = `https://ds-assets.cupra.com/1.0.0-canary.13/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      const c = `https://ds-assets.cupra.com/1.0.0-canary.14/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
       if (r) return r;
       const i = this.fetchStyle({ url: c }).then((n) => (n || this.stylePromises.delete(c), n));
       return this.stylePromises.set(c, i), this.stylePromises.get(c);

package/dist-react/utils/cssWithTokens.js

@@ -3,7 +3,7 @@ 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 { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 function x(t, ...r) {
-  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-13"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-14"), i = n(e);
   return o`${i}`;
 }
 export {

package/dist-react/utils/htmlWithTokens.js

@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 function x(t, ...r) {
-  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-13"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-14"), e = i(o);
   return n`${e}`;
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-kit",
-  "version": "1.0.0-canary.13",
+  "version": "1.0.0-canary.14",
   "description": "Web components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",