wj-elements 0.7.6 → 0.8.0

package/dist/wje-split-view.js

@@ -1,152 +1,66 @@
 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";
-function drag(container, options) {
-  function move(pointerEvent) {
-    const dims = container.getBoundingClientRect();
-    const defaultView = container.ownerDocument.defaultView;
-    const offsetX = dims.left + defaultView.pageXOffset;
-    const offsetY = dims.top + defaultView.pageYOffset;
-    const x = pointerEvent.pageX - offsetX;
-    const y = pointerEvent.pageY - offsetY;
-    if (options == null ? void 0 : options.onMove) {
-      options.onMove(x, y);
-    }
-  }
-  function stop() {
-    document.removeEventListener("pointermove", move);
-    document.removeEventListener("pointerup", stop);
-    if (options == null ? void 0 : options.onStop) {
-      options.onStop();
-    }
-  }
-  document.addEventListener("pointermove", move, { passive: true });
-  document.addEventListener("pointerup", stop);
-  if ((options == null ? void 0 : options.initialEvent) instanceof PointerEvent) {
-    move(options.initialEvent);
-  }
-}
-const styles = "/*\n[ WJ Split View ]\n*/\n\n:host {\n    --wje-split-view-divider-area: 12px;\n    --wje-split-view-divider-width: 4px;\n    --wje-split-view-min: 0%;\n    --wje-split-view-max: 100%;\n    --wje-split-view-calc-a: 50%;\n    --wje-split-view-calc-b: 50%;\n    --wje-split-view-clamp-a: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max));\n    --wje-split-view-clamp-b: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max));\n\n    --wje-split-view-divider-background: var(--wje-border-color);\n    --wje-split-view-divider-size: 4px;\n    height: 100%;\n    width: 100%;\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n}\n\n:host(:not([vertical])) ::slotted([slot='start']) {\n    width: var(--wje-split-view-clamp-a);\n}\n\n:host(:not([vertical])) ::slotted([slot='end']) {\n    width: var(--wje-split-view-clamp-b);\n}\n\n:host([vertical]) ::slotted([slot='start']) {\n    height: var(--wje-split-view-clamp-a);\n    width: 100%;\n}\n\n:host([vertical]) ::slotted([slot='end']) {\n    height: var(--wje-split-view-clamp-b);\n    width: 100%;\n}\n\n.native-split-view {\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    overflow: hidden;\n    position: relative;\n}\n\n:host([vertical]) .native-split-view {\n    flex-direction: column;\n}\n\n.wje-divider {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    z-index: 1;\n    background-color: var(--wje-split-view-divider-background);\n    height: 100%;\n    width: var(--wje-split-view-divider-size);\n    cursor: col-resize;\n    &:after {\n        display: flex;\n        align-items: center;\n        content: '';\n        position: absolute;\n        height: 100%;\n        left: calc(var(--wje-split-view-divider-area) / -2 + var(--wje-split-view-divider-width) / 2);\n        width: var(--wje-split-view-divider-area);\n    }\n}\n\n:host([vertical]) .wje-divider {\n    height: var(--wje-split-view-divider-size);\n    width: 100%;\n    cursor: row-resize;\n    &:after {\n        width: 100%;\n        top: calc(var(--wje-split-view-divider-area) / -2 + var(--wje-split-view-divider-width) / 2);\n        height: var(--wje-split-view-divider-area);\n    }\n}\n";
-class SplitView extends WJElement {
-  /**
-   * Creates an instance of SplitView.
-   * @class
-   */
+import e from "./wje-element.js";
+class t extends e {
   constructor() {
     super();
     __publicField(this, "className", "SplitView");
-    /**
-     * Handles the drag event.
-     * @param {Event} e The event object.
-     */
-    __publicField(this, "handleDrag", (e) => {
-      if (this.hasAttribute("disabled")) return;
-      drag(this, {
-        onMove: (x, y) => {
-          let newPositionInPixels = this.hasAttribute("vertical") ? y : x;
-          let sizeA = this.pixelsToPercentage(newPositionInPixels);
-          let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);
-          this.style.setProperty("--wje-split-view-calc-a", sizeA + "%");
-          this.style.setProperty("--wje-split-view-calc-b", sizeB + "%");
-          if (this.dividerElement) {
-            this.dividerElement.setAttribute("aria-valuenow", `${Math.round(sizeA)}`);
-          }
-        },
-        initialEvent: e
-      });
+    __publicField(this, "handleDrag", (e2) => {
+      this.hasAttribute("disabled") || (function(e3, t2) {
+        function i(i2) {
+          const s = e3.getBoundingClientRect(), r = e3.ownerDocument.defaultView, a = s.left + r.pageXOffset, l = s.top + r.pageYOffset, n = i2.pageX - a, d = i2.pageY - l;
+          (t2 == null ? void 0 : t2.onMove) && t2.onMove(n, d);
+        }
+        document.addEventListener("pointermove", i, { passive: true }), document.addEventListener("pointerup", function e4() {
+          document.removeEventListener("pointermove", i), document.removeEventListener("pointerup", e4), (t2 == null ? void 0 : t2.onStop) && t2.onStop();
+        }), (t2 == null ? void 0 : t2.initialEvent) instanceof PointerEvent && i(t2.initialEvent);
+      })(this, { onMove: (e3, t2) => {
+        let i = this.hasAttribute("vertical") ? t2 : e3, s = this.pixelsToPercentage(i), r = 100 - this.pixelsToPercentage(i);
+        this.style.setProperty("--wje-split-view-calc-a", s + "%"), this.style.setProperty("--wje-split-view-calc-b", r + "%"), this.dividerElement && this.dividerElement.setAttribute("aria-valuenow", `${Math.round(s)}`);
+      }, initialEvent: e2 });
     });
   }
-  set initial(value) {
-    this.setAttribute("initial", value);
+  set initial(e2) {
+    this.setAttribute("initial", e2);
   }
   get initial() {
     return +this.getAttribute("initial") || 50;
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{--wje-split-view-divider-area: 12px;--wje-split-view-divider-width: 4px;--wje-split-view-min: 0%;--wje-split-view-max: 100%;--wje-split-view-calc-a: 50%;--wje-split-view-calc-b: 50%;--wje-split-view-clamp-a: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max));--wje-split-view-clamp-b: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max));--wje-split-view-divider-background: var(--wje-border-color);--wje-split-view-divider-size: 4px;height:100%;width:100%}::slotted([slot="start"]),::slotted([slot="end"]){width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}:host(:not([vertical])) ::slotted([slot="start"]){width:var(--wje-split-view-clamp-a)}:host(:not([vertical])) ::slotted([slot="end"]){width:var(--wje-split-view-clamp-b)}:host([vertical]) ::slotted([slot="start"]){height:var(--wje-split-view-clamp-a);width:100%}:host([vertical]) ::slotted([slot="end"]){height:var(--wje-split-view-clamp-b);width:100%}.native-split-view{height:100%;width:100%;display:flex;flex-direction:row;overflow:hidden;position:relative}:host([vertical]) .native-split-view{flex-direction:column}.wje-divider{display:flex;position:relative;align-items:center;justify-content:center;z-index:1;background-color:var(--wje-split-view-divider-background);height:100%;width:var(--wje-split-view-divider-size);cursor:col-resize}.wje-divider:after{display:flex;align-items:center;content:"";position:absolute;height:100%;left:calc(var(--wje-split-view-divider-area) / -2 + var(--wje-split-view-divider-width) / 2);width:var(--wje-split-view-divider-area)}:host([vertical]) .wje-divider{height:var(--wje-split-view-divider-size);width:100%;cursor:row-resize}:host([vertical]) .wje-divider:after{width:100%;top:calc(var(--wje-split-view-divider-area) / -2 + var(--wje-split-view-divider-width) / 2);height:var(--wje-split-view-divider-area)}';
   }
