wj-elements 0.7.6 → 0.8.0

package/dist/wje-chip.js

@@ -1,198 +1,81 @@
 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";
-import { WjElementUtils } from "./element-utils.js";
-import { event } from "./event.js";
-const styles = "/*\n[ WJ Chip ]\n*/\n\n:host {\n    display: inline-flex;\n    width: fit-content;\n    min-width: 0;\n    max-width: 100%;\n    --wje-button-border-radius: var(--wje-chip-round-border-radius);\n}\n\n.native-chip {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    font-size: var(--wje-font-size);\n    line-height: 1;\n    letter-spacing: -0.006em;\n    padding-block: var(--wje-chip-padding-block);\n    padding-inline: var(--wje-chip-padding-inline);\n    margin-block: var(--wje-chip-margin-block);\n    margin-inline: var(--wje-chip-margin-inline);\n    text-align: center;\n    cursor: pointer;\n    white-space: nowrap;\n    text-shadow: none;\n    box-shadow: none;\n    border: 0 none;\n    width: 100%;\n    height: 28px;\n    max-width: 100%;\n    min-width: 0;\n    position: relative;\n    transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n    border-radius: var(--wje-border-radius-pill);\n    overflow: hidden;\n    vertical-align: middle;\n    box-sizing: border-box;\n    background-color: var(--wje-chip-background);\n    color: var(--wje-chip-color);\n    &:hover {\n        background-color: var(--wje-chip-background-hover);\n        color: var(--wje-chip-color-hover);\n    }\n}\n\n.content {\n    display: block;\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.content slot {\n    display: block;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n:host(.focus) {\n    box-shadow: none;\n}\n\n:host(.wje-active) .native-chip {\n    border: 1px solid var(--wje-color-primary-11);\n    background-color: var(--wje-color-contrast-3);\n    color: var(--wje-color);\n}\n\n:host(:focus, :active:focus, .wje-active:focus) {\n    outline: none !important;\n}\n\n:host([size='small']) .native-chip {\n    font-size: var(--wje-font-size-small);\n    height: 24px;\n    padding: var(--wje-spacing-3x-small)  var(--wje-spacing-x-small);\n    wje-button {\n        --wje-button-margin-inline: var(--wje-spacing-3x-small) 0;\n    }\n}\n\n:host([size='large']) .native-chip {\n    font-size: var(--wje-font-size-medium);\n    height: 34px;\n    padding: var(--wje-spacing-x-small) var(--wje-spacing-small);\n\n}\n\n:host([round]) .native-chip {\n    border-radius: var(--wje-chip-round-border-radius);\n}\n\n.check {\n    display: none;\n}\n\n:host([active]) {\n    .check {\n        display: block;\n        margin-inline: 4px 0;\n    }\n}\n\n:host([disabled]) {\n    opacity: 0.5;\n    border: 0;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n::slotted(wje-avatar) {\n    width: 22px;\n    height: 22px;\n}\n\n::slotted(wje-avatar:not([slot]):first-child) {\n    margin-inline: -8px 8px;\n    margin-top: -4px;\n    margin-bottom: -4px;\n}\n\n::slotted(wje-icon:not([slot]):first-child) {\n    margin: -4px 8px -4px -4px;\n}\n\n::slotted(wje-icon:not([slot]):last-child) {\n    margin: -4px -4px -4px 8px;\n}\n\n::slotted(wje-label) {\n    display: block;\n    width: 100%;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\nslot[name='start'],\nslot[name='end'] {\n    display: none;\n    flex: 0 0 auto;\n    align-items: center;\n    min-width: 0;\n}\n\nslot[name='start'].has-content,\nslot[name='end'].has-content {\n    display: inline-flex;\n}\n\nslot[name='start'].has-content {\n    margin-inline-end: 8px;\n}\n\nslot[name='end'].has-content {\n    margin-inline-start: 8px;\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n\n::slotted(wje-avatar[slot='start']) {\n    margin-inline-start: -8px;\n    margin-top: -4px;\n    margin-bottom: -4px;\n}\n\n::slotted(wje-icon[slot='start']) {\n    margin: -4px 0 -4px -4px;\n}\n\n::slotted(wje-icon[slot='end']) {\n    margin: -4px -4px -4px 0;\n}\n\nwje-button {\n    flex: 0 0 auto;\n    /*--wje-button-border-radius: 50%;*/\n    --wje-button-margin-inline: 0.25rem 0;\n    --wje-padding-top: 0.15rem;\n    --wje-padding-start: 0.15rem;\n    --wje-padding-end: 0.15rem;\n    --wje-padding-bottom: 0.15rem;\n}\n\n/*BG - TEXT*/\n.native-chip.wje-color-primary {\n    background-color: var(--wje-color-primary-1);\n    color: var(--wje-color-primary-9);\n}\n\n.native-chip.wje-color-complete {\n    background-color: var(--wje-color-complete-1);\n    color: var(--wje-color-complete-9);\n}\n\n.native-chip.wje-color-success {\n    background-color: var(--wje-color-success-1);\n    color: var(--wje-color-success-9);\n}\n\n.native-chip.wje-color-warning {\n    background-color: var(--wje-color-warning-2);\n    color: var(--wje-color-warning-11);\n}\n\n.native-chip.wje-color-danger {\n    background-color: var(--wje-color-danger-1);\n    color: var(--wje-color-danger-9);\n}\n\n.native-chip.wje-color-info {\n    background-color: var(--wje-color-info-1);\n    color: var(--wje-color-info-9);\n}\n\n/*HOVER*/\n@media (any-hover: hover) {\n    .native-chip.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-4);\n        color: var(--wje-color-primary-10);\n    }\n\n    .native-chip.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-4);\n        color: var(--wje-color-complete-10);\n    }\n\n    .native-chip.wje-color-success:hover {\n        background-color: var(--wje-color-success-4);\n        color: var(--wje-color-success-10);\n    }\n\n    .native-chip.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-4);\n        color: var(--wje-color-warning-11);\n    }\n\n    .native-chip.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-4);\n        color: var(--wje-color-danger-10);\n    }\n\n    .native-chip.wje-color-info:hover {\n        background-color: var(--wje-color-info-4);\n        color: var(--wje-color-info-10);\n    }\n}\n";
-class Chip extends WJElement {
-  /**
-   * Chip constructor method.
-   */
+import e from "./wje-element.js";
+import { WjElementUtils as t } from "./element-utils.js";
+import { event as o } from "./event.js";
+class r extends e {
   constructor() {
     super();
-    /**
-     * Class name for the Chip element.
-     * @type {string}
-     */
     __publicField(this, "className", "Chip");
   }
-  /**
-   * Sets or removes the "round" attribute on the element based on the provided value.
-   * @param {boolean} value Determines whether the "round" attribute should be set or removed.
-   * If true, the "round" attribute is added. If false, the "round"
-   * attribute is removed.
-   */
-  set round(value) {
-    if (value) {
-      this.setAttribute("round", "");
-    } else {
-      this.removeAttribute("round");
-    }
-  }
-  /**
-   * Checks if the 'round' attribute is present on the element.
-   * @returns {boolean} Returns true if the 'round' attribute exists, otherwise false.
-   */
+  set round(e2) {
+    e2 ? this.setAttribute("round", "") : this.removeAttribute("round");
+  }
   get round() {
     return this.hasAttribute("round");
   }
-  /**
-   * Sets the size attribute of the element.
-   * @param {string} value The value to set for the size attribute.
-   */
-  set size(value) {
-    this.setAttribute("size", value);
-  }
-  /**
-   * Retrieves the 'size' attribute of the current element.
-   * @returns {string | null} The value of the 'size' attribute, or null if the attribute is not set.
-   */
+  set size(e2) {
+    this.setAttribute("size", e2);
+  }
   get size() {
     return this.getAttribute("size");
   }
-  /**
-   * Sets or removes the "removable" attribute on the element.
-   * @param {boolean} value A boolean indicating whether the element should have the "removable" attribute.
-   * If true, the "removable" attribute is added;
-   * if false, the "removable" attribute is removed.
-   */
-  set removable(value) {
-    if (value) {
-      this.setAttribute("removable", "");
-    } else {
-      this.removeAttribute("removable");
-    }
-  }
-  /**
-   * Determines if the element has the 'removable' attribute.
-   * @returns {boolean} True if the element has the 'removable' attribute, otherwise false.
-   */
+  set removable(e2) {
+    e2 ? this.setAttribute("removable", "") : this.removeAttribute("removable");
+  }
   get removable() {
     return this.hasAttribute("removable");
   }
-  /**
-   * Sets the disabled state of the element.
-   * If true, the 'disabled' attribute is added to the element.
-   * If false, the 'disabled' attribute is removed from the element.
-   * @param {boolean} value Specifies whether the element should be disabled.
-   */
-  set disabled(value) {
-    if (value) {
-      this.setAttribute("disabled", "");
-    } else {
-      this.removeAttribute("disabled");
-    }
-  }
-  /**
-   * Determines if the element has the 'disabled' attribute.
-   * @returns {boolean} True if the element has the 'disabled' attribute, otherwise false.
-   */
+  set disabled(e2) {
+    e2 ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
   get disabled() {
     return this.hasAttribute("disabled");
   }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {*}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{display:inline-flex;width:fit-content;min-width:0;max-width:100%;--wje-button-border-radius: var(--wje-chip-round-border-radius)}.native-chip{display:inline-flex;justify-content:center;align-items:center;font-size:var(--wje-font-size);line-height:1;letter-spacing:-.006em;padding-block:var(--wje-chip-padding-block);padding-inline:var(--wje-chip-padding-inline);margin-block:var(--wje-chip-margin-block);margin-inline:var(--wje-chip-margin-inline);text-align:center;cursor:pointer;white-space:nowrap;text-shadow:none;box-shadow:none;border:0 none;width:100%;height:28px;max-width:100%;min-width:0;position:relative;transition:width .15s cubic-bezier(.4,0,.2,1);border-radius:var(--wje-border-radius-pill);overflow:hidden;vertical-align:middle;box-sizing:border-box;background-color:var(--wje-chip-background);color:var(--wje-chip-color)}.native-chip:hover{background-color:var(--wje-chip-background-hover);color:var(--wje-chip-color-hover)}.content{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content slot{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.focus){box-shadow:none}:host(.wje-active) .native-chip{border:1px solid var(--wje-color-primary-11);background-color:var(--wje-color-contrast-3);color:var(--wje-color)}:host(:focus,:active:focus,.wje-active:focus){outline:none!important}:host([size="small"]) .native-chip{font-size:var(--wje-font-size-small);height:24px;padding:var(--wje-spacing-3x-small) var(--wje-spacing-x-small)}:host([size="small"]) .native-chip wje-button{--wje-button-margin-inline: var(--wje-spacing-3x-small) 0}:host([size="large"]) .native-chip{font-size:var(--wje-font-size-medium);height:34px;padding:var(--wje-spacing-x-small) var(--wje-spacing-small)}:host([round]) .native-chip{border-radius:var(--wje-chip-round-border-radius)}.check{display:none}:host([active]) .check{display:block;margin-inline:4px 0}:host([disabled]){opacity:.5;border:0;pointer-events:none;cursor:not-allowed}::slotted(wje-avatar){width:22px;height:22px}::slotted(wje-avatar:not([slot]):first-child){margin-inline:-8px 8px;margin-top:-4px;margin-bottom:-4px}::slotted(wje-icon:not([slot]):first-child){margin:-4px 8px -4px -4px}::slotted(wje-icon:not([slot]):last-child){margin:-4px -4px -4px 8px}::slotted(wje-label){display:block;width:100%;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}slot[name=start],slot[name=end]{display:none;flex:0 0 auto;align-items:center;min-width:0}slot[name=start].has-content,slot[name=end].has-content{display:inline-flex}slot[name=start].has-content{margin-inline-end:8px}slot[name=end].has-content{margin-inline-start:8px}::slotted([slot="start"]),::slotted([slot="end"]){display:inline-flex;align-items:center;flex:0 0 auto}::slotted(wje-avatar[slot="start"]){margin-inline-start:-8px;margin-top:-4px;margin-bottom:-4px}::slotted(wje-icon[slot="start"]){margin:-4px 0 -4px -4px}::slotted(wje-icon[slot="end"]){margin:-4px -4px -4px 0}wje-button{flex:0 0 auto;--wje-button-margin-inline: .25rem 0;--wje-padding-top: .15rem;--wje-padding-start: .15rem;--wje-padding-end: .15rem;--wje-padding-bottom: .15rem}.native-chip.wje-color-primary{background-color:var(--wje-color-primary-1);color:var(--wje-color-primary-9)}.native-chip.wje-color-complete{background-color:var(--wje-color-complete-1);color:var(--wje-color-complete-9)}.native-chip.wje-color-success{background-color:var(--wje-color-success-1);color:var(--wje-color-success-9)}.native-chip.wje-color-warning{background-color:var(--wje-color-warning-2);color:var(--wje-color-warning-11)}.native-chip.wje-color-danger{background-color:var(--wje-color-danger-1);color:var(--wje-color-danger-9)}.native-chip.wje-color-info{background-color:var(--wje-color-info-1);color:var(--wje-color-info-9)}@media(any-hover:hover){.native-chip.wje-color-primary:hover{background-color:var(--wje-color-primary-4);color:var(--wje-color-primary-10)}.native-chip.wje-color-complete:hover{background-color:var(--wje-color-complete-4);color:var(--wje-color-complete-10)}.native-chip.wje-color-success:hover{background-color:var(--wje-color-success-4);color:var(--wje-color-success-10)}.native-chip.wje-color-warning:hover{background-color:var(--wje-color-warning-4);color:var(--wje-color-warning-11)}.native-chip.wje-color-danger:hover{background-color:var(--wje-color-danger-4);color:var(--wje-color-danger-10)}.native-chip.wje-color-info:hover{background-color:var(--wje-color-info-4);color:var(--wje-color-info-10)}}';
   }
-  /**
-   * Getter for the observed attributes.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
   static get observedAttributes() {
     return ["removable", "disabled", "label"];
   }
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(e2, t2, o2) {
     var _a;
-    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
-    if (name === "removable" || name === "disabled" || name === "label") {
-      this.syncAria();
-    }
-  }
-  /**
-   * Draws the Chip element.
-   * @returns {DocumentFragment}
-   */
+    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, e2, t2, o2), "removable" !== e2 && "disabled" !== e2 && "label" !== e2 || this.syncAria();
+  }
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-chip");
-    let slotStart = document.createElement("slot");
-    slotStart.setAttribute("name", "start");
-    let content = document.createElement("span");
-    content.setAttribute("part", "content");
-    content.classList.add("content");
-    let slot = document.createElement("slot");
-    content.appendChild(slot);
-    let slotEnd = document.createElement("slot");
-    slotEnd.setAttribute("name", "end");
-    let remove = document.createElement("wje-button");
-    remove.setAttribute("part", "remove");
-    remove.setAttribute("fill", "link");
-    remove.setAttribute("color", this.color || "default");
-    remove.setAttribute("aria-label", "Remove");
-    remove.round = !this.round;
-    if (this.hasAttribute("size")) {
-      if (this.size === "small") {
-        remove.innerHTML = `<wje-icon name="x" size="small"></wje-icon>`;
-      } else if (this.size === "large") {
-        remove.innerHTML = `<wje-icon name="x"></wje-icon>`;
-      }
-    } else {
-      remove.innerHTML = `<wje-icon name="x"></wje-icon>`;
-    }
-    let active = document.createElement("wje-icon");
-    active.setAttribute("name", "check");
-    active.classList.add("check");
-    if (this.hasAttribute("color")) native.classList.add("wje-color-" + this.color, "wje-color");
-    else native.classList.add("wje-color-default", "wje-color");
-    if (this.disabled) this.classList.add("wje-disabled");
-    if (this.outline) this.classList.add("wje-outline");
-    native.appendChild(slotStart);
-    native.appendChild(content);
-    native.appendChild(slotEnd);
-    native.appendChild(active);
-    if (this.removable) native.appendChild(remove);
-    fragment.appendChild(native);
-    this.removeElement = remove;
-    this.slotStart = slotStart;
-    this.slotEnd = slotEnd;
-    return fragment;
-  }
-  /**
-   * Syncs ARIA attributes on the host element.
-   */
+    let e2 = document.createDocumentFragment(), t2 = document.createElement("div");
+    t2.setAttribute("part", "native"), t2.classList.add("native-chip");
+    let o2 = document.createElement("slot");
+    o2.setAttribute("name", "start");
+    let r2 = document.createElement("span");
+    r2.setAttribute("part", "content"), r2.classList.add("content");
+    let i = document.createElement("slot");
+    r2.appendChild(i);
+    let a = document.createElement("slot");
+    a.setAttribute("name", "end");
+    let n = document.createElement("wje-button");
+    n.setAttribute("part", "remove"), n.setAttribute("fill", "link"), n.setAttribute("color", this.color || "default"), n.setAttribute("label", "Remove"), n.round = !this.round, this.hasAttribute("size") ? "small" === this.size ? n.innerHTML = '<wje-icon name="x" size="small"></wje-icon>' : "large" === this.size && (n.innerHTML = '<wje-icon name="x"></wje-icon>') : n.innerHTML = '<wje-icon name="x"></wje-icon>';
+    let l = document.createElement("wje-icon");
+    return l.setAttribute("name", "check"), l.classList.add("check"), this.hasAttribute("color") ? t2.classList.add("wje-color-" + this.color, "wje-color") : t2.classList.add("wje-color-default", "wje-color"), this.disabled && this.classList.add("wje-disabled"), this.outline && this.classList.add("wje-outline"), t2.appendChild(o2), t2.appendChild(r2), t2.appendChild(a), t2.appendChild(l), this.removable && t2.appendChild(n), e2.appendChild(t2), this.removeElement = n, this.slotStart = o2, this.slotEnd = a, e2;
+  }
   syncAria() {
     var _a;
-    const label = (_a = this.getAttribute("label")) == null ? void 0 : _a.trim();
-    if (label) this.setAriaState({ label });
-    if (this.removable) this.setAriaState({ role: "button", disabled: this.disabled });
-    else this.setAriaState({ role: "status" });
-  }
-  /**
-   * Getter for the observed attributes.
-   */
+    const e2 = (_a = this.getAttribute("label")) == null ? void 0 : _a.trim();
+    e2 && this.setAriaState({ label: e2 }), this.removable ? this.setAriaState({ role: "button", disabled: this.disabled }) : this.setAriaState({ role: "status" });
+  }
   afterDraw() {
-    if (WjElementUtils.hasSlotContent(this.context, "start")) this.slotStart.classList.add("has-content");
-    if (WjElementUtils.hasSlotContent(this.context, "end")) this.slotEnd.classList.add("has-content");
-    event.addListener(this.removeElement, "click", "wje:chip-remove", null, { stopPropagation: true });
+    t.hasSlotContent(this.context, "start") && this.slotStart.classList.add("has-content"), t.hasSlotContent(this.context, "end") && this.slotEnd.classList.add("has-content"), o.addListener(this.removeElement, "click", "wje:chip-remove", null, { stopPropagation: true });
   }
