wj-elements 0.1.130 → 0.1.131

package/dist/wje-breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-breadcrumb.js","sources":["../packages/wje-breadcrumb/breadcrumb.element.js","../packages/wje-breadcrumb/breadcrumb.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Breadcrumb element, extending the WJElement class. It provides a navigational aid in user interfaces, displaying the current location within a hierarchy.\n * @documentation https://elements.webjet.sk/components/breadcrumb\n * @status stable\n * @augments WJElement\n * @slot - The main content of the breadcrumb.\n * @slot start - Slot for content at the start of the breadcrumb.\n * @slot end - Slot for content at the end of the breadcrumb.\n * @slot separator - Slot for a custom separator between breadcrumb items.\n * @csspart native - The native wrapper of the breadcrumb component.\n * @csspart separator - The separator between breadcrumb items.\n * @cssproperty [--wje-breadcrumb-a=var(--wje-color-contrast-8)] - The color of the breadcrumb text.\n * @cssproperty [--wje-breadcrumb-a-hover=var(--wje-color-contrast-6)] - The color of the breadcrumb separator line.\n * @tag wje-breadcrumb\n */\nexport default class Breadcrumb extends WJElement {\n    /**\n     * Breadcrumb constructor method.\n     */\n    constructor() {\n        super();\n\n        this._showSeparator = true;\n        this.showCollapsedIndicator = false;\n    }\n\n    /**\n     * Get show separator flag.\n     * @returns {boolean} showSeparator - The show separator flag\n     */\n    get showSeparator() {\n        return this._showSeparator;\n    }\n\n    /**\n     * Set show separator flag.\n     * @param {boolean} value The value to set\n     */\n    set showSeparator(value) {\n        this._showSeparator = value;\n    }\n\n    /**\n     * Set collapsed variant.\n     * @param {string} value The value to set\n     */\n    set collapsedVariant(value) {\n        this._collapsedVariant = value;\n    }\n\n    /**\n     * Get collapsed variant.\n     * @returns {string} The collapsed variant value in uppercase.\n     */\n    get collapsedVariant() {\n        let variant = this.parentElement.variant || this._collapsedVariant;\n        return variant.toUpperCase();\n    }\n\n    /**\n     * Class name for the Breadcrumb element.\n     * @type {string}\n     */\n    className = 'Breadcrumb';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumb element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return ['show-collapsed-indicator', 'collapsed', 'last'];\n    }\n\n    /**\n     * Attribute changed callback method.\n     * @returns {boolean} false - Always returns false\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (name === 'collapsed') {\n            if (WjElementUtils.stringToBoolean(newValue) && !this.hasAttribute('show-collapsed-indicator'))\n                this.classList.add('collapsed');\n        } else if (name === 'show-collapsed-indicator') {\n            if (WjElementUtils.stringToBoolean(newValue)) {\n                this.showCollapsedIndicator = true;\n                this.refresh();\n            }\n        } else if (name === 'last') {\n            this.active = WjElementUtils.stringToBoolean(newValue);\n            this.showSeparator = !WjElementUtils.stringToBoolean(newValue);\n            this.refresh();\n        }\n\n        return false;\n    }\n\n    /**\n     * Setup attributes for the Breadcrumb element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Breadcrumb element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('a');\n        native.classList.add('native-breadcrumb');\n        native.setAttribute('part', 'native');\n\n        if (this.active) native.classList.add('active');\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        native.appendChild(start);\n        native.appendChild(slot);\n        native.appendChild(end);\n\n        fragment.appendChild(native);\n        if (WjElementUtils.stringToBoolean(this.showCollapsedIndicator)) {\n            // pridame button za native element\n            fragment.appendChild(this.drawCollapsedIndicator());\n\n            // skryjeme native element\n            native.classList.add('hidden');\n        }\n\n        if (this.showSeparator) {\n            let separator = document.createElement('span');\n            separator.classList.add('separator');\n            separator.setAttribute('part', 'separator');\n\n            if (WjElementUtils.hasSlot(this, 'separator')) {\n                let slotSeparator = document.createElement('slot');\n                slotSeparator.setAttribute('name', 'separator');\n\n                separator.appendChild(slotSeparator);\n            } else {\n                separator.innerHTML = `<wje-icon name=${this.separator || 'chevron-right'}></wje-icon>`;\n            }\n\n            fragment.appendChild(separator);\n        }\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Draw collapsed indicator method.\n     * @returns {object} - The collapsed indicator element.\n     */\n    drawCollapsedIndicator() {\n        let collapsedIndicator = null;\n\n        if (this.collapsedVariant === 'DROPDOWN') {\n            collapsedIndicator = this.collapseDropdown();\n        } else {\n            collapsedIndicator = this.collapseButton();\n        }\n\n        return collapsedIndicator;\n    }\n\n    /**\n     * Collapse dropdown button.\n     * @returns {object} dropdown - The dropdown button.\n     */\n    collapseDropdown() {\n        let dropdown = document.createElement('wje-dropdown');\n        dropdown.setAttribute('placement', 'bottom');\n        dropdown.setAttribute('offset', '10');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('slot', 'trigger');\n        button.setAttribute('fill', 'link');\n        button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        dropdown.appendChild(button);\n        dropdown.appendChild(menu);\n\n        dropdown.innerHTML = `<wje-button slot=\"trigger\" fill=\"link\">\n            <wje-icon name=\"dots\"></wje-icon>\n        </wje-button>\n        <wje-menu variant=\"context\">\n            <wje-menu-item>Test 0</wje-menu-item>\n            <wje-menu-item>Test 1</wje-menu-item>\n            <wje-menu-item>Test 2</wje-menu-item>\n        </wje-menu>`;\n\n        this.parentElement.querySelectorAll('wje-breadcrumb').forEach((el) => {\n            // console.log(el);\n        });\n\n        return dropdown;\n    }\n\n    /**\n     * Collapse button method.\n     * @returns {object} - The button element.\n     */\n    collapseButton() {\n        let button = document.createElement('button');\n        button.setAttribute('aria-label', 'Show more breadcrumbs');\n        button.setAttribute('part', 'collapsed-indicator');\n        button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n        event.addListener(button, 'click', null, (e) => {\n            this.native.classList.remove('hidden');\n            button.remove();\n            this.parentElement.querySelectorAll('wje-breadcrumb').forEach((el) => {\n                el.classList.remove('collapsed');\n            });\n            e.stopPropagation();\n        });\n\n        return button;\n    }\n}\n","import Breadcrumb from './breadcrumb.element.js';\n\n// export * from \"./breadcrumb.element.js\";\nexport default Breadcrumb;\n\nBreadcrumb.define('wje-breadcrumb', Breadcrumb);\n"],"names":[],"mappings":"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"}

package/dist/wje-breadcrumbs.js

@@ -137,3 +137,4 @@ Breadcrumbs.define("wje-breadcrumbs", Breadcrumbs);
 export {
   Breadcrumbs as default
 };
+//# sourceMappingURL=wje-breadcrumbs.js.map

package/dist/wje-breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-breadcrumbs.js","sources":["../packages/wje-breadcrumbs/breadcrumbs.element.js","../packages/wje-breadcrumbs/breadcrumbs.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 a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n * @documentation https://elements.webjet.sk/components/breadcrumbs\n * @status stable\n * @augments WJElement\n * @slot - The container for breadcrumb elements.\n * @csspart container - The component's container wrapper.\n * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.\n * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.\n * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.\n * @tag wje-breadcrumbs\n * @example\n * <!-- Example usage -->\n * <wje-breadcrumbs max-items=\"5\" items-before-collapse=\"2\" items-after-collapse=\"2\">\n *   <wje-breadcrumb>Home</wje-breadcrumb>\n *   <wje-breadcrumb>About</wje-breadcrumb>\n *   <wje-breadcrumb>Services</wje-breadcrumb>\n *   <wje-breadcrumb>Portfolio</wje-breadcrumb>\n *   <wje-breadcrumb>Contact</wje-breadcrumb>\n * </wje-breadcrumbs>\n *\n * <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->\n */\n\nexport default class Breadcrumbs extends WJElement {\n    /**\n     * Breadcrumbs constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        /**\n         * Last breadcrumb flag\n         * @type {boolean}\n         */\n        this.last = false;\n    }\n\n    /**\n     * Set variant attribute for the Breadcrumbs element.\n     * @param value\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n    }\n\n    /**\n     * Get variant attribute for the Breadcrumbs element.\n     * @returns {string}\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'button';\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param {string} value\n     */\n    set maxItems(value) {\n        this.setAttribute('max-items', value || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get maxItems() {\n        return +this.getAttribute('max-items' || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param value\n     */\n    set itemsBeforeCollapse(value) {\n        this.setAttribute('items-before-collapse', value || 1);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get itemsBeforeCollapse() {\n        return +this.getAttribute('items-before-collapse') || 1;\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @param value\n     */\n    set itemsAfterCollapse(value) {\n        this.setAttribute('items-after-collapse', value || 1);\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @returns {number}\n     */\n    get itemsAfterCollapse() {\n        return +this.getAttribute('items-after-collapse') || 1;\n    }\n\n    /**\n     * Class name for the Breadcrumbs element.\n     * @type {string}\n     */\n    className = 'Breadcrumbs';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumbs element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Setup attributes for the Breadcrumbs element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Breadcrumbs element.\n     * @returns {object} fragment - The document fragment\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    /**\n     * After draw method for the Breadcrumbs element.\n     */\n    afterDraw() {\n        let breadcrumbs = this.getBreadcrumbs();\n\n        if (breadcrumbs.length === 0) return;\n\n        let breadcrumb = breadcrumbs.findLast((e) => e);\n\n        breadcrumb.setAttribute('last', true);\n\n        const shouldCollapse =\n            this.maxItems !== undefined &&\n            breadcrumbs.length > this.maxItems &&\n            this.itemsBeforeCollapse + this.itemsAfterCollapse <= this.maxItems;\n\n        if (shouldCollapse) {\n            breadcrumbs.forEach((b, index) => {\n                if (index === this.itemsBeforeCollapse) {\n                    b.setAttribute('show-collapsed-indicator', true);\n                }\n\n                if (index >= this.itemsBeforeCollapse && index < breadcrumbs.length - this.itemsAfterCollapse) {\n                    b.setAttribute('collapsed', true);\n                }\n            });\n        }\n    }\n\n    /**\n     * Get breadcrumbs method.\n     * @returns {Array} - The breadcrumbs array\n     */\n    getBreadcrumbs() {\n        return Array.from(this.querySelectorAll('wje-breadcrumb')) || [];\n    }\n}\n","import Breadcrumbs from './breadcrumbs.element.js';\n\nexport default Breadcrumbs;\n\nBreadcrumbs.define('wje-breadcrumbs', Breadcrumbs);\n"],"names":[],"mappings":";;;;;AA2Be,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/C,cAAc;AACV;AA6EJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAvER,SAAK,OAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,KAAK;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,aAAa,SAAS,CAAC;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,WAAW;AACX,WAAO,CAAC,KAAK,aAAa,WAAgB;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,oBAAoB,OAAO;AAC3B,SAAK,aAAa,yBAAyB,SAAS,CAAC;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,sBAAsB;AACtB,WAAO,CAAC,KAAK,aAAa,uBAAuB,KAAK;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,mBAAmB,OAAO;AAC1B,SAAK,aAAa,wBAAwB,SAAS,CAAC;AAAA,EACvD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,qBAAqB;AACrB,WAAO,CAAC,KAAK,aAAa,sBAAsB,KAAK;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOD,WAAW,qBAAqB;AAC5B,WAAO;EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,YAAY;AACR,QAAI,cAAc,KAAK;AAEvB,QAAI,YAAY,WAAW,EAAG;AAE9B,QAAI,aAAa,YAAY,SAAS,CAAC,MAAM,CAAC;AAE9C,eAAW,aAAa,QAAQ,IAAI;AAEpC,UAAM,iBACF,KAAK,aAAa,UAClB,YAAY,SAAS,KAAK,YAC1B,KAAK,sBAAsB,KAAK,sBAAsB,KAAK;AAE/D,QAAI,gBAAgB;AAChB,kBAAY,QAAQ,CAAC,GAAG,UAAU;AAC9B,YAAI,UAAU,KAAK,qBAAqB;AACpC,YAAE,aAAa,4BAA4B,IAAI;AAAA,QAClD;AAED,YAAI,SAAS,KAAK,uBAAuB,QAAQ,YAAY,SAAS,KAAK,oBAAoB;AAC3F,YAAE,aAAa,aAAa,IAAI;AAAA,QACnC;AAAA,MACjB,CAAa;AAAA,IACJ;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,iBAAiB;AACb,WAAO,MAAM,KAAK,KAAK,iBAAiB,gBAAgB,CAAC,KAAK;EACjE;AACL;ACxLA,YAAY,OAAO,mBAAmB,WAAW;"}

package/dist/wje-button-group.js

@@ -82,3 +82,4 @@ WJElement.define("wje-button-group", ButtonGroup);
 export {
   ButtonGroup as default
 };
+//# sourceMappingURL=wje-button-group.js.map

