wj-elements 0.1.136 → 0.1.138

package/dist/wje-radio.js

@@ -0,0 +1,106 @@
+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, { event } from "./wje-element.js";
+const styles = "/*\n[ WJ Radio ]\n*/\n\n:host {\n    --wje-radio-margin-top: 0;\n    --wje-radio-margin-bottom: 0.5rem;\n    --wje-radio-margin-inline: 0;\n\n    display: block;\n    margin-top: var(--wje-radio-margin-top);\n    margin-bottom: var(--wje-radio-margin-bottom);\n    margin-inline: var(--wje-radio-margin-inline);\n    line-height: 100%;\n    padding-left: 0;\n\n    label {\n        display: flex;\n        cursor: pointer;\n        position: relative;\n        padding-left: 1.5rem;\n        min-width: 16px;\n        min-height: 16px;\n        margin-bottom: 0;\n        -webkit-touch-callout: none; /* iOS Safari */\n        -webkit-user-select: none; /* Safari */\n        -moz-user-select: none; /* Old versions of Firefox */\n        -ms-user-select: none; /* Internet Explorer/Edge */\n        user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */\n        align-items: center;\n        &:before {\n            content: '';\n            position: absolute;\n            width: 16px;\n            height: 16px;\n            left: 0;\n            box-sizing: border-box;\n            background-color: var(--wje-color-contrast-1);\n            border: 1px solid var(--wje-color-contrast-4);\n        }\n    }\n}\n\n.native-radio {\n    input[type='radio'] + label {\n        &:before {\n            border-radius: var(--wje-border-radius-circle);\n            transition: border 0.3s 0s cubic-bezier(0.455, 0.03, 0.215, 1.33);\n        }\n    }\n    input[type='radio']:checked {\n        & + label {\n            &:before {\n                border-color: var(--wje-color-contrast-6);\n                border-width: 5px;\n            }\n        }\n    }\n    input[type='radio']:focus {\n        & + label {\n            color: var(--wje-color);\n            &:before {\n                outline: none !important;\n                box-shadow: 0 0 0 0 #78c8fe;\n            }\n        }\n    }\n\n    input[type='radio'] {\n        opacity: 0;\n        position: absolute;\n        top: 3px;\n        width: 16px;\n        height: 16px;\n    }\n\n    input[type='radio'][disabled] {\n        & + label {\n            cursor: not-allowed !important;\n            color: var(--wje-color-contrast-9);\n            opacity: 0.5;\n            &:before {\n                cursor: not-allowed !important;\n            }\n        }\n    }\n}\n\n:host([placement='end']) {\n    label {\n        padding-left: 0;\n        padding-right: 26px;\n\n        &:before {\n            right: 0;\n            left: auto;\n        }\n    }\n\n    input[type='checkbox']:checked {\n        & + label {\n            position: relative;\n\n            &::after {\n                position: absolute;\n                right: 0;\n                left: auto;\n            }\n        }\n    }\n}\n\n/* Colors */\n\n:host([color='primary']) input[type='radio']:checked + label:before {\n    border-color: var(--wje-color-primary-9);\n}\n\n:host([color='complete']) input[type='radio']:checked + label:before {\n    border-color: var(--wje-color-complete-9);\n}\n\n:host([color='success']) input[type='radio']:checked + label:before {\n    border-color: var(--wje-color-success-9);\n}\n\n:host([color='warning']) input[type='radio']:checked + label:before {\n    border-color: var(--wje-color-warning-9);\n}\n\n:host([color='danger']) input[type='radio']:checked + label:before {\n    border-color: var(--wje-color-danger-9);\n}\n\n:host([color='info']) input[type='radio']:checked + label:before {\n    border-color: var(--wje-color-info-9);\n}\n";
+class Radio extends WJElement {
+  /**
+   * Creates an instance of Radio.
+   */
+  constructor() {
+    super();
+    /**
+     * Sets the color of the radio button.
+     * @type {string}
+     */
+    __publicField(this, "className", "Radio");
+    /**
+     * Called when an attribute changes.
+     * @param {object} e
+     */
+    __publicField(this, "inputEvent", (e) => {
+      this.checked = e.target.checked;
+    });
+    this._checked = false;
+  }
+  /**
+   * Sets the name of the radio button.
+   * @param value
+   */
+  set checked(value) {
+    this._checked = value;
+    if (value) this.setAttribute("checked", "");
+    else this.removeAttribute("checked");
+  }
+  /**
+   * Gets the checked property of the radio button.
+   * @returns {boolean}
+   */
+  get checked() {
+    return this._checked;
+  }
+  /**
+   * Returns the CSS styles for the component.
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return ["checked"];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the radio button.
+   * @returns {DocumentFragment}
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-radio");
+    if (this.color) native.classList.add(this.color);
+    this.input = document.createElement("input");
+    this.input.type = "radio";
+    this.input.id = "radio";
+    this.input.name = this.name + "-radio";
+    this.input.checked = this.hasAttribute("checked");
+    this.input.disabled = this.hasAttribute("disabled");
+    let label = document.createElement("label");
+    label.htmlFor = "radio";
+    label.innerHTML = "<slot></slot>";
+    native.appendChild(this.input);
+    native.appendChild(label);
+    fragment.appendChild(native);
+    return fragment;
+  }
+  /**
+   * Sets up the event listeners for the component.
+   */
+  afterDraw() {
+    if (!this.hasAttribute("disabled")) {
+      event.addListener(this, "click", "wje-radio:change");
+      event.addListener(this, "click", "wje-radio:input");
+    }
+  }
+  /**
+   * Toggles the radio button.
+   */
+  beforeDisconnect() {
+    event.removeElement(this);
+  }
+}
+Radio.define("wje-radio", Radio);
+export {
+  Radio as default
+};
+//# sourceMappingURL=wje-radio.js.map