-  /**
-   * 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 split view.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.classList.add("native-split-view");
-    let start = document.createElement("slot");
-    start.setAttribute("name", "start");
-    let end = document.createElement("slot");
-    end.setAttribute("name", "end");
-    let divider = document.createElement("slot");
-    divider.setAttribute("name", "divider");
-    let dividerElement = document.createElement("div");
-    dividerElement.classList.add("wje-divider");
-    dividerElement.setAttribute("part", "divider");
-    dividerElement.setAttribute("role", "separator");
-    dividerElement.setAttribute("aria-orientation", this.hasAttribute("vertical") ? "vertical" : "horizontal");
-    dividerElement.setAttribute("aria-valuemin", "0");
-    dividerElement.setAttribute("aria-valuemax", "100");
-    dividerElement.setAttribute("aria-valuenow", `${this.initial}`);
-    dividerElement.appendChild(divider);
-    dividerElement.addEventListener("mousedown", this.handleDrag, false);
-    native.appendChild(start);
-    native.appendChild(dividerElement);
-    native.appendChild(end);
-    fragment.appendChild(native);
-    this.dividerElement = dividerElement;
-    return fragment;
+    let e2 = document.createDocumentFragment(), t2 = document.createElement("div");
+    t2.classList.add("native-split-view");
+    let i = document.createElement("slot");
+    i.setAttribute("name", "start");
+    let s = document.createElement("slot");
+    s.setAttribute("name", "end");
+    let r = document.createElement("slot");
+    r.setAttribute("name", "divider");
+    let a = document.createElement("div");
+    return a.classList.add("wje-divider"), a.setAttribute("part", "divider"), a.setAttribute("role", "separator"), a.setAttribute("aria-orientation", this.hasAttribute("vertical") ? "vertical" : "horizontal"), a.setAttribute("aria-valuemin", "0"), a.setAttribute("aria-valuemax", "100"), a.setAttribute("aria-valuenow", `${this.initial}`), a.appendChild(r), a.addEventListener("mousedown", this.handleDrag, false), t2.appendChild(i), t2.appendChild(a), t2.appendChild(s), e2.appendChild(t2), this.dividerElement = a, e2;
   }
-  /**
-   * Sets up the event listeners after the component is drawn.
-   */
   afterDraw() {
-    this.detectSize();
-    if (this.min) this.style.setProperty("--wje-split-view-min", this.pixelsToPercentage(this.min) + "%");
-    if (this.max) this.style.setProperty("--wje-split-view-max", 100 - this.pixelsToPercentage(this.max) + "%");
-    if (this.initial) {
-      this.style.setProperty("--wje-split-view-calc-a", this.pixelsToPercentage(this.initial) + "%");
-      this.style.setProperty("--wje-split-view-calc-b", 100 - this.pixelsToPercentage(this.initial) + "%");
-    }
-    this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));
+    this.detectSize(), this.min && this.style.setProperty("--wje-split-view-min", this.pixelsToPercentage(this.min) + "%"), this.max && this.style.setProperty("--wje-split-view-max", 100 - this.pixelsToPercentage(this.max) + "%"), this.initial && (this.style.setProperty("--wje-split-view-calc-a", this.pixelsToPercentage(this.initial) + "%"), this.style.setProperty("--wje-split-view-calc-b", 100 - this.pixelsToPercentage(this.initial) + "%")), this.resizeObserver = new ResizeObserver((e2) => this.handleResize(e2));
   }