-  /**
-   * Before disconnect event for the Chip element.
-   */
   beforeDisconnect() {
-    event.removeListener(this.removeElement, "click", "wje:chip-remove");
+    o.removeListener(this.removeElement, "click", "wje:chip-remove");
   }
 }
-WJElement.define("wje-chip", Chip);
+e.define("wje-chip", r);
 export {
-  Chip as default
+  r as default
 };
 //# sourceMappingURL=wje-chip.js.map

package/dist/wje-chip.js.map

@@ -1 +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, WjElementUtils } 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 start - The chip leading content.\n * @slot - The chip main content.\n * @slot end - The chip trailing 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     * Sets or removes the \"round\" attribute on the element based on the provided value.\n     * @param {boolean} value Determines whether the \"round\" attribute should be set or removed.\n     * If true, the \"round\" attribute is added. If false, the \"round\"\n     * attribute is removed.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} Returns true if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Sets the size attribute of the element.\n     * @param {string} value The value to set for the size attribute.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Retrieves the 'size' attribute of the current element.\n     * @returns {string | null} The value of the 'size' attribute, or null if the attribute is not set.\n     */\n    get size() {\n        return this.getAttribute('size');\n    }\n\n    /**\n     * Sets or removes the \"removable\" attribute on the element.\n     * @param {boolean} value A boolean indicating whether the element should have the \"removable\" attribute.\n     * If true, the \"removable\" attribute is added;\n     * if false, the \"removable\" attribute is removed.\n     */\n    set removable(value) {\n        if (value) {\n            this.setAttribute('removable', '');\n        } else {\n            this.removeAttribute('removable');\n        }\n    }\n\n    /**\n     * Determines if the element has the 'removable' attribute.\n     * @returns {boolean} True if the element has the 'removable' attribute, otherwise false.\n     */\n    get removable() {\n        return this.hasAttribute('removable');\n    }\n\n    /**\n     * Sets the disabled state of the element.\n     * If true, the 'disabled' attribute is added to the element.\n     * If false, the 'disabled' attribute is removed from the element.\n     * @param {boolean} value Specifies whether the element should be disabled.\n     */\n    set disabled(value) {\n        if (value) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Determines if the element has the 'disabled' attribute.\n     * @returns {boolean} True if the element has the 'disabled' attribute, otherwise false.\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\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        this.syncAria();\n    }\n\n    static get observedAttributes() {\n        return ['removable', 'disabled', 'label'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (name === 'removable' || name === 'disabled' || name === 'label') {\n            this.syncAria();\n        }\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.setAttribute('part', 'native');\n        native.classList.add('native-chip');\n\n        let slotStart = document.createElement('slot');\n        slotStart.setAttribute('name', 'start');\n\n        let content = document.createElement('span');\n        content.setAttribute('part', 'content');\n        content.classList.add('content');\n\n        let slot = document.createElement('slot');\n        content.appendChild(slot);\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\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.setAttribute('aria-label', 'Remove');\n        remove.round = !this.round;\n\n        if(this.hasAttribute('size')) {\n            if(this.size === 'small') {\n                remove.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n            } else if (this.size === 'large') {\n                remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n            }\n        } else {\n            remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n        }\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(slotStart);\n        native.appendChild(content);\n        native.appendChild(slotEnd);\n        native.appendChild(active);\n\n        if (this.removable) native.appendChild(remove);\n\n        fragment.appendChild(native);\n\n        this.removeElement = remove;\n        this.slotStart = slotStart;\n        this.slotEnd = slotEnd;\n\n        return fragment;\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const label = this.getAttribute('label')?.trim();\n        if (label) this.setAriaState({ label });\n        if (this.removable) this.setAriaState({ role: 'button', disabled: this.disabled });\n        else this.setAriaState({ role: 'status' });\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    afterDraw() {\n        if (WjElementUtils.hasSlotContent(this.context, 'start')) this.slotStart.classList.add('has-content');\n        if (WjElementUtils.hasSlotContent(this.context, 'end')) this.slotEnd.classList.add('has-content');\n\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":"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"}
+{"version":3,"file":"wje-chip.js","sources":["../packages/wje-chip/chip.element.js","../packages/wje-chip/chip.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 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 start - The chip leading content.\n * @slot - The chip main content.\n * @slot end - The chip trailing 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     * Sets or removes the \"round\" attribute on the element based on the provided value.\n     * @param {boolean} value Determines whether the \"round\" attribute should be set or removed.\n     * If true, the \"round\" attribute is added. If false, the \"round\"\n     * attribute is removed.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} Returns true if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Sets the size attribute of the element.\n     * @param {string} value The value to set for the size attribute.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Retrieves the 'size' attribute of the current element.\n     * @returns {string | null} The value of the 'size' attribute, or null if the attribute is not set.\n     */\n    get size() {\n        return this.getAttribute('size');\n    }\n\n    /**\n     * Sets or removes the \"removable\" attribute on the element.\n     * @param {boolean} value A boolean indicating whether the element should have the \"removable\" attribute.\n     * If true, the \"removable\" attribute is added;\n     * if false, the \"removable\" attribute is removed.\n     */\n    set removable(value) {\n        if (value) {\n            this.setAttribute('removable', '');\n        } else {\n            this.removeAttribute('removable');\n        }\n    }\n\n    /**\n     * Determines if the element has the 'removable' attribute.\n     * @returns {boolean} True if the element has the 'removable' attribute, otherwise false.\n     */\n    get removable() {\n        return this.hasAttribute('removable');\n    }\n\n    /**\n     * Sets the disabled state of the element.\n     * If true, the 'disabled' attribute is added to the element.\n     * If false, the 'disabled' attribute is removed from the element.\n     * @param {boolean} value Specifies whether the element should be disabled.\n     */\n    set disabled(value) {\n        if (value) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Determines if the element has the 'disabled' attribute.\n     * @returns {boolean} True if the element has the 'disabled' attribute, otherwise false.\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\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        this.syncAria();\n    }\n\n    static get observedAttributes() {\n        return ['removable', 'disabled', 'label'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (name === 'removable' || name === 'disabled' || name === 'label') {\n            this.syncAria();\n        }\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.setAttribute('part', 'native');\n        native.classList.add('native-chip');\n\n        let slotStart = document.createElement('slot');\n        slotStart.setAttribute('name', 'start');\n\n        let content = document.createElement('span');\n        content.setAttribute('part', 'content');\n        content.classList.add('content');\n\n        let slot = document.createElement('slot');\n        content.appendChild(slot);\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\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.setAttribute('label', 'Remove');\n        remove.round = !this.round;\n\n        if(this.hasAttribute('size')) {\n            if(this.size === 'small') {\n                remove.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n            } else if (this.size === 'large') {\n                remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n            }\n        } else {\n            remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n        }\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(slotStart);\n        native.appendChild(content);\n        native.appendChild(slotEnd);\n        native.appendChild(active);\n\n        if (this.removable) native.appendChild(remove);\n\n        fragment.appendChild(native);\n\n        this.removeElement = remove;\n        this.slotStart = slotStart;\n        this.slotEnd = slotEnd;\n\n        return fragment;\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const label = this.getAttribute('label')?.trim();\n        if (label) this.setAriaState({ label });\n        if (this.removable) this.setAriaState({ role: 'button', disabled: this.disabled });\n        else this.setAriaState({ role: 'status' });\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    afterDraw() {\n        if (WjElementUtils.hasSlotContent(this.context, 'start')) this.slotStart.classList.add('has-content');\n        if (WjElementUtils.hasSlotContent(this.context, 'end')) this.slotEnd.classList.add('has-content');\n\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":["Chip","WJElement","super","className","value","this","setAttribute","removeAttribute","round","hasAttribute","size","getAttribute","disabled","cssStyleSheet","setupAttributes","isShadowRoot","syncAria","name","oldValue","newValue","attributeChangedCallback","fragment","document","createDocumentFragment","native","createElement","classList","add","slotStart","content","slot","appendChild","slotEnd","remove","color","innerHTML","active","outline","removable","removeElement","label","trim","setAriaState","role","afterDraw","WjElementUtils","hasSlotContent","context","event","addListener","stopPropagation","beforeDisconnect","removeListener","define"],"mappings":"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"}

package/dist/wje-col.js

@@ -1,38 +1,25 @@
 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\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 {
+import t from "./wje-element.js";
+class e extends t {
   constructor() {
     super();
     __publicField(this, "className", "Col");
   }
   static get cssStyleSheet() {
-    return styles;
+    return ":host{display:block;flex-grow:1;width:100%;max-width:100%;padding-right:calc(var(--wje-gutter-x) * .5);padding-left:calc(var(--wje-gutter-x) * .5);margin-top:var(--wje-gutter-y)}:host(.wje-col){flex:1 0 0%}:host(.wje-row-cols-auto)>*{flex:0 0 auto;width:auto}:host(.wje-row-cols-1)>*{flex:0 0 auto;width:100%}:host(.wje-row-cols-2)>*{flex:0 0 auto;width:50%}:host(.wje-row-cols-3)>*{flex:0 0 auto;width:33.3333333333%}:host(.wje-row-cols-4)>*{flex:0 0 auto;width:25%}:host(.wje-row-cols-5)>*{flex:0 0 auto;width:20%}:host(.wje-row-cols-6)>*{flex:0 0 auto;width:16.6666666667%}@media(min-width:576px){:host(.wje-col-sm){flex:1 0 0%}:host(.wje-row-cols-sm-auto)>*{flex:0 0 auto;width:auto}:host(.wje-row-cols-sm-1)>*{flex:0 0 auto;width:100%}:host(.wje-row-cols-sm-2)>*{flex:0 0 auto;width:50%}:host(.wje-row-cols-sm-3)>*{flex:0 0 auto;width:33.3333333333%}:host(.wje-row-cols-sm-4)>*{flex:0 0 auto;width:25%}:host(.wje-row-cols-sm-5)>*{flex:0 0 auto;width:20%}:host(.wje-row-cols-sm-6)>*{flex:0 0 auto;width:16.6666666667%}}@media(min-width:768px){:host(.wje-col-md){flex:1 0 0%}:host(.wje-row-cols-md-auto)>*{flex:0 0 auto;width:auto}:host(.wje-row-cols-md-1)>*{flex:0 0 auto;width:100%}:host(.wje-row-cols-md-2)>*{flex:0 0 auto;width:50%}:host(.wje-row-cols-md-3)>*{flex:0 0 auto;width:33.3333333333%}:host(.wje-row-cols-md-4)>*{flex:0 0 auto;width:25%}:host(.wje-row-cols-md-5)>*{flex:0 0 auto;width:20%}:host(.wje-row-cols-md-6)>*{flex:0 0 auto;width:16.6666666667%}}@media(min-width:992px){:host(.wje-col-lg){flex:1 0 0%}:host(.wje-row-cols-lg-auto)>*{flex:0 0 auto;width:auto}:host(.wje-row-cols-lg-1)>*{flex:0 0 auto;width:100%}:host(.wje-row-cols-lg-2)>*{flex:0 0 auto;width:50%}:host(.wje-row-cols-lg-3)>*{flex:0 0 auto;width:33.3333333333%}:host(.wje-row-cols-lg-4)>*{flex:0 0 auto;width:25%}:host(.wje-row-cols-lg-5)>*{flex:0 0 auto;width:20%}:host(.wje-row-cols-lg-6)>*{flex:0 0 auto;width:16.6666666667%}}@media(min-width:1200px){:host(.wje-col-xl){flex:1 0 0%}:host(.wje-row-cols-xl-auto)>*{flex:0 0 auto;width:auto}:host(.wje-row-cols-xl-1)>*{flex:0 0 auto;width:100%}:host(.wje-row-cols-xl-2)>*{flex:0 0 auto;width:50%}:host(.wje-row-cols-xl-3)>*{flex:0 0 auto;width:33.3333333333%}:host(.wje-row-cols-xl-4)>*{flex:0 0 auto;width:25%}:host(.wje-row-cols-xl-5)>*{flex:0 0 auto;width:20%}:host(.wje-row-cols-xl-6)>*{flex:0 0 auto;width:16.6666666667%}}@media(min-width:1400px){:host(.wje-col-xxl){flex:1 0 0%}:host(.wje-row-cols-xxl-auto)>*{flex:0 0 auto;width:auto}:host(.wje-row-cols-xxl-1)>*{flex:0 0 auto;width:100%}:host(.wje-row-cols-xxl-2)>*{flex:0 0 auto;width:50%}:host(.wje-row-cols-xxl-3)>*{flex:0 0 auto;width:33.3333333333%}:host(.wje-row-cols-xxl-4)>*{flex:0 0 auto;width:25%}:host(.wje-row-cols-xxl-5)>*{flex:0 0 auto;width:20%}:host(.wje-row-cols-xxl-6)>*{flex:0 0 auto;width:16.6666666667%}}:host(.wje-col-auto){flex:0 0 auto;width:auto}:host(.wje-col-1){flex:0 0 auto;width:8.33333333%}:host(.wje-col-2){flex:0 0 auto;width:16.66666667%}:host(.wje-col-3){flex:0 0 auto;width:25%}:host(.wje-col-4){flex:0 0 auto;width:33.33333333%}:host(.wje-col-5){flex:0 0 auto;width:41.66666667%}:host(.wje-col-6){flex:0 0 auto;width:50%}:host(.wje-col-7){flex:0 0 auto;width:58.33333333%}:host(.wje-col-8){flex:0 0 auto;width:66.66666667%}:host(.wje-col-9){flex:0 0 auto;width:75%}:host(.wje-col-10){flex:0 0 auto;width:83.33333333%}:host(.wje-col-11){flex:0 0 auto;width:91.66666667%}:host(.wje-col-12){flex:0 0 auto;width:100%}:host(.wje-offset-1){margin-left:8.33333333%}:host(.wje-offset-2){margin-left:16.66666667%}:host(.wje-offset-3){margin-left:25%}:host(.wje-offset-4){margin-left:33.33333333%}:host(.wje-offset-5){margin-left:41.66666667%}:host(.wje-offset-6){margin-left:50%}:host(.wje-offset-7){margin-left:58.33333333%}:host(.wje-offset-8){margin-left:66.66666667%}:host(.wje-offset-9){margin-left:75%}:host(.wje-offset-10){margin-left:83.33333333%}:host(.wje-offset-11){margin-left:91.66666667%}.g-0,.gx-0{--wje-gutter-x: 0}.g-0,.gy-0{--wje-gutter-y: 0}.g-1,.gx-1{--wje-gutter-x: .25rem}.g-1,.gy-1{--wje-gutter-y: .25rem}.g-2,.gx-2{--wje-gutter-x: .5rem}.g-2,.gy-2{--wje-gutter-y: .5rem}.g-3,.gx-3{--wje-gutter-x: 1rem}.g-3,.gy-3{--wje-gutter-y: 1rem}.g-4,.gx-4{--wje-gutter-x: 1.5rem}.g-4,.gy-4{--wje-gutter-y: 1.5rem}.g-5,.gx-5{--wje-gutter-x: 3rem}.g-5,.gy-5{--wje-gutter-y: 3rem}@media(min-width:576px){:host(.wje-col-sm-auto){flex:0 0 auto;width:auto}:host(.wje-col-sm-1){flex:0 0 auto;width:8.33333333%}:host(.wje-col-sm-2){flex:0 0 auto;width:16.66666667%}:host(.wje-col-sm-3){flex:0 0 auto;width:25%}:host(.wje-col-sm-4){flex:0 0 auto;width:33.33333333%}:host(.wje-col-sm-5){flex:0 0 auto;width:41.66666667%}:host(.wje-col-sm-6){flex:0 0 auto;width:50%}:host(.wje-col-sm-7){flex:0 0 auto;width:58.33333333%}:host(.wje-col-sm-8){flex:0 0 auto;width:66.66666667%}:host(.wje-col-sm-9){flex:0 0 auto;width:75%}:host(.wje-col-sm-10){flex:0 0 auto;width:83.33333333%}:host(.wje-col-sm-11){flex:0 0 auto;width:91.66666667%}:host(.wje-col-sm-12){flex:0 0 auto;width:100%}:host(.wje-offset-sm-0){margin-left:0}:host(.wje-offset-sm-1){margin-left:8.33333333%}:host(.wje-offset-sm-2){margin-left:16.66666667%}:host(.wje-offset-sm-3){margin-left:25%}:host(.wje-offset-sm-4){margin-left:33.33333333%}:host(.wje-offset-sm-5){margin-left:41.66666667%}:host(.wje-offset-sm-6){margin-left:50%}:host(.wje-offset-sm-7){margin-left:58.33333333%}:host(.wje-offset-sm-8){margin-left:66.66666667%}:host(.wje-offset-sm-9){margin-left:75%}:host(.wje-offset-sm-10){margin-left:83.33333333%}:host(.wje-offset-sm-11){margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--wje-gutter-x: 0}.g-sm-0,.gy-sm-0{--wje-gutter-y: 0}.g-sm-1,.gx-sm-1{--wje-gutter-x: .25rem}.g-sm-1,.gy-sm-1{--wje-gutter-y: .25rem}.g-sm-2,.gx-sm-2{--wje-gutter-x: .5rem}.g-sm-2,.gy-sm-2{--wje-gutter-y: .5rem}.g-sm-3,.gx-sm-3{--wje-gutter-x: 1rem}.g-sm-3,.gy-sm-3{--wje-gutter-y: 1rem}.g-sm-4,.gx-sm-4{--wje-gutter-x: 1.5rem}.g-sm-4,.gy-sm-4{--wje-gutter-y: 1.5rem}.g-sm-5,.gx-sm-5{--wje-gutter-x: 3rem}.g-sm-5,.gy-sm-5{--wje-gutter-y: 3rem}}@media(min-width:768px){:host(.wje-col-md-auto){flex:0 0 auto;width:auto}:host(.wje-col-md-1){flex:0 0 auto;width:8.33333333%}:host(.wje-col-md-2){flex:0 0 auto;width:16.66666667%}:host(.wje-col-md-3){flex:0 0 auto;width:25%}:host(.wje-col-md-4){flex:0 0 auto;width:33.33333333%}:host(.wje-col-md-5){flex:0 0 auto;width:41.66666667%}:host(.wje-col-md-6){flex:0 0 auto;width:50%}:host(.wje-col-md-7){flex:0 0 auto;width:58.33333333%}:host(.wje-col-md-8){flex:0 0 auto;width:66.66666667%}:host(.wje-col-md-9){flex:0 0 auto;width:75%}:host(.wje-col-md-10){flex:0 0 auto;width:83.33333333%}:host(.wje-col-md-11){flex:0 0 auto;width:91.66666667%}:host(.wje-col-md-12){flex:0 0 auto;width:100%}:host(.wje-offset-md-0){margin-left:0}:host(.wje-offset-md-1){margin-left:8.33333333%}:host(.wje-offset-md-2){margin-left:16.66666667%}:host(.wje-offset-md-3){margin-left:25%}:host(.wje-offset-md-4){margin-left:33.33333333%}:host(.wje-offset-md-5){margin-left:41.66666667%}:host(.wje-offset-md-6){margin-left:50%}:host(.wje-offset-md-7){margin-left:58.33333333%}:host(.wje-offset-md-8){margin-left:66.66666667%}:host(.wje-offset-md-9){margin-left:75%}:host(.wje-offset-md-10){margin-left:83.33333333%}:host(.wje-offset-md-11){margin-left:91.66666667%}.g-md-0,.gx-md-0{--wje-gutter-x: 0}.g-md-0,.gy-md-0{--wje-gutter-y: 0}.g-md-1,.gx-md-1{--wje-gutter-x: .25rem}.g-md-1,.gy-md-1{--wje-gutter-y: .25rem}.g-md-2,.gx-md-2{--wje-gutter-x: .5rem}.g-md-2,.gy-md-2{--wje-gutter-y: .5rem}.g-md-3,.gx-md-3{--wje-gutter-x: 1rem}.g-md-3,.gy-md-3{--wje-gutter-y: 1rem}.g-md-4,.gx-md-4{--wje-gutter-x: 1.5rem}.g-md-4,.gy-md-4{--wje-gutter-y: 1.5rem}.g-md-5,.gx-md-5{--wje-gutter-x: 3rem}.g-md-5,.gy-md-5{--wje-gutter-y: 3rem}}@media(min-width:992px){:host(.wje-col-lg-auto){flex:0 0 auto;width:auto}:host(.wje-col-lg-1){flex:0 0 auto;width:8.33333333%}:host(.wje-col-lg-2){flex:0 0 auto;width:16.66666667%}:host(.wje-col-lg-3){flex:0 0 auto;width:25%}:host(.wje-col-lg-4){flex:0 0 auto;width:33.33333333%}:host(.wje-col-lg-5){flex:0 0 auto;width:41.66666667%}:host(.wje-col-lg-6){flex:0 0 auto;width:50%}:host(.wje-col-lg-7){flex:0 0 auto;width:58.33333333%}:host(.wje-col-lg-8){flex:0 0 auto;width:66.66666667%}:host(.wje-col-lg-9){flex:0 0 auto;width:75%}:host(.wje-col-lg-10){flex:0 0 auto;width:83.33333333%}:host(.wje-col-lg-11){flex:0 0 auto;width:91.66666667%}:host(.wje-col-lg-12){flex:0 0 auto;width:100%}:host(.wje-offset-lg-0){margin-left:0}:host(.wje-offset-lg-1){margin-left:8.33333333%}:host(.wje-offset-lg-2){margin-left:16.66666667%}:host(.wje-offset-lg-3){margin-left:25%}:host(.wje-offset-lg-4){margin-left:33.33333333%}:host(.wje-offset-lg-5){margin-left:41.66666667%}:host(.wje-offset-lg-6){margin-left:50%}:host(.wje-offset-lg-7){margin-left:58.33333333%}:host(.wje-offset-lg-8){margin-left:66.66666667%}:host(.wje-offset-lg-9){margin-left:75%}:host(.wje-offset-lg-10){margin-left:83.33333333%}:host(.wje-offset-lg-11){margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--wje-gutter-x: 0}.g-lg-0,.gy-lg-0{--wje-gutter-y: 0}.g-lg-1,.gx-lg-1{--wje-gutter-x: .25rem}.g-lg-1,.gy-lg-1{--wje-gutter-y: .25rem}.g-lg-2,.gx-lg-2{--wje-gutter-x: .5rem}.g-lg-2,.gy-lg-2{--wje-gutter-y: .5rem}.g-lg-3,.gx-lg-3{--wje-gutter-x: 1rem}.g-lg-3,.gy-lg-3{--wje-gutter-y: 1rem}.g-lg-4,.gx-lg-4{--wje-gutter-x: 1.5rem}.g-lg-4,.gy-lg-4{--wje-gutter-y: 1.5rem}.g-lg-5,.gx-lg-5{--wje-gutter-x: 3rem}.g-lg-5,.gy-lg-5{--wje-gutter-y: 3rem}}@media(min-width:1200px){:host(.wje-col-xl-auto){flex:0 0 auto;width:auto}:host(.wje-col-xl-1){flex:0 0 auto;width:8.33333333%}:host(.wje-col-xl-2){flex:0 0 auto;width:16.66666667%}:host(.wje-col-xl-3){flex:0 0 auto;width:25%}:host(.wje-col-xl-4){flex:0 0 auto;width:33.33333333%}:host(.wje-col-xl-5){flex:0 0 auto;width:41.66666667%}:host(.wje-col-xl-6){flex:0 0 auto;width:50%}:host(.wje-col-xl-7){flex:0 0 auto;width:58.33333333%}:host(.wje-col-xl-8){flex:0 0 auto;width:66.66666667%}:host(.wje-col-xl-9){flex:0 0 auto;width:75%}:host(.wje-col-xl-10){flex:0 0 auto;width:83.33333333%}:host(.wje-col-xl-11){flex:0 0 auto;width:91.66666667%}:host(.wje-col-xl-12){flex:0 0 auto;width:100%}:host(.wje-offset-xl-0){margin-left:0}:host(.wje-offset-xl-1){margin-left:8.33333333%}:host(.wje-offset-xl-2){margin-left:16.66666667%}:host(.wje-offset-xl-3){margin-left:25%}:host(.wje-offset-xl-4){margin-left:33.33333333%}:host(.wje-offset-xl-5){margin-left:41.66666667%}:host(.wje-offset-xl-6){margin-left:50%}:host(.wje-offset-xl-7){margin-left:58.33333333%}:host(.wje-offset-xl-8){margin-left:66.66666667%}:host(.wje-offset-xl-9){margin-left:75%}:host(.wje-offset-xl-10){margin-left:83.33333333%}:host(.wje-offset-xl-11){margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--wje-gutter-x: 0}.g-xl-0,.gy-xl-0{--wje-gutter-y: 0}.g-xl-1,.gx-xl-1{--wje-gutter-x: .25rem}.g-xl-1,.gy-xl-1{--wje-gutter-y: .25rem}.g-xl-2,.gx-xl-2{--wje-gutter-x: .5rem}.g-xl-2,.gy-xl-2{--wje-gutter-y: .5rem}.g-xl-3,.gx-xl-3{--wje-gutter-x: 1rem}.g-xl-3,.gy-xl-3{--wje-gutter-y: 1rem}.g-xl-4,.gx-xl-4{--wje-gutter-x: 1.5rem}.g-xl-4,.gy-xl-4{--wje-gutter-y: 1.5rem}.g-xl-5,.gx-xl-5{--wje-gutter-x: 3rem}.g-xl-5,.gy-xl-5{--wje-gutter-y: 3rem}}@media(min-width:1400px){:host(.wje-col-xxl-auto){flex:0 0 auto;width:auto}:host(.wje-col-xxl-1){flex:0 0 auto;width:8.33333333%}:host(.wje-col-xxl-2){flex:0 0 auto;width:16.66666667%}:host(.wje-col-xxl-3){flex:0 0 auto;width:25%}:host(.wje-col-xxl-4){flex:0 0 auto;width:33.33333333%}:host(.wje-col-xxl-5){flex:0 0 auto;width:41.66666667%}:host(.wje-col-xxl-6){flex:0 0 auto;width:50%}:host(.wje-col-xxl-7){flex:0 0 auto;width:58.33333333%}:host(.wje-col-xxl-8){flex:0 0 auto;width:66.66666667%}:host(.wje-col-xxl-9){flex:0 0 auto;width:75%}:host(.wje-col-xxl-10){flex:0 0 auto;width:83.33333333%}:host(.wje-col-xxl-11){flex:0 0 auto;width:91.66666667%}:host(.wje-col-xxl-12){flex:0 0 auto;width:100%}:host(.wje-offset-xxl-0){margin-left:0}:host(.wje-offset-xxl-1){margin-left:8.33333333%}:host(.wje-offset-xxl-2){margin-left:16.66666667%}:host(.wje-offset-xxl-3){margin-left:25%}:host(.wje-offset-xxl-4){margin-left:33.33333333%}:host(.wje-offset-xxl-5){margin-left:41.66666667%}:host(.wje-offset-xxl-6){margin-left:50%}:host(.wje-offset-xxl-7){margin-left:58.33333333%}:host(.wje-offset-xxl-8){margin-left:66.66666667%}:host(.wje-offset-xxl-9){margin-left:75%}:host(.wje-offset-xxl-10){margin-left:83.33333333%}:host(.wje-offset-xxl-11){margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--wje-gutter-x: 0}.g-xxl-0,.gy-xxl-0{--wje-gutter-y: 0}.g-xxl-1,.gx-xxl-1{--wje-gutter-x: .25rem}.g-xxl-1,.gy-xxl-1{--wje-gutter-y: .25rem}.g-xxl-2,.gx-xxl-2{--wje-gutter-x: .5rem}.g-xxl-2,.gy-xxl-2{--wje-gutter-y: .5rem}.g-xxl-3,.gx-xxl-3{--wje-gutter-x: 1rem}.g-xxl-3,.gy-xxl-3{--wje-gutter-y: 1rem}.g-xxl-4,.gx-xxl-4{--wje-gutter-x: 1.5rem}.g-xxl-4,.gy-xxl-4{--wje-gutter-y: 1.5rem}.g-xxl-5,.gx-xxl-5{--wje-gutter-x: 3rem}.g-xxl-5,.gy-xxl-5{--wje-gutter-y: 3rem}}:host(.some-other-value-first){order:-1!important}:host(.some-other-value-0){order:0!important}:host(.some-other-value-1){order:1!important}:host(.some-other-value-2){order:2!important}:host(.some-other-value-3){order:3!important}:host(.some-other-value-4){order:4!important}:host(.some-other-value-5){order:5!important}:host(.some-other-value-last){order:6!important}:host(.some-other-value-sm-first){order:-1!important}:host(.some-other-value-sm-0){order:0!important}:host(.some-other-value-sm-1){order:1!important}:host(.some-other-value-sm-2){order:2!important}:host(.some-other-value-sm-3){order:3!important}:host(.some-other-value-sm-4){order:4!important}:host(.some-other-value-sm-5){order:5!important}:host(.some-other-value-sm-last){order:6!important}:host(.some-other-value-md-first){order:-1!important}:host(.some-other-value-md-0){order:0!important}:host(.some-other-value-md-1){order:1!important}:host(.some-other-value-md-2){order:2!important}:host(.some-other-value-md-3){order:3!important}:host(.some-other-value-md-4){order:4!important}:host(.some-other-value-md-5){order:5!important}:host(.some-other-value-md-last){order:6!important}:host(.some-other-value-lg-first){order:-1!important}:host(.some-other-value-lg-0){order:0!important}:host(.some-other-value-lg-1){order:1!important}:host(.some-other-value-lg-2){order:2!important}:host(.some-other-value-lg-3){order:3!important}:host(.some-other-value-lg-4){order:4!important}:host(.some-other-value-lg-5){order:5!important}:host(.some-other-value-lg-last){order:6!important}:host(.some-other-value-xl-first){order:-1!important}:host(.some-other-value-xl-0){order:0!important}:host(.some-other-value-xl-1){order:1!important}:host(.some-other-value-xl-2){order:2!important}:host(.some-other-value-xl-3){order:3!important}:host(.some-other-value-xl-4){order:4!important}:host(.some-other-value-xl-5){order:5!important}:host(.some-other-value-xl-last){order:6!important}:host(.some-other-value-xxl-first){order:-1!important}:host(.some-other-value-xxl-0){order:0!important}:host(.some-other-value-xxl-1){order:1!important}:host(.some-other-value-xxl-2){order:2!important}:host(.some-other-value-xxl-3){order:3!important}:host(.some-other-value-xxl-4){order:4!important}:host(.some-other-value-xxl-5){order:5!important}:host(.some-other-value-xxl-last){order:6!important}";
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  /**
-   * Draws the component element.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    if (this.order) this.classList.add("order-" + this.order);
-    if (this.size) this.classList.add("wje-col-" + this.size);
-    if (this.sizeSm) this.classList.add("wje-col-sm-" + this.sizeSm);
-    if (this.sizeMd) this.classList.add("wje-col-md-" + this.sizeMd);
-    if (this.offset) this.classList.add("wje-offset-" + this.offset);
-    if (this.offsetSm) this.classList.add("wje-offset-sm-" + this.offsetSm);
-    fragment.appendChild(element);
-    return fragment;
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("slot");
+    return this.order && this.classList.add("order-" + this.order), this.size && this.classList.add("wje-col-" + this.size), this.sizeSm && this.classList.add("wje-col-sm-" + this.sizeSm), this.sizeMd && this.classList.add("wje-col-md-" + this.sizeMd), this.offset && this.classList.add("wje-offset-" + this.offset), this.offsetSm && this.classList.add("wje-offset-sm-" + this.offsetSm), t2.appendChild(e2), t2;
   }
 }
-WJElement.define("wje-col", Col);
+t.define("wje-col", e);
 export {
-  Col as default
+  e as default
 };
 //# sourceMappingURL=wje-col.js.map

package/dist/wje-col.js.map

@@ -1 +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,UAAK;AAGT,qCAAY;AAAA,EAFZ;AAAA,EAIA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA,EAEA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,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,EACX;AACJ;AC5CA,UAAU,OAAO,WAAW,GAAG;"}
+{"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":["Col","WJElement","constructor","super","className","cssStyleSheet","setupAttributes","this","isShadowRoot","draw","fragment","document","createDocumentFragment","element","createElement","order","classList","add","size","sizeSm","sizeMd","offset","offsetSm","appendChild","define"],"mappings":";;;;AAUe,MAAMA,UAAYC;EAC7B,cAAAC;AACIC;AAGJC,qCAAY;AAAA,EAFZ;AAAA,EAIA,WAAA,gBAAWC;AACP;EACJ;AAAA,EAEA,kBAAAC;AACIC,SAAKC,eAAe;AAAA,EACxB;AAAA,EAMA,OAAAC;AACI,QAAIC,KAAWC,SAASC,0BAEpBC,KAAUF,SAASG,cAAc,MAAA;AAgBrC,WAdIP,KAAKQ,SAAOR,KAAKS,UAAUC,IAAI,WAAWV,KAAKQ,KAAAA,GAE/CR,KAAKW,QAAMX,KAAKS,UAAUC,IAAI,aAAaV,KAAKW,IAAAA,GAEhDX,KAAKY,UAAQZ,KAAKS,UAAUC,IAAI,gBAAgBV,KAAKY,SAErDZ,KAAKa,UAAQb,KAAKS,UAAUC,IAAI,gBAAgBV,KAAKa,MAAAA,GAErDb,KAAKc,UAAQd,KAAKS,UAAUC,IAAI,gBAAgBV,KAAKc,MAAAA,GAErDd,KAAKe,YAAUf,KAAKS,UAAUC,IAAI,mBAAmBV,KAAKe,QAAAA,GAE9DZ,GAASa,YAAYV,EAAAA,GAEdH;AAAAA,EACX;;AC3CJT,EAAUuB,OAAO,WAAWxB,CAAAA;"}