wj-elements 0.1.136 → 0.1.138

package/dist/wje-footer.js

@@ -0,0 +1,52 @@
+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 Footer ]\n*/\n\n:host {\n    --wje-footer-height: 60px;\n    padding: 0 20px;\n    flex-shrink: 0;\n    height: var(--wje-footer-height);\n    display: block;\n}\n";
+class Footer extends WJElement {
+  /**
+   * Creates an instance of Footer.
+   * @class
+   */
+  constructor() {
+    super();
+    __publicField(this, "className", "Footer");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component.
+   * @returns {DocumentFragment}
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("slot");
+    fragment.appendChild(element);
+    return fragment;
+  }
+}
+Footer.define("wje-footer", Footer);
+export {
+  Footer as default
+};
+//# sourceMappingURL=wje-footer.js.map

package/dist/wje-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-footer.js","sources":["../packages/wje-footer/footer.element.js","../packages/wje-footer/footer.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element represents a footer. `Footer` is a custom web component that represents a footer.\n * @documentation https://elements.webjet.sk/components/footer\n * @status stable\n * @augments WJElement\n * @slot default - Default slot for the footer content\n * @cssproperty --primary-color - The primary color of the footer\n */\n\nexport default class Footer extends WJElement {\n    /**\n     * Creates an instance of Footer.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Footer';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Footer from './footer.element.js';\n\nexport default Footer;\n\nFooter.define('wje-footer', Footer);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1C,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AACA;ACzDA,OAAO,OAAO,cAAc,MAAM;"}

package/dist/wje-form.js