package/dist/wje-button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-button-group.js","sources":["../packages/wje-button-group/button-group.element.js","../packages/wje-button-group/button-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary ButtonGroup class\n * @class\n * @augments WJElement\n * @csspart native - The component's native wrapper.\n * @slot - The button group main content.\n * @csspart native - The component's native wrapper.\n */\n\nexport default class ButtonGroup extends WJElement {\n    /**\n     * ButtonGroup constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the ButtonGroup element\n     * @type {string}\n     */\n    className = 'ButtonGroup';\n\n    /**\n     * Get CSS stylesheet for the ButtonGroup element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the ButtonGroup element.\n     * @static\n     * @returns {Array<string>} observedAttributes - The observed attributes array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Setup attributes for the ButtonGroup element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the ButtonGroup element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.classList.add('native-button-group');\n        element.setAttribute('part', 'native');\n\n        this.slotElement = document.createElement('slot');\n\n        element.appendChild(this.slotElement);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the ButtonGroup element.\n     */\n    afterDraw() {\n        const slottedElements = [...this.slotElement.assignedElements({ flatten: true })];\n\n        slottedElements.forEach((el) => {\n            let index = slottedElements.indexOf(el);\n            let button = this.findButton(el);\n            if (button) {\n                button.classList.add('wje-button-group-button');\n                button.classList.toggle('wje-button-group-first', index === 0);\n                button.classList.toggle('wje-button-group-inner', index > 0 && index < slottedElements.length - 1);\n                button.classList.toggle('wje-button-group-last', index === slottedElements.length - 1);\n            }\n        });\n    }\n\n    /**\n     * Find button method to find the button element.\n     * @param {object} el The element\n     * @returns {object} button - The button element\n     */\n    findButton(el) {\n        const selector = 'wje-button';\n\n        return el.closest(selector) ?? el.querySelector(selector);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport ButtonGroup from './button-group.element.js';\n\n// export * from \"./button-group.element.js\";\nexport default ButtonGroup;\n\nWJElement.define('wje-button-group', ButtonGroup);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/C,cAAc;AACV;AAOJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOD,WAAW,qBAAqB;AAC5B,WAAO;EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,UAAU,IAAI,qBAAqB;AAC3C,YAAQ,aAAa,QAAQ,QAAQ;AAErC,SAAK,cAAc,SAAS,cAAc,MAAM;AAEhD,YAAQ,YAAY,KAAK,WAAW;AAEpC,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,YAAY;AACR,UAAM,kBAAkB,CAAC,GAAG,KAAK,YAAY,iBAAiB,EAAE,SAAS,KAAM,CAAA,CAAC;AAEhF,oBAAgB,QAAQ,CAAC,OAAO;AAC5B,UAAI,QAAQ,gBAAgB,QAAQ,EAAE;AACtC,UAAI,SAAS,KAAK,WAAW,EAAE;AAC/B,UAAI,QAAQ;AACR,eAAO,UAAU,IAAI,yBAAyB;AAC9C,eAAO,UAAU,OAAO,0BAA0B,UAAU,CAAC;AAC7D,eAAO,UAAU,OAAO,0BAA0B,QAAQ,KAAK,QAAQ,gBAAgB,SAAS,CAAC;AACjG,eAAO,UAAU,OAAO,yBAAyB,UAAU,gBAAgB,SAAS,CAAC;AAAA,MACxF;AAAA,IACb,CAAS;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOD,WAAW,IAAI;AACX,UAAM,WAAW;AAEjB,WAAO,GAAG,QAAQ,QAAQ,KAAK,GAAG,cAAc,QAAQ;AAAA,EAC3D;AACL;AC9FA,UAAU,OAAO,oBAAoB,WAAW;"}

package/dist/wje-button.js

@@ -7,7 +7,7 @@ import Icon from "./wje-icon.js";
 const bool = (v) => {
   return v === "false" || v === "null" || v === "NaN" || v === "undefined" || v === "0" ? false : !!v;
 };
-const styles = "/*\n[ WJ Button ]\n*/\n\n/*PRIMARY*/\n.wje-button-solid.wje-color-primary {\n    background-color: var(--wje-color-primary-9);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-primary {\n    background-color: var(--wje-color-primary-1);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-primary-9);\n}\n\n.wje-button-link.wje-color-primary {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n.wje-button-solid.wje-color-complete {\n    background-color: var(--wje-color-complete-9);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-complete {\n    background-color: var(--wje-color-complete-1);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-complete-9);\n}\n\n.wje-button-link.wje-color-complete {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n.wje-button-solid.wje-color-success {\n    background-color: var(--wje-color-success-9);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-success {\n    background-color: var(--wje-color-success-1);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-success-9);\n}\n\n.wje-button-link.wje-color-success {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n.wje-button-solid.wje-color-warning {\n    background-color: var(--wje-color-warning-9);\n    border-color: var(--wje-color-warning-9);\n    color: var(--wje-color-black);\n}\n\n.wje-button-outline.wje-color-warning {\n    background-color: var(--wje-color-warning-1);\n    border-color: var(--wje-color-warning-11);\n    color: var(--wje-color-warning-11);\n}\n\n.wje-button-link.wje-color-warning {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-warning-11);\n}\n\n/*DANGER*/\n.wje-button-solid.wje-color-danger {\n    background-color: var(--wje-color-danger-9);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-danger {\n    background-color: var(--wje-color-danger-1);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-danger-9);\n}\n\n.wje-button-link.wje-color-danger {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-danger-9);\n}\n\n/*NEUTRAL*/\n.wje-button-solid.wje-color-info {\n    background-color: var(--wje-color-contrast-9);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-info {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-9);\n}\n\n.wje-button-link.wje-color-info {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-contrast-9);\n}\n\n/*DEFAULT*/\n.wje-button-solid.wje-color-default {\n    background-color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-contrast-3);\n    color: var(--wje-color-contrast-11);\n}\n\n.wje-button-outline.wje-color-default {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-5);\n    color: var(--wje-color-contrast-11);\n}\n\n.wje-button-link.wje-color-default {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-contrast-11);\n}\n\n:host {\n    --wje-padding-top: 0.4rem;\n    --wje-padding-start: 0.5rem;\n    --wje-padding-end: 0.5rem;\n    --wje-padding-bottom: 0.4rem;\n\n    display: inline-flex;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n    margin-inline: var(--wje-button-margin-inline);\n}\n\n:host(.wje-button-group-button) {\n    display: block;\n}\n\n.native-button {\n    font-family: var(--wje-font-family);\n    font-size: var(--wje-font-size);\n    display: flex;\n    position: relative;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n    /*overflow: hidden;*/ /* Sposobovalo problemy s badge a tooltip */\n    border-width: var(--wje-button-border-width);\n    border-style: var(--wje-button-border-style);\n    border-color: var(--wje-button-border-color);\n    background-color: transparent;\n    /*color: var(--wje-button-color);*/\n    line-height: 1;\n    contain: layout style;\n    cursor: pointer;\n    z-index: 0;\n    box-sizing: border-box;\n    appearance: none;\n    margin: 0;\n    border-radius: var(--wje-button-border-radius);\n    padding-top: var(--wje-padding-top);\n    padding-bottom: var(--wje-padding-bottom);\n    padding-inline: var(--wje-padding-start) var(--wje-padding-end);\n    white-space: nowrap;\n}\n\n.native-button:hover {\n    outline-style: solid;\n    outline-width: var(--wje-button-outline-width);\n    transition: outline-width 0.1s linear;\n}\n\n@media (any-hover: hover) {\n    .wje-button-solid.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-9);\n        border-color: var(--wje-color-primary-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-primary-2);\n    }\n\n    .wje-button-outline.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-1);\n        border-color: var(--wje-color-primary-9);\n        color: var(--wje-color-primary-9);\n        outline-color: var(--wje-color-primary-2);\n    }\n\n    .wje-button-link.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-1);\n        border-color: transparent;\n        color: var(--wje-color-primary-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-9);\n        border-color: var(--wje-color-complete-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-complete-2);\n    }\n\n    .wje-button-outline.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-1);\n        border-color: var(--wje-color-complete-9);\n        color: var(--wje-color-complete-9);\n        outline-color: var(--wje-color-complete-2);\n    }\n\n    .wje-button-link.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-1);\n        border-color: transparent;\n        color: var(--wje-color-complete-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-success:hover {\n        background-color: var(--wje-color-success-9);\n        border-color: var(--wje-color-success-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-success-2);\n    }\n\n    .wje-button-outline.wje-color-success:hover {\n        background-color: var(--wje-color-success-1);\n        border-color: var(--wje-color-success-9);\n        color: var(--wje-color-success-9);\n        outline-color: var(--wje-color-success-2);\n    }\n\n    .wje-button-link.wje-color-success:hover {\n        background-color: var(--wje-color-success-1);\n        border-color: transparent;\n        color: var(--wje-color-success-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-9);\n        border-color: var(--wje-color-warning-9);\n        color: var(--wje-color-black);\n        outline-color: var(--wje-color-warning-2);\n    }\n\n    .wje-button-outline.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-1);\n        border-color: var(--wje-color-warning-11);\n        color: var(--wje-color-warning-11);\n        outline-color: var(--wje-color-warning-2);\n    }\n\n    .wje-button-link.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-1);\n        border-color: transparent;\n        color: var(--wje-color-warning-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-9);\n        border-color: var(--wje-color-danger-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-danger-2);\n    }\n\n    .wje-button-outline.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-1);\n        border-color: var(--wje-color-danger-9);\n        color: var(--wje-color-danger-9);\n        outline-color: var(--wje-color-danger-2);\n    }\n\n    .wje-button-link.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-1);\n        border-color: transparent;\n        color: var(--wje-color-danger-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-9);\n        border-color: var(--wje-color-contrast-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-outline.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-1);\n        border-color: var(--wje-color-contrast-9);\n        color: var(--wje-color-contrast-9);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-link.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-3);\n        border-color: transparent;\n        color: var(--wje-color-contrast-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-0);\n        border-color: var(--wje-color-contrast-3);\n        color: var(--wje-color-contrast-11);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-outline.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-2);\n        border-color: var(--wje-color-contrast-5);\n        color: var(--wje-color-contrast-11);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-link.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-3);\n        border-color: transparent;\n        color: var(--wje-color-contrast-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n}\n\n.button-inner {\n    display: flex;\n    position: relative;\n    flex-flow: row nowrap;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    line-height: normal;\n}\n\n/*\n[ Link ]\n*/\n\n.wje-button-link {\n    border-width: var(--wje-button-border-width);\n    border-radius: var(--wje-button-border-radius);\n    border-color: transparent;\n    background-color: transparent;\n}\n\n/*\n[ Disabled ]\n*/\n\n.wje-button-disabled {\n    cursor: default;\n    opacity: 0.5;\n    pointer-events: none;\n}\n\n/*\n[ Round ]\n*/\n\n:host([round]) .native-button {\n    border-radius: var(--wje-border-radius-pill);\n}\n\n:host([circle]) .native-button {\n    border-radius: var(--wje-border-radius-circle);\n    aspect-ratio: 1/1;\n    width: 1.813rem;\n    display: flex;\n    align-items: center;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n:host([size='small']) .native-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n}\n\n:host([size='large']) .native-button {\n    --wje-padding-top: 0.6rem;\n    --wje-padding-start: 0.7rem;\n    --wje-padding-end: 0.7rem;\n    --wje-padding-bottom: 0.6rem;\n}\n\n:host([size='small'][circle]) .native-button {\n    width: 1.5rem;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n:host([size='large'][circle]) .native-button {\n    width: 2.188rem;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n::slotted(wje-icon[slot='start']) {\n    margin: 0 0.3rem 0 -0.3rem;\n}\n\n::slotted(wje-icon[slot='end']) {\n    margin: 0 -0.2rem 0 0.3rem;\n}\n\n:host(:not([only-caret])) slot[name='caret'] {\n    padding: 0 0 0 0.3rem;\n}\n\n:host([only-caret]) slot[name='caret'] {\n    padding: 0;\n    display: block;\n}\n\n:host(.wje-button-group-first:not(.wje-button-group-last)) .native-button {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n}\n\n:host(.wje-button-group-inner) .native-button {\n    border-radius: 0;\n}\n\n:host(.wje-button-group-last:not(.wje-button-group-first)) .native-button {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n}\n\n:host(.wje-button-group-button:not(.wje-button-group-first)) {\n    margin-inline-start: calc(-1 * var(--wje-button-border-width)) !important;\n}\n\n::slotted([slot='toggle']) {\n    display: none;\n}\n\n::slotted([slot='toggle'].show) {\n    display: block;\n}\n";
+const styles = "/*\n[ WJ Button ]\n*/\n\n/*PRIMARY*/\n.wje-button-solid.wje-color-primary {\n    background-color: var(--wje-color-primary-9);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-primary {\n    background-color: var(--wje-color-primary-1);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-primary-9);\n}\n\n.wje-button-link.wje-color-primary {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n.wje-button-solid.wje-color-complete {\n    background-color: var(--wje-color-complete-9);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-complete {\n    background-color: var(--wje-color-complete-1);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-complete-9);\n}\n\n.wje-button-link.wje-color-complete {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n.wje-button-solid.wje-color-success {\n    background-color: var(--wje-color-success-9);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-success {\n    background-color: var(--wje-color-success-1);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-success-9);\n}\n\n.wje-button-link.wje-color-success {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n.wje-button-solid.wje-color-warning {\n    background-color: var(--wje-color-warning-9);\n    border-color: var(--wje-color-warning-9);\n    color: var(--wje-color-black);\n}\n\n.wje-button-outline.wje-color-warning {\n    background-color: var(--wje-color-warning-1);\n    border-color: var(--wje-color-warning-11);\n    color: var(--wje-color-warning-11);\n}\n\n.wje-button-link.wje-color-warning {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-warning-11);\n}\n\n/*DANGER*/\n.wje-button-solid.wje-color-danger {\n    background-color: var(--wje-color-danger-9);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-danger {\n    background-color: var(--wje-color-danger-1);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-danger-9);\n}\n\n.wje-button-link.wje-color-danger {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-danger-9);\n}\n\n/*NEUTRAL*/\n.wje-button-solid.wje-color-info {\n    background-color: var(--wje-color-contrast-9);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-info {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-9);\n}\n\n.wje-button-link.wje-color-info {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-contrast-9);\n}\n\n/*DEFAULT*/\n.wje-button-solid.wje-color-default {\n    background-color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-contrast-3);\n    color: var(--wje-color-contrast-11);\n}\n\n.wje-button-outline.wje-color-default {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-5);\n    color: var(--wje-color-contrast-11);\n}\n\n.wje-button-link.wje-color-default {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-contrast-11);\n}\n\n:host {\n    --wje-padding-top: 0.4rem;\n    --wje-padding-start: 0.5rem;\n    --wje-padding-end: 0.5rem;\n    --wje-padding-bottom: 0.4rem;\n\n    display: inline-flex;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n    margin-inline: var(--wje-button-margin-inline);\n}\n\n:host(.wje-button-group-button) {\n    display: block;\n}\n\n.native-button {\n    font-family: var(--wje-font-family);\n    font-size: var(--wje-font-size);\n    display: flex;\n    position: relative;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n    /*overflow: hidden;*/ /* Sposobovalo problemy s badge a tooltip */\n    border-width: var(--wje-button-border-width);\n    border-style: var(--wje-button-border-style);\n    border-color: var(--wje-button-border-color);\n    background-color: transparent;\n    /*color: var(--wje-button-color);*/\n    line-height: 1;\n    contain: layout style;\n    cursor: pointer;\n    z-index: 0;\n    box-sizing: border-box;\n    appearance: none;\n    margin: 0;\n    border-radius: var(--wje-button-border-radius);\n    padding-top: var(--wje-padding-top);\n    padding-bottom: var(--wje-padding-bottom);\n    padding-inline: var(--wje-padding-start) var(--wje-padding-end);\n    white-space: nowrap;\n}\n\n.native-button:hover {\n    outline-style: solid;\n    outline-width: var(--wje-button-outline-width);\n    transition: outline-width 0.1s linear;\n}\n\n@media (any-hover: hover) {\n    .wje-button-solid.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-9);\n        border-color: var(--wje-color-primary-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-primary-2);\n    }\n\n    .wje-button-outline.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-1);\n        border-color: var(--wje-color-primary-9);\n        color: var(--wje-color-primary-9);\n        outline-color: var(--wje-color-primary-2);\n    }\n\n    .wje-button-link.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-1);\n        border-color: transparent;\n        color: var(--wje-color-primary-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-9);\n        border-color: var(--wje-color-complete-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-complete-2);\n    }\n\n    .wje-button-outline.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-1);\n        border-color: var(--wje-color-complete-9);\n        color: var(--wje-color-complete-9);\n        outline-color: var(--wje-color-complete-2);\n    }\n\n    .wje-button-link.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-1);\n        border-color: transparent;\n        color: var(--wje-color-complete-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-success:hover {\n        background-color: var(--wje-color-success-9);\n        border-color: var(--wje-color-success-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-success-2);\n    }\n\n    .wje-button-outline.wje-color-success:hover {\n        background-color: var(--wje-color-success-1);\n        border-color: var(--wje-color-success-9);\n        color: var(--wje-color-success-9);\n        outline-color: var(--wje-color-success-2);\n    }\n\n    .wje-button-link.wje-color-success:hover {\n        background-color: var(--wje-color-success-1);\n        border-color: transparent;\n        color: var(--wje-color-success-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-9);\n        border-color: var(--wje-color-warning-9);\n        color: var(--wje-color-black);\n        outline-color: var(--wje-color-warning-2);\n    }\n\n    .wje-button-outline.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-1);\n        border-color: var(--wje-color-warning-11);\n        color: var(--wje-color-warning-11);\n        outline-color: var(--wje-color-warning-2);\n    }\n\n    .wje-button-link.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-1);\n        border-color: transparent;\n        color: var(--wje-color-warning-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-9);\n        border-color: var(--wje-color-danger-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-danger-2);\n    }\n\n    .wje-button-outline.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-1);\n        border-color: var(--wje-color-danger-9);\n        color: var(--wje-color-danger-9);\n        outline-color: var(--wje-color-danger-2);\n    }\n\n    .wje-button-link.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-1);\n        border-color: transparent;\n        color: var(--wje-color-danger-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-9);\n        border-color: var(--wje-color-contrast-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-outline.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-1);\n        border-color: var(--wje-color-contrast-9);\n        color: var(--wje-color-contrast-9);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-link.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-3);\n        border-color: transparent;\n        color: var(--wje-color-contrast-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-0);\n        border-color: var(--wje-color-contrast-3);\n        color: var(--wje-color-contrast-11);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-outline.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-2);\n        border-color: var(--wje-color-contrast-5);\n        color: var(--wje-color-contrast-11);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-link.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-3);\n        border-color: transparent;\n        color: var(--wje-color-contrast-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n}\n\n.button-inner {\n    display: flex;\n    position: relative;\n    flex-flow: row nowrap;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    line-height: normal;\n}\n\n/*\n[ Link ]\n*/\n\n.wje-button-link {\n    border-width: var(--wje-button-border-width);\n    border-radius: var(--wje-button-border-radius);\n    border-color: transparent;\n    background-color: transparent;\n}\n\n/*\n[ Disabled ]\n*/\n\n.wje-button-disabled {\n    cursor: default;\n    opacity: 0.5;\n    pointer-events: none;\n}\n\n/*\n[ Round ]\n*/\n\n:host([round]) .native-button {\n    border-radius: var(--wje-border-radius-pill);\n}\n\n:host([circle]) .native-button {\n    border-radius: var(--wje-border-radius-circle);\n    aspect-ratio: 1/1;\n    width: 1.813rem;\n    display: flex;\n    align-items: center;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n:host([size='small']) .native-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n}\n\n:host([size='large']) .native-button {\n    --wje-padding-top: 0.6rem;\n    --wje-padding-start: 0.7rem;\n    --wje-padding-end: 0.7rem;\n    --wje-padding-bottom: 0.6rem;\n}\n\n:host([size='small'][circle]) .native-button {\n    width: 1.5rem;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n:host([size='large'][circle]) .native-button {\n    width: 2.188rem;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n::slotted(wje-icon[slot='start']) {\n    margin: 0 0.3rem 0 0;\n}\n\n::slotted(wje-icon[slot='end']) {\n    margin: 0 -0.2rem 0 0.3rem;\n}\n\n:host(:not([only-caret])) slot[name='caret'] {\n    padding: 0 0 0 0.3rem;\n}\n\n:host([only-caret]) slot[name='caret'] {\n    padding: 0;\n    display: block;\n}\n\n:host(.wje-button-group-first:not(.wje-button-group-last)) .native-button {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n}\n\n:host(.wje-button-group-inner) .native-button {\n    border-radius: 0;\n}\n\n:host(.wje-button-group-last:not(.wje-button-group-first)) .native-button {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n}\n\n:host(.wje-button-group-button:not(.wje-button-group-first)) {\n    margin-inline-start: calc(-1 * var(--wje-button-border-width)) !important;\n}\n\n::slotted([slot='toggle']) {\n    display: none;\n}\n\n::slotted([slot='toggle'].show) {\n    display: block;\n}\n";
 class Button extends WJElement {
   /**
    * Button constructor method.
@@ -349,3 +349,4 @@ Button.define("wje-button", Button);
 export {
   Button as default
 };
+//# sourceMappingURL=wje-button.js.map

package/dist/wje-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-button.js","sources":["../packages/utils/utils.js","../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["export const bool = (v) => {\n    return v === 'false' || v === 'null' || v === 'NaN' || v === 'undefined' || v === '0' ? false : !!v;\n};\n","import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n */\n\nexport default class Button extends WJElement {\n    /**\n     * Button constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.internals_ = this.attachInternals();\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-icon': Icon,\n    };\n\n    /**\n     * Properties of the element Button.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value || 'default');\n    }\n\n    /**\n     * Get color of the Button element.\n     * @returns {string|string}\n     */\n    get color() {\n        return this.getAttribute('color') || 'default';\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set caret(value) {\n        this.setAttribute('caret', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get caret() {\n        return this.hasAttribute('caret');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set tooltip(value) {\n        this.setAttribute('tooltip', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get tooltip() {\n        return this.hasAttribute('tooltip');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set dialog(value) {\n        this.setAttribute('dialog', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {string|object}\n     */\n    get dialog() {\n        return this.getAttribute('dialog');\n    }\n\n    /**\n     * Set active state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set active(value) {\n        this.setAttribute('active', '');\n    }\n\n    /**\n     * Get active state of the Button element.\n     * @returns {boolean} active - The active state\n     */\n    get active() {\n        return this.hasAttribute('active');\n    }\n\n    /**\n     * Set disabled state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set disabled(value) {\n        if (value) this.setAttribute('disabled', '');\n        else this.removeAttribute('disabled');\n    }\n\n    /**\n     * Get disabled state of the Button element.\n     * @returns {boolean} disabled - The disabled state\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Set fill of the Button element.\n     * @param {string} value The value to set\n     */\n    set fill(value) {\n        this.setAttribute('fill', value);\n    }\n\n    /**\n     * Get fill of the Button element.\n     * @returns {string} fill - The fill value\n     */\n    get fill() {\n        return this.getAttribute('fill') || 'solid';\n    }\n\n    /**\n     * Set outline state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set outline(value) {\n        this.setAttribute('outline', '');\n    }\n\n    /**\n     * Get outline state of the Button element.\n     * @returns {boolean} outline - The outline state\n     */\n    get outline() {\n        return this.hasAttribute('outline');\n    }\n\n    /**\n     * Set stop propagation state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set stopPropagation(value) {\n        this.setAttribute('stop-propagation', bool(value));\n    }\n\n    /**\n     * Get stop propagation state of the Button element.\n     * @returns {boolean} stopPropagation - The stop propagation state\n     */\n    get stopPropagation() {\n        return bool(this.getAttribute('stop-propagation'));\n    }\n\n    /**\n     * Class name for the Button element\n     * @type {string}\n     */\n    className = 'Button';\n\n    /**\n     * Get CSS stylesheet for the Button element.\n     * @static\n     * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Button element.\n     * @static\n     * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n     */\n    static get observedAttributes() {\n        return ['disabled'];\n    }\n\n    /**\n     * @summary A static property that indicates whether the custom element is form-associated or not.\n     * Form-associated custom elements are elements that can participate in form submission.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function sets the internal `_form` property to the associated form.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        this._form = form;\n    }\n\n    /**\n     * @summary Callback function that is called when the form-associated state of the custom element changes.\n     * This function updates the 'disabled' attribute of the element based on the new state.\n     * @param {boolean} disabled The new form-associated state.\n     */\n    formDisabledCallback(disabled) {\n        if (disabled) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Button element.\n     * @returns {object} fragment - The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n        if (this.hasAttribute('href')) {\n            native.setAttribute('href', this.getAttribute('href'));\n        } else {\n            if (this.type === 'submit') {\n                native.setAttribute('type', 'submit');\n            }\n        }\n\n        native.classList.add('native-button');\n        native.setAttribute('part', 'native');\n\n        this.classList.remove('wje-button-disabled');\n\n        if (this.disabled) native.classList.add('wje-button-disabled');\n\n        if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n        if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n        if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n        if (this.outline) native.classList.add('wje-outline');\n\n        if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n        if (this.size) native.classList.add('wje-button-' + this.size);\n\n        if (\n            (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) ||\n            this.hasAttribute('only-caret')\n        ) {\n            let i = document.createElement('wje-icon');\n            i.style.setProperty('--wje-icon-size', '14px');\n            i.setAttribute('slot', 'caret');\n            i.setAttribute('name', 'chevron-down');\n            i.setAttribute('part', 'caret');\n\n            this.appendChild(i);\n        }\n\n        if (this.active) {\n            this.classList.add('wje-active');\n            let i = document.createElement('wje-icon');\n            i.setAttribute('name', 'check');\n\n            this.appendChild(i);\n        }\n\n        native.classList.add('wje-color-' + this.color, 'wje-color');\n\n        let span = document.createElement('span');\n        span.setAttribute('part', 'inner');\n        span.classList.add('button-inner');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'icon-only');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'start');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'end');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'caret');\n        span.appendChild(slot);\n\n        this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n        if (this.hasToggle) {\n            this.slotToggle = document.createElement('slot');\n            this.slotToggle.setAttribute('name', 'toggle');\n\n            span.appendChild(this.slotToggle);\n        }\n\n        native.appendChild(span);\n\n        if (this.tooltip) {\n            let tooltip = document.createElement('wje-tooltip');\n            tooltip.setAttribute('content', this.getAttribute('tooltip'));\n            tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') || 'top');\n            tooltip.appendChild(native);\n\n            fragment.appendChild(tooltip);\n        } else {\n            fragment.appendChild(native);\n        }\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the Button element.\n     */\n    afterDraw() {\n        if (this.hasAttribute('route')) {\n            this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n        }\n\n        // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n        if (this.hasToggle) {\n            if (this.toggle === 'off') {\n                this.slotToggle.assignedNodes()[1].classList.add('show');\n                this.setAttribute('value', 'off');\n            } else {\n                this.slotToggle.assignedNodes()[0].classList.add('show');\n                this.setAttribute('value', 'on');\n            }\n        }\n\n        if (this.hasAttribute('dialog')) {\n            event.addListener(this, 'click', null, this.eventDialogOpen);\n        } else {\n            event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n        }\n\n        if (this.hasToggle)\n            event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n                stopPropagation: this.stopPropagation,\n            });\n\n        if (this.type === 'submit') {\n            event.addListener(this, 'click', 'wje-button:submit', () => {\n                console.log('submit', this.internals_.form);\n                event.dispatchCustomEvent(this.internals_.form, 'submit', {});\n            });\n        }\n\n        if (this.type === 'reset') {\n            event.addListener(this, 'click', 'wje-button:reset', () => {\n                this.internals_.form.reset();\n            });\n        }\n    }\n\n    /**\n     * Before disconnect method for the Button element.\n     */\n    beforeDisconnect() {\n        this.removeEventListener('click', this.eventDialogOpen);\n        this.unbindRouterLinks?.();\n    }\n\n    /**\n     * Event dialog open method for the Button element.\n     * @param {Event} e The event object\n     */\n    eventDialogOpen = (e) => {\n        event.dispatchCustomEvent(this, this.dialog);\n    };\n\n    /**\n     * Toggle states method for the Button element.\n     */\n    toggleStates = () => {\n        const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n\n        nodes.forEach((node, index) => {\n            if (node.classList.contains('show')) {\n                node.classList.remove('show');\n            } else {\n                node.classList.add('show');\n                this.setAttribute('value', index === 0 ? 'on' : 'off');\n            }\n        });\n    };\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}

package/dist/wje-card-content.js

@@ -45,3 +45,4 @@ WJElement.define("wje-card-content", CardContent);
 export {
   CardContent as default
 };
+//# sourceMappingURL=wje-card-content.js.map

package/dist/wje-card-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-card-content.js","sources":["../packages/wje-card-content/card-content.element.js","../packages/wje-card-content/card-content.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 an Card Content element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/card-content\n * @status stable\n * @augments WJElement\n * @slot - The card content main content.\n * @cssproperty [--wje-card-padding=0] - Padding of the component;\n */\nexport default class CardContent extends WJElement {\n    /**\n     * CardContent constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the CardContent element.\n     * @type {string}\n     */\n    className = 'CardContent';\n\n    /**\n     * Get CSS stylesheet for the CardContent element.\n     * @static\n     * @returns {object} styles - The CSS styles for the CardContent element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the CardContent element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the CardContent element.\n     * @returns {object} fragment - The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport CardContent from './card-content.element.js';\n\n// export * from \"./card-content.element.js\";\nexport default CardContent;\n\nWJElement.define('wje-card-content', CardContent);\n"],"names":[],"mappings":";;;;;AAWe,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/C,cAAc;AACV;AAOJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACV;AACL;AChDA,UAAU,OAAO,oBAAoB,WAAW;"}

package/dist/wje-card-controls.js

@@ -45,3 +45,4 @@ WJElement.define("wje-card-controls", CardControls);
 export {
   CardControls as default
 };
+//# sourceMappingURL=wje-card-controls.js.map

package/dist/wje-card-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-card-controls.js","sources":["../packages/wje-card-controls/card-controls.element.js","../packages/wje-card-controls/card-controls.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 Card Controls element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/card-controls\n * @status stable\n * @augments WJElement\n * @slot - The card controls main content.\n * @cssproperty [--wje-card-controls-font-size=11px] - Font size of the component;\n * @cssproperty [--wje-card-controls-font-family=--wje-font-family-secondary] - Font family of the component;\n */\nexport default class CardControls extends WJElement {\n    /**\n     * CardControls constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the CardControls element.\n     * @type {string}\n     */\n    className = 'CardControls';\n\n    /**\n     * Get CSS stylesheet for the CardControls element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the CardControls element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the CardControls element.\n     * @returns {object} fragment - The document fragment\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","import { default as WJElement } from '../wje-element/element.js';\nimport CardControls from './card-controls.element.js';\n\n// export * from \"./card-controls.element.js\";\nexport default CardControls;\n\nWJElement.define('wje-card-controls', CardControls);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhD,cAAc;AACV;AAOJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACV;AACL;AClDA,UAAU,OAAO,qBAAqB,YAAY;"}

package/dist/wje-card-header.js

@@ -45,3 +45,4 @@ WJElement.define("wje-card-header", CardHeader);
 export {
   CardHeader as default
 };
+//# sourceMappingURL=wje-card-header.js.map

package/dist/wje-card-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-card-header.js","sources":["../packages/wje-card-header/card-header.element.js","../packages/wje-card-header/card-header.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary CardHeader class that extends WJElement.\n * @documentation https://elements.webjet.sk/components/card-header\n * @status stable\n * @augments WJElement\n * @slot - The card header main content.\n * @cssproperty [--wje-card-header-padding=1rem 1rem 0.5rem] - Padding of the component;\n */\nexport default class CardHeader extends WJElement {\n    /**\n     * CardHeader constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the CardHeader.\n     * @type {string}\n     */\n    className = 'CardHeader';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles object.\n     * @static\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the CardHeader.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the CardHeader.\n     * @returns {DocumentFragment} The created document fragment.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        if (this.hasAttribute('separator')) this.classList.add('wje-separator');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport CardHeader from './card-header.element.js';\n\n// export * from \"./card-header.element.js\";\nexport default CardHeader;\n\nWJElement.define('wje-card-header', CardHeader);\n"],"names":[],"mappings":";;;;;AAWe,MAAM,mBAAmB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI9C,cAAc;AACV;AAOJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,QAAI,KAAK,aAAa,WAAW,EAAG,MAAK,UAAU,IAAI,eAAe;AAEtE,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACV;AACL;AClDA,UAAU,OAAO,mBAAmB,UAAU;"}

package/dist/wje-card-subtitle.js

@@ -52,3 +52,4 @@ WJElement.define("wje-card-subtitle", CardSubtitle);
 export {
   CardSubtitle as default
 };
+//# sourceMappingURL=wje-card-subtitle.js.map

package/dist/wje-card-subtitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-card-subtitle.js","sources":["../packages/wje-card-subtitle/card-subtitle.element.js","../packages/wje-card-subtitle/card-subtitle.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary CardSubtitle class that extends WJElement.\n * @documentation https://elements.webjet.sk/components/card-subtitle\n * @status stable\n * @augments WJElement\n * @slot - The card subtitle main content.\n * @cssproperty [--wje-card-subtitle-font-size=11px] - Font size of the component;\n * @cssproperty [--wje-card-subtitle-font-family=var(--wje-font-family-secondary)] - Font family of the component;\n * @cssproperty [--wje-card-subtitle-padding=0] - Padding of the component;\n */\nexport default class CardSubtitle extends WJElement {\n    /**\n     * CardSubtitle constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the CardSubtitle.\n     * @type {string}\n     */\n    className = 'CardTitle';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles object.\n     * @static\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An empty array.\n     * @static\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the CardSubtitle.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the CardSubtitle element.\n     * @returns {DocumentFragment} The created document fragment.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport CardSubtitle from './card-subtitle.element.js';\n\n// export * from \"./card-subtitle.element.js\";\nexport default CardSubtitle;\n\nWJElement.define('wje-card-subtitle', CardSubtitle);\n"],"names":[],"mappings":";;;;;AAae,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIhD,cAAc;AACV;AAOJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOD,WAAW,qBAAqB;AAC5B,WAAO;EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACV;AACL;AC1DA,UAAU,OAAO,qBAAqB,YAAY;"}

package/dist/wje-card-title.js

@@ -52,3 +52,4 @@ WJElement.define("wje-card-title", CardTitle);
 export {
   CardTitle as default
 };
+//# sourceMappingURL=wje-card-title.js.map

package/dist/wje-card-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-card-title.js","sources":["../packages/wje-card-title/card-title.element.js","../packages/wje-card-title/card-title.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary CardTitle class that extends WJElement.\n * @documentation https://elements.webjet.sk/components/card-title\n * @status stable\n * @augments WJElement\n * @slot - The card title main content.\n * @cssproperty [--wje-card-title-font-size=24px] - Font size of the component;\n * @cssproperty [--wje-card-title-font-weight=500] - Font weight of the component;\n * @cssproperty [--wje-card-title-margin=0] - Margin of the component;\n * @cssproperty [--wje-card-title-padding=0] - Padding of the component;\n * @cssproperty [--wje-card-title-line-height=1.2] - Line height of the component;\n */\nexport default class CardTitle extends WJElement {\n    /**\n     * CardTitle constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the CardTitle.\n     * @type {string}\n     */\n    className = 'CardTitle';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles object.\n     * @static\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An empty array.\n     * @static\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the CardTitle.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the CardTitle element.\n     * @returns {DocumentFragment} The created document fragment.\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","import { default as WJElement } from '../wje-element/element.js';\nimport CardTitle from './card-title.element.js';\n\n// export * from \"./card-title.element.js\";\nexport default CardTitle;\n\nWJElement.define('wje-card-title', CardTitle);\n"],"names":[],"mappings":";;;;;AAee,MAAM,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI7C,cAAc;AACV;AAOJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOD,WAAW,qBAAqB;AAC5B,WAAO;EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACV;AACL;AC7DA,UAAU,OAAO,kBAAkB,SAAS;"}

package/dist/wje-card.js

@@ -53,3 +53,4 @@ WJElement.define("wje-card", Card);
 export {
   Card as default
 };
+//# sourceMappingURL=wje-card.js.map

package/dist/wje-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-card.js","sources":["../packages/wje-card/card.element.js","../packages/wje-card/card.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 Card element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/card\n * @status stable\n * @augments WJElement\n * @slot - The card main content.\n * @cssproperty [--wje-card-margin-top=0] - Margin top of the component;\n * @cssproperty [--wje-card-margin-bottom=1rem] - Margin bottom of the component;\n * @cssproperty [--wje-card-margin-inline=0] - Margin inline of the component;\n * @cssproperty [--wje-card-border-color=transparent] - Border color of the component;\n * @cssproperty [--wje-card-background=#fff] - Background of the component;\n */\nexport default class Card extends WJElement {\n    /**\n     * Card constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the Card element.\n     * @type {string}\n     */\n    className = 'Card';\n\n    /**\n     * Get CSS stylesheet for the Card element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Card element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Card element.\n     * @param {object} context The context object\n     * @param {object} store The store object\n     * @param {object} params The parameters\n     * @returns {object} fragment - The document fragment\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-card');\n\n        let slot = document.createElement('slot');\n\n        if (params.color) native.classList.add('wje-color-' + params.color);\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Card from './card.element.js';\n\n// export * from \"./card.element.js\";\nexport default Card;\n\nWJElement.define('wje-card', Card);\n"],"names":[],"mappings":";;;;;AAee,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKxC,cAAc;AACV;AAOJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASD,KAAK,SAAS,OAAO,QAAQ;AACzB,QAAI,WAAW,SAAS;AAExB,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,aAAa;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,OAAO,MAAO,QAAO,UAAU,IAAI,eAAe,OAAO,KAAK;AAElE,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACV;AACL;AChEA,UAAU,OAAO,YAAY,IAAI;"}

package/dist/wje-carousel-item.js

@@ -60,3 +60,4 @@ WJElement.define("wje-carousel-item", CarouselItem);
 export {
   CarouselItem as default
 };
+//# sourceMappingURL=wje-carousel-item.js.map

package/dist/wje-carousel-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-carousel-item.js","sources":["../packages/wje-carousel-item/carousel-item.element.js","../packages/wje-carousel-item/carousel-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents CarouselItem element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/carousel-item\n * @status stable\n * @augments WJElement\n * @slot - The carousel item main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-carousel-item-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-carousel-item-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-carousel-item-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-carousel-item-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-carousel-item-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-carousel-item-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-carousel-item-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-carousel-item-margin-inline=0] - Margin inline of the component;\n */\nexport default class CarouselItem extends WJElement {\n    /**\n     * CarouselItem constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the CarouselItem element.\n     * @type {string}\n     */\n    className = 'CarouselItem';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the CarouselItem.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the CarouselItem element.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-carousel-item');\n        native.setAttribute('part', 'native');\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * After draw event for the CarouselItem element.\n     */\n    afterDraw() {\n        event.addListener(this, 'click', 'wje-carousel-item:click');\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport CarouselItem from './carousel-item.element.js';\n\n// export * from \"./carousel-item.element.js\";\nexport default CarouselItem;\n\nWJElement.define('wje-carousel-item', CarouselItem);\n"],"names":[],"mappings":";;;;;AAoBe,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIhD,cAAc;AACV;AAOJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANX;AAAA;AAAA;AAAA;AAAA;AAAA,EAYD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,WAAW,qBAAqB;AAC5B,WAAO;EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,sBAAsB;AAC3C,WAAO,aAAa,QAAQ,QAAQ;AAEpC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,YAAY;AACR,UAAM,YAAY,MAAM,SAAS,yBAAyB;AAAA,EAC7D;AACL;AC7EA,UAAU,OAAO,qBAAqB,YAAY;"}

package/dist/wje-carousel.js

@@ -377,3 +377,4 @@ WJElement.define("wje-carousel", Carousel);
 export {
   Carousel as default
 };
+//# sourceMappingURL=wje-carousel.js.map

package/dist/wje-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-carousel.js","sources":["../packages/wje-carousel/carousel.element.js","../packages/wje-carousel/carousel.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Carousel class that extends WJElement.\n * @documentation https://elements.webjet.sk/components/carousel\n * @status stable\n * @augments WJElement\n * @slot - The carousel main content.\n * @cssproperty [--wje-carousel-size=100%] - Size of the carousel component;\n */\nexport default class Carousel extends WJElement {\n    /**\n     * Carousel constructor method.\n     */\n    constructor() {\n        super();\n\n        this.slidePerPage = 1;\n    }\n\n    /**\n     * Active slide attribute.\n     * @param value\n     */\n    set activeSlide(value) {\n        this.setAttribute('active-slide', value);\n    }\n\n    /**\n     * Active slide attribute.\n     * @returns {number|number}\n     */\n    get activeSlide() {\n        return +this.getAttribute('active-slide') || 0;\n    }\n\n    /**\n     * Pagination attribute.\n     * @returns {boolean}\n     */\n    get pagination() {\n        return this.hasAttribute('pagination');\n    }\n\n    /**\n     * Navigation attribute.\n     * @returns {boolean}\n     */\n    get navigation() {\n        return this.hasAttribute('navigation');\n    }\n\n    /**\n     * Thumbnails attribute.\n     * @returns {boolean}\n     */\n    get thumbnails() {\n        return this.hasAttribute('thumbnails');\n    }\n\n    /**\n     * Loop attribute.\n     * @returns {boolean}\n     */\n    get loop() {\n        return this.hasAttribute('loop');\n    }\n\n    /**\n     * Class name for the Carousel.\n     * @type {string}\n     */\n    className = 'Carousel';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['active-slide'];\n    }\n\n    /**\n     * Sets up the attributes for the Carousel.\n     * @param name\n     * @param old\n     * @param newName\n     */\n    attributeChangedCallback(name, old, newName) {\n        if (name === 'active-slide') {\n            if (this.pagination) this.changePagination();\n\n            if (this.thumbnails) this.changeThumbnails();\n        }\n    }\n\n    /**\n     * Sets up the attributes for the Carousel.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Before draw method for the Carousel.\n     */\n    beforeDraw() {\n        this.cloneFirstAndLastItems();\n    }\n\n    /**\n     * Draw method for the Carousel.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-carousel');\n\n        let slides = document.createElement('div');\n        slides.classList.add('carousel-slides');\n\n        let slot = document.createElement('slot');\n\n        slides.appendChild(slot);\n        native.appendChild(slides);\n\n        if (this.navigation) {\n            this.prevButton = this.createPreviousButton();\n            this.nextButton = this.createNextButton();\n\n            native.appendChild(this.prevButton);\n            native.appendChild(this.nextButton);\n        }\n\n        if (this.pagination) native.appendChild(this.createPagination());\n\n        if (this.thumbnails) native.appendChild(this.createThumbnails());\n\n        fragment.appendChild(native);\n\n        this.slides = slides;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the Carousel.\n     */\n    afterDraw() {\n        this.setIntersectionObserver();\n        this.getSlidesWithClones().forEach((slide, i) => {\n            this.intersectionObserver.observe(slide);\n        });\n\n        this.slidePerPage = this.getAttribute('slide-per-page') || 1;\n        let carouselSize = 100 / +this.slidePerPage;\n        this.style.setProperty('--wje-carousel-size', carouselSize + '%');\n\n        this.goToSlide(this.activeSlide, 'auto');\n\n        this.slides.addEventListener('scrollend', (e) => {\n            const slides = this.getSlides();\n            const entries = [...this.entriesMap.values()];\n            const visibleEntries = entries.find((entry) => entry.isIntersecting);\n\n            if (visibleEntries?.target.classList.contains('clone')) {\n                const cloneIndex = +visibleEntries.target.getAttribute('clone-index');\n                this.goToSlide(cloneIndex, 'auto');\n                this.activeSlide = cloneIndex;\n            } else if (visibleEntries) {\n                let slideIndex = slides.indexOf(visibleEntries.target);\n                this.activeSlide = slideIndex;\n            }\n        });\n    }\n\n    /**\n     * Sets up the IntersectionObserver for the Carousel.\n     */\n    setIntersectionObserver() {\n        this.intersectionObserver = new IntersectionObserver(\n            (entries) => {\n                entries.forEach((entry) => {\n                    this.entriesMap.set(entry.target, entry);\n                });\n            },\n            {\n                root: this.context.querySelector('.carousel-slides'),\n                threshold: 0.5,\n            }\n        );\n\n        this.entriesMap = new Map();\n        this.records = this.intersectionObserver.takeRecords();\n        this.records.forEach((entry) => {\n            this.entriesMap.set(entry.target, entry);\n        });\n    }\n\n    /**\n     * Goes to the slide.\n     * @param index\n     * @param behavior\n     * @param next\n     */\n    goToSlide(index, behavior = 'smooth', next = true) {\n        const slides = this.getSlides();\n        const slideWithClones = this.getSlidesWithClones();\n\n        // remove active class from all slides\n        slideWithClones.forEach((slide, i) => {\n            slide.classList.remove('active');\n        });\n\n        let newActiveSlide = this.loop\n            ? (index + slides.length) % slides.length\n            : Math.min(Math.max(index, 0), slides.length - 1);\n        this.activeSlide = newActiveSlide;\n\n        const nextSlideIndex = Math.min(\n            Math.max(index + (this.loop ? this.slidePerPage : 0), 0),\n            slideWithClones.length - 1\n        );\n        const nextSlideEl = this.getSlidesWithClones()[nextSlideIndex];\n        nextSlideEl.classList.add('active');\n\n        let nextSlideRect = nextSlideEl.getBoundingClientRect();\n        let slidesContainerRect = this.slides.getBoundingClientRect();\n\n        this.slides.scrollTo({\n            left: nextSlideRect.left - slidesContainerRect.left + this.slides.scrollLeft,\n            top: nextSlideRect.top - slidesContainerRect.top + this.slides.scrollTop,\n            behavior: behavior === 'smooth' ? 'smooth' : 'auto',\n        });\n\n        if (this.navigation && !this.loop) {\n            this.nextButton.removeAttribute('disabled');\n            this.prevButton.removeAttribute('disabled');\n\n            if (this.activeSlide === slides.length - 1) this.nextButton.setAttribute('disabled', '');\n\n            if (this.activeSlide === 0) this.prevButton.setAttribute('disabled', '');\n        }\n    }\n\n    /**\n     * Clones the first and last items.\n     */\n    cloneFirstAndLastItems() {\n        const items = this.getSlides();\n\n        if (items.length && this.loop) {\n            // Klonovánie prveho položky a pridanie na koniec\n            const firstItemClone = items[0].cloneNode(true);\n            firstItemClone.classList.add('clone');\n            firstItemClone.setAttribute('clone-index', 0);\n\n            this.appendChild(firstItemClone);\n\n            // Klonovanie poslednej položky a pridanie na zaciatok\n            const lastItemClone = items[items.length - 1].cloneNode(true);\n            lastItemClone.classList.add('clone');\n            lastItemClone.setAttribute('clone-index', items.length - 1);\n\n            this.insertBefore(lastItemClone, this.firstChild);\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    removeActiveSlide() {\n        this.getSlidesWithClones().forEach((slide, i) => {\n            slide.classList.remove('active');\n        });\n\n        if (this.pagination) {\n            this.context.querySelectorAll('.pagination-item').forEach((item) => {\n                item.classList.remove('active');\n            });\n        }\n\n        if (this.thumbnails) {\n            this.context.querySelectorAll('wje-thumbnail').forEach((item) => {\n                item.classList.remove('active');\n            });\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    changePagination() {\n        if (this.pagination) {\n            this.removeActiveSlide();\n            this.context.querySelectorAll('.pagination-item').forEach((item, i) => {\n                if (i === this.activeSlide) {\n                    item.classList.add('active');\n                }\n            });\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    changeThumbnails() {\n        if (this.thumbnails) {\n            this.removeActiveSlide();\n            this.context.querySelectorAll('wje-thumbnail').forEach((item, i) => {\n                if (i === this.activeSlide) {\n                    item.classList.add('active');\n                }\n            });\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createNextButton() {\n        const nextButton = document.createElement('wje-button');\n        nextButton.classList.add('next');\n        nextButton.innerHTML = '<wje-icon name=\"chevron-right\" size=\"large\"></wje-icon>';\n        nextButton.setAttribute('circle', '');\n        nextButton.setAttribute('fill', 'link');\n        nextButton.addEventListener('click', (e) => {\n            this.nextSlide();\n        });\n\n        return nextButton;\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createPreviousButton() {\n        const previousButton = document.createElement('wje-button');\n        previousButton.classList.add('prev');\n        previousButton.innerHTML = '<wje-icon name=\"chevron-left\" size=\"large\"></wje-icon>';\n        previousButton.setAttribute('circle', '');\n        previousButton.setAttribute('fill', 'link');\n        previousButton.addEventListener('click', (e) => {\n            this.previousSlide();\n        });\n\n        return previousButton;\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createPagination() {\n        const pagination = document.createElement('div');\n        pagination.classList.add('pagination');\n\n        const slides = this.getSlides();\n        slides.forEach((slide, i) => {\n            const paginationItem = document.createElement('div');\n            paginationItem.classList.add('pagination-item');\n            paginationItem.addEventListener('click', (e) => {\n                this.removeActiveSlide();\n                e.target.classList.add('active');\n                this.goToSlide(i);\n            });\n            pagination.appendChild(paginationItem);\n        });\n\n        return pagination;\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createThumbnails() {\n        const thumbnails = document.createElement('div');\n        thumbnails.classList.add('thumbnails');\n\n        const slides = this.getSlides();\n        slides.forEach((slide, i) => {\n            const thumbnail = document.createElement('wje-thumbnail');\n            thumbnail.innerHTML = `<img src=\"${slide.querySelector('wje-img').getAttribute('src')}\"></img>`;\n            thumbnail.addEventListener('click', (e) => {\n                this.removeActiveSlide();\n                e.target.closest('wje-thumbnail').classList.add('active');\n                this.goToSlide(i);\n            });\n            thumbnails.appendChild(thumbnail);\n        });\n\n        return thumbnails;\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    nextSlide() {\n        this.goToSlide(this.activeSlide + this.slidePerPage);\n    }\n\n    /**\n     * Goes to the previous slide.\n     */\n    previousSlide() {\n        this.goToSlide(this.activeSlide - this.slidePerPage);\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {Array}\n     */\n    getSlides() {\n        return Array.from(this.querySelectorAll('wje-carousel-item:not(.clone)'));\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {Array}\n     */\n    getSlidesWithClones() {\n        return Array.from(this.querySelectorAll('wje-carousel-item'));\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {boolean}\n     */\n    canGoNext() {\n        return this.querySelector('.native-carousel').scrollLeft < this.querySelector('.native-carousel').scrollWidth;\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {boolean}\n     */\n    canGoPrevious() {\n        return this.querySelector('.native-carousel').scrollLeft > 0;\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Carousel from './carousel.element.js';\n\n// export * from \"./carousel.element.js\";\nexport default Carousel;\n\nWJElement.define('wje-carousel', Carousel);\n"],"names":[],"mappings":";;;;;AAWe,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI5C,cAAc;AACV;AAyDJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAvDR,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,YAAY,OAAO;AACnB,SAAK,aAAa,gBAAgB,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,cAAc;AACd,WAAO,CAAC,KAAK,aAAa,cAAc,KAAK;AAAA,EAChD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,aAAa;AACb,WAAO,KAAK,aAAa,YAAY;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,aAAa;AACb,WAAO,KAAK,aAAa,YAAY;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,aAAa;AACb,WAAO,KAAK,aAAa,YAAY;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAYD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,WAAW,qBAAqB;AAC5B,WAAO,CAAC,cAAc;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQD,yBAAyB,MAAM,KAAK,SAAS;AACzC,QAAI,SAAS,gBAAgB;AACzB,UAAI,KAAK,WAAY,MAAK,iBAAgB;AAE1C,UAAI,KAAK,WAAY,MAAK,iBAAgB;AAAA,IAC7C;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKD,aAAa;AACT,SAAK,uBAAsB;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,iBAAiB;AAEtC,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,iBAAiB;AAEtC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AACvB,WAAO,YAAY,MAAM;AAEzB,QAAI,KAAK,YAAY;AACjB,WAAK,aAAa,KAAK;AACvB,WAAK,aAAa,KAAK;AAEvB,aAAO,YAAY,KAAK,UAAU;AAClC,aAAO,YAAY,KAAK,UAAU;AAAA,IACrC;AAED,QAAI,KAAK,WAAY,QAAO,YAAY,KAAK,iBAAgB,CAAE;AAE/D,QAAI,KAAK,WAAY,QAAO,YAAY,KAAK,iBAAgB,CAAE;AAE/D,aAAS,YAAY,MAAM;AAE3B,SAAK,SAAS;AAEd,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,YAAY;AACR,SAAK,wBAAuB;AAC5B,SAAK,oBAAqB,EAAC,QAAQ,CAAC,OAAO,MAAM;AAC7C,WAAK,qBAAqB,QAAQ,KAAK;AAAA,IACnD,CAAS;AAED,SAAK,eAAe,KAAK,aAAa,gBAAgB,KAAK;AAC3D,QAAI,eAAe,MAAM,CAAC,KAAK;AAC/B,SAAK,MAAM,YAAY,uBAAuB,eAAe,GAAG;AAEhE,SAAK,UAAU,KAAK,aAAa,MAAM;AAEvC,SAAK,OAAO,iBAAiB,aAAa,CAAC,MAAM;AAC7C,YAAM,SAAS,KAAK;AACpB,YAAM,UAAU,CAAC,GAAG,KAAK,WAAW,OAAQ,CAAA;AAC5C,YAAM,iBAAiB,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc;AAEnE,UAAI,iDAAgB,OAAO,UAAU,SAAS,UAAU;AACpD,cAAM,aAAa,CAAC,eAAe,OAAO,aAAa,aAAa;AACpE,aAAK,UAAU,YAAY,MAAM;AACjC,aAAK,cAAc;AAAA,MACtB,WAAU,gBAAgB;AACvB,YAAI,aAAa,OAAO,QAAQ,eAAe,MAAM;AACrD,aAAK,cAAc;AAAA,MACtB;AAAA,IACb,CAAS;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKD,0BAA0B;AACtB,SAAK,uBAAuB,IAAI;AAAA,MAC5B,CAAC,YAAY;AACT,gBAAQ,QAAQ,CAAC,UAAU;AACvB,eAAK,WAAW,IAAI,MAAM,QAAQ,KAAK;AAAA,QAC3D,CAAiB;AAAA,MACJ;AAAA,MACD;AAAA,QACI,MAAM,KAAK,QAAQ,cAAc,kBAAkB;AAAA,QACnD,WAAW;AAAA,MACd;AAAA,IACb;AAEQ,SAAK,aAAa,oBAAI;AACtB,SAAK,UAAU,KAAK,qBAAqB,YAAW;AACpD,SAAK,QAAQ,QAAQ,CAAC,UAAU;AAC5B,WAAK,WAAW,IAAI,MAAM,QAAQ,KAAK;AAAA,IACnD,CAAS;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQD,UAAU,OAAO,WAAW,UAAU,OAAO,MAAM;AAC/C,UAAM,SAAS,KAAK;AACpB,UAAM,kBAAkB,KAAK;AAG7B,oBAAgB,QAAQ,CAAC,OAAO,MAAM;AAClC,YAAM,UAAU,OAAO,QAAQ;AAAA,IAC3C,CAAS;AAED,QAAI,iBAAiB,KAAK,QACnB,QAAQ,OAAO,UAAU,OAAO,SACjC,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,OAAO,SAAS,CAAC;AACpD,SAAK,cAAc;AAEnB,UAAM,iBAAiB,KAAK;AAAA,MACxB,KAAK,IAAI,SAAS,KAAK,OAAO,KAAK,eAAe,IAAI,CAAC;AAAA,MACvD,gBAAgB,SAAS;AAAA,IACrC;AACQ,UAAM,cAAc,KAAK,oBAAqB,EAAC,cAAc;AAC7D,gBAAY,UAAU,IAAI,QAAQ;AAElC,QAAI,gBAAgB,YAAY;AAChC,QAAI,sBAAsB,KAAK,OAAO,sBAAqB;AAE3D,SAAK,OAAO,SAAS;AAAA,MACjB,MAAM,cAAc,OAAO,oBAAoB,OAAO,KAAK,OAAO;AAAA,MAClE,KAAK,cAAc,MAAM,oBAAoB,MAAM,KAAK,OAAO;AAAA,MAC/D,UAAU,aAAa,WAAW,WAAW;AAAA,IACzD,CAAS;AAED,QAAI,KAAK,cAAc,CAAC,KAAK,MAAM;AAC/B,WAAK,WAAW,gBAAgB,UAAU;AAC1C,WAAK,WAAW,gBAAgB,UAAU;AAE1C,UAAI,KAAK,gBAAgB,OAAO,SAAS,EAAG,MAAK,WAAW,aAAa,YAAY,EAAE;AAEvF,UAAI,KAAK,gBAAgB,EAAG,MAAK,WAAW,aAAa,YAAY,EAAE;AAAA,IAC1E;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKD,yBAAyB;AACrB,UAAM,QAAQ,KAAK;AAEnB,QAAI,MAAM,UAAU,KAAK,MAAM;AAE3B,YAAM,iBAAiB,MAAM,CAAC,EAAE,UAAU,IAAI;AAC9C,qBAAe,UAAU,IAAI,OAAO;AACpC,qBAAe,aAAa,eAAe,CAAC;AAE5C,WAAK,YAAY,cAAc;AAG/B,YAAM,gBAAgB,MAAM,MAAM,SAAS,CAAC,EAAE,UAAU,IAAI;AAC5D,oBAAc,UAAU,IAAI,OAAO;AACnC,oBAAc,aAAa,eAAe,MAAM,SAAS,CAAC;AAE1D,WAAK,aAAa,eAAe,KAAK,UAAU;AAAA,IACnD;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKD,oBAAoB;AAChB,SAAK,oBAAqB,EAAC,QAAQ,CAAC,OAAO,MAAM;AAC7C,YAAM,UAAU,OAAO,QAAQ;AAAA,IAC3C,CAAS;AAED,QAAI,KAAK,YAAY;AACjB,WAAK,QAAQ,iBAAiB,kBAAkB,EAAE,QAAQ,CAAC,SAAS;AAChE,aAAK,UAAU,OAAO,QAAQ;AAAA,MAC9C,CAAa;AAAA,IACJ;AAED,QAAI,KAAK,YAAY;AACjB,WAAK,QAAQ,iBAAiB,eAAe,EAAE,QAAQ,CAAC,SAAS;AAC7D,aAAK,UAAU,OAAO,QAAQ;AAAA,MAC9C,CAAa;AAAA,IACJ;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKD,mBAAmB;AACf,QAAI,KAAK,YAAY;AACjB,WAAK,kBAAiB;AACtB,WAAK,QAAQ,iBAAiB,kBAAkB,EAAE,QAAQ,CAAC,MAAM,MAAM;AACnE,YAAI,MAAM,KAAK,aAAa;AACxB,eAAK,UAAU,IAAI,QAAQ;AAAA,QAC9B;AAAA,MACjB,CAAa;AAAA,IACJ;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKD,mBAAmB;AACf,QAAI,KAAK,YAAY;AACjB,WAAK,kBAAiB;AACtB,WAAK,QAAQ,iBAAiB,eAAe,EAAE,QAAQ,CAAC,MAAM,MAAM;AAChE,YAAI,MAAM,KAAK,aAAa;AACxB,eAAK,UAAU,IAAI,QAAQ;AAAA,QAC9B;AAAA,MACjB,CAAa;AAAA,IACJ;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,mBAAmB;AACf,UAAM,aAAa,SAAS,cAAc,YAAY;AACtD,eAAW,UAAU,IAAI,MAAM;AAC/B,eAAW,YAAY;AACvB,eAAW,aAAa,UAAU,EAAE;AACpC,eAAW,aAAa,QAAQ,MAAM;AACtC,eAAW,iBAAiB,SAAS,CAAC,MAAM;AACxC,WAAK,UAAS;AAAA,IAC1B,CAAS;AAED,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,uBAAuB;AACnB,UAAM,iBAAiB,SAAS,cAAc,YAAY;AAC1D,mBAAe,UAAU,IAAI,MAAM;AACnC,mBAAe,YAAY;AAC3B,mBAAe,aAAa,UAAU,EAAE;AACxC,mBAAe,aAAa,QAAQ,MAAM;AAC1C,mBAAe,iBAAiB,SAAS,CAAC,MAAM;AAC5C,WAAK,cAAa;AAAA,IAC9B,CAAS;AAED,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,mBAAmB;AACf,UAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,eAAW,UAAU,IAAI,YAAY;AAErC,UAAM,SAAS,KAAK;AACpB,WAAO,QAAQ,CAAC,OAAO,MAAM;AACzB,YAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,qBAAe,UAAU,IAAI,iBAAiB;AAC9C,qBAAe,iBAAiB,SAAS,CAAC,MAAM;AAC5C,aAAK,kBAAiB;AACtB,UAAE,OAAO,UAAU,IAAI,QAAQ;AAC/B,aAAK,UAAU,CAAC;AAAA,MAChC,CAAa;AACD,iBAAW,YAAY,cAAc;AAAA,IACjD,CAAS;AAED,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,mBAAmB;AACf,UAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,eAAW,UAAU,IAAI,YAAY;AAErC,UAAM,SAAS,KAAK;AACpB,WAAO,QAAQ,CAAC,OAAO,MAAM;AACzB,YAAM,YAAY,SAAS,cAAc,eAAe;AACxD,gBAAU,YAAY,aAAa,MAAM,cAAc,SAAS,EAAE,aAAa,KAAK,CAAC;AACrF,gBAAU,iBAAiB,SAAS,CAAC,MAAM;AACvC,aAAK,kBAAiB;AACtB,UAAE,OAAO,QAAQ,eAAe,EAAE,UAAU,IAAI,QAAQ;AACxD,aAAK,UAAU,CAAC;AAAA,MAChC,CAAa;AACD,iBAAW,YAAY,SAAS;AAAA,IAC5C,CAAS;AAED,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,YAAY;AACR,SAAK,UAAU,KAAK,cAAc,KAAK,YAAY;AAAA,EACtD;AAAA;AAAA;AAAA;AAAA,EAKD,gBAAgB;AACZ,SAAK,UAAU,KAAK,cAAc,KAAK,YAAY;AAAA,EACtD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,YAAY;AACR,WAAO,MAAM,KAAK,KAAK,iBAAiB,+BAA+B,CAAC;AAAA,EAC3E;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,sBAAsB;AAClB,WAAO,MAAM,KAAK,KAAK,iBAAiB,mBAAmB,CAAC;AAAA,EAC/D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,YAAY;AACR,WAAO,KAAK,cAAc,kBAAkB,EAAE,aAAa,KAAK,cAAc,kBAAkB,EAAE;AAAA,EACrG;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,gBAAgB;AACZ,WAAO,KAAK,cAAc,kBAAkB,EAAE,aAAa;AAAA,EAC9D;AACL;AC/bA,UAAU,OAAO,gBAAgB,QAAQ;"}

package/dist/wje-checkbox.js

@@ -537,3 +537,4 @@ WJElement.define("wje-checkbox", Checkbox);
 export {
   Checkbox as default
 };
+//# sourceMappingURL=wje-checkbox.js.map

package/dist/wje-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-checkbox.js","sources":["../packages/wje-checkbox/checkbox.element.js","../packages/wje-checkbox/checkbox.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-checkbox:change\".\n * It is triggered when the input event is fired, which happens when the state of the checkbox changes.\n * The event is dispatched on the current instance of the Checkbox class.\n * @documentation https://elements.webjet.sk/components/checkbox\n * @status stable\n * @augments WJElement\n * @slot - The checkbox main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-checkbox-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-checkbox-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-checkbox-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-checkbox-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-checkbox-margin-inline=0] - Margin inline of the component;\n * //@fires wje-checkbox:change - Dispatched when the checkbox state changes;\n */\nexport default class Checkbox extends WJElement {\n    /**\n     * Checkbox constructor method.\n     */\n    constructor() {\n        super();\n        this.internals = this.attachInternals();\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.internals.setFormValue(value);\n\n        if (this.input) this.input.value = value;\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.input?.value || '';\n    }\n\n    /**\n     * Getter for the customErrorDisplay attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get customErrorDisplay() {\n        return this.hasAttribute('custom-error-display');\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\n    }\n\n    /**\n     * Setter for the invalid attribute.\n     * @param {boolean} isInvalid Whether the input is invalid.\n     */\n    set invalid(isInvalid) {\n        if (isInvalid) this.setAttribute('invalid', '');\n        else this.removeAttribute('invalid');\n    }\n\n    /**\n     * Getter for the invalid attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get invalid() {\n        return this.hasAttribute('invalid');\n    }\n\n    /**\n     * Getter for the form attribute.\n     * @returns {HTMLFormElement} The form the input is associated with.\n     */\n    get form() {\n        return this.internals.form;\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {string} The name of the input.\n     */\n    get name() {\n        return this.getAttribute('name');\n    }\n\n    /**\n     * Getter for the type attribute.\n     * @returns {string} The type of the input.\n     */\n    get type() {\n        return this.localName;\n    }\n\n    /**\n     * Getter for the validity attribute.\n     * @returns {ValidityState} The validity state of the input.\n     */\n    get validity() {\n        return this.internals.validity;\n    }\n\n    /**\n     * Getter for the validationMessage attribute.\n     * @returns {string} The validation message of the input.\n     */\n    get validationMessage() {\n        return this.internals.validationMessage;\n    }\n\n    /**\n     * Getter for the willValidate attribute.\n     * @returns {boolean} Whether the input will be validated.\n     */\n    get willValidate() {\n        return this.internals.willValidate;\n    }\n\n    /**\n     * Getter for the defaultValue attribute.\n     * This method retrieves the 'value' attribute of the custom input element.\n     * The 'value' attribute represents the default value of the input element.\n     * If the 'value' attribute is not set, it returns an empty string.\n     * @returns {string} The default value of the input element.\n     */\n    get defaultValue() {\n        return this.getAttribute('value') ?? '';\n    }\n\n    /**\n     * Setter for the defaultValue attribute.\n     * This method sets the 'value' attribute of the custom input element to the provided value.\n     * The 'value' attribute represents the default value of the input element.\n     * @param {string} value The value to set as the default value.\n     */\n    set defaultValue(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Set checked attribute.\n     * @param {boolean} value true if the toggle is checked, false otherwise\n     */\n    set disabled(value) {\n        if (value) this.setAttribute('disabled', '');\n        else this.removeAttribute('disabled');\n    }\n\n    /**\n     * Get disabled attribute value.\n     * @returns {boolean} true if the toggle is disabled, false otherwise\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Set checked attribute.\n     * @param {boolean} value true if the toggle is checked, false otherwise\n     */\n    set checked(value) {\n        if (value) this.setAttribute('checked', '');\n        else this.removeAttribute('checked');\n    }\n\n    /**\n     * Get checked attribute.\n     * @returns {boolean} true if the toggle is checked, false otherwise\n     */\n    get checked() {\n        return this.hasAttribute('checked');\n    }\n\n    /**\n     * The class name for the Checkbox.\n     */\n    className = 'Checkbox';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {string} The CSS stylesheet.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    static get observedAttributes() {\n        return ['checked', 'disabled', 'value'];\n    }\n\n    /**\n     * Whether the input is associated with a form.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * Sets up the attributes for the checkbox.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the checkbox element.\n     * @returns {DocumentFragment} The created 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-checkbox');\n\n        let input = document.createElement('input');\n        input.type = 'checkbox';\n        input.id = 'checkbox';\n        input.name = this.name || 'checkbox';\n        input.checked = this.hasAttribute('checked');\n        input.disabled = this.hasAttribute('disabled');\n        input.indeterminate = this.hasAttribute('indeterminate');\n\n        let label = document.createElement('label');\n        label.htmlFor = 'checkbox';\n        label.innerHTML = '<slot></slot>';\n\n        native.appendChild(input);\n        native.appendChild(label);\n\n        this.input = input;\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Adds an event listener after drawing the checkbox.\n     */\n    afterDraw() {\n        if (!this.disabled) {\n            this.input.addEventListener('input', (e) => {\n                this.value = e.target.checked;\n                this.checked = e.target.checked;\n                event.dispatchCustomEvent(this, 'wje-toggle:input');\n            });\n\n            this.input.addEventListener('change', (e) => {\n                this.value = e.target.checked;\n                this.checked = e.target.checked;\n                event.dispatchCustomEvent(this, 'wje-toggle:change');\n            });\n        }\n    }\n\n    /**\n     * Removes the event listener when the checkbox is disconnected.\n     */\n    beforeDisconnect() {\n        event.removeElement(this.input);\n    }\n\n    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        form?.addEventListener('submit', () => {\n            // this.validateInput();\n            // this.propagateValidation();\n        });\n    }\n\n    /**\n     * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n     * This method is responsible for resetting the value of the custom input element to its default value.\n     * It also resets the form value and validity state in the form internals.\n     * @function\n     */\n    formResetCallback() {\n        // Set the value of the custom input element to its default value\n        this.value = this.defaultValue;\n        // Reset the form value in the form internals to the default value\n        this.internals.setFormValue(this.defaultValue);\n        // Reset the validity state in the form internals\n        this.internals.setValidity({});\n    }\n\n    /**\n     * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n     * This method is responsible for restoring the value of the custom input element to its saved state.\n     * It also restores the form value and validity state in the form internals to their saved states.\n     * @param {object} state The saved state of the custom input element.\n     * @function\n     */\n    formStateRestoreCallback(state) {\n        // Set the value of the custom input element to its saved value\n        this.value = state.value;\n        // Restore the form value in the form internals to the saved value\n        this.internals.setFormValue(state.value);\n        // Restore the validity state in the form internals to the saved state\n        this.internals.setValidity({});\n    }\n\n    /**\n     * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n     * This method is responsible for saving the value of the custom input element.\n     * @returns {object} The saved state of the custom input element.\n     * @function\n     */\n    formStateSaveCallback() {\n        return {\n            value: this.value,\n        };\n    }\n\n    /**\n     * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n     * This method is not implemented yet.\n     * @param {boolean} disabled The new disabled state of the custom input element.\n     * @function\n     */\n    formDisabledCallback(disabled) {\n        console.warn('formDisabledCallback not implemented yet');\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Checkbox from './checkbox.element.js';\n\n// export * from \"./checkbox.element.js\";\nexport default Checkbox;\n\nWJElement.define('wje-checkbox', Checkbox);\n"],"names":[],"mappings":"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"}

package/dist/wje-chip.js

@@ -73,3 +73,4 @@ WJElement.define("wje-chip", Chip);
 export {
   Chip as default
 };
+//# sourceMappingURL=wje-chip.js.map

package/dist/wje-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-chip.js","sources":["../packages/wje-chip/chip.element.js","../packages/wje-chip/chip.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-chip:remove\".\n * It is triggered when the remove button is clicked, which happens when the chip is removed.\n * The event is dispatched on the current instance of the Chip class.\n * @documentation https://elements.webjet.sk/components/chip\n * @status stable\n * @augments WJElement\n * @slot - The chip main content.\n * @csspart native - The component's native wrapper.\n * //@fires wje-chip:remove - Dispatched when the chip is removed;\n */\nexport default class Chip extends WJElement {\n    /**\n     * Chip constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the Chip element.\n     * @type {string}\n     */\n    className = 'Chip';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the Chip element.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-chip');\n\n        let slot = document.createElement('slot');\n\n        let remove = document.createElement('wje-button');\n        remove.setAttribute('part', 'remove');\n        remove.setAttribute('fill', 'link');\n        remove.setAttribute('color', this.color || 'default');\n        remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n\n        let active = document.createElement('wje-icon');\n        active.setAttribute('name', 'check');\n        active.classList.add('check');\n\n        // Add color\n        if (this.hasAttribute('color')) native.classList.add('wje-color-' + this.color, 'wje-color');\n        else native.classList.add('wje-color-default', 'wje-color');\n\n        if (this.disabled) this.classList.add('wje-disabled');\n\n        if (this.outline) this.classList.add('wje-outline');\n\n        native.appendChild(slot);\n        native.appendChild(active);\n\n        if (this.hasAttribute('removable')) native.appendChild(remove);\n\n        fragment.appendChild(native);\n\n        this.removeElement = remove;\n        return fragment;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    afterDraw() {\n        event.addListener(this.removeElement, 'click', 'wje:chip-remove', null, { stopPropagation: true });\n    }\n\n    /**\n     * Before disconnect event for the Chip element.\n     */\n    beforeDisconnect() {\n        event.removeListener(this.removeElement, 'click', 'wje:chip-remove');\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Chip from './chip.element.js';\n\n// export * from \"./chip.element.js\";\nexport default Chip;\n\nWJElement.define('wje-chip', Chip);\n"],"names":[],"mappings":";;;;;AAce,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV;AAOJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANX;AAAA;AAAA;AAAA;AAAA;AAAA,EAYD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,aAAa;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,SAAS,SAAS,cAAc,YAAY;AAChD,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,QAAQ,MAAM;AAClC,WAAO,aAAa,SAAS,KAAK,SAAS,SAAS;AACpD,WAAO,YAAY;AAEnB,QAAI,SAAS,SAAS,cAAc,UAAU;AAC9C,WAAO,aAAa,QAAQ,OAAO;AACnC,WAAO,UAAU,IAAI,OAAO;AAG5B,QAAI,KAAK,aAAa,OAAO,EAAG,QAAO,UAAU,IAAI,eAAe,KAAK,OAAO,WAAW;AAAA,QACtF,QAAO,UAAU,IAAI,qBAAqB,WAAW;AAE1D,QAAI,KAAK,SAAU,MAAK,UAAU,IAAI,cAAc;AAEpD,QAAI,KAAK,QAAS,MAAK,UAAU,IAAI,aAAa;AAElD,WAAO,YAAY,IAAI;AACvB,WAAO,YAAY,MAAM;AAEzB,QAAI,KAAK,aAAa,WAAW,EAAG,QAAO,YAAY,MAAM;AAE7D,aAAS,YAAY,MAAM;AAE3B,SAAK,gBAAgB;AACrB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,YAAY;AACR,UAAM,YAAY,KAAK,eAAe,SAAS,mBAAmB,MAAM,EAAE,iBAAiB,KAAI,CAAE;AAAA,EACpG;AAAA;AAAA;AAAA;AAAA,EAKD,mBAAmB;AACf,UAAM,eAAe,KAAK,eAAe,SAAS,iBAAiB;AAAA,EACtE;AACL;AC3FA,UAAU,OAAO,YAAY,IAAI;"}

package/dist/wje-col.js

@@ -2,7 +2,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 WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Col ]\n*/\n:host {\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  max-width: 100%;\n  padding-right: calc(var(--wje-gutter-x) * 0.5);\n  padding-left: calc(var(--wje-gutter-x) * 0.5);\n  margin-top: var(--wje-gutter-y);\n}\n:host(.wje-col) {\n  flex: 1 0 0%;\n}\n:host(.wje-row-cols-auto) > * {\n  flex: 0 0 auto;\n  width: auto;\n}\n:host(.wje-row-cols-1) > * {\n  flex: 0 0 auto;\n  width: 100%;\n}\n:host(.wje-row-cols-2) > * {\n  flex: 0 0 auto;\n  width: 50%;\n}\n:host(.wje-row-cols-3) > * {\n  flex: 0 0 auto;\n  width: 33.3333333333%;\n}\n:host(.wje-row-cols-4) > * {\n  flex: 0 0 auto;\n  width: 25%;\n}\n:host(.wje-row-cols-5) > * {\n  flex: 0 0 auto;\n  width: 20%;\n}\n:host(.wje-row-cols-6) > * {\n  flex: 0 0 auto;\n  width: 16.6666666667%;\n}\n@media (min-width: 576px) {\n  :host(.wje-col-sm) {\n    flex: 1 0 0%;\n  }\n  :host(.wje-row-cols-sm-auto) > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-row-cols-sm-1) > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-row-cols-sm-2) > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-row-cols-sm-3) > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  :host(.wje-row-cols-sm-4) > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-row-cols-sm-5) > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  :host(.wje-row-cols-sm-6) > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n}\n@media (min-width: 768px) {\n  :host(.wje-col-md) {\n    flex: 1 0 0%;\n  }\n  :host(.wje-row-cols-md-auto) > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-row-cols-md-1) > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-row-cols-md-2) > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-row-cols-md-3) > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  :host(.wje-row-cols-md-4) > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-row-cols-md-5) > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  :host(.wje-row-cols-md-6) > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n}\n@media (min-width: 992px) {\n  :host(.wje-col-lg) {\n    flex: 1 0 0%;\n  }\n  :host(.wje-row-cols-lg-auto) > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-row-cols-lg-1) > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-row-cols-lg-2) > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-row-cols-lg-3) > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  :host(.wje-row-cols-lg-4) > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-row-cols-lg-5) > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  :host(.wje-row-cols-lg-6) > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n}\n@media (min-width: 1200px) {\n  :host(.wje-col-xl) {\n    flex: 1 0 0%;\n  }\n  :host(.wje-row-cols-xl-auto) > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-row-cols-xl-1) > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-row-cols-xl-2) > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-row-cols-xl-3) > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  :host(.wje-row-cols-xl-4) > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-row-cols-xl-5) > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  :host(.wje-row-cols-xl-6) > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n}\n@media (min-width: 1400px) {\n  :host(.wje-col-xxl) {\n    flex: 1 0 0%;\n  }\n  :host(.wje-row-cols-xxl-auto) > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-row-cols-xxl-1) > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-row-cols-xxl-2) > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-row-cols-xxl-3) > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  :host(.wje-row-cols-xxl-4) > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-row-cols-xxl-5) > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  :host(.wje-row-cols-xxl-6) > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n}\n:host(.wje-col-auto) {\n  flex: 0 0 auto;\n  width: auto;\n}\n:host(.wje-col-1) {\n  flex: 0 0 auto;\n  width: 8.33333333%;\n}\n:host(.wje-col-2) {\n  flex: 0 0 auto;\n  width: 16.66666667%;\n}\n:host(.wje-col-3) {\n  flex: 0 0 auto;\n  width: 25%;\n}\n:host(.wje-col-4) {\n  flex: 0 0 auto;\n  width: 33.33333333%;\n}\n:host(.wje-col-5) {\n  flex: 0 0 auto;\n  width: 41.66666667%;\n}\n:host(.wje-col-6) {\n  flex: 0 0 auto;\n  width: 50%;\n}\n:host(.wje-col-7) {\n  flex: 0 0 auto;\n  width: 58.33333333%;\n}\n:host(.wje-col-8) {\n  flex: 0 0 auto;\n  width: 66.66666667%;\n}\n:host(.wje-col-9) {\n  flex: 0 0 auto;\n  width: 75%;\n}\n:host(.wje-col-10) {\n  flex: 0 0 auto;\n  width: 83.33333333%;\n}\n:host(.wje-col-11) {\n  flex: 0 0 auto;\n  width: 91.66666667%;\n}\n:host(.wje-col-12) {\n  flex: 0 0 auto;\n  width: 100%;\n}\n:host(.wje-offset-1) {\n  margin-left: 8.33333333%;\n}\n:host(.wje-offset-2) {\n  margin-left: 16.66666667%;\n}\n:host(.wje-offset-3) {\n  margin-left: 25%;\n}\n:host(.wje-offset-4) {\n  margin-left: 33.33333333%;\n}\n:host(.wje-offset-5) {\n  margin-left: 41.66666667%;\n}\n:host(.wje-offset-6) {\n  margin-left: 50%;\n}\n:host(.wje-offset-7) {\n  margin-left: 58.33333333%;\n}\n:host(.wje-offset-8) {\n  margin-left: 66.66666667%;\n}\n:host(.wje-offset-9) {\n  margin-left: 75%;\n}\n:host(.wje-offset-10) {\n  margin-left: 83.33333333%;\n}\n:host(.wje-offset-11) {\n  margin-left: 91.66666667%;\n}\n.g-0,\n.gx-0 {\n  --wje-gutter-x: 0;\n}\n.g-0,\n.gy-0 {\n  --wje-gutter-y: 0;\n}\n.g-1,\n.gx-1 {\n  --wje-gutter-x: 0.25rem;\n}\n.g-1,\n.gy-1 {\n  --wje-gutter-y: 0.25rem;\n}\n.g-2,\n.gx-2 {\n  --wje-gutter-x: 0.5rem;\n}\n.g-2,\n.gy-2 {\n  --wje-gutter-y: 0.5rem;\n}\n.g-3,\n.gx-3 {\n  --wje-gutter-x: 1rem;\n}\n.g-3,\n.gy-3 {\n  --wje-gutter-y: 1rem;\n}\n.g-4,\n.gx-4 {\n  --wje-gutter-x: 1.5rem;\n}\n.g-4,\n.gy-4 {\n  --wje-gutter-y: 1.5rem;\n}\n.g-5,\n.gx-5 {\n  --wje-gutter-x: 3rem;\n}\n.g-5,\n.gy-5 {\n  --wje-gutter-y: 3rem;\n}\n@media (min-width: 576px) {\n  :host(.wje-col-sm-auto) {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-col-sm-1) {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  :host(.wje-col-sm-2) {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  :host(.wje-col-sm-3) {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-col-sm-4) {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  :host(.wje-col-sm-5) {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  :host(.wje-col-sm-6) {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-col-sm-7) {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  :host(.wje-col-sm-8) {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  :host(.wje-col-sm-9) {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  :host(.wje-col-sm-10) {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  :host(.wje-col-sm-11) {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  :host(.wje-col-sm-12) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-offset-sm-0) {\n    margin-left: 0;\n  }\n  :host(.wje-offset-sm-1) {\n    margin-left: 8.33333333%;\n  }\n  :host(.wje-offset-sm-2) {\n    margin-left: 16.66666667%;\n  }\n  :host(.wje-offset-sm-3) {\n    margin-left: 25%;\n  }\n  :host(.wje-offset-sm-4) {\n    margin-left: 33.33333333%;\n  }\n  :host(.wje-offset-sm-5) {\n    margin-left: 41.66666667%;\n  }\n  :host(.wje-offset-sm-6) {\n    margin-left: 50%;\n  }\n  :host(.wje-offset-sm-7) {\n    margin-left: 58.33333333%;\n  }\n  :host(.wje-offset-sm-8) {\n    margin-left: 66.66666667%;\n  }\n  :host(.wje-offset-sm-9) {\n    margin-left: 75%;\n  }\n  :host(.wje-offset-sm-10) {\n    margin-left: 83.33333333%;\n  }\n  :host(.wje-offset-sm-11) {\n    margin-left: 91.66666667%;\n  }\n  .g-sm-0,\n  .gx-sm-0 {\n    --wje-gutter-x: 0;\n  }\n  .g-sm-0,\n  .gy-sm-0 {\n    --wje-gutter-y: 0;\n  }\n  .g-sm-1,\n  .gx-sm-1 {\n    --wje-gutter-x: 0.25rem;\n  }\n  .g-sm-1,\n  .gy-sm-1 {\n    --wje-gutter-y: 0.25rem;\n  }\n  .g-sm-2,\n  .gx-sm-2 {\n    --wje-gutter-x: 0.5rem;\n  }\n  .g-sm-2,\n  .gy-sm-2 {\n    --wje-gutter-y: 0.5rem;\n  }\n  .g-sm-3,\n  .gx-sm-3 {\n    --wje-gutter-x: 1rem;\n  }\n  .g-sm-3,\n  .gy-sm-3 {\n    --wje-gutter-y: 1rem;\n  }\n  .g-sm-4,\n  .gx-sm-4 {\n    --wje-gutter-x: 1.5rem;\n  }\n  .g-sm-4,\n  .gy-sm-4 {\n    --wje-gutter-y: 1.5rem;\n  }\n  .g-sm-5,\n  .gx-sm-5 {\n    --wje-gutter-x: 3rem;\n  }\n  .g-sm-5,\n  .gy-sm-5 {\n    --wje-gutter-y: 3rem;\n  }\n}\n@media (min-width: 768px) {\n  :host(.wje-col-md-auto) {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-col-md-1) {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  :host(.wje-col-md-2) {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  :host(.wje-col-md-3) {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-col-md-4) {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  :host(.wje-col-md-5) {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  :host(.wje-col-md-6) {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-col-md-7) {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  :host(.wje-col-md-8) {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  :host(.wje-col-md-9) {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  :host(.wje-col-md-10) {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  :host(.wje-col-md-11) {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  :host(.wje-col-md-12) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-offset-md-0) {\n    margin-left: 0;\n  }\n  :host(.wje-offset-md-1) {\n    margin-left: 8.33333333%;\n  }\n  :host(.wje-offset-md-2) {\n    margin-left: 16.66666667%;\n  }\n  :host(.wje-offset-md-3) {\n    margin-left: 25%;\n  }\n  :host(.wje-offset-md-4) {\n    margin-left: 33.33333333%;\n  }\n  :host(.wje-offset-md-5) {\n    margin-left: 41.66666667%;\n  }\n  :host(.wje-offset-md-6) {\n    margin-left: 50%;\n  }\n  :host(.wje-offset-md-7) {\n    margin-left: 58.33333333%;\n  }\n  :host(.wje-offset-md-8) {\n    margin-left: 66.66666667%;\n  }\n  :host(.wje-offset-md-9) {\n    margin-left: 75%;\n  }\n  :host(.wje-offset-md-10) {\n    margin-left: 83.33333333%;\n  }\n  :host(.wje-offset-md-11) {\n    margin-left: 91.66666667%;\n  }\n  .g-md-0,\n  .gx-md-0 {\n    --wje-gutter-x: 0;\n  }\n  .g-md-0,\n  .gy-md-0 {\n    --wje-gutter-y: 0;\n  }\n  .g-md-1,\n  .gx-md-1 {\n    --wje-gutter-x: 0.25rem;\n  }\n  .g-md-1,\n  .gy-md-1 {\n    --wje-gutter-y: 0.25rem;\n  }\n  .g-md-2,\n  .gx-md-2 {\n    --wje-gutter-x: 0.5rem;\n  }\n  .g-md-2,\n  .gy-md-2 {\n    --wje-gutter-y: 0.5rem;\n  }\n  .g-md-3,\n  .gx-md-3 {\n    --wje-gutter-x: 1rem;\n  }\n  .g-md-3,\n  .gy-md-3 {\n    --wje-gutter-y: 1rem;\n  }\n  .g-md-4,\n  .gx-md-4 {\n    --wje-gutter-x: 1.5rem;\n  }\n  .g-md-4,\n  .gy-md-4 {\n    --wje-gutter-y: 1.5rem;\n  }\n  .g-md-5,\n  .gx-md-5 {\n    --wje-gutter-x: 3rem;\n  }\n  .g-md-5,\n  .gy-md-5 {\n    --wje-gutter-y: 3rem;\n  }\n}\n@media (min-width: 992px) {\n  :host(.wje-col-lg-auto) {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-col-lg-1) {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  :host(.wje-col-lg-2) {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  :host(.wje-col-lg-3) {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-col-lg-4) {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  :host(.wje-col-lg-5) {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  :host(.wje-col-lg-6) {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-col-lg-7) {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  :host(.wje-col-lg-8) {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  :host(.wje-col-lg-9) {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  :host(.wje-col-lg-10) {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  :host(.wje-col-lg-11) {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  :host(.wje-col-lg-12) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-offset-lg-0) {\n    margin-left: 0;\n  }\n  :host(.wje-offset-lg-1) {\n    margin-left: 8.33333333%;\n  }\n  :host(.wje-offset-lg-2) {\n    margin-left: 16.66666667%;\n  }\n  :host(.wje-offset-lg-3) {\n    margin-left: 25%;\n  }\n  :host(.wje-offset-lg-4) {\n    margin-left: 33.33333333%;\n  }\n  :host(.wje-offset-lg-5) {\n    margin-left: 41.66666667%;\n  }\n  :host(.wje-offset-lg-6) {\n    margin-left: 50%;\n  }\n  :host(.wje-offset-lg-7) {\n    margin-left: 58.33333333%;\n  }\n  :host(.wje-offset-lg-8) {\n    margin-left: 66.66666667%;\n  }\n  :host(.wje-offset-lg-9) {\n    margin-left: 75%;\n  }\n  :host(.wje-offset-lg-10) {\n    margin-left: 83.33333333%;\n  }\n  :host(.wje-offset-lg-11) {\n    margin-left: 91.66666667%;\n  }\n  .g-lg-0,\n  .gx-lg-0 {\n    --wje-gutter-x: 0;\n  }\n  .g-lg-0,\n  .gy-lg-0 {\n    --wje-gutter-y: 0;\n  }\n  .g-lg-1,\n  .gx-lg-1 {\n    --wje-gutter-x: 0.25rem;\n  }\n  .g-lg-1,\n  .gy-lg-1 {\n    --wje-gutter-y: 0.25rem;\n  }\n  .g-lg-2,\n  .gx-lg-2 {\n    --wje-gutter-x: 0.5rem;\n  }\n  .g-lg-2,\n  .gy-lg-2 {\n    --wje-gutter-y: 0.5rem;\n  }\n  .g-lg-3,\n  .gx-lg-3 {\n    --wje-gutter-x: 1rem;\n  }\n  .g-lg-3,\n  .gy-lg-3 {\n    --wje-gutter-y: 1rem;\n  }\n  .g-lg-4,\n  .gx-lg-4 {\n    --wje-gutter-x: 1.5rem;\n  }\n  .g-lg-4,\n  .gy-lg-4 {\n    --wje-gutter-y: 1.5rem;\n  }\n  .g-lg-5,\n  .gx-lg-5 {\n    --wje-gutter-x: 3rem;\n  }\n  .g-lg-5,\n  .gy-lg-5 {\n    --wje-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1200px) {\n  :host(.wje-col-xl-auto) {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-col-xl-1) {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  :host(.wje-col-xl-2) {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  :host(.wje-col-xl-3) {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-col-xl-4) {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  :host(.wje-col-xl-5) {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  :host(.wje-col-xl-6) {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-col-xl-7) {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  :host(.wje-col-xl-8) {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  :host(.wje-col-xl-9) {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  :host(.wje-col-xl-10) {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  :host(.wje-col-xl-11) {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  :host(.wje-col-xl-12) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-offset-xl-0) {\n    margin-left: 0;\n  }\n  :host(.wje-offset-xl-1) {\n    margin-left: 8.33333333%;\n  }\n  :host(.wje-offset-xl-2) {\n    margin-left: 16.66666667%;\n  }\n  :host(.wje-offset-xl-3) {\n    margin-left: 25%;\n  }\n  :host(.wje-offset-xl-4) {\n    margin-left: 33.33333333%;\n  }\n  :host(.wje-offset-xl-5) {\n    margin-left: 41.66666667%;\n  }\n  :host(.wje-offset-xl-6) {\n    margin-left: 50%;\n  }\n  :host(.wje-offset-xl-7) {\n    margin-left: 58.33333333%;\n  }\n  :host(.wje-offset-xl-8) {\n    margin-left: 66.66666667%;\n  }\n  :host(.wje-offset-xl-9) {\n    margin-left: 75%;\n  }\n  :host(.wje-offset-xl-10) {\n    margin-left: 83.33333333%;\n  }\n  :host(.wje-offset-xl-11) {\n    margin-left: 91.66666667%;\n  }\n  .g-xl-0,\n  .gx-xl-0 {\n    --wje-gutter-x: 0;\n  }\n  .g-xl-0,\n  .gy-xl-0 {\n    --wje-gutter-y: 0;\n  }\n  .g-xl-1,\n  .gx-xl-1 {\n    --wje-gutter-x: 0.25rem;\n  }\n  .g-xl-1,\n  .gy-xl-1 {\n    --wje-gutter-y: 0.25rem;\n  }\n  .g-xl-2,\n  .gx-xl-2 {\n    --wje-gutter-x: 0.5rem;\n  }\n  .g-xl-2,\n  .gy-xl-2 {\n    --wje-gutter-y: 0.5rem;\n  }\n  .g-xl-3,\n  .gx-xl-3 {\n    --wje-gutter-x: 1rem;\n  }\n  .g-xl-3,\n  .gy-xl-3 {\n    --wje-gutter-y: 1rem;\n  }\n  .g-xl-4,\n  .gx-xl-4 {\n    --wje-gutter-x: 1.5rem;\n  }\n  .g-xl-4,\n  .gy-xl-4 {\n    --wje-gutter-y: 1.5rem;\n  }\n  .g-xl-5,\n  .gx-xl-5 {\n    --wje-gutter-x: 3rem;\n  }\n  .g-xl-5,\n  .gy-xl-5 {\n    --wje-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1400px) {\n  :host(.wje-col-xxl-auto) {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-col-xxl-1) {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  :host(.wje-col-xxl-2) {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  :host(.wje-col-xxl-3) {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-col-xxl-4) {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  :host(.wje-col-xxl-5) {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  :host(.wje-col-xxl-6) {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-col-xxl-7) {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  :host(.wje-col-xxl-8) {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  :host(.wje-col-xxl-9) {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  :host(.wje-col-xxl-10) {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  :host(.wje-col-xxl-11) {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  :host(.wje-col-xxl-12) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-offset-xxl-0) {\n    margin-left: 0;\n  }\n  :host(.wje-offset-xxl-1) {\n    margin-left: 8.33333333%;\n  }\n  :host(.wje-offset-xxl-2) {\n    margin-left: 16.66666667%;\n  }\n  :host(.wje-offset-xxl-3) {\n    margin-left: 25%;\n  }\n  :host(.wje-offset-xxl-4) {\n    margin-left: 33.33333333%;\n  }\n  :host(.wje-offset-xxl-5) {\n    margin-left: 41.66666667%;\n  }\n  :host(.wje-offset-xxl-6) {\n    margin-left: 50%;\n  }\n  :host(.wje-offset-xxl-7) {\n    margin-left: 58.33333333%;\n  }\n  :host(.wje-offset-xxl-8) {\n    margin-left: 66.66666667%;\n  }\n  :host(.wje-offset-xxl-9) {\n    margin-left: 75%;\n  }\n  :host(.wje-offset-xxl-10) {\n    margin-left: 83.33333333%;\n  }\n  :host(.wje-offset-xxl-11) {\n    margin-left: 91.66666667%;\n  }\n  .g-xxl-0,\n  .gx-xxl-0 {\n    --wje-gutter-x: 0;\n  }\n  .g-xxl-0,\n  .gy-xxl-0 {\n    --wje-gutter-y: 0;\n  }\n  .g-xxl-1,\n  .gx-xxl-1 {\n    --wje-gutter-x: 0.25rem;\n  }\n  .g-xxl-1,\n  .gy-xxl-1 {\n    --wje-gutter-y: 0.25rem;\n  }\n  .g-xxl-2,\n  .gx-xxl-2 {\n    --wje-gutter-x: 0.5rem;\n  }\n  .g-xxl-2,\n  .gy-xxl-2 {\n    --wje-gutter-y: 0.5rem;\n  }\n  .g-xxl-3,\n  .gx-xxl-3 {\n    --wje-gutter-x: 1rem;\n  }\n  .g-xxl-3,\n  .gy-xxl-3 {\n    --wje-gutter-y: 1rem;\n  }\n  .g-xxl-4,\n  .gx-xxl-4 {\n    --wje-gutter-x: 1.5rem;\n  }\n  .g-xxl-4,\n  .gy-xxl-4 {\n    --wje-gutter-y: 1.5rem;\n  }\n  .g-xxl-5,\n  .gx-xxl-5 {\n    --wje-gutter-x: 3rem;\n  }\n  .g-xxl-5,\n  .gy-xxl-5 {\n    --wje-gutter-y: 3rem;\n  }\n}\n:host(.order-first) {\n  order: -1 !important;\n}\n:host(.order-0) {\n  order: 0 !important;\n}\n:host(.order-1) {\n  order: 1 !important;\n}\n:host(.order-2) {\n  order: 2 !important;\n}\n:host(.order-3) {\n  order: 3 !important;\n}\n:host(.order-4) {\n  order: 4 !important;\n}\n:host(.order-5) {\n  order: 5 !important;\n}\n:host(.order-last) {\n  order: 6 !important;\n}\n:host(.order-sm-first) {\n  order: -1 !important;\n}\n:host(.order-sm-0) {\n  order: 0 !important;\n}\n:host(.order-sm-1) {\n  order: 1 !important;\n}\n:host(.order-sm-2) {\n  order: 2 !important;\n}\n:host(.order-sm-3) {\n  order: 3 !important;\n}\n:host(.order-sm-4) {\n  order: 4 !important;\n}\n:host(.order-sm-5) {\n  order: 5 !important;\n}\n:host(.order-sm-last) {\n  order: 6 !important;\n}\n:host(.order-md-first) {\n  order: -1 !important;\n}\n:host(.order-md-0) {\n  order: 0 !important;\n}\n:host(.order-md-1) {\n  order: 1 !important;\n}\n:host(.order-md-2) {\n  order: 2 !important;\n}\n:host(.order-md-3) {\n  order: 3 !important;\n}\n:host(.order-md-4) {\n  order: 4 !important;\n}\n:host(.order-md-5) {\n  order: 5 !important;\n}\n:host(.order-md-last) {\n  order: 6 !important;\n}\n:host(.order-lg-first) {\n  order: -1 !important;\n}\n:host(.order-lg-0) {\n  order: 0 !important;\n}\n:host(.order-lg-1) {\n  order: 1 !important;\n}\n:host(.order-lg-2) {\n  order: 2 !important;\n}\n:host(.order-lg-3) {\n  order: 3 !important;\n}\n:host(.order-lg-4) {\n  order: 4 !important;\n}\n:host(.order-lg-5) {\n  order: 5 !important;\n}\n:host(.order-lg-last) {\n  order: 6 !important;\n}\n:host(.order-xl-first) {\n  order: -1 !important;\n}\n:host(.order-xl-0) {\n  order: 0 !important;\n}\n:host(.order-xl-1) {\n  order: 1 !important;\n}\n:host(.order-xl-2) {\n  order: 2 !important;\n}\n:host(.order-xl-3) {\n  order: 3 !important;\n}\n:host(.order-xl-4) {\n  order: 4 !important;\n}\n:host(.order-xl-5) {\n  order: 5 !important;\n}\n:host(.order-xl-last) {\n  order: 6 !important;\n}\n:host(.order-xxl-first) {\n  order: -1 !important;\n}\n:host(.order-xxl-0) {\n  order: 0 !important;\n}\n:host(.order-xxl-1) {\n  order: 1 !important;\n}\n:host(.order-xxl-2) {\n  order: 2 !important;\n}\n:host(.order-xxl-3) {\n  order: 3 !important;\n}\n:host(.order-xxl-4) {\n  order: 4 !important;\n}\n:host(.order-xxl-5) {\n  order: 5 !important;\n}\n:host(.order-xxl-last) {\n  order: 6 !important;\n}";
+const styles = "/*\n[ WJ Col ]\n*/\n:host {\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  max-width: 100%;\n  padding-right: calc(var(--wje-gutter-x) * 0.5);\n  padding-left: calc(var(--wje-gutter-x) * 0.5);\n  margin-top: var(--wje-gutter-y);\n}\n\n:host(.wje-col) {\n  flex: 1 0 0%;\n}\n\n:host(.wje-row-cols-auto) > * {\n  flex: 0 0 auto;\n  width: auto;\n}\n\n:host(.wje-row-cols-1) > * {\n  flex: 0 0 auto;\n  width: 100%;\n}\n\n:host(.wje-row-cols-2) > * {\n  flex: 0 0 auto;\n  width: 50%;\n}\n\n:host(.wje-row-cols-3) > * {\n  flex: 0 0 auto;\n  width: 33.3333333333%;\n}\n\n:host(.wje-row-cols-4) > * {\n  flex: 0 0 auto;\n  width: 25%;\n}\n\n:host(.wje-row-cols-5) > * {\n  flex: 0 0 auto;\n  width: 20%;\n}\n\n:host(.wje-row-cols-6) > * {\n  flex: 0 0 auto;\n  width: 16.6666666667%;\n}\n\n@media (min-width: 576px) {\n  :host(.wje-col-sm) {\n    flex: 1 0 0%;\n  }\n  :host(.wje-row-cols-sm-auto) > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-row-cols-sm-1) > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-row-cols-sm-2) > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-row-cols-sm-3) > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  :host(.wje-row-cols-sm-4) > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-row-cols-sm-5) > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  :host(.wje-row-cols-sm-6) > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n}\n@media (min-width: 768px) {\n  :host(.wje-col-md) {\n    flex: 1 0 0%;\n  }\n  :host(.wje-row-cols-md-auto) > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-row-cols-md-1) > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-row-cols-md-2) > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-row-cols-md-3) > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  :host(.wje-row-cols-md-4) > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-row-cols-md-5) > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  :host(.wje-row-cols-md-6) > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n}\n@media (min-width: 992px) {\n  :host(.wje-col-lg) {\n    flex: 1 0 0%;\n  }\n  :host(.wje-row-cols-lg-auto) > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-row-cols-lg-1) > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-row-cols-lg-2) > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-row-cols-lg-3) > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  :host(.wje-row-cols-lg-4) > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-row-cols-lg-5) > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  :host(.wje-row-cols-lg-6) > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n}\n@media (min-width: 1200px) {\n  :host(.wje-col-xl) {\n    flex: 1 0 0%;\n  }\n  :host(.wje-row-cols-xl-auto) > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-row-cols-xl-1) > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-row-cols-xl-2) > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-row-cols-xl-3) > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  :host(.wje-row-cols-xl-4) > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-row-cols-xl-5) > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  :host(.wje-row-cols-xl-6) > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n}\n@media (min-width: 1400px) {\n  :host(.wje-col-xxl) {\n    flex: 1 0 0%;\n  }\n  :host(.wje-row-cols-xxl-auto) > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-row-cols-xxl-1) > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-row-cols-xxl-2) > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-row-cols-xxl-3) > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  :host(.wje-row-cols-xxl-4) > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-row-cols-xxl-5) > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  :host(.wje-row-cols-xxl-6) > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n}\n:host(.wje-col-auto) {\n  flex: 0 0 auto;\n  width: auto;\n}\n\n:host(.wje-col-1) {\n  flex: 0 0 auto;\n  width: 8.33333333%;\n}\n\n:host(.wje-col-2) {\n  flex: 0 0 auto;\n  width: 16.66666667%;\n}\n\n:host(.wje-col-3) {\n  flex: 0 0 auto;\n  width: 25%;\n}\n\n:host(.wje-col-4) {\n  flex: 0 0 auto;\n  width: 33.33333333%;\n}\n\n:host(.wje-col-5) {\n  flex: 0 0 auto;\n  width: 41.66666667%;\n}\n\n:host(.wje-col-6) {\n  flex: 0 0 auto;\n  width: 50%;\n}\n\n:host(.wje-col-7) {\n  flex: 0 0 auto;\n  width: 58.33333333%;\n}\n\n:host(.wje-col-8) {\n  flex: 0 0 auto;\n  width: 66.66666667%;\n}\n\n:host(.wje-col-9) {\n  flex: 0 0 auto;\n  width: 75%;\n}\n\n:host(.wje-col-10) {\n  flex: 0 0 auto;\n  width: 83.33333333%;\n}\n\n:host(.wje-col-11) {\n  flex: 0 0 auto;\n  width: 91.66666667%;\n}\n\n:host(.wje-col-12) {\n  flex: 0 0 auto;\n  width: 100%;\n}\n\n:host(.wje-offset-1) {\n  margin-left: 8.33333333%;\n}\n\n:host(.wje-offset-2) {\n  margin-left: 16.66666667%;\n}\n\n:host(.wje-offset-3) {\n  margin-left: 25%;\n}\n\n:host(.wje-offset-4) {\n  margin-left: 33.33333333%;\n}\n\n:host(.wje-offset-5) {\n  margin-left: 41.66666667%;\n}\n\n:host(.wje-offset-6) {\n  margin-left: 50%;\n}\n\n:host(.wje-offset-7) {\n  margin-left: 58.33333333%;\n}\n\n:host(.wje-offset-8) {\n  margin-left: 66.66666667%;\n}\n\n:host(.wje-offset-9) {\n  margin-left: 75%;\n}\n\n:host(.wje-offset-10) {\n  margin-left: 83.33333333%;\n}\n\n:host(.wje-offset-11) {\n  margin-left: 91.66666667%;\n}\n\n.g-0,\n.gx-0 {\n  --wje-gutter-x: 0;\n}\n\n.g-0,\n.gy-0 {\n  --wje-gutter-y: 0;\n}\n\n.g-1,\n.gx-1 {\n  --wje-gutter-x: 0.25rem;\n}\n\n.g-1,\n.gy-1 {\n  --wje-gutter-y: 0.25rem;\n}\n\n.g-2,\n.gx-2 {\n  --wje-gutter-x: 0.5rem;\n}\n\n.g-2,\n.gy-2 {\n  --wje-gutter-y: 0.5rem;\n}\n\n.g-3,\n.gx-3 {\n  --wje-gutter-x: 1rem;\n}\n\n.g-3,\n.gy-3 {\n  --wje-gutter-y: 1rem;\n}\n\n.g-4,\n.gx-4 {\n  --wje-gutter-x: 1.5rem;\n}\n\n.g-4,\n.gy-4 {\n  --wje-gutter-y: 1.5rem;\n}\n\n.g-5,\n.gx-5 {\n  --wje-gutter-x: 3rem;\n}\n\n.g-5,\n.gy-5 {\n  --wje-gutter-y: 3rem;\n}\n\n@media (min-width: 576px) {\n  :host(.wje-col-sm-auto) {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-col-sm-1) {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  :host(.wje-col-sm-2) {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  :host(.wje-col-sm-3) {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-col-sm-4) {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  :host(.wje-col-sm-5) {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  :host(.wje-col-sm-6) {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-col-sm-7) {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  :host(.wje-col-sm-8) {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  :host(.wje-col-sm-9) {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  :host(.wje-col-sm-10) {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  :host(.wje-col-sm-11) {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  :host(.wje-col-sm-12) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-offset-sm-0) {\n    margin-left: 0;\n  }\n  :host(.wje-offset-sm-1) {\n    margin-left: 8.33333333%;\n  }\n  :host(.wje-offset-sm-2) {\n    margin-left: 16.66666667%;\n  }\n  :host(.wje-offset-sm-3) {\n    margin-left: 25%;\n  }\n  :host(.wje-offset-sm-4) {\n    margin-left: 33.33333333%;\n  }\n  :host(.wje-offset-sm-5) {\n    margin-left: 41.66666667%;\n  }\n  :host(.wje-offset-sm-6) {\n    margin-left: 50%;\n  }\n  :host(.wje-offset-sm-7) {\n    margin-left: 58.33333333%;\n  }\n  :host(.wje-offset-sm-8) {\n    margin-left: 66.66666667%;\n  }\n  :host(.wje-offset-sm-9) {\n    margin-left: 75%;\n  }\n  :host(.wje-offset-sm-10) {\n    margin-left: 83.33333333%;\n  }\n  :host(.wje-offset-sm-11) {\n    margin-left: 91.66666667%;\n  }\n  .g-sm-0,\n  .gx-sm-0 {\n    --wje-gutter-x: 0;\n  }\n  .g-sm-0,\n  .gy-sm-0 {\n    --wje-gutter-y: 0;\n  }\n  .g-sm-1,\n  .gx-sm-1 {\n    --wje-gutter-x: 0.25rem;\n  }\n  .g-sm-1,\n  .gy-sm-1 {\n    --wje-gutter-y: 0.25rem;\n  }\n  .g-sm-2,\n  .gx-sm-2 {\n    --wje-gutter-x: 0.5rem;\n  }\n  .g-sm-2,\n  .gy-sm-2 {\n    --wje-gutter-y: 0.5rem;\n  }\n  .g-sm-3,\n  .gx-sm-3 {\n    --wje-gutter-x: 1rem;\n  }\n  .g-sm-3,\n  .gy-sm-3 {\n    --wje-gutter-y: 1rem;\n  }\n  .g-sm-4,\n  .gx-sm-4 {\n    --wje-gutter-x: 1.5rem;\n  }\n  .g-sm-4,\n  .gy-sm-4 {\n    --wje-gutter-y: 1.5rem;\n  }\n  .g-sm-5,\n  .gx-sm-5 {\n    --wje-gutter-x: 3rem;\n  }\n  .g-sm-5,\n  .gy-sm-5 {\n    --wje-gutter-y: 3rem;\n  }\n}\n@media (min-width: 768px) {\n  :host(.wje-col-md-auto) {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-col-md-1) {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  :host(.wje-col-md-2) {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  :host(.wje-col-md-3) {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-col-md-4) {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  :host(.wje-col-md-5) {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  :host(.wje-col-md-6) {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-col-md-7) {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  :host(.wje-col-md-8) {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  :host(.wje-col-md-9) {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  :host(.wje-col-md-10) {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  :host(.wje-col-md-11) {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  :host(.wje-col-md-12) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-offset-md-0) {\n    margin-left: 0;\n  }\n  :host(.wje-offset-md-1) {\n    margin-left: 8.33333333%;\n  }\n  :host(.wje-offset-md-2) {\n    margin-left: 16.66666667%;\n  }\n  :host(.wje-offset-md-3) {\n    margin-left: 25%;\n  }\n  :host(.wje-offset-md-4) {\n    margin-left: 33.33333333%;\n  }\n  :host(.wje-offset-md-5) {\n    margin-left: 41.66666667%;\n  }\n  :host(.wje-offset-md-6) {\n    margin-left: 50%;\n  }\n  :host(.wje-offset-md-7) {\n    margin-left: 58.33333333%;\n  }\n  :host(.wje-offset-md-8) {\n    margin-left: 66.66666667%;\n  }\n  :host(.wje-offset-md-9) {\n    margin-left: 75%;\n  }\n  :host(.wje-offset-md-10) {\n    margin-left: 83.33333333%;\n  }\n  :host(.wje-offset-md-11) {\n    margin-left: 91.66666667%;\n  }\n  .g-md-0,\n  .gx-md-0 {\n    --wje-gutter-x: 0;\n  }\n  .g-md-0,\n  .gy-md-0 {\n    --wje-gutter-y: 0;\n  }\n  .g-md-1,\n  .gx-md-1 {\n    --wje-gutter-x: 0.25rem;\n  }\n  .g-md-1,\n  .gy-md-1 {\n    --wje-gutter-y: 0.25rem;\n  }\n  .g-md-2,\n  .gx-md-2 {\n    --wje-gutter-x: 0.5rem;\n  }\n  .g-md-2,\n  .gy-md-2 {\n    --wje-gutter-y: 0.5rem;\n  }\n  .g-md-3,\n  .gx-md-3 {\n    --wje-gutter-x: 1rem;\n  }\n  .g-md-3,\n  .gy-md-3 {\n    --wje-gutter-y: 1rem;\n  }\n  .g-md-4,\n  .gx-md-4 {\n    --wje-gutter-x: 1.5rem;\n  }\n  .g-md-4,\n  .gy-md-4 {\n    --wje-gutter-y: 1.5rem;\n  }\n  .g-md-5,\n  .gx-md-5 {\n    --wje-gutter-x: 3rem;\n  }\n  .g-md-5,\n  .gy-md-5 {\n    --wje-gutter-y: 3rem;\n  }\n}\n@media (min-width: 992px) {\n  :host(.wje-col-lg-auto) {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-col-lg-1) {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  :host(.wje-col-lg-2) {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  :host(.wje-col-lg-3) {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-col-lg-4) {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  :host(.wje-col-lg-5) {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  :host(.wje-col-lg-6) {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-col-lg-7) {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  :host(.wje-col-lg-8) {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  :host(.wje-col-lg-9) {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  :host(.wje-col-lg-10) {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  :host(.wje-col-lg-11) {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  :host(.wje-col-lg-12) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-offset-lg-0) {\n    margin-left: 0;\n  }\n  :host(.wje-offset-lg-1) {\n    margin-left: 8.33333333%;\n  }\n  :host(.wje-offset-lg-2) {\n    margin-left: 16.66666667%;\n  }\n  :host(.wje-offset-lg-3) {\n    margin-left: 25%;\n  }\n  :host(.wje-offset-lg-4) {\n    margin-left: 33.33333333%;\n  }\n  :host(.wje-offset-lg-5) {\n    margin-left: 41.66666667%;\n  }\n  :host(.wje-offset-lg-6) {\n    margin-left: 50%;\n  }\n  :host(.wje-offset-lg-7) {\n    margin-left: 58.33333333%;\n  }\n  :host(.wje-offset-lg-8) {\n    margin-left: 66.66666667%;\n  }\n  :host(.wje-offset-lg-9) {\n    margin-left: 75%;\n  }\n  :host(.wje-offset-lg-10) {\n    margin-left: 83.33333333%;\n  }\n  :host(.wje-offset-lg-11) {\n    margin-left: 91.66666667%;\n  }\n  .g-lg-0,\n  .gx-lg-0 {\n    --wje-gutter-x: 0;\n  }\n  .g-lg-0,\n  .gy-lg-0 {\n    --wje-gutter-y: 0;\n  }\n  .g-lg-1,\n  .gx-lg-1 {\n    --wje-gutter-x: 0.25rem;\n  }\n  .g-lg-1,\n  .gy-lg-1 {\n    --wje-gutter-y: 0.25rem;\n  }\n  .g-lg-2,\n  .gx-lg-2 {\n    --wje-gutter-x: 0.5rem;\n  }\n  .g-lg-2,\n  .gy-lg-2 {\n    --wje-gutter-y: 0.5rem;\n  }\n  .g-lg-3,\n  .gx-lg-3 {\n    --wje-gutter-x: 1rem;\n  }\n  .g-lg-3,\n  .gy-lg-3 {\n    --wje-gutter-y: 1rem;\n  }\n  .g-lg-4,\n  .gx-lg-4 {\n    --wje-gutter-x: 1.5rem;\n  }\n  .g-lg-4,\n  .gy-lg-4 {\n    --wje-gutter-y: 1.5rem;\n  }\n  .g-lg-5,\n  .gx-lg-5 {\n    --wje-gutter-x: 3rem;\n  }\n  .g-lg-5,\n  .gy-lg-5 {\n    --wje-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1200px) {\n  :host(.wje-col-xl-auto) {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-col-xl-1) {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  :host(.wje-col-xl-2) {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  :host(.wje-col-xl-3) {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-col-xl-4) {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  :host(.wje-col-xl-5) {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  :host(.wje-col-xl-6) {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-col-xl-7) {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  :host(.wje-col-xl-8) {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  :host(.wje-col-xl-9) {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  :host(.wje-col-xl-10) {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  :host(.wje-col-xl-11) {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  :host(.wje-col-xl-12) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-offset-xl-0) {\n    margin-left: 0;\n  }\n  :host(.wje-offset-xl-1) {\n    margin-left: 8.33333333%;\n  }\n  :host(.wje-offset-xl-2) {\n    margin-left: 16.66666667%;\n  }\n  :host(.wje-offset-xl-3) {\n    margin-left: 25%;\n  }\n  :host(.wje-offset-xl-4) {\n    margin-left: 33.33333333%;\n  }\n  :host(.wje-offset-xl-5) {\n    margin-left: 41.66666667%;\n  }\n  :host(.wje-offset-xl-6) {\n    margin-left: 50%;\n  }\n  :host(.wje-offset-xl-7) {\n    margin-left: 58.33333333%;\n  }\n  :host(.wje-offset-xl-8) {\n    margin-left: 66.66666667%;\n  }\n  :host(.wje-offset-xl-9) {\n    margin-left: 75%;\n  }\n  :host(.wje-offset-xl-10) {\n    margin-left: 83.33333333%;\n  }\n  :host(.wje-offset-xl-11) {\n    margin-left: 91.66666667%;\n  }\n  .g-xl-0,\n  .gx-xl-0 {\n    --wje-gutter-x: 0;\n  }\n  .g-xl-0,\n  .gy-xl-0 {\n    --wje-gutter-y: 0;\n  }\n  .g-xl-1,\n  .gx-xl-1 {\n    --wje-gutter-x: 0.25rem;\n  }\n  .g-xl-1,\n  .gy-xl-1 {\n    --wje-gutter-y: 0.25rem;\n  }\n  .g-xl-2,\n  .gx-xl-2 {\n    --wje-gutter-x: 0.5rem;\n  }\n  .g-xl-2,\n  .gy-xl-2 {\n    --wje-gutter-y: 0.5rem;\n  }\n  .g-xl-3,\n  .gx-xl-3 {\n    --wje-gutter-x: 1rem;\n  }\n  .g-xl-3,\n  .gy-xl-3 {\n    --wje-gutter-y: 1rem;\n  }\n  .g-xl-4,\n  .gx-xl-4 {\n    --wje-gutter-x: 1.5rem;\n  }\n  .g-xl-4,\n  .gy-xl-4 {\n    --wje-gutter-y: 1.5rem;\n  }\n  .g-xl-5,\n  .gx-xl-5 {\n    --wje-gutter-x: 3rem;\n  }\n  .g-xl-5,\n  .gy-xl-5 {\n    --wje-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1400px) {\n  :host(.wje-col-xxl-auto) {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  :host(.wje-col-xxl-1) {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  :host(.wje-col-xxl-2) {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  :host(.wje-col-xxl-3) {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  :host(.wje-col-xxl-4) {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  :host(.wje-col-xxl-5) {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  :host(.wje-col-xxl-6) {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  :host(.wje-col-xxl-7) {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  :host(.wje-col-xxl-8) {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  :host(.wje-col-xxl-9) {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  :host(.wje-col-xxl-10) {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  :host(.wje-col-xxl-11) {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  :host(.wje-col-xxl-12) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  :host(.wje-offset-xxl-0) {\n    margin-left: 0;\n  }\n  :host(.wje-offset-xxl-1) {\n    margin-left: 8.33333333%;\n  }\n  :host(.wje-offset-xxl-2) {\n    margin-left: 16.66666667%;\n  }\n  :host(.wje-offset-xxl-3) {\n    margin-left: 25%;\n  }\n  :host(.wje-offset-xxl-4) {\n    margin-left: 33.33333333%;\n  }\n  :host(.wje-offset-xxl-5) {\n    margin-left: 41.66666667%;\n  }\n  :host(.wje-offset-xxl-6) {\n    margin-left: 50%;\n  }\n  :host(.wje-offset-xxl-7) {\n    margin-left: 58.33333333%;\n  }\n  :host(.wje-offset-xxl-8) {\n    margin-left: 66.66666667%;\n  }\n  :host(.wje-offset-xxl-9) {\n    margin-left: 75%;\n  }\n  :host(.wje-offset-xxl-10) {\n    margin-left: 83.33333333%;\n  }\n  :host(.wje-offset-xxl-11) {\n    margin-left: 91.66666667%;\n  }\n  .g-xxl-0,\n  .gx-xxl-0 {\n    --wje-gutter-x: 0;\n  }\n  .g-xxl-0,\n  .gy-xxl-0 {\n    --wje-gutter-y: 0;\n  }\n  .g-xxl-1,\n  .gx-xxl-1 {\n    --wje-gutter-x: 0.25rem;\n  }\n  .g-xxl-1,\n  .gy-xxl-1 {\n    --wje-gutter-y: 0.25rem;\n  }\n  .g-xxl-2,\n  .gx-xxl-2 {\n    --wje-gutter-x: 0.5rem;\n  }\n  .g-xxl-2,\n  .gy-xxl-2 {\n    --wje-gutter-y: 0.5rem;\n  }\n  .g-xxl-3,\n  .gx-xxl-3 {\n    --wje-gutter-x: 1rem;\n  }\n  .g-xxl-3,\n  .gy-xxl-3 {\n    --wje-gutter-y: 1rem;\n  }\n  .g-xxl-4,\n  .gx-xxl-4 {\n    --wje-gutter-x: 1.5rem;\n  }\n  .g-xxl-4,\n  .gy-xxl-4 {\n    --wje-gutter-y: 1.5rem;\n  }\n  .g-xxl-5,\n  .gx-xxl-5 {\n    --wje-gutter-x: 3rem;\n  }\n  .g-xxl-5,\n  .gy-xxl-5 {\n    --wje-gutter-y: 3rem;\n  }\n}\n:host(.some-other-value-first) {\n  order: -1 !important;\n}\n\n:host(.some-other-value-0) {\n  order: 0 !important;\n}\n\n:host(.some-other-value-1) {\n  order: 1 !important;\n}\n\n:host(.some-other-value-2) {\n  order: 2 !important;\n}\n\n:host(.some-other-value-3) {\n  order: 3 !important;\n}\n\n:host(.some-other-value-4) {\n  order: 4 !important;\n}\n\n:host(.some-other-value-5) {\n  order: 5 !important;\n}\n\n:host(.some-other-value-last) {\n  order: 6 !important;\n}\n\n:host(.some-other-value-sm-first) {\n  order: -1 !important;\n}\n\n:host(.some-other-value-sm-0) {\n  order: 0 !important;\n}\n\n:host(.some-other-value-sm-1) {\n  order: 1 !important;\n}\n\n:host(.some-other-value-sm-2) {\n  order: 2 !important;\n}\n\n:host(.some-other-value-sm-3) {\n  order: 3 !important;\n}\n\n:host(.some-other-value-sm-4) {\n  order: 4 !important;\n}\n\n:host(.some-other-value-sm-5) {\n  order: 5 !important;\n}\n\n:host(.some-other-value-sm-last) {\n  order: 6 !important;\n}\n\n:host(.some-other-value-md-first) {\n  order: -1 !important;\n}\n\n:host(.some-other-value-md-0) {\n  order: 0 !important;\n}\n\n:host(.some-other-value-md-1) {\n  order: 1 !important;\n}\n\n:host(.some-other-value-md-2) {\n  order: 2 !important;\n}\n\n:host(.some-other-value-md-3) {\n  order: 3 !important;\n}\n\n:host(.some-other-value-md-4) {\n  order: 4 !important;\n}\n\n:host(.some-other-value-md-5) {\n  order: 5 !important;\n}\n\n:host(.some-other-value-md-last) {\n  order: 6 !important;\n}\n\n:host(.some-other-value-lg-first) {\n  order: -1 !important;\n}\n\n:host(.some-other-value-lg-0) {\n  order: 0 !important;\n}\n\n:host(.some-other-value-lg-1) {\n  order: 1 !important;\n}\n\n:host(.some-other-value-lg-2) {\n  order: 2 !important;\n}\n\n:host(.some-other-value-lg-3) {\n  order: 3 !important;\n}\n\n:host(.some-other-value-lg-4) {\n  order: 4 !important;\n}\n\n:host(.some-other-value-lg-5) {\n  order: 5 !important;\n}\n\n:host(.some-other-value-lg-last) {\n  order: 6 !important;\n}\n\n:host(.some-other-value-xl-first) {\n  order: -1 !important;\n}\n\n:host(.some-other-value-xl-0) {\n  order: 0 !important;\n}\n\n:host(.some-other-value-xl-1) {\n  order: 1 !important;\n}\n\n:host(.some-other-value-xl-2) {\n  order: 2 !important;\n}\n\n:host(.some-other-value-xl-3) {\n  order: 3 !important;\n}\n\n:host(.some-other-value-xl-4) {\n  order: 4 !important;\n}\n\n:host(.some-other-value-xl-5) {\n  order: 5 !important;\n}\n\n:host(.some-other-value-xl-last) {\n  order: 6 !important;\n}\n\n:host(.some-other-value-xxl-first) {\n  order: -1 !important;\n}\n\n:host(.some-other-value-xxl-0) {\n  order: 0 !important;\n}\n\n:host(.some-other-value-xxl-1) {\n  order: 1 !important;\n}\n\n:host(.some-other-value-xxl-2) {\n  order: 2 !important;\n}\n\n:host(.some-other-value-xxl-3) {\n  order: 3 !important;\n}\n\n:host(.some-other-value-xxl-4) {\n  order: 4 !important;\n}\n\n:host(.some-other-value-xxl-5) {\n  order: 5 !important;\n}\n\n:host(.some-other-value-xxl-last) {\n  order: 6 !important;\n}";
 class Col extends WJElement {
   constructor() {
     super();
@@ -35,3 +35,4 @@ WJElement.define("wje-col", Col);
 export {
   Col as default
 };
+//# sourceMappingURL=wje-col.js.map

package/dist/wje-col.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-col.js","sources":["../packages/wje-col/col.element.js","../packages/wje-col/col.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './scss/styles.scss?inline';\n\n/**\n * @summary Col class that extends WJElement.\n * @documentation https://elements.webjet.sk/components/col\n * @status stable\n * @augments WJElement\n * @slot - The col main content.\n */\nexport default class Col extends WJElement {\n    constructor() {\n        super();\n    }\n\n    className = 'Col';\n\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component element.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        if (this.order) this.classList.add('order-' + this.order);\n\n        if (this.size) this.classList.add('wje-col-' + this.size);\n\n        if (this.sizeSm) this.classList.add('wje-col-sm-' + this.sizeSm);\n\n        if (this.sizeMd) this.classList.add('wje-col-md-' + this.sizeMd);\n\n        if (this.offset) this.classList.add('wje-offset-' + this.offset);\n\n        if (this.offsetSm) this.classList.add('wje-offset-sm-' + this.offsetSm);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Col from './col.element.js';\n\n// export * from \"./col.element.js\";\nexport default Col;\n\nWJElement.define('wje-col', Col);\n"],"names":[],"mappings":";;;;;AAUe,MAAM,YAAY,UAAU;AAAA,EACvC,cAAc;AACV;AAGJ,qCAAY;AAAA,EAFX;AAAA,EAID,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA,EAED,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,QAAI,KAAK,MAAO,MAAK,UAAU,IAAI,WAAW,KAAK,KAAK;AAExD,QAAI,KAAK,KAAM,MAAK,UAAU,IAAI,aAAa,KAAK,IAAI;AAExD,QAAI,KAAK,OAAQ,MAAK,UAAU,IAAI,gBAAgB,KAAK,MAAM;AAE/D,QAAI,KAAK,OAAQ,MAAK,UAAU,IAAI,gBAAgB,KAAK,MAAM;AAE/D,QAAI,KAAK,OAAQ,MAAK,UAAU,IAAI,gBAAgB,KAAK,MAAM;AAE/D,QAAI,KAAK,SAAU,MAAK,UAAU,IAAI,mBAAmB,KAAK,QAAQ;AAEtE,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACV;AACL;AC5CA,UAAU,OAAO,WAAW,GAAG;"}