wj-elements 0.2.0-alpha.9 → 0.3.0-alpha.2

package/dist/wje-reorder.js

@@ -44,6 +44,7 @@ class Reorder extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draws the component after it is connected to the DOM.
@@ -65,6 +66,7 @@ class Reorder extends WJElement {
    * Adds event listeners after the component is drawn.
    */
   afterDraw() {
+    this.syncAria();
     const items = this.querySelectorAll("wje-reorder-item");
     const dropZones = this.querySelectorAll("wje-reorder-dropzone");
     this.container.classList.add(this.hasAttribute("reverse") ? "reversed" : "basic");
@@ -84,6 +86,14 @@ class Reorder extends WJElement {
       });
     }
   }
+  /**
+   * Sync ARIA attributes on host.
+   */
+  syncAria() {
+    if (!this.hasAttribute("role")) {
+      this.setAriaState({ role: "list" });
+    }
+  }
   /**
    * Attaches event listeners to the element.
    * @param element

package/dist/wje-reorder.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-reorder.js","sources":["../packages/wje-reorder/reorder.element.js","../packages/wje-reorder/reorder.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Reorder` is a custom web component that represents a reorder.\n * It extends from `WJElement`.\n * @summary This element represents a reorder.\n * @documentation https://elements.webjet.sk/components/reorder\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder.\n * @slot - The default slot for the reorder.\n * // @fires wje-reorder:change - Event fired when the reorder is changed.\n * @tag wje-reorder\n */\n\nexport default class Reorder extends WJElement {\n    /**\n     * Creates an instance of Select.\n     * @class\n     */\n    constructor() {\n        super();\n        this.dragEl = null;\n        this.items = [];\n        this.originalIndex = null;\n        this.isDragging = false;\n        this.offsetX = 0;\n        this.offsetY = 0;\n        this.cloneEl = null;\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Select';\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 after it is connected to the DOM.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        const fragment = document.createDocumentFragment();\n\n        const container = document.createElement('div');\n        container.classList.add('container');\n        container.setAttribute('part', 'native');\n\n        const slot = document.createElement('slot');\n        slot.classList.add('reorder-items');\n\n        container.appendChild(slot);\n\n        fragment.appendChild(container);\n\n        this.container = container;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        const items = this.querySelectorAll('wje-reorder-item');\n        const dropZones = this.querySelectorAll('wje-reorder-dropzone');\n        this.container.classList.add(this.hasAttribute('reverse') ? 'reversed' : 'basic');\n\n        if (dropZones) {\n            dropZones.forEach((dropZone) => {\n                this.container.classList.remove('container');\n                this.container.classList.add('container-w-dropzones');\n            });\n        }\n\n        if (items) {\n            items.forEach((item) => {\n                const handles = item.querySelectorAll('[slot=handle]');\n                const draggableElement = handles.length > 0 ? handles : [item];\n\n                draggableElement.forEach((element) => {\n                    this.attachEventListeners(element);\n                });\n            });\n        }\n    }\n\n    /**\n     * Attaches event listeners to the element.\n     * @param element\n     */\n    attachEventListeners(element) {\n        element.addEventListener('mousedown', this.mouseDown.bind(this), false);\n        element.addEventListener('touchstart', this.touchStart.bind(this), false);\n        element.addEventListener('dragstart', this.dragStart.bind(this), false);\n    }\n\n    /**\n     * Handles the mouse down event.\n     * @param {object} e\n     */\n    mouseDown(e) {\n        this.startDragging(e.clientX, e.clientY, e.currentTarget);\n        document.addEventListener('mousemove', this.mouseMove.bind(this), false);\n        document.addEventListener('mouseup', this.mouseUp.bind(this), false);\n        document.body.style.userSelect = 'none';\n    }\n\n    /**\n     * Handles the touch start event.\n     * @param e\n     */\n    touchStart(e) {\n        const touch = e.touches[0];\n        this.startDragging(touch.clientX, touch.clientY, e.currentTarget);\n        document.addEventListener('touchmove', this.touchMove.bind(this), false);\n        document.addEventListener('touchend', this.touchEnd.bind(this), false);\n        document.body.style.userSelect = 'none';\n    }\n\n    /**\n     * Initializes the dragging process for a reorderable item.\n     * @param {number} clientX The x-coordinate of the mouse pointer when the drag starts.\n     * @param {number} clientY The y-coordinate of the mouse pointer when the drag starts.\n     * @param {HTMLElement} target The target element where the drag event originated.\n     */\n    startDragging(clientX, clientY, target) {\n        if (this.hasAttribute('disabled')) {\n            return;\n        }\n\n        this.isDragging = true;\n        this.dragEl = target.closest('wje-reorder-item');\n\n        this.createClone();\n\n        this.dragEl.style.opacity = '0.3';\n\n        const rect = this.dragEl.getBoundingClientRect();\n        this.offsetX = clientX - rect.left;\n        this.offsetY = clientY - rect.top;\n\n        this.dragEl.classList.add('dragging');\n\n        this.originalIndex = [...this.dragEl.parentNode.children].indexOf(this.dragEl);\n        this.originalParent = this.dragEl.parentNode;\n    }\n\n    /**\n     * Handles the mouse move event.\n     * @param e\n     */\n    mouseMove(e) {\n        if (!this.isDragging) return;\n        this.moveElement(e.pageX, e.pageY);\n\n        if (this.cloneEl) {\n            this.cloneEl.style.left = `${e.pageX - this.offsetX}px`;\n            this.cloneEl.style.top = `${e.pageY - this.offsetY}px`;\n        }\n    }\n\n    /**\n     * Handles the `touchmove` event and updates the position of the dragged element.\n     * @param {TouchEvent} e The touch event containing touch position data.\n     */\n    touchMove(e) {\n        if (!this.isDragging) return;\n        const touch = e.touches[0];\n        this.moveElement(touch.pageX, touch.pageY);\n    }\n\n    /**\n     * Updates the position of the dragged element and handles reordering logic based on the mouse position.\n     * @param {number} pageX The x-coordinate of the mouse pointer relative to the viewport during the move event.\n     * @param {number} pageY The y-coordinate of the mouse pointer relative to the viewport during the move event.\n     */\n    moveElement(pageX, pageY) {\n        const scrollX = window.scrollX || document.documentElement.scrollLeft;\n        const scrollY = window.scrollY || document.documentElement.scrollTop;\n        const adjustedPageX = pageX - scrollX;\n        const adjustedPageY = pageY - scrollY;\n\n        this.dragEl.style.left = `${adjustedPageX}px`;\n        this.dragEl.style.top = `${adjustedPageY}px`;\n\n        if (this.cloneEl) {\n            this.cloneEl.style.left = `${adjustedPageX}px`;\n            this.cloneEl.style.top = `${adjustedPageY}px`;\n        }\n\n        const items = this.querySelectorAll('wje-reorder-item');\n        items.forEach((item) => {\n            if (item === this.dragEl) return;\n\n            const boundingBox = item.getBoundingClientRect();\n            const mouseY = adjustedPageY - boundingBox.top;\n            const mouseYPercent = (mouseY / boundingBox.height) * 100;\n\n            if (mouseYPercent > 30 && this.isMovingDown(item)) {\n                item.parentNode.insertBefore(this.dragEl, item.nextSibling);\n            } else if (mouseYPercent < 30 && !this.isMovingDown(item)) {\n                item.parentNode.insertBefore(this.dragEl, item);\n            }\n        });\n    }\n\n    /**\n     * Handles the mouse up event.\n     */\n    mouseUp() {\n        this.stopDragging();\n        document.removeEventListener('mousemove', this.mouseMove.bind(this), false);\n        document.removeEventListener('mouseup', this.mouseUp.bind(this), false);\n\n        if (this.cloneEl) {\n            this.cloneEl.remove();\n            this.cloneEl = null;\n        }\n\n        if (this.dragEl) {\n            this.dragEl.style.opacity = '1';\n        }\n    }\n\n    /**\n     * Handles the touch end event.\n     */\n    touchEnd() {\n        this.stopDragging();\n        document.removeEventListener('touchmove', this.touchMove.bind(this), false);\n        document.removeEventListener('touchend', this.touchEnd.bind(this), false);\n    }\n\n    /**\n     * Stops dragging the element.\n     */\n    stopDragging() {\n        if (!this.isDragging) return;\n\n        this.isDragging = false;\n        this.dragEl.classList.remove('dragging');\n        this.dragEl.style.left = '';\n        this.dragEl.style.top = '';\n\n        const parent = this.dragEl.parentNode;\n        const newIndex = Array.from(parent.children).indexOf(this.dragEl);\n\n        const newOrderElements = Array.from(parent.children).map((el) => {\n            const clonedNode = el.cloneNode(true);\n            const handle = clonedNode.querySelector('.handle');\n            if (handle) {\n                handle.remove();\n            }\n            return clonedNode;\n        });\n\n        const newOrder = newOrderElements.map(el => el.innerText.trim());\n\n        this.dispatchChange(this.originalIndex, newIndex, newOrder, newOrderElements);\n\n        document.body.style.userSelect = '';\n    }\n\n    /**\n     * Prevents the default behavior of the `dragstart` event.\n     * @param {DragEvent} e The drag event triggered when a drag operation starts.\n     */\n    dragStart(e) {\n        e.preventDefault();\n    }\n\n    /**\n     * Creates a clone of the element.\n     */\n    createClone() {\n        this.cloneEl = this.dragEl.cloneNode(true);\n        this.cloneEl.style.position = 'absolute';\n        this.cloneEl.style.pointerEvents = 'none';\n        this.cloneEl.style.visibility = 'visible';\n\n        document.body.appendChild(this.cloneEl);\n    }\n\n    /**\n     * Checks if the dragged element is moving down.\n     * @param droppedElement\n     * @returns {boolean}\n     */\n    isMovingDown(droppedElement) {\n        const parent = droppedElement.parentNode;\n        const dragIndex = Array.from(parent.children).indexOf(this.dragEl);\n        const dropIndex = Array.from(parent.children).indexOf(droppedElement);\n\n        return dragIndex < dropIndex;\n    }\n\n    /**\n     * Dispatches a custom event to signal that a reordering operation has occurred.\n     * @param {number} from The original index of the dragged item.\n     * @param {number} to The new index of the dragged item after reordering.\n     * @param {Array<number>} order The updated order of items after the reordering.\n     * // @fires wje-reorder:change - Dispatched when the reordering is completed.\n     * The event includes details about the initial position, the new position, and the new order.\n     */\n    dispatchChange(from, to, order, orderElements) {\n        this.dispatchEvent(\n            new CustomEvent('wje-reorder:change', {\n                detail: { from, to, order, orderElements },\n            })\n        );\n    }\n}\n","import Reorder from './reorder.element.js';\n\nexport default Reorder;\n\nReorder.define('wje-reorder', Reorder);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-reorder.js","sources":["../packages/wje-reorder/reorder.element.js","../packages/wje-reorder/reorder.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Reorder` is a custom web component that represents a reorder.\n * It extends from `WJElement`.\n * @summary This element represents a reorder.\n * @documentation https://elements.webjet.sk/components/reorder\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder.\n * @slot - The default slot for the reorder.\n * // @fires wje-reorder:change - Event fired when the reorder is changed.\n * @tag wje-reorder\n */\n\nexport default class Reorder extends WJElement {\n    /**\n     * Creates an instance of Select.\n     * @class\n     */\n    constructor() {\n        super();\n        this.dragEl = null;\n        this.items = [];\n        this.originalIndex = null;\n        this.isDragging = false;\n        this.offsetX = 0;\n        this.offsetY = 0;\n        this.cloneEl = null;\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Select';\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        this.syncAria();\n    }\n\n    /**\n     * Draws the component after it is connected to the DOM.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        const fragment = document.createDocumentFragment();\n\n        const container = document.createElement('div');\n        container.classList.add('container');\n        container.setAttribute('part', 'native');\n\n        const slot = document.createElement('slot');\n        slot.classList.add('reorder-items');\n\n        container.appendChild(slot);\n\n        fragment.appendChild(container);\n\n        this.container = container;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.syncAria();\n        const items = this.querySelectorAll('wje-reorder-item');\n        const dropZones = this.querySelectorAll('wje-reorder-dropzone');\n        this.container.classList.add(this.hasAttribute('reverse') ? 'reversed' : 'basic');\n\n        if (dropZones) {\n            dropZones.forEach((dropZone) => {\n                this.container.classList.remove('container');\n                this.container.classList.add('container-w-dropzones');\n            });\n        }\n\n        if (items) {\n            items.forEach((item) => {\n                const handles = item.querySelectorAll('[slot=handle]');\n                const draggableElement = handles.length > 0 ? handles : [item];\n\n                draggableElement.forEach((element) => {\n                    this.attachEventListeners(element);\n                });\n            });\n        }\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'list' });\n        }\n    }\n\n    /**\n     * Attaches event listeners to the element.\n     * @param element\n     */\n    attachEventListeners(element) {\n        element.addEventListener('mousedown', this.mouseDown.bind(this), false);\n        element.addEventListener('touchstart', this.touchStart.bind(this), false);\n        element.addEventListener('dragstart', this.dragStart.bind(this), false);\n    }\n\n    /**\n     * Handles the mouse down event.\n     * @param {object} e\n     */\n    mouseDown(e) {\n        this.startDragging(e.clientX, e.clientY, e.currentTarget);\n        document.addEventListener('mousemove', this.mouseMove.bind(this), false);\n        document.addEventListener('mouseup', this.mouseUp.bind(this), false);\n        document.body.style.userSelect = 'none';\n    }\n\n    /**\n     * Handles the touch start event.\n     * @param e\n     */\n    touchStart(e) {\n        const touch = e.touches[0];\n        this.startDragging(touch.clientX, touch.clientY, e.currentTarget);\n        document.addEventListener('touchmove', this.touchMove.bind(this), false);\n        document.addEventListener('touchend', this.touchEnd.bind(this), false);\n        document.body.style.userSelect = 'none';\n    }\n\n    /**\n     * Initializes the dragging process for a reorderable item.\n     * @param {number} clientX The x-coordinate of the mouse pointer when the drag starts.\n     * @param {number} clientY The y-coordinate of the mouse pointer when the drag starts.\n     * @param {HTMLElement} target The target element where the drag event originated.\n     */\n    startDragging(clientX, clientY, target) {\n        if (this.hasAttribute('disabled')) {\n            return;\n        }\n\n        this.isDragging = true;\n        this.dragEl = target.closest('wje-reorder-item');\n\n        this.createClone();\n\n        this.dragEl.style.opacity = '0.3';\n\n        const rect = this.dragEl.getBoundingClientRect();\n        this.offsetX = clientX - rect.left;\n        this.offsetY = clientY - rect.top;\n\n        this.dragEl.classList.add('dragging');\n\n        this.originalIndex = [...this.dragEl.parentNode.children].indexOf(this.dragEl);\n        this.originalParent = this.dragEl.parentNode;\n    }\n\n    /**\n     * Handles the mouse move event.\n     * @param e\n     */\n    mouseMove(e) {\n        if (!this.isDragging) return;\n        this.moveElement(e.pageX, e.pageY);\n\n        if (this.cloneEl) {\n            this.cloneEl.style.left = `${e.pageX - this.offsetX}px`;\n            this.cloneEl.style.top = `${e.pageY - this.offsetY}px`;\n        }\n    }\n\n    /**\n     * Handles the `touchmove` event and updates the position of the dragged element.\n     * @param {TouchEvent} e The touch event containing touch position data.\n     */\n    touchMove(e) {\n        if (!this.isDragging) return;\n        const touch = e.touches[0];\n        this.moveElement(touch.pageX, touch.pageY);\n    }\n\n    /**\n     * Updates the position of the dragged element and handles reordering logic based on the mouse position.\n     * @param {number} pageX The x-coordinate of the mouse pointer relative to the viewport during the move event.\n     * @param {number} pageY The y-coordinate of the mouse pointer relative to the viewport during the move event.\n     */\n    moveElement(pageX, pageY) {\n        const scrollX = window.scrollX || document.documentElement.scrollLeft;\n        const scrollY = window.scrollY || document.documentElement.scrollTop;\n        const adjustedPageX = pageX - scrollX;\n        const adjustedPageY = pageY - scrollY;\n\n        this.dragEl.style.left = `${adjustedPageX}px`;\n        this.dragEl.style.top = `${adjustedPageY}px`;\n\n        if (this.cloneEl) {\n            this.cloneEl.style.left = `${adjustedPageX}px`;\n            this.cloneEl.style.top = `${adjustedPageY}px`;\n        }\n\n        const items = this.querySelectorAll('wje-reorder-item');\n        items.forEach((item) => {\n            if (item === this.dragEl) return;\n\n            const boundingBox = item.getBoundingClientRect();\n            const mouseY = adjustedPageY - boundingBox.top;\n            const mouseYPercent = (mouseY / boundingBox.height) * 100;\n\n            if (mouseYPercent > 30 && this.isMovingDown(item)) {\n                item.parentNode.insertBefore(this.dragEl, item.nextSibling);\n            } else if (mouseYPercent < 30 && !this.isMovingDown(item)) {\n                item.parentNode.insertBefore(this.dragEl, item);\n            }\n        });\n    }\n\n    /**\n     * Handles the mouse up event.\n     */\n    mouseUp() {\n        this.stopDragging();\n        document.removeEventListener('mousemove', this.mouseMove.bind(this), false);\n        document.removeEventListener('mouseup', this.mouseUp.bind(this), false);\n\n        if (this.cloneEl) {\n            this.cloneEl.remove();\n            this.cloneEl = null;\n        }\n\n        if (this.dragEl) {\n            this.dragEl.style.opacity = '1';\n        }\n    }\n\n    /**\n     * Handles the touch end event.\n     */\n    touchEnd() {\n        this.stopDragging();\n        document.removeEventListener('touchmove', this.touchMove.bind(this), false);\n        document.removeEventListener('touchend', this.touchEnd.bind(this), false);\n    }\n\n    /**\n     * Stops dragging the element.\n     */\n    stopDragging() {\n        if (!this.isDragging) return;\n\n        this.isDragging = false;\n        this.dragEl.classList.remove('dragging');\n        this.dragEl.style.left = '';\n        this.dragEl.style.top = '';\n\n        const parent = this.dragEl.parentNode;\n        const newIndex = Array.from(parent.children).indexOf(this.dragEl);\n\n        const newOrderElements = Array.from(parent.children).map((el) => {\n            const clonedNode = el.cloneNode(true);\n            const handle = clonedNode.querySelector('.handle');\n            if (handle) {\n                handle.remove();\n            }\n            return clonedNode;\n        });\n\n        const newOrder = newOrderElements.map(el => el.innerText.trim());\n\n        this.dispatchChange(this.originalIndex, newIndex, newOrder, newOrderElements);\n\n        document.body.style.userSelect = '';\n    }\n\n    /**\n     * Prevents the default behavior of the `dragstart` event.\n     * @param {DragEvent} e The drag event triggered when a drag operation starts.\n     */\n    dragStart(e) {\n        e.preventDefault();\n    }\n\n    /**\n     * Creates a clone of the element.\n     */\n    createClone() {\n        this.cloneEl = this.dragEl.cloneNode(true);\n        this.cloneEl.style.position = 'absolute';\n        this.cloneEl.style.pointerEvents = 'none';\n        this.cloneEl.style.visibility = 'visible';\n\n        document.body.appendChild(this.cloneEl);\n    }\n\n    /**\n     * Checks if the dragged element is moving down.\n     * @param droppedElement\n     * @returns {boolean}\n     */\n    isMovingDown(droppedElement) {\n        const parent = droppedElement.parentNode;\n        const dragIndex = Array.from(parent.children).indexOf(this.dragEl);\n        const dropIndex = Array.from(parent.children).indexOf(droppedElement);\n\n        return dragIndex < dropIndex;\n    }\n\n    /**\n     * Dispatches a custom event to signal that a reordering operation has occurred.\n     * @param {number} from The original index of the dragged item.\n     * @param {number} to The new index of the dragged item after reordering.\n     * @param {Array<number>} order The updated order of items after the reordering.\n     * // @fires wje-reorder:change - Dispatched when the reordering is completed.\n     * The event includes details about the initial position, the new position, and the new order.\n     */\n    dispatchChange(from, to, order, orderElements) {\n        this.dispatchEvent(\n            new CustomEvent('wje-reorder:change', {\n                detail: { from, to, order, orderElements },\n            })\n        );\n    }\n}\n","import Reorder from './reorder.element.js';\n\nexport default Reorder;\n\nReorder.define('wje-reorder', Reorder);\n"],"names":[],"mappings":"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"}