-  /**
-   * Detects the size of the split view.
-   */
   detectSize() {
-    const { width, height } = this.getBoundingClientRect();
-    this.size = this.hasAttribute("vertical") ? height : width;
+    const { width: e2, height: t2 } = this.getBoundingClientRect();
+    this.size = this.hasAttribute("vertical") ? t2 : e2;
   }
-  /**
-   * Converts pixels to a percentage.
-   * @param {number} value The pixel value.
-   * @returns {number} The percentage value.
-   */
-  pixelsToPercentage(value) {
-    return value / this.size * 100;
+  pixelsToPercentage(e2) {
+    return e2 / this.size * 100;
   }
 }
-SplitView.define("wje-split-view", SplitView);
+t.define("wje-split-view", t);
 export {
-  SplitView as default
+  t as default
 };
 //# sourceMappingURL=wje-split-view.js.map

package/dist/wje-split-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-split-view.js","sources":["../packages/wje-split-view/service/service.js","../packages/wje-split-view/split-view.element.js","../packages/wje-split-view/split-view.js"],"sourcesContent":["export function drag(container, options) {\n    function move(pointerEvent) {\n        const dims = container.getBoundingClientRect();\n        const defaultView = container.ownerDocument.defaultView;\n        const offsetX = dims.left + defaultView.pageXOffset;\n        const offsetY = dims.top + defaultView.pageYOffset;\n        const x = pointerEvent.pageX - offsetX;\n        const y = pointerEvent.pageY - offsetY;\n        if (options?.onMove) {\n            options.onMove(x, y);\n        }\n    }\n\n    function stop() {\n        document.removeEventListener('pointermove', move);\n        document.removeEventListener('pointerup', stop);\n\n        if (options?.onStop) {\n            options.onStop();\n        }\n    }\n\n    document.addEventListener('pointermove', move, { passive: true });\n    document.addEventListener('pointerup', stop);\n\n    if (options?.initialEvent instanceof PointerEvent) {\n        move(options.initialEvent);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { drag } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `SplitView` is a custom web component that represents a split view.\n * @summary This element represents a split view.\n * @documentation https://elements.webjet.sk/components/split-view\n * @status stable\n * @augments WJElement\n * @slot start - Slot for the start view.\n * @slot end - Slot for the end view.\n * @slot divider - Slot for the divider.\n * @csspart wje-divider - The divider of the split view.\n * @cssproperty [--wje-split-view-divider-area=12px] - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`).\n * @cssproperty [--wje-split-view-divider-width=4px] - Specifies the visual width of the divider. Controls how thick the divider appears.\n * @cssproperty [--wje-split-view-min=0%] - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value.\n * @cssproperty [--wje-split-view-max=100%] - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value.\n * @cssproperty [--wje-split-view-calc-a=50%] - Represents the calculated size of the first view. This is used to dynamically set the size of the first view.\n * @cssproperty [--wje-split-view-calc-b=50%] - Represents the calculated size of the second view. This is used to dynamically set the size of the second view.\n * @cssproperty [--wje-split-view-clamp-a=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max))] - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-clamp-b=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max))] - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-divider-background=var(--wje-border-color)] - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable).\n * @cssproperty [--wje-split-view-divider-size=4px] - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit.\n * @tag wje-split-view\n */\n\nexport default class SplitView extends WJElement {\n    /**\n     * Creates an instance of SplitView.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    set initial(value) {\n        this.setAttribute('initial', value);\n    }\n\n    get initial() {\n        return +this.getAttribute('initial') || 50;\n    }\n\n    className = 'SplitView';\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 [];\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 split view.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-split-view');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        let divider = document.createElement('slot');\n        divider.setAttribute('name', 'divider');\n\n        let dividerElement = document.createElement('div');\n        dividerElement.classList.add('wje-divider');\n        dividerElement.setAttribute('part', 'divider');\n        dividerElement.setAttribute('role', 'separator');\n        dividerElement.setAttribute('aria-orientation', this.hasAttribute('vertical') ? 'vertical' : 'horizontal');\n        dividerElement.setAttribute('aria-valuemin', '0');\n        dividerElement.setAttribute('aria-valuemax', '100');\n        dividerElement.setAttribute('aria-valuenow', `${this.initial}`);\n        dividerElement.appendChild(divider);\n        dividerElement.addEventListener('mousedown', this.handleDrag, false);\n\n        native.appendChild(start);\n        native.appendChild(dividerElement);\n        native.appendChild(end);\n\n        fragment.appendChild(native);\n\n        this.dividerElement = dividerElement;\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.detectSize();\n\n        if (this.min) this.style.setProperty('--wje-split-view-min', this.pixelsToPercentage(this.min) + '%');\n\n        if (this.max) this.style.setProperty('--wje-split-view-max', 100 - this.pixelsToPercentage(this.max) + '%');\n\n        if (this.initial) {\n            this.style.setProperty('--wje-split-view-calc-a', this.pixelsToPercentage(this.initial) + '%');\n            this.style.setProperty('--wje-split-view-calc-b', 100 - this.pixelsToPercentage(this.initial) + '%');\n        }\n\n        this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));\n    }\n\n    /**\n     * Handles the drag event.\n     * @param {Event} e The event object.\n     */\n    handleDrag = (e) => {\n        if (this.hasAttribute('disabled')) return;\n\n        drag(this, {\n            onMove: (x, y) => {\n                let newPositionInPixels = this.hasAttribute('vertical') ? y : x;\n                let sizeA = this.pixelsToPercentage(newPositionInPixels);\n                let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);\n\n                this.style.setProperty('--wje-split-view-calc-a', sizeA + '%');\n                this.style.setProperty('--wje-split-view-calc-b', sizeB + '%');\n                if (this.dividerElement) {\n                    this.dividerElement.setAttribute('aria-valuenow', `${Math.round(sizeA)}`);\n                }\n            },\n            initialEvent: e,\n        });\n    };\n\n    /**\n     * Detects the size of the split view.\n     */\n    detectSize() {\n        const { width, height } = this.getBoundingClientRect();\n\n        this.size = this.hasAttribute('vertical') ? height : width;\n    }\n\n    /**\n     * Converts pixels to a percentage.\n     * @param {number} value The pixel value.\n     * @returns {number} The percentage value.\n     */\n    pixelsToPercentage(value) {\n        return (value / this.size) * 100;\n    }\n}\n","import SplitView from './split-view.element.js';\n\nexport default SplitView;\n\nSplitView.define('wje-split-view', SplitView);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-split-view.js","sources":["../packages/wje-split-view/split-view.element.js","../packages/wje-split-view/service/service.js","../packages/wje-split-view/split-view.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport { drag } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `SplitView` is a custom web component that represents a split view.\n * @summary This element represents a split view.\n * @documentation https://elements.webjet.sk/components/split-view\n * @status stable\n * @augments WJElement\n * @slot start - Slot for the start view.\n * @slot end - Slot for the end view.\n * @slot divider - Slot for the divider.\n * @csspart wje-divider - The divider of the split view.\n * @cssproperty [--wje-split-view-divider-area=12px] - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`).\n * @cssproperty [--wje-split-view-divider-width=4px] - Specifies the visual width of the divider. Controls how thick the divider appears.\n * @cssproperty [--wje-split-view-min=0%] - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value.\n * @cssproperty [--wje-split-view-max=100%] - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value.\n * @cssproperty [--wje-split-view-calc-a=50%] - Represents the calculated size of the first view. This is used to dynamically set the size of the first view.\n * @cssproperty [--wje-split-view-calc-b=50%] - Represents the calculated size of the second view. This is used to dynamically set the size of the second view.\n * @cssproperty [--wje-split-view-clamp-a=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max))] - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-clamp-b=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max))] - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-divider-background=var(--wje-border-color)] - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable).\n * @cssproperty [--wje-split-view-divider-size=4px] - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit.\n * @tag wje-split-view\n */\n\nexport default class SplitView extends WJElement {\n    /**\n     * Creates an instance of SplitView.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    set initial(value) {\n        this.setAttribute('initial', value);\n    }\n\n    get initial() {\n        return +this.getAttribute('initial') || 50;\n    }\n\n    className = 'SplitView';\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 [];\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 split view.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-split-view');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        let divider = document.createElement('slot');\n        divider.setAttribute('name', 'divider');\n\n        let dividerElement = document.createElement('div');\n        dividerElement.classList.add('wje-divider');\n        dividerElement.setAttribute('part', 'divider');\n        dividerElement.setAttribute('role', 'separator');\n        dividerElement.setAttribute('aria-orientation', this.hasAttribute('vertical') ? 'vertical' : 'horizontal');\n        dividerElement.setAttribute('aria-valuemin', '0');\n        dividerElement.setAttribute('aria-valuemax', '100');\n        dividerElement.setAttribute('aria-valuenow', `${this.initial}`);\n        dividerElement.appendChild(divider);\n        dividerElement.addEventListener('mousedown', this.handleDrag, false);\n\n        native.appendChild(start);\n        native.appendChild(dividerElement);\n        native.appendChild(end);\n\n        fragment.appendChild(native);\n\n        this.dividerElement = dividerElement;\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.detectSize();\n\n        if (this.min) this.style.setProperty('--wje-split-view-min', this.pixelsToPercentage(this.min) + '%');\n\n        if (this.max) this.style.setProperty('--wje-split-view-max', 100 - this.pixelsToPercentage(this.max) + '%');\n\n        if (this.initial) {\n            this.style.setProperty('--wje-split-view-calc-a', this.pixelsToPercentage(this.initial) + '%');\n            this.style.setProperty('--wje-split-view-calc-b', 100 - this.pixelsToPercentage(this.initial) + '%');\n        }\n\n        this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));\n    }\n\n    /**\n     * Handles the drag event.\n     * @param {Event} e The event object.\n     */\n    handleDrag = (e) => {\n        if (this.hasAttribute('disabled')) return;\n\n        drag(this, {\n            onMove: (x, y) => {\n                let newPositionInPixels = this.hasAttribute('vertical') ? y : x;\n                let sizeA = this.pixelsToPercentage(newPositionInPixels);\n                let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);\n\n                this.style.setProperty('--wje-split-view-calc-a', sizeA + '%');\n                this.style.setProperty('--wje-split-view-calc-b', sizeB + '%');\n                if (this.dividerElement) {\n                    this.dividerElement.setAttribute('aria-valuenow', `${Math.round(sizeA)}`);\n                }\n            },\n            initialEvent: e,\n        });\n    };\n\n    /**\n     * Detects the size of the split view.\n     */\n    detectSize() {\n        const { width, height } = this.getBoundingClientRect();\n\n        this.size = this.hasAttribute('vertical') ? height : width;\n    }\n\n    /**\n     * Converts pixels to a percentage.\n     * @param {number} value The pixel value.\n     * @returns {number} The percentage value.\n     */\n    pixelsToPercentage(value) {\n        return (value / this.size) * 100;\n    }\n}\n","export function drag(container, options) {\n    function move(pointerEvent) {\n        const dims = container.getBoundingClientRect();\n        const defaultView = container.ownerDocument.defaultView;\n        const offsetX = dims.left + defaultView.pageXOffset;\n        const offsetY = dims.top + defaultView.pageYOffset;\n        const x = pointerEvent.pageX - offsetX;\n        const y = pointerEvent.pageY - offsetY;\n        if (options?.onMove) {\n            options.onMove(x, y);\n        }\n    }\n\n    function stop() {\n        document.removeEventListener('pointermove', move);\n        document.removeEventListener('pointerup', stop);\n\n        if (options?.onStop) {\n            options.onStop();\n        }\n    }\n\n    document.addEventListener('pointermove', move, { passive: true });\n    document.addEventListener('pointerup', stop);\n\n    if (options?.initialEvent instanceof PointerEvent) {\n        move(options.initialEvent);\n    }\n}\n","import SplitView from './split-view.element.js';\n\nexport default SplitView;\n\nSplitView.define('wje-split-view', SplitView);\n"],"names":["SplitView","WJElement","constructor","super","className","handleDrag","e","this","hasAttribute","container","options","move","pointerEvent","dims","getBoundingClientRect","defaultView","ownerDocument","offsetX","left","pageXOffset","offsetY","top","pageYOffset","x","pageX","y","pageY","onMove","document","addEventListener","passive","stop","removeEventListener","onStop","initialEvent","PointerEvent","newPositionInPixels","sizeA","pixelsToPercentage","sizeB","style","setProperty","dividerElement","setAttribute","Math","round","value","getAttribute","cssStyleSheet","observedAttributes","isShadowRoot","draw","fragment","createDocumentFragment","native","createElement","classList","add","start","end","divider","initial","appendChild","detectSize","min","max","resizeObserver","ResizeObserver","entries","handleResize","width","height","size","define"],"mappings":"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"}

package/dist/wje-status.js

@@ -1,62 +1,31 @@
 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 Status ]\n*/\n\n.native-status {\n    display: flex;\n    align-items: center;\n}\n\n.bullet {\n    width: var(--wje-status-size);\n    height: var(--wje-status-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-width: 1px;\n    border-style: solid;\n    border-color: transparent;\n    border-radius: var(--wje-border-radius-circle);\n}\n\n:host ::slotted([slot='start']) {\n    margin-right: var(--wje-spacing-x-small);\n}\n\n:host ::slotted([slot='end']) {\n    margin-left: var(--wje-spacing-x-small);\n}\n\n/* Size */\n:host([size='small']) {\n    --wje-status-size: var(--wje-size-small);\n}\n\n:host([size='medium']) {\n    --wje-status-size: var(--wje-size);\n}\n\n:host([size='large']) {\n    --wje-status-size: var(--wje-size-large);\n}\n\n/* Color */\n:host([color='primary']) .bullet {\n    background-color: var(--wje-color-primary-9);\n    color: var(--wje-color-contrast-0);\n}\n\n:host([color='complete']) .bullet {\n    background-color: var(--wje-color-complete-9);\n    color: var(--wje-color-contrast-0);\n}\n\n:host([color='success']) .bullet {\n    background-color: var(--wje-color-success-9);\n    color: var(--wje-color-contrast-0);\n}\n\n:host([color='warning']) .bullet {\n    background-color: var(--wje-color-warning-9);\n    color: var(--wje-color-contrast-11);\n}\n\n:host([color='danger']) .bullet {\n    background-color: var(--wje-color-danger-9);\n    color: var(--wje-color-contrast-0);\n}\n\n:host([color='contrast']) .bullet {\n    background-color: var(--wje-color-contrast-2);\n    color: var(--wje-color-contrast-11);\n}\n\n:host([color='contrast-reverse']) .bullet {\n    background-color: var(--wje-color-contrast-11);\n    color: var(--wje-color-contrast-0);\n}\n\n/* Border */\n:host([border='primary']) .bullet {\n    border-color: var(--wje-color-primary-9);\n}\n\n:host([border='complete']) .bullet {\n    border-color: var(--wje-color-complete-9);\n}\n\n:host([border='success']) .bullet {\n    border-color: var(--wje-color-success-9);\n}\n\n:host([border='warning']) .bullet {\n    border-color: var(--wje-color-warning-9);\n}\n\n:host([border='danger']) .bullet {\n    border-color: var(--wje-color-danger-9);\n}\n\n:host([border='contrast']) .bullet {\n    border-color: var(--wje-color-contrast-2);\n}\n\n:host([border='contrast-reverse']) .bullet {\n    border-color: var(--wje-color-contrast-11);\n}\n";
-class Status extends WJElement {
-  /**
-   * Creates an instance of Status.
-   */
+import e from "./wje-element.js";
+class r extends e {
   constructor() {
     super();
-    /**
-     * The class name for the component.
-     * @type {string}
-     */
     __publicField(this, "className", "Status");
   }
-  /**
-   * Returns the CSS stylesheet for the component.
-   * @static
-   * @returns {CSSStyleSheet} The CSS stylesheet
-   */
   static get cssStyleSheet() {
-    return styles;
+    return '.native-status{display:flex;align-items:center}.bullet{width:var(--wje-status-size);height:var(--wje-status-size);display:flex;align-items:center;justify-content:center;border-width:1px;border-style:solid;border-color:transparent;border-radius:var(--wje-border-radius-circle)}:host ::slotted([slot="start"]){margin-right:var(--wje-spacing-x-small)}:host ::slotted([slot="end"]){margin-left:var(--wje-spacing-x-small)}:host([size="small"]){--wje-status-size: var(--wje-size-small)}:host([size="medium"]){--wje-status-size: var(--wje-size)}:host([size="large"]){--wje-status-size: var(--wje-size-large)}:host([color="primary"]) .bullet{background-color:var(--wje-color-primary-9);color:var(--wje-color-contrast-0)}:host([color="complete"]) .bullet{background-color:var(--wje-color-complete-9);color:var(--wje-color-contrast-0)}:host([color="success"]) .bullet{background-color:var(--wje-color-success-9);color:var(--wje-color-contrast-0)}:host([color="warning"]) .bullet{background-color:var(--wje-color-warning-9);color:var(--wje-color-contrast-11)}:host([color="danger"]) .bullet{background-color:var(--wje-color-danger-9);color:var(--wje-color-contrast-0)}:host([color="contrast"]) .bullet{background-color:var(--wje-color-contrast-2);color:var(--wje-color-contrast-11)}:host([color="contrast-reverse"]) .bullet{background-color:var(--wje-color-contrast-11);color:var(--wje-color-contrast-0)}:host([border="primary"]) .bullet{border-color:var(--wje-color-primary-9)}:host([border="complete"]) .bullet{border-color:var(--wje-color-complete-9)}:host([border="success"]) .bullet{border-color:var(--wje-color-success-9)}:host([border="warning"]) .bullet{border-color:var(--wje-color-warning-9)}:host([border="danger"]) .bullet{border-color:var(--wje-color-danger-9)}:host([border="contrast"]) .bullet{border-color:var(--wje-color-contrast-2)}:host([border="contrast-reverse"]) .bullet{border-color:var(--wje-color-contrast-11)}';
   }
-  /**
-   * 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 status.
-   * @returns {object} fragment - The document fragment
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-status");
-    let bullet = document.createElement("div");
-    bullet.setAttribute("part", "bullet");
-    bullet.classList.add("bullet");
-    let slot = document.createElement("slot");
-    let start = document.createElement("slot");
-    start.setAttribute("name", "start");
-    let end = document.createElement("slot");
-    end.setAttribute("name", "end");
-    bullet.appendChild(slot);
-    native.appendChild(start);
-    native.appendChild(bullet);
-    native.appendChild(end);
-    fragment.appendChild(native);
-    return fragment;
+    let e2 = document.createDocumentFragment(), r2 = document.createElement("div");
+    r2.setAttribute("part", "native"), r2.classList.add("native-status");
+    let o = document.createElement("div");
+    o.setAttribute("part", "bullet"), o.classList.add("bullet");
+    let t = document.createElement("slot"), l = document.createElement("slot");
+    l.setAttribute("name", "start");
+    let s = document.createElement("slot");
+    return s.setAttribute("name", "end"), o.appendChild(t), r2.appendChild(l), r2.appendChild(o), r2.appendChild(s), e2.appendChild(r2), e2;
   }
 }
-Status.define("wje-status", Status);
+r.define("wje-status", r);
 export {
-  Status as default
+  r as default
 };
 //# sourceMappingURL=wje-status.js.map

package/dist/wje-status.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-status.js","sources":["../packages/wje-status/status.element.js","../packages/wje-status/status.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Status element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/status\n * @status stable\n * @augments WJElement\n * @slot - The status main content.\n * @slot start - The status start content.\n * @slot end - The status end content.\n * @csspart native - The native part of the status.\n * @csspart bullet - The bullet part of the status.\n * @tag wje-status\n */\nexport default class Status extends WJElement {\n    /**\n     * Creates an instance of Status.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Status';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\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        this.setAriaState({ role: 'status' });\n    }\n\n    /**\n     * Draws the component for the status.\n     * @returns {object} fragment - The document fragment\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-status');\n\n        let bullet = document.createElement('div');\n        bullet.setAttribute('part', 'bullet');\n        bullet.classList.add('bullet');\n\n        let slot = document.createElement('slot');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        bullet.appendChild(slot);\n\n        native.appendChild(start);\n        native.appendChild(bullet);\n        native.appendChild(end);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import Status from './status.element.js';\n\nexport default Status;\n\nStatus.define('wje-status', Status);\n"],"names":[],"mappings":";;;;;AAee,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA,EAI1C,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,EAAE,MAAM,SAAQ,CAAE;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,eAAe;AAEpC,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,QAAQ;AAE7B,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,MAAM,SAAS,cAAc,MAAM;AACvC,QAAI,aAAa,QAAQ,KAAK;AAE9B,WAAO,YAAY,IAAI;AAEvB,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,MAAM;AACzB,WAAO,YAAY,GAAG;AAEtB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACX;AACJ;AC3EA,OAAO,OAAO,cAAc,MAAM;"}
+{"version":3,"file":"wje-status.js","sources":["../packages/wje-status/status.element.js","../packages/wje-status/status.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Status element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/status\n * @status stable\n * @augments WJElement\n * @slot - The status main content.\n * @slot start - The status start content.\n * @slot end - The status end content.\n * @csspart native - The native part of the status.\n * @csspart bullet - The bullet part of the status.\n * @tag wje-status\n */\nexport default class Status extends WJElement {\n    /**\n     * Creates an instance of Status.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Status';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\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        this.setAriaState({ role: 'status' });\n    }\n\n    /**\n     * Draws the component for the status.\n     * @returns {object} fragment - The document fragment\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-status');\n\n        let bullet = document.createElement('div');\n        bullet.setAttribute('part', 'bullet');\n        bullet.classList.add('bullet');\n\n        let slot = document.createElement('slot');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        bullet.appendChild(slot);\n\n        native.appendChild(start);\n        native.appendChild(bullet);\n        native.appendChild(end);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import Status from './status.element.js';\n\nexport default Status;\n\nStatus.define('wje-status', Status);\n"],"names":["Status","WJElement","constructor","super","className","setupAttributes","this","isShadowRoot","setAriaState","role","fragment","document","createDocumentFragment","native","createElement","setAttribute","classList","add","bullet","slot","start","end","appendChild","define"],"mappings":";;;;AAee,MAAMA,UAAeC,EAAAA;AAAAA,EAIhC,cAAAC;AACIC,UAAAA;AAOJC,qCAAY;AAAA,EANZ;AAAA,EAaA,WAAA;AACI;EACJ;AAAA,EAKA,kBAAAC;AACIC,SAAKC,eAAe,QACpBD,KAAKE,aAAa,EAAEC,MAAM;EAC9B;AAAA,EAMA;AACI,QAAIC,KAAWC,SAASC,uBAAAA,GAEpBC,KAASF,SAASG,cAAc,KAAA;AACpCD,IAAAA,GAAOE,aAAa,QAAQ,QAAA,GAC5BF,GAAOG,UAAUC,IAAI;AAErB,QAAIC,IAASP,SAASG,cAAc,KAAA;AACpCI,MAAOH,aAAa,QAAQ,QAAA,GAC5BG,EAAOF,UAAUC,IAAI;AAErB,QAAIE,IAAOR,SAASG,cAAc,MAAA,GAE9BM,IAAQT,SAASG,cAAc,MAAA;AACnCM,MAAML,aAAa,QAAQ;AAE3B,QAAIM,IAAMV,SAASG,cAAc,MAAA;AAWjC,WAVAO,EAAIN,aAAa,QAAQ,QAEzBG,EAAOI,YAAYH,IAEnBN,GAAOS,YAAYF,CAAAA,GACnBP,GAAOS,YAAYJ,CAAAA,GACnBL,GAAOS,YAAYD,CAAAA,GAEnBX,GAASY,YAAYT,EAAAA,GAEdH;AAAAA,EACX;AAAA;AC1EJV,EAAOuB,OAAO,cAAcvB,CAAAA;"}

package/dist/wje-step.js

@@ -1,50 +1,27 @@
 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 = "";
-class Step extends WJElement {
-  /**
-   * Creates an instance of Step.
-   */
+import e from "./wje-element.js";
+class t extends e {
   constructor() {
     super();
-    /**
-     * The class name for the component.
-     * @type {string}
-     */
     __publicField(this, "className", "Step");
   }
-  /**
-   * Returns the CSS stylesheet for the component.
-   * @returns {CSSStyleSheet} The CSS stylesheet.
-   */
   static get cssStyleSheet() {
-    return styles;
+    return "";
   }
-  /**
-   * 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 native = document.createElement("div");
-    native.className = "step-native";
-    native.setAttribute("part", "native");
-    const slot = document.createElement("slot");
-    native.appendChild(slot);
-    fragment.appendChild(native);
-    return fragment;
+    let e2 = document.createDocumentFragment(), t2 = document.createElement("div");
+    t2.className = "step-native", t2.setAttribute("part", "native");
+    const s = document.createElement("slot");
+    return t2.appendChild(s), e2.appendChild(t2), e2;
   }
 }
-Step.define("wje-step", Step);
+t.define("wje-step", t);
 export {
-  Step as default
+  t as default
 };
 //# sourceMappingURL=wje-step.js.map

package/dist/wje-step.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-step.js","sources":["../packages/wje-step/step.element.js","../packages/wje-step/step.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Step` is a custom web component that represents a step.\n * @summary This element represents a step.\n * @documentation https://elements.webjet.sk/components/step\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the step.\n * @slot - The default slot for the step.\n * @tag wje-step\n */\nexport default class Step extends WJElement {\n    /**\n     * Creates an instance of Step.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Step';\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 native = document.createElement('div');\n        native.className = 'step-native';\n        native.setAttribute('part', 'native');\n\n        const slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import Step from './step.element.js';\n\nexport default Step;\n\nStep.define('wje-step', Step);\n"],"names":[],"mappings":";;;;;AAae,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,YAAY;AACnB,WAAO,aAAa,QAAQ,QAAQ;AAEpC,UAAM,OAAO,SAAS,cAAc,MAAM;AAE1C,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACX;AACJ;ACzDA,KAAK,OAAO,YAAY,IAAI;"}
+{"version":3,"file":"wje-step.js","sources":["../packages/wje-step/step.element.js","../packages/wje-step/step.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Step` is a custom web component that represents a step.\n * @summary This element represents a step.\n * @documentation https://elements.webjet.sk/components/step\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the step.\n * @slot - The default slot for the step.\n * @tag wje-step\n */\nexport default class Step extends WJElement {\n    /**\n     * Creates an instance of Step.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Step';\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 native = document.createElement('div');\n        native.className = 'step-native';\n        native.setAttribute('part', 'native');\n\n        const slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import Step from './step.element.js';\n\nexport default Step;\n\nStep.define('wje-step', Step);\n"],"names":["Step","WJElement","super","className","cssStyleSheet","setupAttributes","this","isShadowRoot","draw","fragment","document","createDocumentFragment","native","createElement","setAttribute","slot","appendChild","define"],"mappings":";;;;AAae,MAAMA,UAAaC,EAAAA;AAAAA,EAI9B;AACIC,UAAAA;AAOJC,qCAAY;AAAA,EANZ;AAAA,EAYA,WAAA,gBAAWC;AACP;EACJ;AAAA,EAKA,kBAAAC;AACIC,SAAKC,eAAe;AAAA,EACxB;AAAA,EAMA,OAAAC;AACI,QAAIC,KAAWC,SAASC,uBAAAA,GAEpBC,KAASF,SAASG,cAAc,KAAA;AACpCD,IAAAA,GAAOT,YAAY,eACnBS,GAAOE,aAAa,QAAQ,QAAA;AAE5B,UAAMC,IAAOL,SAASG,cAAc;AAMpC,WAJAD,GAAOI,YAAYD,CAAAA,GAEnBN,GAASO,YAAYJ,EAAAA,GAEdH;AAAAA,EACX;AAAA;ACxDJT,EAAKiB,OAAO,YAAYjB,CAAAA;"}