wj-elements 0.7.7 → 0.8.0

package/dist/wje-rate.js

@@ -1,322 +1,118 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Rate ]\n*/\n\n:host {\n    display: flex;\n    color: var(--wje-rate-color);\n}\n\n:host([readonly]) .wje-rate-icon {\n    cursor: default;\n}\n\n.native-rate {\n    position: relative;\n    display: flex;\n    gap: var(--wje-rate-gap);\n}\n\n.wje-rate-icon {\n    position: relative;\n    cursor: pointer;\n}\n\n.selected {\n    color: var(--wje-rate-selected-color);\n}\n\n:host(:not([readonly])) .wje-rate-icon:hover {\n    transform: scale(1.2);\n}\n\nwje-icon:first-child {\n    color: var(--wje-rate-color);\n}\n\nwje-icon:last-child {\n    color: currentColor;\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n\n:host([disabled]) .native-rate {\n    pointer-events: none;\n    opacity: 0.5;\n}\n";
-class Rate extends WJElement {
-  /**
-   * Creates an instance of Rate.
-   * @class
-   */
+import t from "./wje-element.js";
+class e extends t {
   constructor() {
     super();
-    /**
-     * Sets the hover value of the rating component.
-     * @type {string}
-     */
     __publicField(this, "className", "Rate");
-    /**
-     * Event handler for the mouse enter event.
-     * @param {Event} e The event.
-     */
-    __publicField(this, "onMouseEnter", (e) => {
-      e.preventDefault();
-      this.hoverValue = this.getValueFromXPosition(e.clientX);
-      this.changeRate();
+    __publicField(this, "onMouseEnter", (t2) => {
+      t2.preventDefault(), this.hoverValue = this.getValueFromXPosition(t2.clientX), this.changeRate();
     });
-    /**
-     * Event handler for the mouse leave event.
-     * @param {Event} e The event.
-     */
-    __publicField(this, "onMouseLeave", (e) => {
-      e.preventDefault();
-      this.hoverValue = 0;
-      this.changeRate();
+    __publicField(this, "onMouseLeave", (t2) => {
+      t2.preventDefault(), this.hoverValue = 0, this.changeRate();
     });
-    /**
-     * Event handler for the mouse move event.
-     * @param {Event} e The event.
-     */
-    __publicField(this, "onMouseMove", (e) => {
-      e.preventDefault();
-      let newValue = +this.getValueFromXPosition(e.clientX);
-      if (newValue !== +this.hoverValue) {
-        this.hoverValue = newValue;
-        this.changeRate();
-      }
+    __publicField(this, "onMouseMove", (t2) => {
+      t2.preventDefault();
+      let e2 = +this.getValueFromXPosition(t2.clientX);
+      e2 !== +this.hoverValue && (this.hoverValue = e2, this.changeRate());
     });
-    /**
-     * Event handler for the touch start event.
-     * @param {Event} e The event.
-     */
-    __publicField(this, "onTouchStart", (e) => {
-      e.preventDefault();
-      this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);
-      this.changeRate();
+    __publicField(this, "onTouchStart", (t2) => {
+      t2.preventDefault(), this.hoverValue = this.getValueFromXPosition(t2.touches[0].clientX), this.changeRate();
     });
-    /**
-     * Event handler for the touch end event.
-     * @param {Event} e The event.
-     */
-    __publicField(this, "onTouchEnd", (e) => {
-      e.preventDefault();
-      this.hoverValue = 0;
-      this.changeRate();
+    __publicField(this, "onTouchEnd", (t2) => {
+      t2.preventDefault(), this.hoverValue = 0, this.changeRate();
     });
-    /**
-     * Event handler for the touch move event.
-     * @param {Event} e The event.
-     */
-    __publicField(this, "onTouchMove", (e) => {
-      e.preventDefault();
-      this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);
-      this.changeRate();
+    __publicField(this, "onTouchMove", (t2) => {
+      t2.preventDefault(), this.hoverValue = this.getValueFromXPosition(t2.touches[0].clientX), this.changeRate();
     });
-    /**
-     * Event handler for the click event.
-     * @param {Event} e The event.
-     */
-    __publicField(this, "onClick", (e) => {
-      e.preventDefault();
-      this.value = +this.hoverValue;
+    __publicField(this, "onClick", (t2) => {
+      t2.preventDefault(), this.value = +this.hoverValue;
     });
   }
-  /**
-   * Sets the precision of the rating component.
-   * @param {number} value The value to set.
-   */
-  set precision(value) {
-    this.setAttribute("precision", value);
+  set precision(t2) {
+    this.setAttribute("precision", t2);
   }
-  /**
-   * Gets the precision of the rating component.
-   * @returns {number} The value of the precision.
-   */
   get precision() {
     return this.hasAttribute("precision") ? +this.getAttribute("precision") : 1;
   }
-  /**
-   * Sets the maximum value of the rating component.
-   * @param {number} value The value to set.
-   */
-  set max(value) {
-    this.setAttribute("max", value);
+  set max(t2) {
+    this.setAttribute("max", t2);
   }
-  /**
-   * Gets the maximum value of the rating component.
-   * @returns {number} The value of the maximum value.
-   */
   get max() {
     return this.hasAttribute("icons") ? this.icons.length : +this.getAttribute("max");
   }
-  /**
-   * Sets the icons of the rating component.
-   * @param {Array<string>} value The value to set.
-   */
-  set icons(value) {
-    return value;
+  set icons(t2) {
+    return t2;
   }
-  /**
-   * Gets the icons of the rating component.
-   * @returns {Array<string>} The value of the icons.
-   */
   get icons() {
     return this.hasAttribute("icons") ? JSON.parse(this.getAttribute("icons").replace(/'/g, '"')) : ["star"];
   }
-  /**
-   * Sets the value of the rating component.
-   * @param {number} value The value to set.
-   */
-  set value(value) {
-    this.setAttribute("value", value);
+  set value(t2) {
+    this.setAttribute("value", t2);
   }
-  /**
-   * Gets the value of the rating component.
-   * @returns {number} The value of the rating component.
-   */
   get value() {
     return this.hasAttribute("value") ? +this.getAttribute("value") : 0;
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ":host{display:flex;color:var(--wje-rate-color)}:host([readonly]) .wje-rate-icon{cursor:default}.native-rate{position:relative;display:flex;gap:var(--wje-rate-gap)}.wje-rate-icon{position:relative;cursor:pointer}.selected{color:var(--wje-rate-selected-color)}:host(:not([readonly])) .wje-rate-icon:hover{transform:scale(1.2)}wje-icon:first-child{color:var(--wje-rate-color)}wje-icon:last-child{color:currentColor;position:absolute;top:0;left:0}:host([disabled]) .native-rate{pointer-events:none;opacity:.5}";
   }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @static
-   * @returns {Array<string>}
-   */
   static get observedAttributes() {
     return ["is-hover", "value", "max", "disabled", "readonly"];
   }
-  /**
-   * Called when an attribute changes.
-   * @param {string} name The name of the attribute that changed.
-   * @param {string} old The old value of the attribute.
-   * @param {string} newName The new value of the attribute.
-   */
-  attributeChangedCallback(name, old, newName) {
-    if (super.attributeChangedCallback) {
-      super.attributeChangedCallback(name, old, newName);
-    }
-    if (old !== newName && name !== "is-hover") {
-      this.syncAria();
-    }
+  attributeChangedCallback(t2, e2, i) {
+    super.attributeChangedCallback && super.attributeChangedCallback(t2, e2, i), e2 !== i && "is-hover" !== t2 && this.syncAria();
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
-  /**
-   * Draws the component for the rating component.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-rate");
-    this.native = native;
-    if (this.hasAttribute("icons")) {
-      let icons = this.icons;
-      for (let i = 0; i < icons.length; i++) {
-        native.appendChild(this.createIcons(i));
-      }
-    } else {
-      for (let i = 0; i < this.max; i++) {
-        native.appendChild(this.createIcons(i));
-      }
-    }
-    this.changeRate();
-    fragment.appendChild(native);
-    return fragment;
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    if (e2.setAttribute("part", "native"), e2.classList.add("native-rate"), this.native = e2, this.hasAttribute("icons")) {
+      let t3 = this.icons;
+      for (let i = 0; i < t3.length; i++) e2.appendChild(this.createIcons(i));
+    } else for (let t3 = 0; t3 < this.max; t3++) e2.appendChild(this.createIcons(t3));
+    return this.changeRate(), t2.appendChild(e2), t2;
   }
-  /**
-   * Adds event listeners after the component is drawn.
-   */
   afterDraw() {
-    this.syncAria();
-    if (this.hasAttribute("disabled") || this.hasAttribute("readonly")) {
-      return;
-    }
-    this.addEventListener("mouseenter", this.onMouseEnter);
-    this.addEventListener("mouseleave", this.onMouseLeave);
-    this.addEventListener("mousemove", this.onMouseMove);
-    this.addEventListener("touchstart", this.onTouchStart);
-    this.addEventListener("touchend", this.onTouchEnd);
-    this.addEventListener("touchmove", this.onTouchMove);
-    this.addEventListener("click", this.onClick);
+    this.syncAria(), this.hasAttribute("disabled") || this.hasAttribute("readonly") || (this.addEventListener("mouseenter", this.onMouseEnter), this.addEventListener("mouseleave", this.onMouseLeave), this.addEventListener("mousemove", this.onMouseMove), this.addEventListener("touchstart", this.onTouchStart), this.addEventListener("touchend", this.onTouchEnd), this.addEventListener("touchmove", this.onTouchMove), this.addEventListener("click", this.onClick));
   }
-  /**
-   * Creates the icons for the rating component.
-   * @param {number} i The index of the icon.
-   * @returns {Element} The icon element.
-   */
-  createIcons(i) {
-    let div = document.createElement("div");
-    div.classList.add("wje-rate-icon");
-    let icon = this.getIcons(i);
-    let clone = icon.cloneNode(true);
-    div.appendChild(icon);
-    div.appendChild(clone);
-    return div;
+  createIcons(t2) {
+    let e2 = document.createElement("div");
+    e2.classList.add("wje-rate-icon");
+    let i = this.getIcons(t2), s = i.cloneNode(true);
+    return e2.appendChild(i), e2.appendChild(s), e2;
   }
-  /**
-   * Changes the rate of the rating component.
-   */
   changeRate() {
-    const icons = this.native.children;
-    const rateValue = this.value !== this.hoverValue && this.hoverValue !== 0 && this.hoverValue !== void 0 ? this.hoverValue : this.value;
-    for (let i = 0; i < icons.length; i++) {
-      const icon = icons[i];
-      const firstIcon = icon.querySelector("wje-icon:first-child");
-      const lastIcon = icon.querySelector("wje-icon:last-child");
-      const isSelected = i < rateValue;
-      const isPartial = rateValue > i && rateValue < i + 1;
-      if (isSelected) {
-        icon.classList.add("selected");
-        if (this.hasAttribute("selected") && this.getAttribute("selected") === "filled") {
-          lastIcon.setAttribute("filled", "");
-        }
-      } else {
-        icon.classList.remove("selected");
-        lastIcon.removeAttribute("filled");
-      }
-      if (isPartial) {
-        const percent = ((rateValue - i) * 100).toFixed(2);
-        icon.classList.add("half");
-        firstIcon.style.clipPath = `inset(0 0 0 ${percent}%)`;
-        lastIcon.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;
-        lastIcon.removeAttribute("hidden");
-      } else {
-        icon.classList.remove("half");
-        firstIcon.style.clipPath = ``;
-        lastIcon.style.clipPath = ``;
-        lastIcon.setAttribute("hidden", "");
-      }
-      icon.setAttribute("data-index", i);
-      icon.setAttribute("data-rate", rateValue);
+    const t2 = this.native.children, e2 = this.value !== this.hoverValue && 0 !== this.hoverValue && void 0 !== this.hoverValue ? this.hoverValue : this.value;
+    for (let i = 0; i < t2.length; i++) {
+      const s = t2[i], a = s.querySelector("wje-icon:first-child"), r = s.querySelector("wje-icon:last-child"), o = e2 > i && e2 < i + 1;
+      if (i < e2 ? (s.classList.add("selected"), this.hasAttribute("selected") && "filled" === this.getAttribute("selected") && r.setAttribute("filled", "")) : (s.classList.remove("selected"), r.removeAttribute("filled")), o) {
+        const t3 = (100 * (e2 - i)).toFixed(2);
+        s.classList.add("half"), a.style.clipPath = `inset(0 0 0 ${t3}%)`, r.style.clipPath = `inset(0 ${100 - t3}% 0 0)`, r.removeAttribute("hidden");
+      } else s.classList.remove("half"), a.style.clipPath = "", r.style.clipPath = "", r.setAttribute("hidden", "");
+      s.setAttribute("data-index", i), s.setAttribute("data-rate", e2);
     }
     this.syncAria();
   }
-  /**
-   * Sync ARIA attributes on host.
-   */
   syncAria() {
-    this.setAriaState({
-      role: "slider",
-      valuemin: 0,
-      valuemax: this.max,
-      valuenow: this.value,
-      disabled: this.hasAttribute("disabled"),
-      readonly: this.hasAttribute("readonly")
-    });
+    this.setAriaState({ role: "slider", valuemin: 0, valuemax: this.max, valuenow: this.value, disabled: this.hasAttribute("disabled"), readonly: this.hasAttribute("readonly") });
   }
-  /**
-   * Returns the icons for the rating component.
-   * @param {number} index The index of the icon.
-   * @returns {Element} The icon element.
-   */
-  getIcons(index) {
-    let icon = document.createElement("wje-icon");
-    icon.setAttribute("name", this.max ? this.icons[0] : this.icons[index]);
-    if (this.hasAttribute("filled")) icon.setAttribute("filled", "");
-    return icon;
+  getIcons(t2) {
+    let e2 = document.createElement("wje-icon");
+    return e2.setAttribute("name", this.max ? this.icons[0] : this.icons[t2]), this.hasAttribute("filled") && e2.setAttribute("filled", ""), e2;
   }
-  /**
-   * Returns the value from the x position.
-   * @param {number} coordinate The x coordinate.
-   * @returns {number} The value from the x position.
-   */
-  getValueFromXPosition(coordinate) {
-    const { left, right, width } = this.native.getBoundingClientRect();
-    const value = this.roundToPrecision((coordinate - left) / width * this.max, this.precision);
-    return Math.min(Math.max(value, 0), this.max);
+  getValueFromXPosition(t2) {
+    const { left: e2, right: i, width: s } = this.native.getBoundingClientRect(), a = this.roundToPrecision((t2 - e2) / s * this.max, this.precision);
+    return Math.min(Math.max(a, 0), this.max);
   }
-  /**
-   * Rounds a given number to the nearest specified precision.
-   * @param {number} numberToRound The number to be rounded.
-   * @param {number} [precision] The precision to which the number should be rounded.
-   * @returns {number} - The rounded number.
-   * @example
-   * roundToPrecision(2.3); // Returns 2.5
-   * roundToPrecision(2.3, 0.1); // Returns 2.3
-   * roundToPrecision(2.6, 1); // Returns 3
-   */
-  roundToPrecision(numberToRound, precision = 0.5) {
-    const multiplier = 1 / precision;
-    return Math.ceil(numberToRound * multiplier) / multiplier;
+  roundToPrecision(t2, e2 = 0.5) {
+    const i = 1 / e2;
+    return Math.ceil(t2 * i) / i;
   }
 }
-Rate.define("wje-rate", Rate);
+e.define("wje-rate", e);
 export {
-  Rate as default
+  e as default
 };
 //# sourceMappingURL=wje-rate.js.map

package/dist/wje-rate.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-rate.js","sources":["../packages/wje-rate/rate.element.js","../packages/wje-rate/rate.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Rate` is a custom web component that represents a rating component.\n * @summary This element represents a rating component.\n * @documentation https://elements.webjet.sk/components/rate\n * @status stable\n * @augments {WJElement}\n * @attribute {number} precision - The precision of the rating component.\n * @attribute {number} max - The maximum value of the rating component.\n * @attribute {Array<string>} icons - The icons of the rating component.\n * @csspart native - The native part of the rating component.\n * @cssproperty [--wje-rate-gap=.25rem] - Defines the spacing (gap) between individual items in the rating component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`) to adjust the distance between rating elements.\n * @cssproperty [--wje-rate-color=var(--wje-color-contrast-11)] - Specifies the default color of the rating items. Accepts any valid CSS color value, including named colors, hex values, RGB, or CSS variables.\n * @cssproperty [--wje-rate-selected-color=var(--wje-color-danger-9)] - Sets the color for selected or highlighted rating items. This property helps visually distinguish selected ratings. Accepts any valid CSS color value.\n * @tag wje-rate\n */\n\nexport default class Rate extends WJElement {\n    /**\n     * Creates an instance of Rate.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the precision of the rating component.\n     * @param {number} value The value to set.\n     */\n    set precision(value) {\n        this.setAttribute('precision', value);\n    }\n\n    /**\n     * Gets the precision of the rating component.\n     * @returns {number} The value of the precision.\n     */\n    get precision() {\n        return this.hasAttribute('precision') ? +this.getAttribute('precision') : 1;\n    }\n\n    /**\n     * Sets the maximum value of the rating component.\n     * @param {number} value The value to set.\n     */\n    set max(value) {\n        this.setAttribute('max', value);\n    }\n\n    /**\n     * Gets the maximum value of the rating component.\n     * @returns {number} The value of the maximum value.\n     */\n    get max() {\n        return this.hasAttribute('icons') ? this.icons.length : +this.getAttribute('max');\n    }\n\n    /**\n     * Sets the icons of the rating component.\n     * @param {Array<string>} value The value to set.\n     */\n    set icons(value) {\n        return value;\n    }\n\n    /**\n     * Gets the icons of the rating component.\n     * @returns {Array<string>} The value of the icons.\n     */\n    get icons() {\n        return this.hasAttribute('icons') ? JSON.parse(this.getAttribute('icons').replace(/'/g, '\"')) : ['star'];\n    }\n\n    /**\n     * Sets the value of the rating component.\n     * @param {number} value The value to set.\n     */\n    set value(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Gets the value of the rating component.\n     * @returns {number} The value of the rating component.\n     */\n    get value() {\n        return this.hasAttribute('value') ? +this.getAttribute('value') : 0;\n    }\n\n    /**\n     * Sets the hover value of the rating component.\n     * @type {string}\n     */\n    className = 'Rate';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['is-hover', 'value', 'max', 'disabled', 'readonly'];\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {string} name The name of the attribute that changed.\n     * @param {string} old The old value of the attribute.\n     * @param {string} newName The new value of the attribute.\n     */\n    attributeChangedCallback(name, old, newName) {\n        if (super.attributeChangedCallback) {\n            super.attributeChangedCallback(name, old, newName);\n        }\n\n        if (name === 'is-hover') {\n            // this.draw();\n        }\n\n        if (old !== newName && name !== 'is-hover') {\n            this.syncAria();\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the rating component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-rate');\n\n        this.native = native;\n\n        if (this.hasAttribute('icons')) {\n            let icons = this.icons;\n            for (let i = 0; i < icons.length; i++) {\n                native.appendChild(this.createIcons(i));\n            }\n        } else {\n            for (let i = 0; i < this.max; i++) {\n                native.appendChild(this.createIcons(i));\n            }\n        }\n\n        this.changeRate();\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.syncAria();\n        if (this.hasAttribute('disabled') || this.hasAttribute('readonly')) {\n            return;\n        }\n\n        this.addEventListener('mouseenter', this.onMouseEnter);\n        this.addEventListener('mouseleave', this.onMouseLeave);\n        this.addEventListener('mousemove', this.onMouseMove);\n        this.addEventListener('touchstart', this.onTouchStart);\n        this.addEventListener('touchend', this.onTouchEnd);\n        this.addEventListener('touchmove', this.onTouchMove);\n        this.addEventListener('click', this.onClick);\n    }\n\n    /**\n     * Creates the icons for the rating component.\n     * @param {number} i The index of the icon.\n     * @returns {Element} The icon element.\n     */\n    createIcons(i) {\n        let div = document.createElement('div');\n        div.classList.add('wje-rate-icon');\n\n        let icon = this.getIcons(i);\n        let clone = icon.cloneNode(true);\n\n        div.appendChild(icon);\n        div.appendChild(clone);\n\n        return div;\n    }\n\n    /**\n     * Changes the rate of the rating component.\n     */\n    changeRate() {\n        const icons = this.native.children;\n        const rateValue =\n            this.value !== this.hoverValue && this.hoverValue !== 0 && this.hoverValue !== undefined\n                ? this.hoverValue\n                : this.value;\n\n        for (let i = 0; i < icons.length; i++) {\n            const icon = icons[i];\n            const firstIcon = icon.querySelector('wje-icon:first-child');\n            const lastIcon = icon.querySelector('wje-icon:last-child');\n\n            const isSelected = i < rateValue;\n            const isPartial = rateValue > i && rateValue < i + 1;\n\n            if (isSelected) {\n                icon.classList.add('selected');\n                if (this.hasAttribute('selected') && this.getAttribute('selected') === 'filled') {\n                    lastIcon.setAttribute('filled', '');\n                }\n            } else {\n                icon.classList.remove('selected');\n                lastIcon.removeAttribute('filled');\n            }\n\n            if (isPartial) {\n                const percent = ((rateValue - i) * 100).toFixed(2);\n                icon.classList.add('half');\n\n                firstIcon.style.clipPath = `inset(0 0 0 ${percent}%)`;\n                lastIcon.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;\n\n                lastIcon.removeAttribute('hidden');\n            } else {\n                icon.classList.remove('half');\n                firstIcon.style.clipPath = ``;\n                lastIcon.style.clipPath = ``;\n                lastIcon.setAttribute('hidden', '');\n            }\n\n            icon.setAttribute('data-index', i);\n            icon.setAttribute('data-rate', rateValue);\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        this.setAriaState({\n            role: 'slider',\n            valuemin: 0,\n            valuemax: this.max,\n            valuenow: this.value,\n            disabled: this.hasAttribute('disabled'),\n            readonly: this.hasAttribute('readonly'),\n        });\n    }\n\n    /**\n     * Event handler for the mouse enter event.\n     * @param {Event} e The event.\n     */\n    onMouseEnter = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the mouse leave event.\n     * @param {Event} e The event.\n     */\n    onMouseLeave = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = 0;\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the mouse move event.\n     * @param {Event} e The event.\n     */\n    onMouseMove = (e) => {\n        e.preventDefault();\n\n        let newValue = +this.getValueFromXPosition(e.clientX);\n        if (newValue !== +this.hoverValue) {\n            this.hoverValue = newValue;\n            this.changeRate();\n        }\n    };\n\n    /**\n     * Event handler for the touch start event.\n     * @param {Event} e The event.\n     */\n    onTouchStart = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the touch end event.\n     * @param {Event} e The event.\n     */\n    onTouchEnd = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = 0;\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the touch move event.\n     * @param {Event} e The event.\n     */\n    onTouchMove = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the click event.\n     * @param {Event} e The event.\n     */\n    onClick = (e) => {\n        e.preventDefault();\n\n        this.value = +this.hoverValue;\n    };\n\n    /**\n     * Returns the icons for the rating component.\n     * @param {number} index The index of the icon.\n     * @returns {Element} The icon element.\n     */\n    getIcons(index) {\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', this.max ? this.icons[0] : this.icons[index]);\n\n        if (this.hasAttribute('filled')) icon.setAttribute('filled', '');\n\n        return icon;\n    }\n\n    /**\n     * Returns the value from the x position.\n     * @param {number} coordinate The x coordinate.\n     * @returns {number} The value from the x position.\n     */\n    getValueFromXPosition(coordinate) {\n        const { left, right, width } = this.native.getBoundingClientRect();\n        const value = this.roundToPrecision(((coordinate - left) / width) * this.max, this.precision);\n\n        return Math.min(Math.max(value, 0), this.max);\n    }\n\n    /**\n     * Rounds a given number to the nearest specified precision.\n     * @param {number} numberToRound The number to be rounded.\n     * @param {number} [precision] The precision to which the number should be rounded.\n     * @returns {number} - The rounded number.\n     * @example\n     * roundToPrecision(2.3); // Returns 2.5\n     * roundToPrecision(2.3, 0.1); // Returns 2.3\n     * roundToPrecision(2.6, 1); // Returns 3\n     */\n    roundToPrecision(numberToRound, precision = 0.5) {\n        const multiplier = 1 / precision;\n        return Math.ceil(numberToRound * multiplier) / multiplier;\n    }\n}\n","import Rate from './rate.element.js';\n\nexport default Rate;\n\nRate.define('wje-rate', Rate);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-rate.js","sources":["../packages/wje-rate/rate.element.js","../packages/wje-rate/rate.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Rate` is a custom web component that represents a rating component.\n * @summary This element represents a rating component.\n * @documentation https://elements.webjet.sk/components/rate\n * @status stable\n * @augments {WJElement}\n * @attribute {number} precision - The precision of the rating component.\n * @attribute {number} max - The maximum value of the rating component.\n * @attribute {Array<string>} icons - The icons of the rating component.\n * @csspart native - The native part of the rating component.\n * @cssproperty [--wje-rate-gap=.25rem] - Defines the spacing (gap) between individual items in the rating component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`) to adjust the distance between rating elements.\n * @cssproperty [--wje-rate-color=var(--wje-color-contrast-11)] - Specifies the default color of the rating items. Accepts any valid CSS color value, including named colors, hex values, RGB, or CSS variables.\n * @cssproperty [--wje-rate-selected-color=var(--wje-color-danger-9)] - Sets the color for selected or highlighted rating items. This property helps visually distinguish selected ratings. Accepts any valid CSS color value.\n * @tag wje-rate\n */\n\nexport default class Rate extends WJElement {\n    /**\n     * Creates an instance of Rate.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the precision of the rating component.\n     * @param {number} value The value to set.\n     */\n    set precision(value) {\n        this.setAttribute('precision', value);\n    }\n\n    /**\n     * Gets the precision of the rating component.\n     * @returns {number} The value of the precision.\n     */\n    get precision() {\n        return this.hasAttribute('precision') ? +this.getAttribute('precision') : 1;\n    }\n\n    /**\n     * Sets the maximum value of the rating component.\n     * @param {number} value The value to set.\n     */\n    set max(value) {\n        this.setAttribute('max', value);\n    }\n\n    /**\n     * Gets the maximum value of the rating component.\n     * @returns {number} The value of the maximum value.\n     */\n    get max() {\n        return this.hasAttribute('icons') ? this.icons.length : +this.getAttribute('max');\n    }\n\n    /**\n     * Sets the icons of the rating component.\n     * @param {Array<string>} value The value to set.\n     */\n    set icons(value) {\n        return value;\n    }\n\n    /**\n     * Gets the icons of the rating component.\n     * @returns {Array<string>} The value of the icons.\n     */\n    get icons() {\n        return this.hasAttribute('icons') ? JSON.parse(this.getAttribute('icons').replace(/'/g, '\"')) : ['star'];\n    }\n\n    /**\n     * Sets the value of the rating component.\n     * @param {number} value The value to set.\n     */\n    set value(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Gets the value of the rating component.\n     * @returns {number} The value of the rating component.\n     */\n    get value() {\n        return this.hasAttribute('value') ? +this.getAttribute('value') : 0;\n    }\n\n    /**\n     * Sets the hover value of the rating component.\n     * @type {string}\n     */\n    className = 'Rate';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['is-hover', 'value', 'max', 'disabled', 'readonly'];\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {string} name The name of the attribute that changed.\n     * @param {string} old The old value of the attribute.\n     * @param {string} newName The new value of the attribute.\n     */\n    attributeChangedCallback(name, old, newName) {\n        if (super.attributeChangedCallback) {\n            super.attributeChangedCallback(name, old, newName);\n        }\n\n        if (name === 'is-hover') {\n            // this.draw();\n        }\n\n        if (old !== newName && name !== 'is-hover') {\n            this.syncAria();\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the rating component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-rate');\n\n        this.native = native;\n\n        if (this.hasAttribute('icons')) {\n            let icons = this.icons;\n            for (let i = 0; i < icons.length; i++) {\n                native.appendChild(this.createIcons(i));\n            }\n        } else {\n            for (let i = 0; i < this.max; i++) {\n                native.appendChild(this.createIcons(i));\n            }\n        }\n\n        this.changeRate();\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.syncAria();\n        if (this.hasAttribute('disabled') || this.hasAttribute('readonly')) {\n            return;\n        }\n\n        this.addEventListener('mouseenter', this.onMouseEnter);\n        this.addEventListener('mouseleave', this.onMouseLeave);\n        this.addEventListener('mousemove', this.onMouseMove);\n        this.addEventListener('touchstart', this.onTouchStart);\n        this.addEventListener('touchend', this.onTouchEnd);\n        this.addEventListener('touchmove', this.onTouchMove);\n        this.addEventListener('click', this.onClick);\n    }\n\n    /**\n     * Creates the icons for the rating component.\n     * @param {number} i The index of the icon.\n     * @returns {Element} The icon element.\n     */\n    createIcons(i) {\n        let div = document.createElement('div');\n        div.classList.add('wje-rate-icon');\n\n        let icon = this.getIcons(i);\n        let clone = icon.cloneNode(true);\n\n        div.appendChild(icon);\n        div.appendChild(clone);\n\n        return div;\n    }\n\n    /**\n     * Changes the rate of the rating component.\n     */\n    changeRate() {\n        const icons = this.native.children;\n        const rateValue =\n            this.value !== this.hoverValue && this.hoverValue !== 0 && this.hoverValue !== undefined\n                ? this.hoverValue\n                : this.value;\n\n        for (let i = 0; i < icons.length; i++) {\n            const icon = icons[i];\n            const firstIcon = icon.querySelector('wje-icon:first-child');\n            const lastIcon = icon.querySelector('wje-icon:last-child');\n\n            const isSelected = i < rateValue;\n            const isPartial = rateValue > i && rateValue < i + 1;\n\n            if (isSelected) {\n                icon.classList.add('selected');\n                if (this.hasAttribute('selected') && this.getAttribute('selected') === 'filled') {\n                    lastIcon.setAttribute('filled', '');\n                }\n            } else {\n                icon.classList.remove('selected');\n                lastIcon.removeAttribute('filled');\n            }\n\n            if (isPartial) {\n                const percent = ((rateValue - i) * 100).toFixed(2);\n                icon.classList.add('half');\n\n                firstIcon.style.clipPath = `inset(0 0 0 ${percent}%)`;\n                lastIcon.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;\n\n                lastIcon.removeAttribute('hidden');\n            } else {\n                icon.classList.remove('half');\n                firstIcon.style.clipPath = ``;\n                lastIcon.style.clipPath = ``;\n                lastIcon.setAttribute('hidden', '');\n            }\n\n            icon.setAttribute('data-index', i);\n            icon.setAttribute('data-rate', rateValue);\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        this.setAriaState({\n            role: 'slider',\n            valuemin: 0,\n            valuemax: this.max,\n            valuenow: this.value,\n            disabled: this.hasAttribute('disabled'),\n            readonly: this.hasAttribute('readonly'),\n        });\n    }\n\n    /**\n     * Event handler for the mouse enter event.\n     * @param {Event} e The event.\n     */\n    onMouseEnter = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the mouse leave event.\n     * @param {Event} e The event.\n     */\n    onMouseLeave = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = 0;\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the mouse move event.\n     * @param {Event} e The event.\n     */\n    onMouseMove = (e) => {\n        e.preventDefault();\n\n        let newValue = +this.getValueFromXPosition(e.clientX);\n        if (newValue !== +this.hoverValue) {\n            this.hoverValue = newValue;\n            this.changeRate();\n        }\n    };\n\n    /**\n     * Event handler for the touch start event.\n     * @param {Event} e The event.\n     */\n    onTouchStart = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the touch end event.\n     * @param {Event} e The event.\n     */\n    onTouchEnd = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = 0;\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the touch move event.\n     * @param {Event} e The event.\n     */\n    onTouchMove = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the click event.\n     * @param {Event} e The event.\n     */\n    onClick = (e) => {\n        e.preventDefault();\n\n        this.value = +this.hoverValue;\n    };\n\n    /**\n     * Returns the icons for the rating component.\n     * @param {number} index The index of the icon.\n     * @returns {Element} The icon element.\n     */\n    getIcons(index) {\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', this.max ? this.icons[0] : this.icons[index]);\n\n        if (this.hasAttribute('filled')) icon.setAttribute('filled', '');\n\n        return icon;\n    }\n\n    /**\n     * Returns the value from the x position.\n     * @param {number} coordinate The x coordinate.\n     * @returns {number} The value from the x position.\n     */\n    getValueFromXPosition(coordinate) {\n        const { left, right, width } = this.native.getBoundingClientRect();\n        const value = this.roundToPrecision(((coordinate - left) / width) * this.max, this.precision);\n\n        return Math.min(Math.max(value, 0), this.max);\n    }\n\n    /**\n     * Rounds a given number to the nearest specified precision.\n     * @param {number} numberToRound The number to be rounded.\n     * @param {number} [precision] The precision to which the number should be rounded.\n     * @returns {number} - The rounded number.\n     * @example\n     * roundToPrecision(2.3); // Returns 2.5\n     * roundToPrecision(2.3, 0.1); // Returns 2.3\n     * roundToPrecision(2.6, 1); // Returns 3\n     */\n    roundToPrecision(numberToRound, precision = 0.5) {\n        const multiplier = 1 / precision;\n        return Math.ceil(numberToRound * multiplier) / multiplier;\n    }\n}\n","import Rate from './rate.element.js';\n\nexport default Rate;\n\nRate.define('wje-rate', Rate);\n"],"names":["Rate","WJElement","constructor","super","className","onMouseEnter","e","preventDefault","this","hoverValue","getValueFromXPosition","clientX","changeRate","onMouseLeave","onMouseMove","newValue","onTouchStart","touches","onTouchEnd","onTouchMove","onClick","value","setAttribute","precision","hasAttribute","getAttribute","max","icons","length","JSON","parse","replace","cssStyleSheet","observedAttributes","name","old","newName","attributeChangedCallback","syncAria","setupAttributes","isShadowRoot","draw","fragment","document","createDocumentFragment","native","createElement","classList","add","i","appendChild","createIcons","addEventListener","div","icon","getIcons","clone","cloneNode","children","rateValue","firstIcon","querySelector","lastIcon","isPartial","remove","removeAttribute","percent","toFixed","style","clipPath","setAriaState","role","valuemin","valuemax","valuenow","disabled","readonly","index","coordinate","left","right","width","getBoundingClientRect","roundToPrecision","Math","min","numberToRound","multiplier","ceil","define"],"mappings":"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"}

package/dist/wje-relative-time.js

@@ -1,128 +1,53 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { Localizer } from "./localize.js";
-import WJElement from "./wje-element.js";
-class RelativeTime extends WJElement {
-  /**
-   * Creates an instance of RelativeTime.
-   * @class
-   */
+import { Localizer as t } from "./localize.js";
+import e from "./wje-element.js";
+class i extends e {
   constructor() {
     super();
-    /**
-     * Sets the lang of the relative time component.
-     * @type {string}
-     */
     __publicField(this, "className", "RelativeTime");
-    this.localizer = new Localizer(this);
+    this.localizer = new t(this);
   }
-  /**
-   * Sets the date of the relative time component.
-   * @param value
-   */
-  set date(value) {
-    this.setAttribute("date", value);
+  set date(t2) {
+    this.setAttribute("date", t2);
   }
-  /**
-   * Gets the date of the relative time component.
-   * @returns {string}
-   */
   get date() {
     return this.getAttribute("date");
   }
-  /**
-   * Sets the object date of the relative time component.
-   * @param value
-   */
-  set objectDate(value) {
-    this.setAttribute("object-date", value);
+  set objectDate(t2) {
+    this.setAttribute("object-date", t2);
   }
-  /**
-   * Gets the object date of the relative time component.
-   * @returns {Date}
-   */
   get objectDate() {
-    let date = /* @__PURE__ */ new Date();
-    let inputDate = this.date;
-    if (!!inputDate && inputDate !== "") {
-      inputDate = this.isISODate(inputDate) ? inputDate : +inputDate * 1e3;
-      date = new Date(inputDate);
-    }
-    return date;
+    let t2 = /* @__PURE__ */ new Date(), e2 = this.date;
+    return e2 && "" !== e2 && (e2 = this.isISODate(e2) ? e2 : 1e3 * +e2, t2 = new Date(e2)), t2;
   }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @static
-   * @returns {Array<string>}
-   */
   static get observedAttributes() {
     return ["date", "lang"];
   }
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(t2, e2, i2) {
     var _a;
-    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
-    if (oldValue === newValue) return;
-    if (this.native) {
-      this.native.innerText = this.getRelativeTimeString();
-      if (this.date) this.native.setAttribute("datetime", this.date);
-      else this.native.removeAttribute("datetime");
-    }
+    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, t2, e2, i2), e2 !== i2 && this.native && (this.native.innerText = this.getRelativeTimeString(), this.date ? this.native.setAttribute("datetime", this.date) : this.native.removeAttribute("datetime"));
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.setAriaState({ role: "status" });
+    this.isShadowRoot = "open", this.setAriaState({ role: "status" });
   }
-  /**
-   * Draws the component for the relative time.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("div");
-    element.setAttribute("part", "native");
-    element.classList.add("native-relative-time");
-    element.innerText = this.getRelativeTimeString();
-    if (this.date) element.setAttribute("datetime", this.date);
-    fragment.appendChild(element);
-    this.native = element;
-    return fragment;
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    return e2.setAttribute("part", "native"), e2.classList.add("native-relative-time"), e2.innerText = this.getRelativeTimeString(), this.date && e2.setAttribute("datetime", this.date), t2.appendChild(e2), this.native = e2, t2;
   }
-  /**
-   * Returns the relative time string for the given date.
-   */
-  getRelativeTimeString(lang = navigator.language) {
-    if (this.objectDate.toString() === "Invalid Date" || this.objectDate.toString() === "NaN") {
-      return "";
-    }
-    const timeMs = this.objectDate.getTime();
-    const deltaSeconds = Math.round((timeMs - Date.now()) / 1e3);
-    const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];
-    const units = ["second", "minute", "hour", "day", "week", "month", "year"];
-    const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(deltaSeconds));
-    const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
-    return this.localizer.relativeTime(
-      this.getAttribute("lang"),
-      Math.trunc(deltaSeconds / divisor),
-      units[unitIndex],
-      { numeric: "auto" }
-    );
+  getRelativeTimeString(t2 = navigator.language) {
+    if ("Invalid Date" === this.objectDate.toString() || "NaN" === this.objectDate.toString()) return "";
+    const e2 = this.objectDate.getTime(), i2 = Math.round((e2 - Date.now()) / 1e3), a = [60, 3600, 86400, 604800, 2592e3, 31536e3, 1 / 0], r = a.findIndex((t3) => t3 > Math.abs(i2)), s = r ? a[r - 1] : 1;
+    return this.localizer.relativeTime(this.getAttribute("lang"), Math.trunc(i2 / s), ["second", "minute", "hour", "day", "week", "month", "year"][r], { numeric: "auto" });
   }
-  /**
-   * Checks if the given string is an ISO date.
-   * @param {string} str The string to check.
-   * @returns {boolean} True if the string is an ISO date, false otherwise.
-   */
-  isISODate(str) {
-    const date = new Date(str);
-    return !isNaN(date.getTime());
+  isISODate(t2) {
+    const e2 = new Date(t2);
+    return !isNaN(e2.getTime());
   }
 }
-RelativeTime.define("wje-relative-time", RelativeTime);
+i.define("wje-relative-time", i);
 export {
-  RelativeTime as default
+  i as default
 };
 //# sourceMappingURL=wje-relative-time.js.map