package/dist/wje-route.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-route.js","sources":["../packages/wje-route/route.element.js","../packages/wje-route/route.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\n\n/**\n * `Route` is a custom web component that represents a route in a routing system.\n * @summary This element represents a route in a routing system.\n * @documentation https://elements.webjet.sk/components/route\n * @status stable\n * @augments WJElement\n * @tag wje-route\n */\nexport default class Route extends WJElement {\n    /**\n     * Creates an instance of Route.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Route';\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 route.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        fragment.appendChild(slot);\n\n        return fragment;\n    }\n}\n","import Route from './route.element.js';\n\nexport default Route;\n\nRoute.define('wje-route', Route);\n"],"names":[],"mappings":";;;;AAUe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzC,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,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,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,WAAO;AAAA,EACf;AACA;AC9CA,MAAM,OAAO,aAAa,KAAK;"}
+{"version":3,"file":"wje-route.js","sources":["../packages/wje-route/route.element.js","../packages/wje-route/route.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\n\n/**\n * `Route` is a custom web component that represents a route in a routing system.\n * @summary This element represents a route in a routing system.\n * @documentation https://elements.webjet.sk/components/route\n * @status stable\n * @augments WJElement\n * @tag wje-route\n */\nexport default class Route extends WJElement {\n    /**\n     * Creates an instance of Route.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Route';\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 route.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        fragment.appendChild(slot);\n\n        return fragment;\n    }\n}\n","import Route from './route.element.js';\n\nexport default Route;\n\nRoute.define('wje-route', Route);\n"],"names":[],"mappings":";;;;AAUe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzC,cAAc;AACV,UAAK;AAGT,qCAAY;AAAA,EAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;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,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,WAAO;AAAA,EACX;AACJ;AC9CA,MAAM,OAAO,aAAa,KAAK;"}

package/dist/wje-router-link.js

@@ -1,7 +1,7 @@
 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 { b as bindRouterLinks } from "./router-links-CJnOdbas.js";
+import { b as bindRouterLinks } from "./router-links-wjqCnncc.js";
 import WJElement from "./wje-element.js";
 const styles = "/*\n[ WJ Router Link ]\n*/\n\n:host {\n    display: block;\n    background: transparent !important;\n}\n\n:host(.active) {\n    cursor: pointer;\n    font-weight: bold;\n}\n";
 class RouterLink extends WJElement {

package/dist/wje-router-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-router-link.js","sources":["../packages/wje-router-link/router-link.element.js","../packages/wje-router-link/router-link.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RouterLink` is a custom web component that represents a router link in a routing system.\n * @summary This element represents a router link in a routing system.\n * @documentation https://elements.webjet.sk/components/router-link\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the router link.\n * @tag wje-router-link\n */\nexport default class RouterLink extends WJElement {\n    /**\n     * Creates an instance of RouterLink.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'RouterLink';\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        this.setAttribute('active-class', 'active');\n    }\n\n    /**\n     * Draws the component for the router link.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    afterDraw(context, appStore, attributes) {\n        this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n    }\n\n    /**\n     * Cleans up before the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.unbindRouterLinks?.();\n    }\n}\n","import RouterLink from './router-link.element.js';\n\nexport default RouterLink;\n\nRouterLink.define('wje-router-link', RouterLink);\n"],"names":[],"mappings":";;;;;;AAce,MAAM,mBAAmB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9C,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,gBAAgB,QAAQ;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA,EAEI,UAAU,SAAS,UAAU,YAAY;AACrC,SAAK,oBAAoB,gBAAgB,KAAK,eAAe,EAAE,UAAU,OAAO;AAAA,EACxF;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;;AACf,eAAK,sBAAL;AAAA,EACR;AACA;ACvEA,WAAW,OAAO,mBAAmB,UAAU;"}
+{"version":3,"file":"wje-router-link.js","sources":["../packages/wje-router-link/router-link.element.js","../packages/wje-router-link/router-link.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RouterLink` is a custom web component that represents a router link in a routing system.\n * @summary This element represents a router link in a routing system.\n * @documentation https://elements.webjet.sk/components/router-link\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the router link.\n * @tag wje-router-link\n */\nexport default class RouterLink extends WJElement {\n    /**\n     * Creates an instance of RouterLink.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'RouterLink';\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        this.setAttribute('active-class', 'active');\n    }\n\n    /**\n     * Draws the component for the router link.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    afterDraw(context, appStore, attributes) {\n        this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n    }\n\n    /**\n     * Cleans up before the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.unbindRouterLinks?.();\n    }\n}\n","import RouterLink from './router-link.element.js';\n\nexport default RouterLink;\n\nRouterLink.define('wje-router-link', RouterLink);\n"],"names":[],"mappings":";;;;;;AAce,MAAM,mBAAmB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9C,cAAc;AACV,UAAK;AAGT,qCAAY;AAAA,EAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,gBAAgB,QAAQ;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AAAA,EAEA,UAAU,SAAS,UAAU,YAAY;AACrC,SAAK,oBAAoB,gBAAgB,KAAK,eAAe,EAAE,UAAU,OAAO;AAAA,EACpF;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAmB;;AACf,eAAK,sBAAL;AAAA,EACJ;AACJ;ACvEA,WAAW,OAAO,mBAAmB,UAAU;"}

package/dist/wje-router-outlet.js

@@ -129,10 +129,14 @@ function getAnimationHook(name) {
   return animationRegistry[name] || defaultHook || (defaultHook = new GenericCSS());
 }
 class AnimatedOutlet extends HTMLElement {
+  /**
+   * @template {Node} T
+   * @param {T} el
+   * @returns {T}
+   */
   appendChild(el) {
     if (!this.hasAttribute("animation")) {
-      super.appendChild(el);
-      return;
+      return super.appendChild(el);
     }
     const hook = getAnimationHook(this.getAttribute("animation"));
     const runParallel = hook.runParallel(this);
@@ -143,11 +147,16 @@ class AnimatedOutlet extends HTMLElement {
     } else {
       hook.enter(this, el);
     }
+    return el;
   }
+  /**
+   * @template {Node} T
+   * @param {T} el
+   * @returns {T}
+   */
   removeChild(el) {
     if (!this.hasAttribute("animation")) {
-      super.removeChild(el);
-      return;
+      return super.removeChild(el);
     }
     const hook = getAnimationHook(this.getAttribute("animation"));
     if (this.removing && this.removing.parentNode === this) {
@@ -158,7 +167,7 @@ class AnimatedOutlet extends HTMLElement {
         super.removeChild(el);
       }
       this.removing = null;
-      return;
+      return el;
     }
     this.removing = el;
     hook.leave(this, el, () => {
@@ -169,6 +178,7 @@ class AnimatedOutlet extends HTMLElement {
       this.appending = null;
       this.removing = null;
     });
+    return el;
   }
 }
 const styles = "/*\n[ WJ Router Outlet ]\n*/\n\n.fade-enter-active,\n.fade-leave-active {\n    transition: opacity 0.5s;\n}\n.fade-enter {\n    height: 0;\n    overflow: hidden;\n}\n\n.fade-enter,\n.fade-leave-to {\n    opacity: 0;\n}\n\n.slide-fade-enter-active {\n    transition: all 0.3s ease;\n}\n\n.slide-fade-leave-active {\n    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);\n}\n\n.slide-fade-enter,\n.slide-fade-leave-to {\n    transform: translateX(100px);\n    opacity: 0;\n}\n\n.bounce-enter {\n    opacity: 0;\n}\n\n.bounce-enter-active {\n    animation: bounce-in 0.5s;\n}\n\n.bounce-leave-active {\n    animation: bounce-in 0.5s reverse;\n}\n\n@keyframes bounce-in {\n    0% {\n        transform: scale(0);\n    }\n    50% {\n        transform: scale(1.5);\n    }\n    100% {\n        transform: scale(1);\n    }\n}\n\n\n";

package/dist/wje-router-outlet.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-router-outlet.js","sources":["../node_modules/slick-router/lib/components/animated-outlet.js","../packages/wje-router-outlet/router-outlet.element.js","../packages/wje-router-outlet/router-outlet.js"],"sourcesContent":["export class AnimationHook {\r\n  constructor(options = {}) {\r\n    this.options = options\r\n  }\r\n\r\n  getOption(outlet, name) {\r\n    return outlet.hasAttribute(name) ? outlet.getAttribute(name) : this.options[name]\r\n  }\r\n\r\n  hasOption(outlet, name) {\r\n    return outlet.hasAttribute(name) || this.options[name]\r\n  }\r\n\r\n  runParallel(outlet) {\r\n    return this.hasOption(outlet, 'parallel')\r\n  }\r\n\r\n  beforeEnter(outlet, el) {}\r\n\r\n  enter(outlet, el) {}\r\n\r\n  leave(outlet, el, done) {\r\n    done()\r\n  }\r\n}\r\n\r\n// code extracted from vue\r\nconst raf = window.requestAnimationFrame\r\nconst TRANSITION = 'transition'\r\nconst ANIMATION = 'animation'\r\n\r\n// Transition property/event sniffing\r\nconst transitionProp = 'transition'\r\nconst transitionEndEvent = 'transitionend'\r\nconst animationProp = 'animation'\r\nconst animationEndEvent = 'animationend'\r\n\r\nfunction nextFrame(fn) {\r\n  raf(function () {\r\n    raf(fn)\r\n  })\r\n}\r\n\r\nfunction whenTransitionEnds(el, cb) {\r\n  const ref = getTransitionInfo(el)\r\n  const type = ref.type\r\n  const timeout = ref.timeout\r\n  const propCount = ref.propCount\r\n  if (!type) {\r\n    return cb()\r\n  }\r\n  const event = type === TRANSITION ? transitionEndEvent : animationEndEvent\r\n  let ended = 0\r\n  const end = function () {\r\n    el.removeEventListener(event, onEnd)\r\n    cb()\r\n  }\r\n  const onEnd = function (e) {\r\n    if (e.target === el) {\r\n      if (++ended >= propCount) {\r\n        end()\r\n      }\r\n    }\r\n  }\r\n  setTimeout(function () {\r\n    if (ended < propCount) {\r\n      end()\r\n    }\r\n  }, timeout + 1)\r\n  el.addEventListener(event, onEnd)\r\n}\r\n\r\nfunction getTransitionInfo(el) {\r\n  const styles = window.getComputedStyle(el)\r\n  // JSDOM may return undefined for transition properties\r\n  const transitionDelays = (styles[transitionProp + 'Delay'] || '').split(', ')\r\n  const transitionDurations = (styles[transitionProp + 'Duration'] || '').split(', ')\r\n  const transitionTimeout = getTimeout(transitionDelays, transitionDurations)\r\n  const animationDelays = (styles[animationProp + 'Delay'] || '').split(', ')\r\n  const animationDurations = (styles[animationProp + 'Duration'] || '').split(', ')\r\n  const animationTimeout = getTimeout(animationDelays, animationDurations)\r\n\r\n  const timeout = Math.max(transitionTimeout, animationTimeout)\r\n  const type = timeout > 0 ? (transitionTimeout > animationTimeout ? TRANSITION : ANIMATION) : null\r\n  const propCount = type\r\n    ? type === TRANSITION\r\n      ? transitionDurations.length\r\n      : animationDurations.length\r\n    : 0\r\n\r\n  return {\r\n    type,\r\n    timeout,\r\n    propCount,\r\n  }\r\n}\r\n\r\nfunction getTimeout(delays, durations) {\r\n  /* istanbul ignore next */\r\n  while (delays.length < durations.length) {\r\n    delays = delays.concat(delays)\r\n  }\r\n\r\n  return Math.max.apply(\r\n    null,\r\n    durations.map(function (d, i) {\r\n      return toMs(d) + toMs(delays[i])\r\n    }),\r\n  )\r\n}\r\n\r\n// Old versions of Chromium (below 61.0.3163.100) formats floating pointer numbers\r\n// in a locale-dependent way, using a comma instead of a dot.\r\n// If comma is not replaced with a dot, the input will be rounded down (i.e. acting\r\n// as a floor function) causing unexpected behaviors\r\nfunction toMs(s) {\r\n  return Number(s.slice(0, -1).replace(',', '.')) * 1000\r\n}\r\n\r\nfunction runTransition(el, name, type, cb) {\r\n  el.classList.add(`${name}-${type}-active`)\r\n  nextFrame(function () {\r\n    el.classList.remove(`${name}-${type}`)\r\n    el.classList.add(`${name}-${type}-to`)\r\n    whenTransitionEnds(el, function () {\r\n      el.classList.remove(`${name}-${type}-active`, `${name}-${type}-to`)\r\n      if (cb) cb()\r\n    })\r\n  })\r\n}\r\n\r\nexport class GenericCSS extends AnimationHook {\r\n  beforeEnter(outlet, el) {\r\n    const name = outlet.getAttribute('animation') || 'outlet'\r\n    el.classList.add(`${name}-enter`)\r\n  }\r\n\r\n  enter(outlet, el) {\r\n    const name = outlet.getAttribute('animation') || 'outlet'\r\n    runTransition(el, name, 'enter')\r\n  }\r\n\r\n  leave(outlet, el, done) {\r\n    const name = outlet.getAttribute('animation') || 'outlet'\r\n    el.classList.add(`${name}-leave`)\r\n    runTransition(el, name, 'leave', done)\r\n  }\r\n}\r\n\r\nexport class AnimateCSS extends AnimationHook {\r\n  beforeEnter(outlet, el) {\r\n    const enter = this.getOption(outlet, 'enter')\r\n    if (enter) {\r\n      el.style.display = 'none'\r\n    }\r\n  }\r\n\r\n  enter(outlet, el) {\r\n    const enter = this.getOption(outlet, 'enter')\r\n    if (!enter) return\r\n    el.style.display = 'block'\r\n    el.classList.add('animated', enter)\r\n    el.addEventListener(\r\n      'animationend',\r\n      () => {\r\n        el.classList.remove('animated', enter)\r\n      },\r\n      { once: true },\r\n    )\r\n  }\r\n\r\n  leave(outlet, el, done) {\r\n    const leave = this.getOption(outlet, 'leave')\r\n    if (!leave) {\r\n      done()\r\n      return\r\n    }\r\n    el.classList.add('animated', leave)\r\n    el.addEventListener('animationend', done, { once: true })\r\n  }\r\n}\r\n\r\nconst animationRegistry = {}\r\nlet defaultHook\r\n\r\nexport function registerAnimation(name, AnimationHookClass, options = {}) {\r\n  animationRegistry[name] = new AnimationHookClass(options)\r\n}\r\n\r\nexport function setDefaultAnimation(AnimationHookClass, options = {}) {\r\n  defaultHook = new AnimationHookClass(options)\r\n}\r\n\r\nfunction getAnimationHook(name) {\r\n  return animationRegistry[name] || defaultHook || (defaultHook = new GenericCSS())\r\n}\r\n\r\nexport class AnimatedOutlet extends HTMLElement {\r\n  appendChild(el) {\r\n    if (!this.hasAttribute('animation')) {\r\n      super.appendChild(el)\r\n      return\r\n    }\r\n    const hook = getAnimationHook(this.getAttribute('animation'))\r\n    const runParallel = hook.runParallel(this)\r\n\r\n    hook.beforeEnter(this, el)\r\n    super.appendChild(el)\r\n    if (!runParallel && this.removing) {\r\n      // when removing a previous el, append animation is run after remove one\r\n      this.appending = el\r\n    } else {\r\n      hook.enter(this, el)\r\n    }\r\n  }\r\n\r\n  removeChild(el) {\r\n    if (!this.hasAttribute('animation')) {\r\n      super.removeChild(el)\r\n      return\r\n    }\r\n    const hook = getAnimationHook(this.getAttribute('animation'))\r\n\r\n    if (this.removing && this.removing.parentNode === this) {\r\n      super.removeChild(this.removing)\r\n    }\r\n\r\n    if (el === this.appending) {\r\n      if (el.parentNode === this) {\r\n        super.removeChild(el)\r\n      }\r\n      this.removing = null\r\n      return\r\n    }\r\n\r\n    this.removing = el\r\n    hook.leave(this, el, () => {\r\n      if (this.removing && this.removing.parentNode === this) {\r\n        super.removeChild(this.removing)\r\n      }\r\n      if (this.appending) hook.enter(this, this.appending)\r\n      this.appending = null\r\n      this.removing = null\r\n    })\r\n  }\r\n}\r\n","import { AnimatedOutlet, GenericCSS, setDefaultAnimation } from 'slick-router/components/animated-outlet.js';\n\nimport styles from './styles/styles.css?inline';\n\nsetDefaultAnimation(GenericCSS);\n\n/**\n * `Route` is a custom web component that represents a route in a routing system.\n * @summary This element represents a route in a routing system.\n * @documentation https://elements.webjet.sk/components/route\n * @status stable\n * @augments AnimatedOutlet\n * @tag wje-router-outlet\n */\nexport default class RouterOutlet extends AnimatedOutlet {\n    /**\n     * Creates an instance of Route.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'RouterOutlet';\n\n    connectedCallback() {\n        const styleEl = document.createElement('style');\n        styleEl.textContent = styles;\n        this.parentNode.insertBefore(styleEl, this);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport RouterOutlet from './router-outlet.element.js';\n\nexport default RouterOutlet;\n\nWJElement.define('wje-router-outlet', RouterOutlet);\n"],"names":["styles"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"wje-router-outlet.js","sources":["../node_modules/slick-router/lib/components/animated-outlet.js","../packages/wje-router-outlet/router-outlet.element.js","../packages/wje-router-outlet/router-outlet.js"],"sourcesContent":["export class AnimationHook {\n  constructor(options = {}) {\n    this.options = options\n  }\n\n  getOption(outlet, name) {\n    return outlet.hasAttribute(name) ? outlet.getAttribute(name) : this.options[name]\n  }\n\n  hasOption(outlet, name) {\n    return outlet.hasAttribute(name) || this.options[name]\n  }\n\n  runParallel(outlet) {\n    return this.hasOption(outlet, 'parallel')\n  }\n\n  beforeEnter(outlet, el) {}\n\n  enter(outlet, el) {}\n\n  leave(outlet, el, done) {\n    done()\n  }\n}\n\n// code extracted from vue\nconst raf = window.requestAnimationFrame\nconst TRANSITION = 'transition'\nconst ANIMATION = 'animation'\n\n// Transition property/event sniffing\nconst transitionProp = 'transition'\nconst transitionEndEvent = 'transitionend'\nconst animationProp = 'animation'\nconst animationEndEvent = 'animationend'\n\nfunction nextFrame(fn) {\n  raf(function () {\n    raf(fn)\n  })\n}\n\nfunction whenTransitionEnds(el, cb) {\n  const ref = getTransitionInfo(el)\n  const type = ref.type\n  const timeout = ref.timeout\n  const propCount = ref.propCount\n  if (!type) {\n    return cb()\n  }\n  const event = type === TRANSITION ? transitionEndEvent : animationEndEvent\n  let ended = 0\n  const end = function () {\n    el.removeEventListener(event, onEnd)\n    cb()\n  }\n  const onEnd = function (e) {\n    if (e.target === el) {\n      if (++ended >= propCount) {\n        end()\n      }\n    }\n  }\n  setTimeout(function () {\n    if (ended < propCount) {\n      end()\n    }\n  }, timeout + 1)\n  el.addEventListener(event, onEnd)\n}\n\nfunction getTransitionInfo(el) {\n  const styles = window.getComputedStyle(el)\n  // JSDOM may return undefined for transition properties\n  const transitionDelays = (styles[transitionProp + 'Delay'] || '').split(', ')\n  const transitionDurations = (styles[transitionProp + 'Duration'] || '').split(', ')\n  const transitionTimeout = getTimeout(transitionDelays, transitionDurations)\n  const animationDelays = (styles[animationProp + 'Delay'] || '').split(', ')\n  const animationDurations = (styles[animationProp + 'Duration'] || '').split(', ')\n  const animationTimeout = getTimeout(animationDelays, animationDurations)\n\n  const timeout = Math.max(transitionTimeout, animationTimeout)\n  const type = timeout > 0 ? (transitionTimeout > animationTimeout ? TRANSITION : ANIMATION) : null\n  const propCount = type\n    ? type === TRANSITION\n      ? transitionDurations.length\n      : animationDurations.length\n    : 0\n\n  return {\n    type,\n    timeout,\n    propCount,\n  }\n}\n\nfunction getTimeout(delays, durations) {\n  /* istanbul ignore next */\n  while (delays.length < durations.length) {\n    delays = delays.concat(delays)\n  }\n\n  return Math.max.apply(\n    null,\n    durations.map(function (d, i) {\n      return toMs(d) + toMs(delays[i])\n    }),\n  )\n}\n\n// Old versions of Chromium (below 61.0.3163.100) formats floating pointer numbers\n// in a locale-dependent way, using a comma instead of a dot.\n// If comma is not replaced with a dot, the input will be rounded down (i.e. acting\n// as a floor function) causing unexpected behaviors\nfunction toMs(s) {\n  return Number(s.slice(0, -1).replace(',', '.')) * 1000\n}\n\nfunction runTransition(el, name, type, cb) {\n  el.classList.add(`${name}-${type}-active`)\n  nextFrame(function () {\n    el.classList.remove(`${name}-${type}`)\n    el.classList.add(`${name}-${type}-to`)\n    whenTransitionEnds(el, function () {\n      el.classList.remove(`${name}-${type}-active`, `${name}-${type}-to`)\n      if (cb) cb()\n    })\n  })\n}\n\nexport class GenericCSS extends AnimationHook {\n  beforeEnter(outlet, el) {\n    const name = outlet.getAttribute('animation') || 'outlet'\n    el.classList.add(`${name}-enter`)\n  }\n\n  enter(outlet, el) {\n    const name = outlet.getAttribute('animation') || 'outlet'\n    runTransition(el, name, 'enter')\n  }\n\n  leave(outlet, el, done) {\n    const name = outlet.getAttribute('animation') || 'outlet'\n    el.classList.add(`${name}-leave`)\n    runTransition(el, name, 'leave', done)\n  }\n}\n\nexport class AnimateCSS extends AnimationHook {\n  beforeEnter(outlet, el) {\n    const enter = this.getOption(outlet, 'enter')\n    if (enter) {\n      el.style.display = 'none'\n    }\n  }\n\n  enter(outlet, el) {\n    const enter = this.getOption(outlet, 'enter')\n    if (!enter) return\n    el.style.display = 'block'\n    el.classList.add('animated', enter)\n    el.addEventListener(\n      'animationend',\n      () => {\n        el.classList.remove('animated', enter)\n      },\n      { once: true },\n    )\n  }\n\n  leave(outlet, el, done) {\n    const leave = this.getOption(outlet, 'leave')\n    if (!leave) {\n      done()\n      return\n    }\n    el.classList.add('animated', leave)\n    el.addEventListener('animationend', done, { once: true })\n  }\n}\n\nconst animationRegistry = {}\nlet defaultHook\n\nexport function registerAnimation(name, AnimationHookClass, options = {}) {\n  animationRegistry[name] = new AnimationHookClass(options)\n}\n\nexport function setDefaultAnimation(AnimationHookClass, options = {}) {\n  defaultHook = new AnimationHookClass(options)\n}\n\nfunction getAnimationHook(name) {\n  return animationRegistry[name] || defaultHook || (defaultHook = new GenericCSS())\n}\n\nexport class AnimatedOutlet extends HTMLElement {\n  /**\n   * @template {Node} T\n   * @param {T} el\n   * @returns {T}\n   */\n  appendChild(el) {\n    if (!this.hasAttribute('animation')) {\n      return super.appendChild(el)\n    }\n    const hook = getAnimationHook(this.getAttribute('animation'))\n    const runParallel = hook.runParallel(this)\n\n    hook.beforeEnter(this, el)\n    super.appendChild(el)\n    if (!runParallel && this.removing) {\n      // when removing a previous el, append animation is run after remove one\n      this.appending = el\n    } else {\n      hook.enter(this, el)\n    }\n    return el\n  }\n\n  /**\n   * @template {Node} T\n   * @param {T} el\n   * @returns {T}\n   */\n  removeChild(el) {\n    if (!this.hasAttribute('animation')) {\n      return super.removeChild(el)\n    }\n    const hook = getAnimationHook(this.getAttribute('animation'))\n\n    if (this.removing && this.removing.parentNode === this) {\n      super.removeChild(this.removing)\n    }\n\n    if (el === this.appending) {\n      if (el.parentNode === this) {\n        super.removeChild(el)\n      }\n      this.removing = null\n      return el\n    }\n\n    this.removing = el\n    hook.leave(this, el, () => {\n      if (this.removing && this.removing.parentNode === this) {\n        super.removeChild(this.removing)\n      }\n      if (this.appending) hook.enter(this, this.appending)\n      this.appending = null\n      this.removing = null\n    })\n    return el\n  }\n}\n","import { AnimatedOutlet, GenericCSS, setDefaultAnimation } from 'slick-router/components/animated-outlet.js';\n\nimport styles from './styles/styles.css?inline';\n\nsetDefaultAnimation(GenericCSS);\n\n/**\n * `Route` is a custom web component that represents a route in a routing system.\n * @summary This element represents a route in a routing system.\n * @documentation https://elements.webjet.sk/components/route\n * @status stable\n * @augments AnimatedOutlet\n * @tag wje-router-outlet\n */\nexport default class RouterOutlet extends AnimatedOutlet {\n    /**\n     * Creates an instance of Route.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'RouterOutlet';\n\n    connectedCallback() {\n        const styleEl = document.createElement('style');\n        styleEl.textContent = styles;\n        this.parentNode.insertBefore(styleEl, this);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport RouterOutlet from './router-outlet.element.js';\n\nexport default RouterOutlet;\n\nWJElement.define('wje-router-outlet', RouterOutlet);\n"],"names":["styles"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/wje-routerx.js

@@ -8,7 +8,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var _routes;
-import { r as routerLinks } from "./router-links-CJnOdbas.js";
+import { r as routerLinks } from "./router-links-wjqCnncc.js";
 import WJElement from "./wje-element.js";
 const assoc = (obj, attr, val) => {
   obj[attr] = val;
@@ -201,21 +201,20 @@ class History {
   }
   // Start the hash change handling, returning `true` if the current URL matches
   // an existing route, and `false` otherwise.
-  start(options = {}) {
+  start(options) {
     this.started = true;
-    this.options = extend({ root: "/" }, options);
-    this.location = this.options.location || this.location;
-    this.history = this.options.history || this.history;
-    this.root = this.options.root;
-    this._wantsHashChange = this.options.hashChange !== false;
-    this._wantsPushState = !!this.options.pushState;
-    this._hasPushState = this._wantsPushState;
+    const _wantsPushState = !!options.pushState;
+    this.location = options.location || this.location;
+    this.history = options.history || this.history;
+    this.root = options.root;
+    this._wantsHashChange = options.hashChange !== false;
+    this._hasPushState = _wantsPushState;
     const fragment = this.getFragment();
     this.root = `/${this.root}/`.replace(rootStripper, "/");
     bindEvent(window, this._hasPushState ? "popstate" : "hashchange", this.checkUrl);
     this.fragment = fragment;
     const loc = this.location;
-    if (this._wantsHashChange && this._wantsPushState) {
+    if (this._wantsHashChange && _wantsPushState) {
       if (!this._hasPushState && !this.atRoot()) {
         this.fragment = this.getFragment(null, true);
         this.location.replace(`${this.root}#${this.fragment}`);
@@ -225,7 +224,7 @@ class History {
         this.history.replaceState({}, document.title, this.root + this.fragment);
       }
     }
-    if (!this.options.silent) return this.loadUrl();
+    if (!options.silent) return this.loadUrl();
   }
   // Disable Backbone.history, perhaps temporarily. Not useful in a real app,
   // but possibly useful for unit testing Routers.
@@ -296,19 +295,15 @@ class History {
   onChange(callback) {
     this.route(/^(.*?)$/, callback);
   }
-  // checks if the browser has pushstate support
-  hasPushState() {
-    if (!this.started) {
-      throw new Error("only available after LocationBar.start()");
-    }
-    return this._hasPushState;
-  }
 }
 const routeStripper = /^[#\/]|\s+$/g;
 const rootStripper = /^\/+|\/+$/g;
 const trailingSlash = /\/$/;
 const pathStripper = /#.*$/;
 class BrowserLocation {
+  /**
+   * @param {BrowserLocationOptions} options
+   */
   constructor(options = {}) {
     this.path = options.path || "";
     this.options = extend(
@@ -318,11 +313,7 @@ class BrowserLocation {
       },
       options
     );
-    this.locationBar = new History();
-    this.locationBar.onChange((path) => {
-      this.handleURL(`/${path || ""}`);
-    });
-    this.locationBar.start(options);
+    this.history = new History();
   }
   /**
    * Get the current URL
@@ -337,7 +328,7 @@ class BrowserLocation {
   setURL(path, options = {}) {
     if (this.path !== path) {
       this.path = path;
-      this.locationBar.update(path, extend({ trigger: true }, options));
+      this.history.update(path, extend({ trigger: true }, options));
     }
   }
   /**
@@ -347,23 +338,24 @@ class BrowserLocation {
   replaceURL(path, options = {}) {
     if (this.path !== path) {
       this.path = path;
-      this.locationBar.update(path, extend({ trigger: true, replace: true }, options));
+      this.history.update(path, extend({ trigger: true, replace: true }, options));
     }
   }
   /**
    * Setup a URL change handler
-   * @param  {Function} callback
+   * @param  {(url: string) => void} callback
    */
   onChange(callback) {
-    this.changeCallback = callback;
+    this.callback = callback;
   }
   /**
    * Given a path, generate a URL appending root
    * if pushState is used and # if hash state is used
    */
   formatURL(path) {
-    if (this.locationBar.hasPushState()) {
-      let rootURL = this.options.root;
+    const { root, pushState } = this.options;
+    if (pushState) {
+      let rootURL = root;
       if (path !== "") {
         rootURL = rootURL.replace(/\/$/, "");
       }
@@ -384,8 +376,9 @@ class BrowserLocation {
    * - this method is public so that we could dispatch URLs without root in router
    */
   removeRoot(url) {
-    if (this.options.pushState && this.options.root && this.options.root !== "/") {
-      return url.replace(this.options.root, "");
+    const { root, pushState } = this.options;
+    if (pushState && root && root !== "/") {
+      return url.replace(root, "");
     } else {
       return url;
     }
@@ -394,7 +387,7 @@ class BrowserLocation {
    * Stop listening to URL changes and link clicks
    */
   destroy() {
-    this.locationBar.stop();
+    this.history.stop();
   }
   /**
       initially, the changeCallback won't be defined yet, but that's good
@@ -407,14 +400,21 @@ class BrowserLocation {
      */
   handleURL(url) {
     this.path = url;
-    if (this.changeCallback) {
-      this.changeCallback(url);
+    if (this.callback) {
+      this.callback(url);
     }
   }
+  start(path) {
+    this.path = path;
+    this.history.onChange((path2) => {
+      this.handleURL(`/${path2 || ""}`);
+    });
+    this.history.start(this.options);
+  }
 }
 class MemoryLocation {
-  constructor({ path }) {
-    this.path = path || "";
+  constructor() {
+    this.path = "";
   }
   getURL() {
     return this.path;
@@ -431,13 +431,13 @@ class MemoryLocation {
     }
   }
   onChange(callback) {
-    this.changeCallback = callback;
+    this.callback = callback;
   }
-  handleURL(url, options = {}) {
+  handleURL(url, options) {
     this.path = url;
-    options = extend({ trigger: true }, options);
-    if (this.changeCallback && options.trigger) {
-      this.changeCallback(url);
+    const shouldTrigger = (options == null ? void 0 : options.trigger) !== false;
+    if (this.callback && shouldTrigger) {
+      this.callback(url);
     }
   }
   removeRoot(url) {
@@ -446,6 +446,9 @@ class MemoryLocation {
   formatURL(url) {
     return url;
   }
+  start(path) {
+    this.path = path;
+  }
 }
 const TRANSITION_REDIRECTED = "TransitionRedirected";
 const TRANSITION_CANCELLED = "TransitionCancelled";
@@ -693,6 +696,20 @@ function patternCompiler(pattern) {
     paramNames
   };
 }
+function createLocation(options) {
+  const location = options.location;
+  if (typeof location !== "string") {
+    return location;
+  }
+  if (location === "browser") {
+    const { pushState, root } = options;
+    return new BrowserLocation({ pushState, root });
+  } else if (location === "memory") {
+    return new MemoryLocation();
+  } else {
+    throw new Error("Location can be `browser`, `memory` or a custom implementation");
+  }
+}
 let Router$1 = class Router {
   /**
    * @param {RouterOptions} [options]
@@ -715,10 +732,13 @@ let Router$1 = class Router {
     if (options.routes) {
       this.map(options.routes);
     }
+    this.location = createLocation(this.options);
   }
   /**
    * Add a middleware
-   * @param  {Function} middleware
+   * @param  {((transition: Transition) => void) | RouterMiddleware} middleware
+   * @param  {object} [options]
+   * @param  {number} [options.at] position to insert the middleware
    * @return {Router}
    * @api public
    */
@@ -803,7 +823,8 @@ let Router$1 = class Router {
    * @api public
    */
   listen(path) {
-    const location = this.location = this.createLocation(path || "");
+    const location = this.location;
+    location.start(path);
     location.onChange((url) => {
       const previousUrl = this.state.path;
       this.dispatch(url).catch((err) => {
@@ -853,7 +874,6 @@ let Router$1 = class Router {
    * @api public
    */
   generate(name, params, query) {
-    invariant(this.location, "call .listen() before using .generate()");
     let matcher;
     query = query || {};
     this.matchers.forEach((m) => {
@@ -1004,28 +1024,6 @@ let Router$1 = class Router {
     this.state.activeTransition = t;
     return t;
   }
-  /**
-   * Create the default location.
-   * This is used when no custom location is passed to
-   * the listen call.
-   * @param  {LocationParam} path
-   * @return {Object} location
-   *
-   * @api private
-   */
-  createLocation(path) {
-    const location = this.options.location;
-    if (typeof location !== "string") {
-      return location;
-    }
-    if (location === "browser") {
-      return new BrowserLocation(pick(this.options, ["pushState", "root"]));
-    } else if (location === "memory") {
-      return new MemoryLocation({ path });
-    } else {
-      throw new Error("Location can be `browser`, `memory` or a custom implementation");
-    }
-  }
   log(...args) {
     console.info(...args);
   }