@@ -0,0 +1,53 @@
+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 Form ]\n*/\n:host {\n  width: 100%;\n}";
+class Form extends WJElement {
+  /**
+   * Constructor for the Form class.
+   */
+  constructor() {
+    super();
+    /**
+     * The class name for the Form class.
+     * @type {string}
+     */
+    __publicField(this, "className", "Form");
+  }
+  /**
+   * Getter for the CSS stylesheet.
+   * @returns {*}
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Getter for the observed attributes.
+   * @returns {*[]}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the Form.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the Form.
+   * @returns {DocumentFragment}
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("slot");
+    fragment.appendChild(element);
+    return fragment;
+  }
+}
+Form.define("wje-form", Form);
+export {
+  Form as default
+};
+//# sourceMappingURL=wje-form.js.map

package/dist/wje-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-form.js","sources":["../packages/wje-form/form.element.js","../packages/wje-form/form.js"],"sourcesContent":["import { default as WJElement, WjElementUtils } from '../wje-element/element.js';\n\nimport styles from './scss/styles.scss?inline';\n\n/**\n * @summary The Form class is a custom\n * web component that extends WJElement. It is a simple form that can hold other elements or components.\n * It provides a slot for adding child elements or components.\n * @documentation https://elements.webjet.sk/components/form\n * @status stable\n * @augments WJElement\n * @slot - The slot for adding child elements or components.\n * @tag wje-form\n */\nexport default class Form extends WJElement {\n    /**\n     * Constructor for the Form class.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the Form class.\n     * @type {string}\n     */\n    className = 'Form';\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 Form.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the Form.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Form from './form.element.js';\n\nexport default Form;\n\nForm.define('wje-form', Form);\n"],"names":[],"mappings":";;;;;AAce,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AACA;AC5DA,KAAK,OAAO,YAAY,IAAI;"}

package/dist/wje-format-digital.js

@@ -0,0 +1,146 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { Localizer } from "./localize.js";
+import WJElement from "./wje-element.js";
+const styles = "/*\n[ WJ Format Digital ]\n*/\n\n.native-format-digital {\n    white-space: nowrap;\n}\n";
+class FormatDigital extends WJElement {
+  /**
+   * Creates an instance of FormatDigital.
+   * Initializes the `Localizer` for locale-specific formatting.
+   */
+  constructor() {
+    super();
+    /**
+     * The class name identifier for this component.
+     * @type {string}
+     */
+    __publicField(this, "className", "FormatDigital");
+    this.localizer = new Localizer(this);
+  }
+  /**
+   * Sets the value of the digital format.
+   * This value determines the size in bytes or bits to be displayed.
+   * @param {number} value The value to set.
+   */
+  set value(value) {
+    this.setAttribute("value", value);
+  }
+  /**
+   * Returns the value of the digital format.
+   * @returns {number} The current value of the component.
+   */
+  get value() {
+    return +this.getAttribute("value");
+  }
+  /**
+   * Sets the unit of the digital format.
+   * Valid values are `bit` or `byte`.
+   * @param {string} value The unit to set.
+   */
+  set unit(value) {
+    this.removeAttribute("unit");
+    if (value) {
+      this.setAttribute("unit", value);
+    }
+  }
+  /**
+   * Returns the unit of the digital format.
+   * Defaults to `byte` if no unit is set.
+   * @returns {string} The current unit (`bit` or `byte`).
+   */
+  get unit() {
+    return this.hasAttribute("unit") ? this.getAttribute("unit") : "byte";
+  }
+  /**
+   * Sets the unit display style for the digital format.
+   * Valid values are `short`, `long`, or `narrow`.
+   * @param {string} value The unit display style to set.
+   */
+  set unitDisplay(value) {
+    this.removeAttribute("unit-display");
+    if (value) {
+      this.setAttribute("unit-display", value);
+    }
+  }
+  /**
+   * Returns the unit display style for the digital format.
+   * Defaults to `short` if not set.
+   * @returns {string} - The current unit display style.
+   */
+  get unitDisplay() {
+    return this.hasAttribute("unit-display") ? this.getAttribute("unit-display") : "short";
+  }
+  /**
+   * Returns the CSS styles for the component.
+   * Encapsulated using shadow DOM.
+   * @static
+   * @returns {CSSStyleSheet} - The CSS styles for the component.
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   * Observes `value` and `unit-display` for re-rendering.
+   * @static
+   * @returns {Array<string>} - The attributes to observe.
+   */
+  static get observedAttributes() {
+    return ["value", "unit-display"];
+  }
+  /**
+   * Sets up the attributes for the component.
+   * Initializes the shadow DOM.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Prepares the component before rendering.
+   * Computes the formatted value based on the input value and unit.
+   */
+  beforeDraw() {
+    if (this.value < 0) return;
+    const bitPrefixes = ["", "kilo", "mega", "giga", "tera"];
+    const bytePrefixes = ["", "kilo", "mega", "giga", "tera", "peta"];
+    const prefix = this.unit === "bit" ? bitPrefixes : bytePrefixes;
+    const index = Math.max(0, Math.min(Math.floor(Math.log10(this.value) / 3), prefix.length - 1)) || 0;
+    const unit = prefix[index] + this.unit;
+    const value = parseFloat((this.value / Math.pow(1e3, index)).toPrecision(3));
+    this.formattedValue = this.localizer.formatNumber(value, {
+      style: "unit",
+      unit,
+      unitDisplay: this.unitDisplay || "short"
+    });
+  }
+  /**
+   * Renders the component and returns a document fragment.
+   * The rendered structure includes a formatted value wrapped in a container
+   * with slots for additional customization.
+   * @returns {DocumentFragment} - The DOM structure for the component.
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("div");
+    element.setAttribute("part", "native");
+    element.classList.add("native-format-digital");
+    let formatted = document.createElement("span");
+    formatted.setAttribute("part", "formatted");
+    formatted.innerText = this.formattedValue;
+    let start = document.createElement("slot");
+    start.setAttribute("name", "start");
+    let end = document.createElement("slot");
+    end.setAttribute("name", "end");
+    element.appendChild(start);
+    element.appendChild(formatted);
+    element.appendChild(end);
+    fragment.appendChild(element);
+    return fragment;
+  }
+}
+FormatDigital.define("wje-format-digital", FormatDigital);
+export {
+  FormatDigital as default
+};
+//# sourceMappingURL=wje-format-digital.js.map

package/dist/wje-format-digital.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-format-digital.js","sources":["../packages/wje-format-digital/format-digital.element.js","../packages/wje-format-digital/format-digital.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element formats and displays digital values such as file sizes or data transfer rates.\n * `FormatDigital` is a custom web component that represents a formatted digital value with units like\n * bytes or bits. It extends from `WJElement` and utilizes the `Localizer` class for locale-aware formatting.\n * @documentation https://elements.webjet.sk/components/format-digital\n * @status stable\n * @augments {WJElement}\n * @attribute {number} value - The numeric value to format (e.g., 1024 for 1 KB).\n * @attribute {string} unit - The unit of the value (`byte` or `bit`). Defaults to `byte`.\n * @attribute {string} unitDisplay - The display style of the unit (`short`, `long`, or `narrow`). Defaults to `short`.\n * @csspart native - The native part of the component.\n * @csspart formatted - The part representing the formatted value.\n * @csspart start - Slot for content before the formatted value.\n * @csspart end - Slot for content after the formatted value.\n * @cssproperty [--wje-format-digital-font-size=1rem] - The font size of the formatted digital value.\n * @cssproperty [--wje-format-digital-color=var(--wje-text-color)] - The color of the formatted text.\n * @cssproperty [--wje-format-digital-padding=.5rem] - The padding around the component.\n * @cssproperty [--wje-format-digital-border-radius=var(--wje-border-radius-small)] - The border radius of the component.\n * @tag wje-format-digital\n */\n\nexport default class FormatDigital extends WJElement {\n    /**\n     * Creates an instance of FormatDigital.\n     * Initializes the `Localizer` for locale-specific formatting.\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n    }\n\n    /**\n     * Sets the value of the digital format.\n     * This value determines the size in bytes or bits to be displayed.\n     * @param {number} value The value to set.\n     */\n    set value(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Returns the value of the digital format.\n     * @returns {number} The current value of the component.\n     */\n    get value() {\n        return +this.getAttribute('value');\n    }\n\n    /**\n     * Sets the unit of the digital format.\n     * Valid values are `bit` or `byte`.\n     * @param {string} value The unit to set.\n     */\n    set unit(value) {\n        this.removeAttribute('unit');\n        if (value) {\n            this.setAttribute('unit', value);\n        }\n    }\n\n    /**\n     * Returns the unit of the digital format.\n     * Defaults to `byte` if no unit is set.\n     * @returns {string} The current unit (`bit` or `byte`).\n     */\n    get unit() {\n        return this.hasAttribute('unit') ? this.getAttribute('unit') : 'byte';\n    }\n\n    /**\n     * Sets the unit display style for the digital format.\n     * Valid values are `short`, `long`, or `narrow`.\n     * @param {string} value The unit display style to set.\n     */\n    set unitDisplay(value) {\n        this.removeAttribute('unit-display');\n        if (value) {\n            this.setAttribute('unit-display', value);\n        }\n    }\n\n    /**\n     * Returns the unit display style for the digital format.\n     * Defaults to `short` if not set.\n     * @returns {string} - The current unit display style.\n     */\n    get unitDisplay() {\n        return this.hasAttribute('unit-display') ? this.getAttribute('unit-display') : 'short';\n    }\n\n    /**\n     * The class name identifier for this component.\n     * @type {string}\n     */\n    className = 'FormatDigital';\n\n    /**\n     * Returns the CSS styles for the component.\n     * Encapsulated using shadow DOM.\n     * @static\n     * @returns {CSSStyleSheet} - The CSS styles for the component.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * Observes `value` and `unit-display` for re-rendering.\n     * @static\n     * @returns {Array<string>} - The attributes to observe.\n     */\n    static get observedAttributes() {\n        return ['value', 'unit-display'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     * Initializes the shadow DOM.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component before rendering.\n     * Computes the formatted value based on the input value and unit.\n     */\n    beforeDraw() {\n        if (this.value < 0) return;\n        const bitPrefixes = ['', 'kilo', 'mega', 'giga', 'tera'];\n        const bytePrefixes = ['', 'kilo', 'mega', 'giga', 'tera', 'peta'];\n        const prefix = this.unit === 'bit' ? bitPrefixes : bytePrefixes;\n        const index = Math.max(0, Math.min(Math.floor(Math.log10(this.value) / 3), prefix.length - 1)) || 0;\n        const unit = prefix[index] + this.unit;\n        const value = parseFloat((this.value / Math.pow(1000, index)).toPrecision(3));\n\n        this.formattedValue = this.localizer.formatNumber(value, {\n            style: 'unit',\n            unit: unit,\n            unitDisplay: this.unitDisplay || 'short',\n        });\n    }\n\n    /**\n     * Renders the component and returns a document fragment.\n     * The rendered structure includes a formatted value wrapped in a container\n     * with slots for additional customization.\n     * @returns {DocumentFragment} - The DOM structure for the component.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-format-digital');\n\n        let formatted = document.createElement('span');\n        formatted.setAttribute('part', 'formatted');\n        formatted.innerText = this.formattedValue;\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        element.appendChild(start);\n        element.appendChild(formatted);\n        element.appendChild(end);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}","import FormatDigital from './format-digital.element.js';\n\nexport default FormatDigital;\n\nFormatDigital.define('wje-format-digital', FormatDigital);\n"],"names":[],"mappings":"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"}

package/dist/wje-grid.js

@@ -0,0 +1,54 @@
+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[ Grid ]\n*/\n:host {\n  width: 100%;\n  flex-grow: 0;\n}\n\n/*\n[ Row ]\n*/\nwje-row {\n  display: flex;\n  flex-wrap: wrap;\n}\n\nwje-row {\n  --wje-gutter-x: 1.5rem;\n  --wje-gutter-y: 0;\n  display: flex;\n  flex-wrap: wrap;\n  margin-top: calc(var(--wje-gutter-y) * -1);\n  margin-right: calc(var(--wje-gutter-x) * -0.5);\n  margin-left: calc(var(--wje-gutter-x) * -0.5);\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  .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  .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  .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  .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  .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}";
+class Grid extends WJElement {
+  /**
+   * Constructor for the Grid class.
+   */
+  constructor() {
+    super();
+    /**
+     * The class name for the Grid class.
+     * @type {string}
+     */
+    __publicField(this, "className", "Grid");
+  }
+  /**
+   * Getter for the CSS stylesheet.
+   * @returns {*}
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Getter for the observed attributes.
+   * @returns {*[]}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the Grid.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the Grid element.
+   * @returns {DocumentFragment}
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("slot");
+    if (this.color) this.classList.add("wje-color-" + this.color, "wje-color");
+    fragment.appendChild(element);
+    return fragment;
+  }
+}
+Grid.define("wje-grid", Grid);
+export {
+  Grid as default
+};
+//# sourceMappingURL=wje-grid.js.map

package/dist/wje-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-grid.js","sources":["../packages/wje-grid/grid.element.js","../packages/wje-grid/grid.js"],"sourcesContent":["import { default as WJElement, WjElementUtils } from '../wje-element/element.js';\n\nimport styles from './scss/styles.scss?inline';\n\n/**\n * @summary The Grid class is a custom web component that extends WJElement. It is a simple grid that can hold other elements or components.\n * It provides a slot for adding child elements or components.\n * @documentation https://elements.webjet.sk/components/grid\n * @status stable\n * @augments WJElement\n * @slot - The slot for adding child elements or components.\n */\nexport default class Grid extends WJElement {\n    /**\n     * Constructor for the Grid class.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the Grid class.\n     * @type {string}\n     */\n    className = 'Grid';\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 Grid.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the Grid element.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        if (this.color) this.classList.add('wje-color-' + this.color, 'wje-color');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Grid from './grid.element.js';\n\nexport default Grid;\n\nGrid.define('wje-grid', Grid);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,QAAI,KAAK,MAAO,MAAK,UAAU,IAAI,eAAe,KAAK,OAAO,WAAW;AAEzE,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AACA;AC5DA,KAAK,OAAO,YAAY,IAAI;"}

package/dist/wje-header.js

@@ -0,0 +1,56 @@
+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 Header ]\n*/\n\n:host {\n    --wje-header-background: var(--wje-background);\n    --wje-header-border-color: var(--wje-border-color);\n    --wje-header-border-width: 0 0 1px 0;\n    --wje-header-border-style: solid;\n    --wje-header-top: 0;\n    --wje-header-height: 60px;\n    display: block;\n    height: var(--wje-header-height);\n    width: 100%;\n    background: var(--wje-header-background);\n    border-width: var(--wje-header-border-width);\n    border-style: var(--wje-header-border-style);\n    border-color: var(--wje-header-border-color);\n    .native-header {\n        display: flex;\n        padding-inline: 1rem;\n    }\n}\n\n:host([sticky]) {\n    position: sticky;\n    top: var(--wje-header-top);\n    z-index: 999;\n}\n";
+class Header extends WJElement {
+  /**
+   * Creates an instance of Header.
+   * @class
+   */
+  constructor() {
+    super();
+    __publicField(this, "className", "Header");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component.
+   * @returns {DocumentFragment}
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("header");
+    element.classList.add("native-header");
+    element.setAttribute("part", "native");
+    let slot = document.createElement("slot");
+    element.appendChild(slot);
+    fragment.appendChild(element);
+    return fragment;
+  }
+}
+Header.define("wje-header", Header);
+export {
+  Header as default
+};
+//# sourceMappingURL=wje-header.js.map

package/dist/wje-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-header.js","sources":["../packages/wje-header/header.element.js","../packages/wje-header/header.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary `Header` is a custom web component that represents a header. It extends from `WJElement`.\n * @documentation https://elements.webjet.sk/components/header\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @slot default - Default slot for the header content\n * @cssproperty [--wje-header-background=var(--wje-background)] - The background of the header element.\n * @cssproperty [--wje-header-border-color=var(--wje-border-color)] - The border color of the header element.\n * @cssproperty [--wje-header-border-width=0 0 1px 0] - The border width of the header element.\n * @cssproperty [--wje-header-border-style=solid] - The border styles of the header\n * @cssproperty [--wje-header-top=0] - The position top of the header\n * @cssproperty [--wje-header-height=60px] - The height of the header element.\n * @tag wje-header\n */\nexport default class Header extends WJElement {\n    /**\n     * Creates an instance of Header.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Header';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('header');\n        element.classList.add('native-header');\n        element.setAttribute('part', 'native');\n\n        let slot = document.createElement('slot');\n\n        element.appendChild(slot);\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Header from './header.element.js';\n\nexport default Header;\n\nHeader.define('wje-header', Header);\n"],"names":[],"mappings":";;;;;AAkBe,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1C,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,QAAQ;AAC7C,YAAQ,UAAU,IAAI,eAAe;AACrC,YAAQ,aAAa,QAAQ,QAAQ;AAErC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,YAAQ,YAAY,IAAI;AACxB,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AACA;ACpEA,OAAO,OAAO,cAAc,MAAM;"}