npm - wj-elements - Versions diffs - 0.1.228 → 0.1.229 - Mend

wj-elements 0.1.228 → 0.1.229

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/light.css CHANGED Viewed

@@ -576,6 +576,9 @@
     --wje-tab-color-hover: var(--wje-color-primary-1);
     --wje-tab-border-radius: 0;
+    /* Tab - Group */
+    --wje-tab-group-nav-border: 1px solid var(--wje-border-color);
     /* Textarea */
     --wje-textarea-font-family: var(--wje-font-family);
     --wje-textarea-background-color: var(--wje-background);

package/dist/wje-tab-group.js CHANGED Viewed

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Tab Group ]\n*/\n\n:host {\n    --wje-tab-top: 0;\n    --wje-tab-start: 0;\n    --wje-tab-end: 0;\n    --wje-tab-bottom: 0;\n    width: 100%;\n}\n.native-tab-group {\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n    position: relative;\n}\n\n.native-tab-group > header {\n    display: flex;\n    flex-direction: column;\n\n    & > nav {\n        display: flex;\n        align-items: center;\n    }\n}\n\n.native-tab-group > section {\n    width: 100%;\n\n    & > article {\n        scroll-snap-align: start;\n        overflow-y: auto;\n        overscroll-behavior-y: contain;\n    }\n}\n\n/*TOP*/\n:host([variant='top']) {\n    --wje-tab-top: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column;\n    }\n    nav {\n        border-bottom: 1px solid var(--wje-border-color);\n    }\n}\n\n/*START*/\n:host([variant='start']) {\n    --wje-tab-start: auto !important;\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row;\n    }\n    nav {\n        flex-direction: column;\n        border-right: 1px solid var(--wje-border-color);\n    }\n}\n\n/*END*/\n:host([variant='end']) {\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row-reverse;\n    }\n    nav {\n        flex-direction: column;\n        border-left: 1px solid var(--wje-border-color);\n    }\n}\n\n/*BOTTOM*/\n:host([variant='bottom']) {\n    --wje-tab-bottom: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column-reverse;\n    }\n    nav {\n        border-top: 1px solid var(--wje-border-color);\n    }\n}\n\n.dropdown-active {\n    wje-button{\n        &::part(native) {\n            color: var(--wje-color-primary-8);\n        }\n    }\n}";
+const styles = "/*\n[ WJ Tab Group ]\n*/\n\n:host {\n    --wje-tab-top: 0;\n    --wje-tab-start: 0;\n    --wje-tab-end: 0;\n    --wje-tab-bottom: 0;\n    width: 100%;\n}\n.native-tab-group {\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n    position: relative;\n}\n\n.native-tab-group > header {\n    display: flex;\n    flex-direction: column;\n\n    & > nav {\n        display: flex;\n        align-items: center;\n    }\n}\n\n.native-tab-group > section {\n    width: 100%;\n\n    & > article {\n        scroll-snap-align: start;\n        overflow-y: auto;\n        overscroll-behavior-y: contain;\n    }\n}\n\n/*TOP*/\n:host([variant='top']) {\n    --wje-tab-top: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column;\n    }\n    nav {\n        border-bottom: var(--wje-tab-group-nav-border);\n    }\n}\n\n/*START*/\n:host([variant='start']) {\n    --wje-tab-start: auto !important;\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row;\n    }\n    nav {\n        flex-direction: column;\n        border-right: var(--wje-tab-group-nav-border);\n    }\n}\n\n/*END*/\n:host([variant='end']) {\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row-reverse;\n    }\n    nav {\n        flex-direction: column;\n        border-left: var(--wje-tab-group-nav-border);\n    }\n}\n\n/*BOTTOM*/\n:host([variant='bottom']) {\n    --wje-tab-bottom: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column-reverse;\n    }\n    nav {\n        border-top: var(--wje-tab-group-nav-border);\n    }\n}\n\n.dropdown-active {\n    wje-button{\n        &::part(native) {\n            color: var(--wje-color-primary-8);\n        }\n    }\n}";
 class TabGroup extends WJElement {
   /**
    * Creates an instance of TabGroup.
@@ -75,6 +75,7 @@ class TabGroup extends WJElement {
     header.setAttribute("part", "tabs");
     header.classList.add("scroll-snap-x");
     let nav = document.createElement("nav");
+    nav.setAttribute("part", "nav");
     let section = document.createElement("section");
     section.setAttribute("part", "panels");
     let slot = document.createElement("slot");

package/dist/wje-tab-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-tab-group.js","sources":["../packages/wje-tab-group/tab-group.element.js","../packages/wje-tab-group/tab-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `TabGroup` is a custom web component that represents a group of tabs.\n * @summary This element represents a group of tabs.\n * @documentation https://elements.webjet.sk/components/tab-group\n * @status stable\n * @augments WJElement\n * @param {string} type The type of the tab group. Can be either 'panel' or 'route'.\n * @slot - The default slot for the tab group.\n * @slot nav - Slot for the navigation of the tab group.\n * @cssproperty [--wje-tab-group-padding=1rem] - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`).\n * @tag wje-tab-group\n /\n\nexport default class TabGroup extends WJElement {\n /\n Creates an instance of TabGroup.\n * @class\n /\n constructor() {\n super();\n }\n\n /\n Sets the 'type' attribute of the element to the specified value.\n * @param {string} value The value to set for the 'type' attribute.\n /\n set type(value) {\n this.setAttribute('type', value);\n }\n\n /\n Retrieves the `type` attribute of the element.\n * If the `type` attribute is not set, it defaults to `'panel'`.\n * @returns {string} The value of the `type` attribute or the default value `'panel'`.\n /\n get type() {\n return this.getAttribute('type') \|\| 'panel';\n }\n\n className = 'TabGroup';\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 Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Sets up the event listeners before the component is drawn.\n * This method is called before the component is drawn.\n * It is used to set up event listeners.\n /\n beforeDraw() {\n let activeTabName = location.hash.replace('#', '');\n\n // skontrolujeme ci sa nachadza v paneloch\n if (this.getPanelAllName().includes(activeTabName)) {\n window.addEventListener('load', (e) => {\n this.setActiveTab(activeTabName);\n });\n }\n }\n\n /\n Creates and returns a document fragment containing a structured layout for a tab group.\n * The tab group layout includes a `header` section with navigational elements,\n * a `section` element for tab panels, and slots for customization such as additional navigation items,\n * dropdowns, and more.\n * The structure comprises:\n * - A `div` container with relevant styling and part attributes.\n * - A `header` for tabs, including a slot for navigation (`nav`) and additional tabs in a dropdown (`moreDropdown`).\n * - A `section` for tab panels with a customizable `slot`.\n * This function also initializes the `nav` and `moreDropdown` properties for external use.\n * @returns {DocumentFragment} The completed document fragment containing the tab group layout.\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-tab-group');\n\n let header = document.createElement('header');\n header.setAttribute('part', 'tabs');\n header.classList.add('scroll-snap-x');\n\n let nav = document.createElement('nav');\n\n let section = document.createElement('section');\n section.setAttribute('part', 'panels');\n\n let slot = document.createElement('slot');\n\n let slotNav = document.createElement('slot');\n slotNav.setAttribute('name', 'nav');\n\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'dots');\n\n let button = document.createElement('wje-button');\n button.setAttribute('slot', 'trigger');\n button.setAttribute('fill', 'link');\n\n let menu = document.createElement('wje-menu');\n menu.setAttribute('variant', 'context');\n\n let slotMore = document.createElement('slot');\n slotMore.setAttribute('name', 'more');\n\n let moreDropdown = document.createElement('wje-dropdown');\n moreDropdown.setAttribute('placement', 'bottom-end');\n moreDropdown.setAttribute('collapsible', '');\n moreDropdown.classList.add('more-tabs');\n\n button.append(icon);\n\n menu.append(slotMore);\n\n moreDropdown.append(button);\n moreDropdown.append(menu);\n\n header.append(nav);\n\n nav.append(slotNav);\n nav.append(moreDropdown);\n\n section.append(slot);\n\n native.append(header);\n native.append(section);\n\n fragment.append(native);\n\n this.nav = nav;\n this.moreDropdown = moreDropdown;\n\n return fragment;\n }\n\n /\n Executes necessary initializations and attaches event listeners after a drawing operation.\n * Handles active tab selection, 'wje-tab:change' event binding, and window resize event for overflow checking.\n * @returns {void} Does not return a value.\n /\n afterDraw() {\n let activeTab = this.getActiveTab();\n let activeTabName = activeTab ? activeTab[0][this.type] : this.getTabAll()[0][this.type];\n\n this.setActiveTab(activeTabName);\n\n this.addEventListener('wje-tab:change', (e) => {\n if (e.detail.context.hasAttribute('disabled')) return;\n this.setActiveTab(e.detail.context.panel);\n });\n\n this.checkOverflow = this.checkOverflow.bind(this);\n\n window.addEventListener('resize', this.checkOverflow);\n\n requestAnimationFrame(() => this.checkOverflow());\n }\n\n /\n Removes the 'active' class from all panel and tab elements.\n * @returns {void} This method does not return a value.\n /\n removeActiveTab() {\n this.getPanelAll().forEach((el) => {\n el.classList.remove('active');\n });\n\n this.getTabAll().forEach((el) => {\n el.classList.remove('active');\n });\n }\n\n /\n Sets the active tab and panel.\n * @param {string} tab The name of the tab to set as active.\n /\n setActiveTab(tab) {\n this.removeActiveTab();\n\n const el = this.querySelector(`[${this.type}=\"${tab}\"]`)\n el?.classList.add('active');\n\n if(this.type === 'panel')\n this.querySelector(`[name=\"${tab}\"]`)?.classList.add('active');\n\n if(el)\n this.dropdownActive(el);\n }\n\n /\n Returns the currently active tab.\n * @returns {Element\|null} The active tab, or null if no tab is active.\n /\n getActiveTab() {\n let activeTabs = Array.from(this.querySelectorAll('wje-tab.active'));\n return activeTabs.length > 0 ? activeTabs : null;\n }\n\n /\n Returns all tabs.\n * @returns {Array<Element>} An array of all tabs.\n /\n getTabAll() {\n return this.context.querySelector('[name=\"nav\"]').assignedElements();\n }\n\n /\n Returns all panels.\n * @returns {Array<Element>} An array of all panels.\n /\n getPanelAll() {\n return Array.from(this.querySelectorAll('wje-tab-panel'));\n }\n\n /\n Returns the names of all tabs.\n * @returns {Array<string>} An array of all tab names.\n /\n getPanelAllName() {\n return this.getPanelAll().map((el) => el.getAttribute('name'));\n }\n\n /\n Toggles the visibility of the \"more\" dropdown based on the presence of tabs in the \"more\" slot.\n * @returns {void} Does not return a value.\n /\n toggleMoreVisibility() {\n const hasTabsInMore = this.querySelector('wje-tab[slot=\"more\"]');\n this.moreDropdown.hidden = !hasTabsInMore;\n }\n\n /\n Checks if the tabs within a navigation bar overflow the available space.\n * Moves overflowing tabs into a dropdown menu and updates their state accordingly.\n * @returns {void} This method does not return a value.\n /\n checkOverflow() {\n const nav = this.nav;\n const moreBtn = this.moreDropdown;\n const moreWidth = moreBtn.offsetWidth \|\| 48; // fallback ak ešte nie je vykreslený\n\n const tabs = Array.from(this.querySelectorAll('wje-tab'));\n\n // Reset: presunieme všetky taby naspäť do nav slotu\n tabs.forEach(tab => tab.setAttribute('slot', 'nav'));\n\n // Vykreslíme nanovo, aby sa more button správne umiestnil\n requestAnimationFrame(() => {\n const navRight = nav.getBoundingClientRect().right;\n let overflowStarted = false;\n\n for (const tab of tabs) {\n const tabRect = tab.getBoundingClientRect();\n\n // Ak by pretekal vrátane rezervy na more, presunieme ho\n const fits = tabRect.right + moreWidth <= navRight;\n\n if (!fits \|\| overflowStarted) {\n tab.setAttribute('slot', 'more');\n this.dropdownActive(tab);\n overflowStarted = true;\n }\n }\n\n this.toggleMoreVisibility();\n });\n }\n\n /\n Toggles the \"dropdown-active\" class on the element based on its \"active\" status\n * and the value of its \"slot\" attribute.\n * @param {HTMLElement} el The HTML element to evaluate and apply the toggle logic.\n * @returns {void} This method does not return any value.\n */\n dropdownActive(el) {\n if(el.classList.contains('active')) {\n if(el.getAttribute('slot') === 'more')\n this.moreDropdown.classList.add('dropdown-active');\n else\n this.moreDropdown.classList.remove('dropdown-active');\n }\n }\n}\n","import TabGroup from './tab-group.element.js';\n\nexport default TabGroup;\n\nTabGroup.define('wje-tab-group', TabGroup);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-tab-group.js","sources":["../packages/wje-tab-group/tab-group.element.js","../packages/wje-tab-group/tab-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `TabGroup` is a custom web component that represents a group of tabs.\n * @summary This element represents a group of tabs.\n * @documentation https://elements.webjet.sk/components/tab-group\n * @status stable\n * @augments WJElement\n * @param {string} type The type of the tab group. Can be either 'panel' or 'route'.\n * @slot - The default slot for the tab group.\n * @slot nav - Slot for the navigation of the tab group.\n * @cssproperty [--wje-tab-group-padding=1rem] - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`).\n * @tag wje-tab-group\n /\n\nexport default class TabGroup extends WJElement {\n /\n Creates an instance of TabGroup.\n * @class\n /\n constructor() {\n super();\n }\n\n /\n Sets the 'type' attribute of the element to the specified value.\n * @param {string} value The value to set for the 'type' attribute.\n /\n set type(value) {\n this.setAttribute('type', value);\n }\n\n /\n Retrieves the `type` attribute of the element.\n * If the `type` attribute is not set, it defaults to `'panel'`.\n * @returns {string} The value of the `type` attribute or the default value `'panel'`.\n /\n get type() {\n return this.getAttribute('type') \|\| 'panel';\n }\n\n className = 'TabGroup';\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 Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Sets up the event listeners before the component is drawn.\n * This method is called before the component is drawn.\n * It is used to set up event listeners.\n /\n beforeDraw() {\n let activeTabName = location.hash.replace('#', '');\n\n // skontrolujeme ci sa nachadza v paneloch\n if (this.getPanelAllName().includes(activeTabName)) {\n window.addEventListener('load', (e) => {\n this.setActiveTab(activeTabName);\n });\n }\n }\n\n /\n Creates and returns a document fragment containing a structured layout for a tab group.\n * The tab group layout includes a `header` section with navigational elements,\n * a `section` element for tab panels, and slots for customization such as additional navigation items,\n * dropdowns, and more.\n * The structure comprises:\n * - A `div` container with relevant styling and part attributes.\n * - A `header` for tabs, including a slot for navigation (`nav`) and additional tabs in a dropdown (`moreDropdown`).\n * - A `section` for tab panels with a customizable `slot`.\n * This function also initializes the `nav` and `moreDropdown` properties for external use.\n * @returns {DocumentFragment} The completed document fragment containing the tab group layout.\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-tab-group');\n\n let header = document.createElement('header');\n header.setAttribute('part', 'tabs');\n header.classList.add('scroll-snap-x');\n\n let nav = document.createElement('nav');\n nav.setAttribute('part', 'nav');\n\n let section = document.createElement('section');\n section.setAttribute('part', 'panels');\n\n let slot = document.createElement('slot');\n\n let slotNav = document.createElement('slot');\n slotNav.setAttribute('name', 'nav');\n\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'dots');\n\n let button = document.createElement('wje-button');\n button.setAttribute('slot', 'trigger');\n button.setAttribute('fill', 'link');\n\n let menu = document.createElement('wje-menu');\n menu.setAttribute('variant', 'context');\n\n let slotMore = document.createElement('slot');\n slotMore.setAttribute('name', 'more');\n\n let moreDropdown = document.createElement('wje-dropdown');\n moreDropdown.setAttribute('placement', 'bottom-end');\n moreDropdown.setAttribute('collapsible', '');\n moreDropdown.classList.add('more-tabs');\n\n button.append(icon);\n\n menu.append(slotMore);\n\n moreDropdown.append(button);\n moreDropdown.append(menu);\n\n header.append(nav);\n\n nav.append(slotNav);\n nav.append(moreDropdown);\n\n section.append(slot);\n\n native.append(header);\n native.append(section);\n\n fragment.append(native);\n\n this.nav = nav;\n this.moreDropdown = moreDropdown;\n\n return fragment;\n }\n\n /\n Executes necessary initializations and attaches event listeners after a drawing operation.\n * Handles active tab selection, 'wje-tab:change' event binding, and window resize event for overflow checking.\n * @returns {void} Does not return a value.\n /\n afterDraw() {\n let activeTab = this.getActiveTab();\n let activeTabName = activeTab ? activeTab[0][this.type] : this.getTabAll()[0][this.type];\n\n this.setActiveTab(activeTabName);\n\n this.addEventListener('wje-tab:change', (e) => {\n if (e.detail.context.hasAttribute('disabled')) return;\n this.setActiveTab(e.detail.context.panel);\n });\n\n this.checkOverflow = this.checkOverflow.bind(this);\n\n window.addEventListener('resize', this.checkOverflow);\n\n requestAnimationFrame(() => this.checkOverflow());\n }\n\n /\n Removes the 'active' class from all panel and tab elements.\n * @returns {void} This method does not return a value.\n /\n removeActiveTab() {\n this.getPanelAll().forEach((el) => {\n el.classList.remove('active');\n });\n\n this.getTabAll().forEach((el) => {\n el.classList.remove('active');\n });\n }\n\n /\n Sets the active tab and panel.\n * @param {string} tab The name of the tab to set as active.\n /\n setActiveTab(tab) {\n this.removeActiveTab();\n\n const el = this.querySelector(`[${this.type}=\"${tab}\"]`)\n el?.classList.add('active');\n\n if(this.type === 'panel')\n this.querySelector(`[name=\"${tab}\"]`)?.classList.add('active');\n\n if(el)\n this.dropdownActive(el);\n }\n\n /\n Returns the currently active tab.\n * @returns {Element\|null} The active tab, or null if no tab is active.\n /\n getActiveTab() {\n let activeTabs = Array.from(this.querySelectorAll('wje-tab.active'));\n return activeTabs.length > 0 ? activeTabs : null;\n }\n\n /\n Returns all tabs.\n * @returns {Array<Element>} An array of all tabs.\n /\n getTabAll() {\n return this.context.querySelector('[name=\"nav\"]').assignedElements();\n }\n\n /\n Returns all panels.\n * @returns {Array<Element>} An array of all panels.\n /\n getPanelAll() {\n return Array.from(this.querySelectorAll('wje-tab-panel'));\n }\n\n /\n Returns the names of all tabs.\n * @returns {Array<string>} An array of all tab names.\n /\n getPanelAllName() {\n return this.getPanelAll().map((el) => el.getAttribute('name'));\n }\n\n /\n Toggles the visibility of the \"more\" dropdown based on the presence of tabs in the \"more\" slot.\n * @returns {void} Does not return a value.\n /\n toggleMoreVisibility() {\n const hasTabsInMore = this.querySelector('wje-tab[slot=\"more\"]');\n this.moreDropdown.hidden = !hasTabsInMore;\n }\n\n /\n Checks if the tabs within a navigation bar overflow the available space.\n * Moves overflowing tabs into a dropdown menu and updates their state accordingly.\n * @returns {void} This method does not return a value.\n /\n checkOverflow() {\n const nav = this.nav;\n const moreBtn = this.moreDropdown;\n const moreWidth = moreBtn.offsetWidth \|\| 48; // fallback ak ešte nie je vykreslený\n\n const tabs = Array.from(this.querySelectorAll('wje-tab'));\n\n // Reset: presunieme všetky taby naspäť do nav slotu\n tabs.forEach(tab => tab.setAttribute('slot', 'nav'));\n\n // Vykreslíme nanovo, aby sa more button správne umiestnil\n requestAnimationFrame(() => {\n const navRight = nav.getBoundingClientRect().right;\n let overflowStarted = false;\n\n for (const tab of tabs) {\n const tabRect = tab.getBoundingClientRect();\n\n // Ak by pretekal vrátane rezervy na more, presunieme ho\n const fits = tabRect.right + moreWidth <= navRight;\n\n if (!fits \|\| overflowStarted) {\n tab.setAttribute('slot', 'more');\n this.dropdownActive(tab);\n overflowStarted = true;\n }\n }\n\n this.toggleMoreVisibility();\n });\n }\n\n /\n Toggles the \"dropdown-active\" class on the element based on its \"active\" status\n * and the value of its \"slot\" attribute.\n * @param {HTMLElement} el The HTML element to evaluate and apply the toggle logic.\n * @returns {void} This method does not return any value.\n */\n dropdownActive(el) {\n if(el.classList.contains('active')) {\n if(el.getAttribute('slot') === 'more')\n this.moreDropdown.classList.add('dropdown-active');\n else\n this.moreDropdown.classList.remove('dropdown-active');\n }\n }\n}\n","import TabGroup from './tab-group.element.js';\n\nexport default TabGroup;\n\nTabGroup.define('wje-tab-group', TabGroup);\n"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.228",
+  "version": "0.1.229",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",