package/dist/wje-radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-radio.js","sources":["../packages/wje-radio/radio.element.js","../packages/wje-radio/radio.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Radio button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/radio\n * @status stable\n * @augments WJElement\n * @slot - Default slot for the radio button label content.\n * @csspart native-radio - The native wrapper for the radio button.\n * @cssproperty [--wje-radio-margin-inline=0] - Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`) to control spacing on both sides of the component.\n * @cssproperty [--wje-radio-margin-top=0] - Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component.\n * @cssproperty [--wje-radio-margin-bottom=0] - Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component.\n * // @fires wje-radio:change - Dispatched when the radio button's state changes.\n * // @fires wje-radio:input - Dispatched when the radio button is interacted with.\n */\n\nexport default class Radio extends WJElement {\n    /**\n     * Creates an instance of Radio.\n     */\n    constructor() {\n        super();\n\n        this._checked = false;\n    }\n\n    /**\n     * Sets the name of the radio button.\n     * @param value\n     */\n    set checked(value) {\n        this._checked = value;\n\n        if (value) this.setAttribute('checked', '');\n        else this.removeAttribute('checked');\n    }\n\n    /**\n     * Gets the checked property of the radio button.\n     * @returns {boolean}\n     */\n    get checked() {\n        return this._checked;\n    }\n\n    /**\n     * Sets the color of the radio button.\n     * @type {string}\n     */\n    className = 'Radio';\n\n    /**\n     * Returns the CSS styles for the component.\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 ['checked'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the radio button.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio');\n\n        if (this.color) native.classList.add(this.color);\n\n        this.input = document.createElement('input');\n        this.input.type = 'radio';\n        this.input.id = 'radio';\n        this.input.name = this.name + '-radio';\n        this.input.checked = this.hasAttribute('checked');\n        this.input.disabled = this.hasAttribute('disabled');\n\n        let label = document.createElement('label');\n        label.htmlFor = 'radio';\n        label.innerHTML = '<slot></slot>';\n\n        native.appendChild(this.input);\n        native.appendChild(label);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners for the component.\n     */\n    afterDraw() {\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this, 'click', 'wje-radio:change');\n            event.addListener(this, 'click', 'wje-radio:input');\n        }\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {object} e\n     */\n    inputEvent = (e) => {\n        this.checked = e.target.checked;\n    };\n\n    /**\n     * Toggles the radio button.\n     */\n    beforeDisconnect() {\n        event.removeElement(this);\n    }\n}\n","import Radio from './radio.element.js';\n\nexport default Radio;\n\nRadio.define('wje-radio', Radio);\n"],"names":[],"mappings":";;;;;AAiBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAIzC,cAAc;AACV,UAAO;AA4BX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAuEZ;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;AAChB,WAAK,UAAU,EAAE,OAAO;AAAA,IAC3B;AAnGG,SAAK,WAAW;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,SAAK,WAAW;AAEhB,QAAI,MAAO,MAAK,aAAa,WAAW,EAAE;AAAA,QACrC,MAAK,gBAAgB,SAAS;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,SAAS;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,cAAc;AAEnC,QAAI,KAAK,MAAO,QAAO,UAAU,IAAI,KAAK,KAAK;AAE/C,SAAK,QAAQ,SAAS,cAAc,OAAO;AAC3C,SAAK,MAAM,OAAO;AAClB,SAAK,MAAM,KAAK;AAChB,SAAK,MAAM,OAAO,KAAK,OAAO;AAC9B,SAAK,MAAM,UAAU,KAAK,aAAa,SAAS;AAChD,SAAK,MAAM,WAAW,KAAK,aAAa,UAAU;AAElD,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,UAAU;AAChB,UAAM,YAAY;AAElB,WAAO,YAAY,KAAK,KAAK;AAC7B,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAChC,YAAM,YAAY,MAAM,SAAS,kBAAkB;AACnD,YAAM,YAAY,MAAM,SAAS,iBAAiB;AAAA,IAC9D;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAaI,mBAAmB;AACf,UAAM,cAAc,IAAI;AAAA,EAChC;AACA;AC/HA,MAAM,OAAO,aAAa,KAAK;"}

package/dist/wje-rate.js

@@ -0,0 +1,300 @@
+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
+   */
+  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();
+    });
+    /**
+     * Event handler for the mouse leave event.
+     * @param {Event} e The event.
+     */
+    __publicField(this, "onMouseLeave", (e) => {
+      e.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();
+      }
+    });
+    /**
+     * 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();
+    });
+    /**
+     * Event handler for the touch end event.
+     * @param {Event} e The event.
+     */
+    __publicField(this, "onTouchEnd", (e) => {
+      e.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();
+    });
+    /**
+     * Event handler for the click event.
+     * @param {Event} e The event.
+     */
+    __publicField(this, "onClick", (e) => {
+      e.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);
+  }
+  /**
+   * 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);
+  }
+  /**
+   * 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;
+  }
+  /**
+   * 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);
+  }
+  /**
+   * 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;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return ["is-hover"];
+  }
+  /**
+   * 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) {
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * 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;
+  }
+  /**
+   * Adds event listeners after the component is drawn.
+   */
+  afterDraw() {
+    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);
+  }
+  /**
+   * 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;
+  }
+  /**
+   * 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);
+    }
+  }
+  /**
+   * 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;
+  }
+  /**
+   * 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);
+  }
+  /**
+   * 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;
+  }
+}
+Rate.define("wje-rate", Rate);
+export {
+  Rate as default
+};
+//# sourceMappingURL=wje-rate.js.map

package/dist/wje-rate.js.map

@@ -0,0 +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'];\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 (name === 'is-hover') {\n            // this.draw();\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\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        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\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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"}

package/dist/wje-relative-time.js

@@ -0,0 +1,115 @@
+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
+   */
+  constructor() {
+    super();
+    /**
+     * Sets the lang of the relative time component.
+     * @type {string}
+     */
+    __publicField(this, "className", "RelativeTime");
+    this.localizer = new Localizer(this);
+  }
+  /**
+   * Sets the date of the relative time component.
+   * @param value
+   */
+  set date(value) {
+    this.setAttribute("date", value);
+  }
+  /**
+   * 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);
+  }
+  /**
+   * 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;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * 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();
+    fragment.appendChild(element);
+    return fragment;
+  }
+  /**
+   * 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.floor(deltaSeconds / divisor),
+      units[unitIndex],
+      { 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());
+  }
+}
+RelativeTime.define("wje-relative-time", RelativeTime);
+export {
+  RelativeTime as default
+};
+//# sourceMappingURL=wje-relative-time.js.map

package/dist/wje-relative-time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-relative-time.js","sources":["../packages/wje-relative-time/relative-time.element.js","../packages/wje-relative-time/relative-time.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement } from '../wje-element/element.js';\n\n/**\n * `RelativeTime` is a custom web component that represents a relative time component.\n * @summary This element represents a relative time component.\n * @documentation https://elements.webjet.sk/components/relative-time\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the relative time component.\n * @tag wje-relative-time\n */\n\nexport default class RelativeTime extends WJElement {\n    /**\n     * Creates an instance of RelativeTime.\n     * @class\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n    }\n\n    /**\n     * Sets the date of the relative time component.\n     * @param value\n     */\n    set date(value) {\n        this.setAttribute('date', value);\n    }\n\n    /**\n     * Gets the date of the relative time component.\n     * @returns {string}\n     */\n    get date() {\n        return this.getAttribute('date');\n    }\n\n    /**\n     * Sets the object date of the relative time component.\n     * @param value\n     */\n    set objectDate(value) {\n        this.setAttribute('object-date', value);\n    }\n\n    /**\n     * Gets the object date of the relative time component.\n     * @returns {Date}\n     */\n    get objectDate() {\n        let date = new Date();\n        let inputDate = this.date;\n\n        if (!!inputDate && inputDate !== '') {\n            inputDate = this.isISODate(inputDate) ? inputDate : +inputDate * 1000;\n\n            date = new Date(inputDate);\n        }\n\n        return date;\n    }\n\n    /**\n     * Sets the lang of the relative time component.\n     * @type {string}\n     */\n    className = 'RelativeTime';\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 [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the relative time.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-relative-time');\n        element.innerText = this.getRelativeTimeString();\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Returns the relative time string for the given date.\n     */\n    getRelativeTimeString(lang = navigator.language) {\n        if (this.objectDate.toString() === 'Invalid Date' || this.objectDate.toString() === 'NaN') {\n            return '';\n        }\n\n        const timeMs = this.objectDate.getTime();\n\n        const deltaSeconds = Math.round((timeMs - Date.now()) / 1000);\n\n        const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];\n\n        const units = ['second', 'minute', 'hour', 'day', 'week', 'month', 'year'];\n        const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(deltaSeconds));\n        const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;\n\n        return this.localizer.relativeTime(\n            this.getAttribute('lang'),\n            Math.floor(deltaSeconds / divisor),\n            units[unitIndex],\n            { numeric: 'auto' }\n        );\n    }\n\n    /**\n     * Checks if the given string is an ISO date.\n     * @param {string} str The string to check.\n     * @returns {boolean} True if the string is an ISO date, false otherwise.\n     */\n    isISODate(str) {\n        const date = new Date(str);\n        return !isNaN(date.getTime());\n    }\n}\n","import RelativeTime from './relative-time.element.js';\n\nexport default RelativeTime;\n\nRelativeTime.define('wje-relative-time', RelativeTime);\n"],"names":[],"mappings":";;;;;AAae,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhD,cAAc;AACV,UAAO;AAiDX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAhDR,SAAK,YAAY,IAAI,UAAU,IAAI;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW,OAAO;AAClB,SAAK,aAAa,eAAe,KAAK;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,aAAa;AACb,QAAI,OAAO,oBAAI,KAAM;AACrB,QAAI,YAAY,KAAK;AAErB,QAAI,CAAC,CAAC,aAAa,cAAc,IAAI;AACjC,kBAAY,KAAK,UAAU,SAAS,IAAI,YAAY,CAAC,YAAY;AAEjE,aAAO,IAAI,KAAK,SAAS;AAAA,IACrC;AAEQ,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,sBAAsB;AAC5C,YAAQ,YAAY,KAAK,sBAAuB;AAEhD,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,sBAAsB,OAAO,UAAU,UAAU;AAC7C,QAAI,KAAK,WAAW,eAAe,kBAAkB,KAAK,WAAW,SAAU,MAAK,OAAO;AACvF,aAAO;AAAA,IACnB;AAEQ,UAAM,SAAS,KAAK,WAAW,QAAS;AAExC,UAAM,eAAe,KAAK,OAAO,SAAS,KAAK,IAAK,KAAI,GAAI;AAE5D,UAAM,UAAU,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,QAAQ,IAAI,QAAQ,KAAK,QAAQ;AAE9E,UAAM,QAAQ,CAAC,UAAU,UAAU,QAAQ,OAAO,QAAQ,SAAS,MAAM;AACzE,UAAM,YAAY,QAAQ,UAAU,CAAC,WAAW,SAAS,KAAK,IAAI,YAAY,CAAC;AAC/E,UAAM,UAAU,YAAY,QAAQ,YAAY,CAAC,IAAI;AAErD,WAAO,KAAK,UAAU;AAAA,MAClB,KAAK,aAAa,MAAM;AAAA,MACxB,KAAK,MAAM,eAAe,OAAO;AAAA,MACjC,MAAM,SAAS;AAAA,MACf,EAAE,SAAS,OAAM;AAAA,IACpB;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,UAAU,KAAK;AACX,UAAM,OAAO,IAAI,KAAK,GAAG;AACzB,WAAO,CAAC,MAAM,KAAK,SAAS;AAAA,EACpC;AACA;ACtIA,aAAa,OAAO,qBAAqB,YAAY;"}

package/dist/wje-reorder-dropzone.js

@@ -0,0 +1,49 @@
+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 = ".dropzone {\n    border: 1px dashed lightgrey;\n    border-radius: var(--wje-border-radius-small);\n    margin: 0.5rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    overflow: hidden;\n    justify-content: center;\n    min-height: 250px;\n    width: 200px;\n}\n";
+class ReorderDropzone extends WJElement {
+  /**
+   * Creates an instance of ReorderDropzone.
+   */
+  constructor() {
+    super();
+    /**
+     * The class name for the component.
+     * @type {string}
+     */
+    __publicField(this, "className", "ReorderDropzone");
+  }
+  /**
+   * Returns the CSS stylesheet for the component.
+   * @returns {CSSStyleSheet} The CSS stylesheet.
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Returns the list of observed attributes.
+   * @returns {DocumentFragment}
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let dropzone = document.createElement("div");
+    dropzone.classList.add("dropzone");
+    let slot = document.createElement("slot");
+    dropzone.appendChild(slot);
+    fragment.appendChild(dropzone);
+    return fragment;
+  }
+}
+ReorderDropzone.define("wje-reorder-dropzone", ReorderDropzone);
+export {
+  ReorderDropzone as default
+};
+//# sourceMappingURL=wje-reorder-dropzone.js.map

package/dist/wje-reorder-dropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-reorder-dropzone.js","sources":["../packages/wje-reorder-dropzone/reorder-dropzone.element.js","../packages/wje-reorder-dropzone/reorder-dropzone.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ReorderDropzone` is a custom web component that represents a reorder dropzone.\n * @summary This element represents a reorder dropzone.\n * @documentation https://elements.webjet.sk/components/reorder-dropzone\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder dropzone.\n * @slot - The default slot for the reorder dropzone.\n * @tag wje-reorder-dropzone\n */\nexport default class ReorderDropzone extends WJElement {\n    /**\n     * Creates an instance of ReorderDropzone.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ReorderDropzone';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @returns {CSSStyleSheet} The CSS stylesheet.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let dropzone = document.createElement('div');\n        dropzone.classList.add('dropzone');\n\n        let slot = document.createElement('slot');\n\n        dropzone.appendChild(slot);\n\n        fragment.appendChild(dropzone);\n\n        return fragment;\n    }\n}\n","import ReorderDropzone from './reorder-dropzone.element';\n\nexport default ReorderDropzone;\n\nReorderDropzone.define('wje-reorder-dropzone', ReorderDropzone);\n"],"names":[],"mappings":";;;;;AAae,MAAM,wBAAwB,UAAU;AAAA;AAAA;AAAA;AAAA,EAInD,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,WAAW,SAAS,cAAc,KAAK;AAC3C,aAAS,UAAU,IAAI,UAAU;AAEjC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,aAAS,YAAY,QAAQ;AAE7B,WAAO;AAAA,EACf;AACA;ACxDA,gBAAgB,OAAO,wBAAwB,eAAe;"}