npm - wj-elements - Versions diffs - 0.2.0-alpha.8 → 0.3.0 - Mend

wj-elements 0.2.0-alpha.8 → 0.3.0

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 (385) hide show

package/dist/wje-avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-avatar.js","sources":["../packages/wje-avatar/service/service.js","../packages/wje-avatar/avatar.element.js","../packages/wje-avatar/avatar.js"],"sourcesContent":["/*\n Generates an HSL color value based on the input text.\n * @param {string} text The input text to generate the HSL color.\n * @param {number} [s] The saturation value (in percentage) for the HSL color.\n * @param {number} [l] The lightness value (in percentage) for the HSL color.\n * @returns {string} - The HSL color string in the format `hsl(h, s%, l%)`.\n * @description\n * This function computes a hash from the input text and uses it to generate\n * a hue value. The hue is combined with the provided saturation and lightness\n * values to create an HSL color. This can be useful for consistently assigning\n * colors based on text input, such as for avatars or tags.\n * @example\n * // Returns 'hsl(180, 40%, 65%)'\n * getHsl('example');\n * @example\n * // Returns 'hsl(300, 50%, 70%)'\n * getHsl('test', 50, 70);\n /\nexport function getHsl(text, s = 40, l = 75) {\n let str = text;\n let hash = 0;\n\n for (let i = 0; i < str?.length; i++) {\n hash = str.charCodeAt(i) + hash 31;\n }\n\n let h = hash % 360;\n\n return `hsl(${h}, ${s}%, ${l}%)`;\n}\n\n/*\n Generates background and text HSL colors for avatars based on input text.\n * The text color is a darker, more saturated variant of the background color\n * to ensure sufficient contrast while keeping the same hue.\n \n @param {string} text The input text (e.g. initials or name).\n * @returns {{ background: string, color: string }}\n /\nexport function getAvatarColors(text) {\n let hash = 0;\n for (let i = 0; i < text?.length; i++) {\n hash = text.charCodeAt(i) + hash 31;\n }\n\n const h = Math.abs(hash) % 360;\n\n // 👇 Figma-like pastel background\n const bgS = 30;\n const bgL = 88;\n\n // 👇 Softer text color (same hue)\n const textS = 50;\n const textL = 48;\n\n return {\n background: `hsl(${h}, ${bgS}%, ${bgL}%)`,\n color: `hsl(${h}, ${textS}%, ${textL}%)`\n };\n}\n\n/*\n Generates initials from a given string.\n * @param {string} string The input string, typically a full name.\n * @param {number} [length] The desired number of initials (default is 2).\n * @returns {string} - The generated initials in uppercase.\n * @description\n * This function takes a string, splits it by spaces, and generates initials.\n * It always includes the first character of the first word. If the input string\n * contains more than one word and the `length` parameter is greater than 1, it\n * also includes the first character of the last word.\n * @example\n * // Returns 'JD'\n * getInitials('John Doe');\n * @example\n * // Returns 'J'\n * getInitials('John');\n * @example\n * // Returns 'JM'\n * getInitials('John Michael Doe', 2);\n /\nexport function getInitials(string, length = 2) {\n let names = string.split(' ');\n let initials = names[0].substring(0, 1).toUpperCase();\n\n if (names.length > 1 && length > 1) {\n initials += names[names.length - 1].substring(0, 1).toUpperCase();\n }\n return initials;\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { getHsl, getInitials, getAvatarColors } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/\n @summary This class represents an Avatar element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/avatar\n * @status stable\n * @augments WJElement\n * @slot - The avatar main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty --wje-avatar-width;\n * @cssproperty --wje-avatar-height;\n * @cssproperty --wje-avatar-font-size;\n * @cssproperty --wje-avatar-font-weight;\n * @cssproperty --wje-avatar-color;\n * @cssproperty --wje-avatar-background-color;\n * @cssproperty --wje-avatar-border-radius;\n * @cssproperty --wje-avatar-border-color;\n * @cssproperty --wje-avatar-border-width;\n * @cssproperty --wje-avatar-border-style;\n * @tag wje-avatar\n /\nexport default class Avatar extends WJElement {\n /\n Avatar class constructor.\n /\n constructor() {\n super();\n }\n\n /\n Sets the value of the 'label' attribute for the element.\n * @param {string} value The new value to be set for the 'label' attribute.\n /\n set label(value) {\n this.setAttribute('label', value);\n }\n\n /\n Retrieves the value of the 'label' attribute for the element.\n * If the attribute is not set, it defaults to an empty string.\n * @returns {string} The value of the 'label' attribute or an empty string if not defined.\n /\n get label() {\n return this.getAttribute('label') \|\| '';\n }\n\n /\n Sets the value of initials for the element by updating\n * the 'initials' attribute with the provided value.\n * @param {string} value The value to be set as the initials.\n /\n set initials(value) {\n this.setAttribute('initials', '');\n }\n\n /\n Retrieves the value of the 'initials' attribute if it exists.\n * @returns {boolean} Returns true if the 'initials' attribute is present, otherwise false.\n /\n get initials() {\n return this.hasAttribute('initials') \|\| false;\n }\n\n /\n Sets the size attribute for the element.\n * @param {string \| number} 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 element. If the size attribute\n * is not defined, it returns the default value 'medium'.\n * @returns {string} The size value of the element or 'medium' if not specified.\n /\n get size() {\n return this.getAttribute('size') \|\| 'medium';\n }\n\n /\n Class name for the Avatar element.\n /\n className = 'Avatar';\n\n /\n Getter for cssStyleSheet.\n * @returns {string} styles\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 ['initials', 'label'];\n }\n\n /\n Method to setup attributes.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Method to draw the avatar element and return a document fragment.\n * @returns {object} fragment - The document fragment\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-avatar');\n\n let slot = document.createElement('slot');\n\n element.appendChild(slot);\n\n if (this.initials) {\n let initials = getInitials(this.label);\n const { background, color } = getAvatarColors(initials);\n\n this.style.setProperty('--wje-avatar-background-color', background);\n this.style.setProperty('--wje-avatar-color', color);\n\n element.innerText = initials;\n } else {\n let slotIcon = document.createElement('slot');\n slotIcon.setAttribute('name', 'icon');\n\n element.appendChild(slotIcon);\n }\n\n let status = document.createElement('slot');\n status.setAttribute('name', 'status');\n status.setAttribute('part', 'status');\n\n let secondary = document.createElement('slot');\n secondary.setAttribute('name', 'secondary');\n secondary.setAttribute('part', 'secondary');\n\n element.appendChild(status);\n element.appendChild(secondary);\n\n fragment.appendChild(element);\n\n return fragment;\n }\n\n /\n Method to check if the avatar is an image.\n * @returns {boolean} - True if the avatar is an image, false otherwise\n */\n isImage() {\n return this.getElementsByTagName('wje-img').length > 0;\n }\n}\n","import Avatar from './avatar.element.js';\n\nexport default Avatar;\n\nAvatar.define('wje-avatar', Avatar);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-avatar.js","sources":["../packages/wje-avatar/service/service.js","../packages/wje-avatar/avatar.element.js","../packages/wje-avatar/avatar.js"],"sourcesContent":["/*\n Generates an HSL color value based on the input text.\n * @param {string} text The input text to generate the HSL color.\n * @param {number} [s] The saturation value (in percentage) for the HSL color.\n * @param {number} [l] The lightness value (in percentage) for the HSL color.\n * @returns {string} - The HSL color string in the format `hsl(h, s%, l%)`.\n * @description\n * This function computes a hash from the input text and uses it to generate\n * a hue value. The hue is combined with the provided saturation and lightness\n * values to create an HSL color. This can be useful for consistently assigning\n * colors based on text input, such as for avatars or tags.\n * @example\n * // Returns 'hsl(180, 40%, 65%)'\n * getHsl('example');\n * @example\n * // Returns 'hsl(300, 50%, 70%)'\n * getHsl('test', 50, 70);\n /\nexport function getHsl(text, s = 40, l = 75) {\n let str = text;\n let hash = 0;\n\n for (let i = 0; i < str?.length; i++) {\n hash = str.charCodeAt(i) + hash 31;\n }\n\n let h = hash % 360;\n\n return `hsl(${h}, ${s}%, ${l}%)`;\n}\n\n/*\n Generates background and text HSL colors for avatars based on input text.\n * The text color is a darker, more saturated variant of the background color\n * to ensure sufficient contrast while keeping the same hue.\n \n @param {string} text The input text (e.g. initials or name).\n * @returns {{ background: string, color: string }}\n /\nexport function getAvatarColors(text) {\n let hash = 0;\n for (let i = 0; i < text?.length; i++) {\n hash = text.charCodeAt(i) + hash 31;\n }\n\n const h = Math.abs(hash) % 360;\n\n // 👇 Figma-like pastel background\n const bgS = 30;\n const bgL = 88;\n\n // 👇 Softer text color (same hue)\n const textS = 50;\n const textL = 48;\n\n return {\n background: `hsl(${h}, ${bgS}%, ${bgL}%)`,\n color: `hsl(${h}, ${textS}%, ${textL}%)`\n };\n}\n\n/*\n Generates initials from a given string.\n * @param {string} string The input string, typically a full name.\n * @param {number} [length] The desired number of initials (default is 2).\n * @returns {string} - The generated initials in uppercase.\n * @description\n * This function takes a string, splits it by spaces, and generates initials.\n * It always includes the first character of the first word. If the input string\n * contains more than one word and the `length` parameter is greater than 1, it\n * also includes the first character of the last word.\n * @example\n * // Returns 'JD'\n * getInitials('John Doe');\n * @example\n * // Returns 'J'\n * getInitials('John');\n * @example\n * // Returns 'JM'\n * getInitials('John Michael Doe', 2);\n /\nexport function getInitials(string, length = 2) {\n let names = string.split(' ');\n let initials = names[0].substring(0, 1).toUpperCase();\n\n if (names.length > 1 && length > 1) {\n initials += names[names.length - 1].substring(0, 1).toUpperCase();\n }\n return initials;\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { getHsl, getInitials, getAvatarColors } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/\n @summary This class represents an Avatar element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/avatar\n * @status stable\n * @augments WJElement\n * @slot - The avatar main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty --wje-avatar-width;\n * @cssproperty --wje-avatar-height;\n * @cssproperty --wje-avatar-font-size;\n * @cssproperty --wje-avatar-font-weight;\n * @cssproperty --wje-avatar-color;\n * @cssproperty --wje-avatar-background-color;\n * @cssproperty --wje-avatar-border-radius;\n * @cssproperty --wje-avatar-border-color;\n * @cssproperty --wje-avatar-border-width;\n * @cssproperty --wje-avatar-border-style;\n * @tag wje-avatar\n /\nexport default class Avatar extends WJElement {\n /\n Avatar class constructor.\n /\n constructor() {\n super();\n }\n\n /\n Sets the value of the 'label' attribute for the element.\n * @param {string} value The new value to be set for the 'label' attribute.\n /\n set label(value) {\n this.setAttribute('label', value);\n }\n\n /\n Retrieves the value of the 'label' attribute for the element.\n * If the attribute is not set, it defaults to an empty string.\n * @returns {string} The value of the 'label' attribute or an empty string if not defined.\n /\n get label() {\n return this.getAttribute('label') \|\| '';\n }\n\n /\n Sets the value of initials for the element by updating\n * the 'initials' attribute with the provided value.\n * @param {string} value The value to be set as the initials.\n /\n set initials(value) {\n this.setAttribute('initials', '');\n }\n\n /\n Retrieves the value of the 'initials' attribute if it exists.\n * @returns {boolean} Returns true if the 'initials' attribute is present, otherwise false.\n /\n get initials() {\n return this.hasAttribute('initials') \|\| false;\n }\n\n /\n Sets the size attribute for the element.\n * @param {string \| number} 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 element. If the size attribute\n * is not defined, it returns the default value 'medium'.\n * @returns {string} The size value of the element or 'medium' if not specified.\n /\n get size() {\n return this.getAttribute('size') \|\| 'medium';\n }\n\n /\n Class name for the Avatar element.\n /\n className = 'Avatar';\n\n /\n Getter for cssStyleSheet.\n * @returns {string} styles\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 ['initials', 'label'];\n }\n\n /\n Method to setup attributes.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (name === 'label' \|\| name === 'initials') {\n this.syncAria();\n }\n }\n\n /\n Method to draw the avatar element and return a document fragment.\n * @returns {object} fragment - The document fragment\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-avatar');\n\n let slot = document.createElement('slot');\n\n element.appendChild(slot);\n\n if (this.initials) {\n let initials = getInitials(this.label);\n const { background, color } = getAvatarColors(initials);\n\n this.style.setProperty('--wje-avatar-background-color', background);\n this.style.setProperty('--wje-avatar-color', color);\n\n element.innerText = initials;\n } else {\n let slotIcon = document.createElement('slot');\n slotIcon.setAttribute('name', 'icon');\n\n element.appendChild(slotIcon);\n }\n\n let status = document.createElement('slot');\n status.setAttribute('name', 'status');\n status.setAttribute('part', 'status');\n\n let secondary = document.createElement('slot');\n secondary.setAttribute('name', 'secondary');\n secondary.setAttribute('part', 'secondary');\n\n element.appendChild(status);\n element.appendChild(secondary);\n\n fragment.appendChild(element);\n\n return fragment;\n }\n\n /\n Syncs ARIA attributes on the host element.\n /\n syncAria() {\n const label = this.label?.trim();\n if (label) {\n this.setAriaState({ label });\n }\n }\n\n /\n Method to check if the avatar is an image.\n * @returns {boolean} - True if the avatar is an image, false otherwise\n */\n isImage() {\n return this.getElementsByTagName('wje-img').length > 0;\n }\n}\n","import Avatar from './avatar.element.js';\n\nexport default Avatar;\n\nAvatar.define('wje-avatar', Avatar);\n"],"names":[],"mappings":"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"}

package/dist/wje-badge.js CHANGED Viewed

@@ -43,6 +43,7 @@ class Badge extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAriaState({ role: "status" });
   }
   /**
    * Creates the DOM structure for the Badge element.

package/dist/wje-badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-badge.js","sources":["../packages/wje-badge/badge.element.js","../packages/wje-badge/badge.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This class represents a Badge element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/badge\n * @status stable\n * @augments WJElement\n * @attribute {string} color - The color of the badge element. Accepts any valid string primary, secondary, success, danger, warning, info, default.\n * @slot - The badge's main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-badge-border-radius=var(--wje-border-radius-pill)] - Border radius of the badge element.\n * @tag wje-badge\n /\n\nexport default class Badge extends WJElement {\n /\n Creates an instance of Badge.\n * Represents a custom Badge element.\n * @class\n /\n constructor() {\n super();\n }\n\n /\n The class name for the Badge element.\n * @type {string} The class name for the Badge element.\n /\n className = 'Badge';\n\n /\n Retrieves the CSS stylesheet for the Badge element.\n * @static\n * @returns {CSSStyleSheet} The CSS styles associated with the Badge.\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Specifies the attributes to observe for changes.\n * @static\n * @returns {Array<string>} An array containing the names of attributes to observe.\n * @example\n * static get observedAttributes() {\n * return ['color'];\n * }\n /\n static get observedAttributes() {\n return ['color'];\n }\n\n /\n Configures initial attributes for the Badge element.\n * @returns {void} Nothing is returned.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Creates the DOM structure for the Badge element.\n * @returns {DocumentFragment} A document fragment containing the Badge's structure.\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-badge');\n\n // Add color classes based on the `color` attribute\n if (this.hasAttribute('color')) {\n native.classList.add(`wje-color-${this.color}`, 'wje-color');\n } else {\n native.classList.add('wje-color-default', 'wje-color');\n }\n\n let slot = document.createElement('slot');\n\n native.appendChild(slot);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n}\n","import Badge from './badge.element.js';\n\nexport default Badge;\n\nBadge.define('wje-badge', Badge);\n"],"names":[],"mappings":";;;;;AAee,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMzC,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,OAAO;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,kBAAkB;AACd,SAAK,eAAe;AAAA,~~EAC5B~~;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,cAAc;AAGnC,QAAI,KAAK,aAAa,OAAO,GAAG;AAC5B,aAAO,UAAU,IAAI,aAAa,KAAK,KAAK,IAAI,WAAW;AAAA,IACvE,OAAe;AACH,aAAO,UAAU,IAAI,qBAAqB,WAAW;AAAA,IACjE;AAEQ,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AACA;~~ACnFA~~,MAAM,OAAO,aAAa,KAAK;"}
1	+ {"version":3,"file":"wje-badge.js","sources":["../packages/wje-badge/badge.element.js","../packages/wje-badge/badge.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This class represents a Badge element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/badge\n * @status stable\n * @augments WJElement\n * @attribute {string} color - The color of the badge element. Accepts any valid string primary, secondary, success, danger, warning, info, default.\n * @slot - The badge's main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-badge-border-radius=var(--wje-border-radius-pill)] - Border radius of the badge element.\n * @tag wje-badge\n /\n\nexport default class Badge extends WJElement {\n /\n Creates an instance of Badge.\n * Represents a custom Badge element.\n * @class\n /\n constructor() {\n super();\n }\n\n /\n The class name for the Badge element.\n * @type {string} The class name for the Badge element.\n /\n className = 'Badge';\n\n /\n Retrieves the CSS stylesheet for the Badge element.\n * @static\n * @returns {CSSStyleSheet} The CSS styles associated with the Badge.\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Specifies the attributes to observe for changes.\n * @static\n * @returns {Array<string>} An array containing the names of attributes to observe.\n * @example\n * static get observedAttributes() {\n * return ['color'];\n * }\n /\n static get observedAttributes() {\n return ['color'];\n }\n\n /\n Configures initial attributes for the Badge element.\n * @returns {void} Nothing is returned.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({ role: 'status' });\n }\n\n /\n Creates the DOM structure for the Badge element.\n * @returns {DocumentFragment} A document fragment containing the Badge's structure.\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-badge');\n\n // Add color classes based on the `color` attribute\n if (this.hasAttribute('color')) {\n native.classList.add(`wje-color-${this.color}`, 'wje-color');\n } else {\n native.classList.add('wje-color-default', 'wje-color');\n }\n\n let slot = document.createElement('slot');\n\n native.appendChild(slot);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n}\n","import Badge from './badge.element.js';\n\nexport default Badge;\n\nBadge.define('wje-badge', Badge);\n"],"names":[],"mappings":";;;;;AAee,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMzC,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,OAAO;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,EAAE,MAAM,SAAQ,CAAE;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,cAAc;AAGnC,QAAI,KAAK,aAAa,OAAO,GAAG;AAC5B,aAAO,UAAU,IAAI,aAAa,KAAK,KAAK,IAAI,WAAW;AAAA,IACvE,OAAe;AACH,aAAO,UAAU,IAAI,qBAAqB,WAAW;AAAA,IACjE;AAEQ,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AACA;ACpFA,MAAM,OAAO,aAAa,KAAK;"}

package/dist/{packages/wje-breadcrumb → wje-breadcrumb}/breadcrumb.element.d.ts RENAMED Viewed

@@ -59,6 +59,7 @@ export default class Breadcrumb extends WJElement {
      */
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): boolean;
     active: boolean;
+    syncAria(): void;
     /**
      * Draw method for the Breadcrumb element.
      * @returns {object} fragment - The document fragment

package/dist/wje-breadcrumb.js CHANGED Viewed

@@ -86,6 +86,11 @@ class Breadcrumb extends WJElement {
       const isLast = WjElementUtils.stringToBoolean(newValue);
       this.active = isLast;
       this.showSeparator = !isLast;
+      this.syncAria();
+      if (this.native) {
+        if (isLast) this.native.setAttribute("aria-current", "page");
+        else this.native.removeAttribute("aria-current");
+      }
       this.refresh();
     }
   }
@@ -94,6 +99,12 @@ class Breadcrumb extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
+  }
+  syncAria() {
+    this.setAriaState({ role: "link" });
+    if (this.active) this.setAriaState({ current: "page" });
+    else this.removeAttribute("aria-current");
   }
   /**
    * Draw method for the Breadcrumb element.
@@ -104,6 +115,7 @@ class Breadcrumb extends WJElement {
     let native = document.createElement("a");
     native.classList.add("native-breadcrumb");
     native.setAttribute("part", "native");
+    if (this.active) native.setAttribute("aria-current", "page");
     if (this.active) native.classList.add("active");
     let slot = document.createElement("slot");
     let start = document.createElement("slot");
@@ -181,7 +193,7 @@ class Breadcrumb extends WJElement {
         (_b = e.stopImmediatePropagation) == null ? void 0 : _b.call(e);
         const breadcrumb = e.currentTarget.__breadcrumb;
         if (!breadcrumb) return;
-        const native = breadcrumb.native || ((_c = breadcrumb.shadowRoot) == null ? void 0 : _c.querySelector("a.native-breadcrumb"));
+        const native = breadcrumb.native || ((_c = breadcrumb.context) == null ? void 0 : _c.querySelector("a.native-breadcrumb"));
         if (native && typeof native.click === "function") {
           native.click();
         } else if (typeof breadcrumb.click === "function") {

package/dist/wje-breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-breadcrumb.js","sources":["../packages/wje-breadcrumb/breadcrumb.element.js","../packages/wje-breadcrumb/breadcrumb.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This class represents a Breadcrumb element, extending the WJElement class. It provides a navigational aid in user interfaces, displaying the current location within a hierarchy.\n * @documentation https://elements.webjet.sk/components/breadcrumb\n * @status stable\n * @augments WJElement\n * @slot - The main content of the breadcrumb.\n * @slot start - Slot for content at the start of the breadcrumb.\n * @slot end - Slot for content at the end of the breadcrumb.\n * @slot separator - Slot for a custom separator between breadcrumb items.\n * @csspart native - The native wrapper of the breadcrumb component.\n * @csspart separator - The separator between breadcrumb items.\n * @cssproperty [--wje-breadcrumb-a=var(--wje-color-contrast-8)] - The color of the breadcrumb text.\n * @cssproperty [--wje-breadcrumb-a-hover=var(--wje-color-contrast-6)] - The color of the breadcrumb separator line.\n * @tag wje-breadcrumb\n /\nexport default class Breadcrumb extends WJElement {\n /\n Breadcrumb constructor method.\n /\n constructor() {\n super();\n\n this._showSeparator = true;\n this._showCollapsedIndicator = false;\n }\n\n /\n Get show separator flag.\n * @returns {boolean} showSeparator - The show separator flag\n /\n get showSeparator() {\n return this._showSeparator;\n }\n\n /\n Set show separator flag.\n * @param {boolean} value The value to set\n /\n set showSeparator(value) {\n this._showSeparator = value;\n }\n\n /\n Set collapsed variant.\n * @param {string} value The value to set\n /\n set collapsedVariant(value) {\n this._collapsedVariant = value;\n }\n\n /\n Get collapsed variant.\n * @returns {string} The collapsed variant value in uppercase.\n /\n get collapsedVariant() {\n let variant = this.parentElement?.variant \|\| this._collapsedVariant;\n return variant.toUpperCase();\n }\n\n /\n Class name for the Breadcrumb element.\n * @type {string}\n /\n className = 'Breadcrumb';\n\n /\n Get CSS stylesheet for the Breadcrumb element.\n * @static\n * @returns {object} styles - The CSS styles\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Get observed attributes for the Breadcrumb element.\n * @static\n * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n /\n static get observedAttributes() {\n return ['show-collapsed-indicator', 'collapsed', 'last'];\n }\n\n /\n Handles attribute changes for the custom element and updates its behavior or appearance accordingly.\n * @param {string} name The name of the attribute that was changed.\n * @param {string\|null} oldValue The previous value of the attribute before it was changed. Null if the attribute was not previously set.\n * @param {string\|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.\n * @returns {boolean} Returns false to signal no default behavior is implemented.\n /\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n\n if (name === 'collapsed') {\n const isCollapsed = WjElementUtils.stringToBoolean(newValue);\n\n // toggle class podľa stavu\n this.classList.toggle('collapsed', isCollapsed && !this.hasAttribute('show-collapsed-indicator'));\n\n } else if (name === 'show-collapsed-indicator') {\n const isOn = WjElementUtils.stringToBoolean(newValue);\n this._showCollapsedIndicator = isOn;\n this.refresh();\n\n } else if (name === 'last') {\n const isLast = WjElementUtils.stringToBoolean(newValue);\n this.active = isLast;\n this.showSeparator = !isLast;\n this.refresh();\n }\n }\n\n /\n Setup attributes for the Breadcrumb element.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Draw method for the Breadcrumb element.\n * @returns {object} fragment - The document fragment\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('a');\n native.classList.add('native-breadcrumb');\n native.setAttribute('part', 'native');\n\n if (this.active) native.classList.add('active');\n\n let slot = document.createElement('slot');\n\n let start = document.createElement('slot');\n start.setAttribute('name', 'start');\n\n let end = document.createElement('slot');\n end.setAttribute('name', 'end');\n\n native.append(start, slot, end);\n\n // APPEND\n fragment.append(native);\n\n if (WjElementUtils.stringToBoolean(this._showCollapsedIndicator)) {\n // pridame button za native element\n fragment.append(this.drawCollapsedIndicator());\n\n // skryjeme native element\n native.classList.add('hidden');\n }\n\n if (this.showSeparator) {\n let separator = document.createElement('span');\n separator.classList.add('separator');\n separator.setAttribute('part', 'separator');\n\n if (WjElementUtils.hasSlot(this, 'separator')) {\n let slotSeparator = document.createElement('slot');\n slotSeparator.setAttribute('name', 'separator');\n\n separator.append(slotSeparator);\n } else {\n separator.innerHTML = `<wje-icon name=${this.separator \|\| 'chevron-right'}></wje-icon>`;\n }\n\n fragment.append(separator);\n }\n\n this.native = native;\n\n return fragment;\n }\n\n /\n Renders the collapsed indicator based on the current collapsed variant.\n * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.\n * Otherwise, it invokes the collapseButton method.\n * @returns {any} The rendered collapsed indicator, either as a dropdown or a button.\n /\n drawCollapsedIndicator() {\n let collapsedIndicator = null;\n\n if (this.collapsedVariant === 'DROPDOWN') {\n collapsedIndicator = this.collapseDropdown();\n } else {\n collapsedIndicator = this.collapseButton();\n }\n\n return collapsedIndicator;\n }\n\n /\n Creates and returns a dropdown UI component for collapsed breadcrumbs.\n * This method generates a dropdown element with a button trigger and a menu populated with items corresponding\n * to the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that\n * events are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding\n * breadcrumbs, enabling the same functionality as clicking on the original breadcrumb.\n * @returns {HTMLElement} A configured dropdown element containing a button as trigger and a menu with breadcrumb items.\n /\n collapseDropdown() {\n let dropdown = document.createElement('wje-dropdown');\n dropdown.setAttribute('placement', 'bottom');\n dropdown.setAttribute('offset', '10');\n\n let button = document.createElement('wje-button');\n button.setAttribute('slot', 'trigger');\n button.setAttribute('fill', 'link');\n button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n let menu = document.createElement('wje-menu');\n menu.setAttribute('variant', 'context');\n\n menu.addEventListener('click', (e) => {\n e.stopPropagation();\n e.stopImmediatePropagation?.();\n });\n\n this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((b) => {\n let menuItem = document.createElement('wje-menu-item');\n menuItem.innerHTML = b.innerHTML;\n\n menuItem.__breadcrumb = b;\n\n menuItem.addEventListener('wje-menu-item:click', (e) => {\n e.preventDefault?.();\n e.stopPropagation();\n e.stopImmediatePropagation?.();\n\n const breadcrumb = e.currentTarget.__breadcrumb;\n if (!breadcrumb) return;\n\n // Prefer clicking the internal anchor (same behavior as real user click), fallback to host click.\n const native = breadcrumb.native \|\| breadcrumb.shadowRoot?.querySelector('a.native-breadcrumb');\n if (native && typeof native.click === 'function') {\n native.click();\n } else if (typeof breadcrumb.click === 'function') {\n breadcrumb.click();\n } else {\n breadcrumb.dispatchEvent(\n new MouseEvent('click', {\n bubbles: true,\n composed: true,\n cancelable: true\n })\n );\n }\n });\n\n menu.append(menuItem);\n });\n\n dropdown.append(button, menu);\n\n return dropdown;\n }\n\n /\n Creates a button element that expands hidden breadcrumbs when clicked.\n * The button is set with appropriate attributes and event listeners to handle\n * the expanding of hidden breadcrumb elements. Clicking the button will remove\n * the button itself, reveal hidden breadcrumbs, and stop the current event\n * propagation.\n * @returns {HTMLButtonElement} The created button configured to expand breadcrumbs.\n /\n collapseButton() {\n let button = document.createElement('button');\n button.setAttribute('aria-label', 'Show more breadcrumbs');\n button.setAttribute('part', 'collapsed-indicator');\n button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n event.addListener(button, 'click', null, (e) => {\n this.native.classList.remove('hidden');\n button.remove();\n this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((el) => {\n el.classList.remove('collapsed');\n });\n e.stopPropagation();\n });\n\n return button;\n }\n\n /\n Retrieves the breadcrumb trail for the current element by returning its parent element.\n * @returns {Element} The parent element representing the breadcrumb trail.\n /\n getBreadcrumbs() {\n return this.parentElement;\n }\n}\n","import Breadcrumb from './breadcrumb.element.js';\n\n// export from \"./breadcrumb.element.js\";\nexport default Breadcrumb;\n\nBreadcrumb.define('wje-breadcrumb', Breadcrumb);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-breadcrumb.js","sources":["../packages/wje-breadcrumb/breadcrumb.element.js","../packages/wje-breadcrumb/breadcrumb.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This class represents a Breadcrumb element, extending the WJElement class. It provides a navigational aid in user interfaces, displaying the current location within a hierarchy.\n * @documentation https://elements.webjet.sk/components/breadcrumb\n * @status stable\n * @augments WJElement\n * @slot - The main content of the breadcrumb.\n * @slot start - Slot for content at the start of the breadcrumb.\n * @slot end - Slot for content at the end of the breadcrumb.\n * @slot separator - Slot for a custom separator between breadcrumb items.\n * @csspart native - The native wrapper of the breadcrumb component.\n * @csspart separator - The separator between breadcrumb items.\n * @cssproperty [--wje-breadcrumb-a=var(--wje-color-contrast-8)] - The color of the breadcrumb text.\n * @cssproperty [--wje-breadcrumb-a-hover=var(--wje-color-contrast-6)] - The color of the breadcrumb separator line.\n * @tag wje-breadcrumb\n /\nexport default class Breadcrumb extends WJElement {\n /\n Breadcrumb constructor method.\n /\n constructor() {\n super();\n\n this._showSeparator = true;\n this._showCollapsedIndicator = false;\n }\n\n /\n Get show separator flag.\n * @returns {boolean} showSeparator - The show separator flag\n /\n get showSeparator() {\n return this._showSeparator;\n }\n\n /\n Set show separator flag.\n * @param {boolean} value The value to set\n /\n set showSeparator(value) {\n this._showSeparator = value;\n }\n\n /\n Set collapsed variant.\n * @param {string} value The value to set\n /\n set collapsedVariant(value) {\n this._collapsedVariant = value;\n }\n\n /\n Get collapsed variant.\n * @returns {string} The collapsed variant value in uppercase.\n /\n get collapsedVariant() {\n let variant = this.parentElement?.variant \|\| this._collapsedVariant;\n return variant.toUpperCase();\n }\n\n /\n Class name for the Breadcrumb element.\n * @type {string}\n /\n className = 'Breadcrumb';\n\n /\n Get CSS stylesheet for the Breadcrumb element.\n * @static\n * @returns {object} styles - The CSS styles\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Get observed attributes for the Breadcrumb element.\n * @static\n * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n /\n static get observedAttributes() {\n return ['show-collapsed-indicator', 'collapsed', 'last'];\n }\n\n /\n Handles attribute changes for the custom element and updates its behavior or appearance accordingly.\n * @param {string} name The name of the attribute that was changed.\n * @param {string\|null} oldValue The previous value of the attribute before it was changed. Null if the attribute was not previously set.\n * @param {string\|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.\n * @returns {boolean} Returns false to signal no default behavior is implemented.\n /\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n\n if (name === 'collapsed') {\n const isCollapsed = WjElementUtils.stringToBoolean(newValue);\n\n // toggle class podľa stavu\n this.classList.toggle('collapsed', isCollapsed && !this.hasAttribute('show-collapsed-indicator'));\n\n } else if (name === 'show-collapsed-indicator') {\n const isOn = WjElementUtils.stringToBoolean(newValue);\n this._showCollapsedIndicator = isOn;\n this.refresh();\n\n } else if (name === 'last') {\n const isLast = WjElementUtils.stringToBoolean(newValue);\n this.active = isLast;\n this.showSeparator = !isLast;\n this.syncAria();\n if (this.native) {\n if (isLast) this.native.setAttribute('aria-current', 'page');\n else this.native.removeAttribute('aria-current');\n }\n this.refresh();\n }\n }\n\n /\n Setup attributes for the Breadcrumb element.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n syncAria() {\n this.setAriaState({ role: 'link' });\n if (this.active) this.setAriaState({ current: 'page' });\n else this.removeAttribute('aria-current');\n }\n\n /\n Draw method for the Breadcrumb element.\n * @returns {object} fragment - The document fragment\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('a');\n native.classList.add('native-breadcrumb');\n native.setAttribute('part', 'native');\n if (this.active) native.setAttribute('aria-current', 'page');\n\n if (this.active) native.classList.add('active');\n\n let slot = document.createElement('slot');\n\n let start = document.createElement('slot');\n start.setAttribute('name', 'start');\n\n let end = document.createElement('slot');\n end.setAttribute('name', 'end');\n\n native.append(start, slot, end);\n\n // APPEND\n fragment.append(native);\n\n if (WjElementUtils.stringToBoolean(this._showCollapsedIndicator)) {\n // pridame button za native element\n fragment.append(this.drawCollapsedIndicator());\n\n // skryjeme native element\n native.classList.add('hidden');\n }\n\n if (this.showSeparator) {\n let separator = document.createElement('span');\n separator.classList.add('separator');\n separator.setAttribute('part', 'separator');\n\n if (WjElementUtils.hasSlot(this, 'separator')) {\n let slotSeparator = document.createElement('slot');\n slotSeparator.setAttribute('name', 'separator');\n\n separator.append(slotSeparator);\n } else {\n separator.innerHTML = `<wje-icon name=${this.separator \|\| 'chevron-right'}></wje-icon>`;\n }\n\n fragment.append(separator);\n }\n\n this.native = native;\n\n return fragment;\n }\n\n /\n Renders the collapsed indicator based on the current collapsed variant.\n * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.\n * Otherwise, it invokes the collapseButton method.\n * @returns {any} The rendered collapsed indicator, either as a dropdown or a button.\n /\n drawCollapsedIndicator() {\n let collapsedIndicator = null;\n\n if (this.collapsedVariant === 'DROPDOWN') {\n collapsedIndicator = this.collapseDropdown();\n } else {\n collapsedIndicator = this.collapseButton();\n }\n\n return collapsedIndicator;\n }\n\n /\n Creates and returns a dropdown UI component for collapsed breadcrumbs.\n * This method generates a dropdown element with a button trigger and a menu populated with items corresponding\n * to the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that\n * events are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding\n * breadcrumbs, enabling the same functionality as clicking on the original breadcrumb.\n * @returns {HTMLElement} A configured dropdown element containing a button as trigger and a menu with breadcrumb items.\n /\n collapseDropdown() {\n let dropdown = document.createElement('wje-dropdown');\n dropdown.setAttribute('placement', 'bottom');\n dropdown.setAttribute('offset', '10');\n\n let button = document.createElement('wje-button');\n button.setAttribute('slot', 'trigger');\n button.setAttribute('fill', 'link');\n button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n let menu = document.createElement('wje-menu');\n menu.setAttribute('variant', 'context');\n\n menu.addEventListener('click', (e) => {\n e.stopPropagation();\n e.stopImmediatePropagation?.();\n });\n\n this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((b) => {\n let menuItem = document.createElement('wje-menu-item');\n menuItem.innerHTML = b.innerHTML;\n\n menuItem.__breadcrumb = b;\n\n menuItem.addEventListener('wje-menu-item:click', (e) => {\n e.preventDefault?.();\n e.stopPropagation();\n e.stopImmediatePropagation?.();\n\n const breadcrumb = e.currentTarget.__breadcrumb;\n if (!breadcrumb) return;\n\n // Prefer clicking the internal anchor (same behavior as real user click), fallback to host click.\n const native = breadcrumb.native \|\| breadcrumb.context?.querySelector('a.native-breadcrumb');\n if (native && typeof native.click === 'function') {\n native.click();\n } else if (typeof breadcrumb.click === 'function') {\n breadcrumb.click();\n } else {\n breadcrumb.dispatchEvent(\n new MouseEvent('click', {\n bubbles: true,\n composed: true,\n cancelable: true\n })\n );\n }\n });\n\n menu.append(menuItem);\n });\n\n dropdown.append(button, menu);\n\n return dropdown;\n }\n\n /\n Creates a button element that expands hidden breadcrumbs when clicked.\n * The button is set with appropriate attributes and event listeners to handle\n * the expanding of hidden breadcrumb elements. Clicking the button will remove\n * the button itself, reveal hidden breadcrumbs, and stop the current event\n * propagation.\n * @returns {HTMLButtonElement} The created button configured to expand breadcrumbs.\n /\n collapseButton() {\n let button = document.createElement('button');\n button.setAttribute('aria-label', 'Show more breadcrumbs');\n button.setAttribute('part', 'collapsed-indicator');\n button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n event.addListener(button, 'click', null, (e) => {\n this.native.classList.remove('hidden');\n button.remove();\n this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((el) => {\n el.classList.remove('collapsed');\n });\n e.stopPropagation();\n });\n\n return button;\n }\n\n /\n Retrieves the breadcrumb trail for the current element by returning its parent element.\n * @returns {Element} The parent element representing the breadcrumb trail.\n /\n getBreadcrumbs() {\n return this.parentElement;\n }\n}\n","import Breadcrumb from './breadcrumb.element.js';\n\n// export from \"./breadcrumb.element.js\";\nexport default Breadcrumb;\n\nBreadcrumb.define('wje-breadcrumb', Breadcrumb);\n"],"names":[],"mappings":";;;;;;;AAkBe,MAAM,mBAAmB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI9C,cAAc;AACV,UAAO;AA2CX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAzCR,SAAK,iBAAiB;AACtB,SAAK,0BAA0B;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,gBAAgB;AAChB,WAAO,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,cAAc,OAAO;AACrB,SAAK,iBAAiB;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,iBAAiB,OAAO;AACxB,SAAK,oBAAoB;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,mBAAmB;;AACnB,QAAI,YAAU,UAAK,kBAAL,mBAAoB,YAAW,KAAK;AAClD,WAAO,QAAQ,YAAa;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,4BAA4B,aAAa,MAAM;AAAA,EAC/D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,yBAAyB,MAAM,UAAU,UAAU;;AAC/C,gBAAM,6BAAN,8BAAiC,MAAM,UAAU;AAEjD,QAAI,SAAS,aAAa;AACtB,YAAM,cAAc,eAAe,gBAAgB,QAAQ;AAG3D,WAAK,UAAU,OAAO,aAAa,eAAe,CAAC,KAAK,aAAa,0BAA0B,CAAC;AAAA,IAE5G,WAAmB,SAAS,4BAA4B;AAC5C,YAAM,OAAO,eAAe,gBAAgB,QAAQ;AACpD,WAAK,0BAA0B;AAC/B,WAAK,QAAS;AAAA,IAE1B,WAAmB,SAAS,QAAQ;AACxB,YAAM,SAAS,eAAe,gBAAgB,QAAQ;AACtD,WAAK,SAAS;AACd,WAAK,gBAAgB,CAAC;AACtB,WAAK,SAAU;AACf,UAAI,KAAK,QAAQ;AACb,YAAI,OAAQ,MAAK,OAAO,aAAa,gBAAgB,MAAM;AAAA,YACtD,MAAK,OAAO,gBAAgB,cAAc;AAAA,MAC/D;AACY,WAAK,QAAS;AAAA,IAC1B;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAU;AAAA,EACvB;AAAA,EAEI,WAAW;AACP,SAAK,aAAa,EAAE,MAAM,OAAM,CAAE;AAClC,QAAI,KAAK,OAAQ,MAAK,aAAa,EAAE,SAAS,QAAQ;AAAA,QACjD,MAAK,gBAAgB,cAAc;AAAA,EAChD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,GAAG;AACvC,WAAO,UAAU,IAAI,mBAAmB;AACxC,WAAO,aAAa,QAAQ,QAAQ;AACpC,QAAI,KAAK,OAAQ,QAAO,aAAa,gBAAgB,MAAM;AAE3D,QAAI,KAAK,OAAQ,QAAO,UAAU,IAAI,QAAQ;AAE9C,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,MAAM,SAAS,cAAc,MAAM;AACvC,QAAI,aAAa,QAAQ,KAAK;AAE9B,WAAO,OAAO,OAAO,MAAM,GAAG;AAG9B,aAAS,OAAO,MAAM;AAEtB,QAAI,eAAe,gBAAgB,KAAK,uBAAuB,GAAG;AAE9D,eAAS,OAAO,KAAK,wBAAwB;AAG7C,aAAO,UAAU,IAAI,QAAQ;AAAA,IACzC;AAEQ,QAAI,KAAK,eAAe;AACpB,UAAI,YAAY,SAAS,cAAc,MAAM;AAC7C,gBAAU,UAAU,IAAI,WAAW;AACnC,gBAAU,aAAa,QAAQ,WAAW;AAE1C,UAAI,eAAe,QAAQ,MAAM,WAAW,GAAG;AAC3C,YAAI,gBAAgB,SAAS,cAAc,MAAM;AACjD,sBAAc,aAAa,QAAQ,WAAW;AAE9C,kBAAU,OAAO,aAAa;AAAA,MAC9C,OAAmB;AACH,kBAAU,YAAY,kBAAkB,KAAK,aAAa,eAAe;AAAA,MACzF;AAEY,eAAS,OAAO,SAAS;AAAA,IACrC;AAEQ,SAAK,SAAS;AAEd,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,yBAAyB;AACrB,QAAI,qBAAqB;AAEzB,QAAI,KAAK,qBAAqB,YAAY;AACtC,2BAAqB,KAAK,iBAAkB;AAAA,IACxD,OAAe;AACH,2BAAqB,KAAK,eAAgB;AAAA,IACtD;AAEQ,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUI,mBAAmB;AACf,QAAI,WAAW,SAAS,cAAc,cAAc;AACpD,aAAS,aAAa,aAAa,QAAQ;AAC3C,aAAS,aAAa,UAAU,IAAI;AAEpC,QAAI,SAAS,SAAS,cAAc,YAAY;AAChD,WAAO,aAAa,QAAQ,SAAS;AACrC,WAAO,aAAa,QAAQ,MAAM;AAClC,WAAO,YAAY;AAEnB,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,WAAW,SAAS;AAEtC,SAAK,iBAAiB,SAAS,CAAC,MAAM;;AAClC,QAAE,gBAAiB;AACnB,cAAE,6BAAF;AAAA,IACZ,CAAS;AAED,SAAK,eAAc,EAAG,wBAAyB,EAAC,QAAQ,CAAC,MAAM;AAC3D,UAAI,WAAW,SAAS,cAAc,eAAe;AACrD,eAAS,YAAY,EAAE;AAEvB,eAAS,eAAe;AAExB,eAAS,iBAAiB,uBAAuB,CAAC,MAAM;;AACpD,gBAAE,mBAAF;AACA,UAAE,gBAAiB;AACnB,gBAAE,6BAAF;AAEA,cAAM,aAAa,EAAE,cAAc;AACnC,YAAI,CAAC,WAAY;AAGjB,cAAM,SAAS,WAAW,YAAU,gBAAW,YAAX,mBAAoB,cAAc;AACtE,YAAI,UAAU,OAAO,OAAO,UAAU,YAAY;AAC9C,iBAAO,MAAO;AAAA,QACjB,WAAU,OAAO,WAAW,UAAU,YAAY;AAC/C,qBAAW,MAAO;AAAA,QACtC,OAAuB;AACH,qBAAW;AAAA,YACP,IAAI,WAAW,SAAS;AAAA,cACpB,SAAS;AAAA,cACT,UAAU;AAAA,cACV,YAAY;AAAA,YACf,CAAA;AAAA,UACJ;AAAA,QACrB;AAAA,MACA,CAAa;AAED,WAAK,OAAO,QAAQ;AAAA,IAChC,CAAS;AAED,aAAS,OAAO,QAAQ,IAAI;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUI,iBAAiB;AACb,QAAI,SAAS,SAAS,cAAc,QAAQ;AAC5C,WAAO,aAAa,cAAc,uBAAuB;AACzD,WAAO,aAAa,QAAQ,qBAAqB;AACjD,WAAO,YAAY;AAEnB,UAAM,YAAY,QAAQ,SAAS,MAAM,CAAC,MAAM;AAC5C,WAAK,OAAO,UAAU,OAAO,QAAQ;AACrC,aAAO,OAAQ;AACf,WAAK,eAAc,EAAG,wBAAyB,EAAC,QAAQ,CAAC,OAAO;AAC5D,WAAG,UAAU,OAAO,WAAW;AAAA,MAC/C,CAAa;AACD,QAAE,gBAAiB;AAAA,IAC/B,CAAS;AAED,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,iBAAiB;AACb,WAAO,KAAK;AAAA,EACpB;AACA;AC9SA,WAAW,OAAO,kBAAkB,UAAU;"}

package/dist/wje-breadcrumbs.js CHANGED Viewed

@@ -94,6 +94,7 @@ class Breadcrumbs extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAriaState({ role: "navigation" });
   }
   /**
    * Draw method for the Breadcrumbs element.

package/dist/wje-breadcrumbs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-breadcrumbs.js","sources":["../packages/wje-breadcrumbs/breadcrumbs.element.js","../packages/wje-breadcrumbs/breadcrumbs.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n * @documentation https://elements.webjet.sk/components/breadcrumbs\n * @status stable\n * @augments WJElement\n * @slot - The container for breadcrumb elements.\n * @csspart container - The component's container wrapper.\n * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.\n * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.\n * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.\n * @tag wje-breadcrumbs\n * @example\n * <!-- Example usage -->\n * <wje-breadcrumbs max-items=\"5\" items-before-collapse=\"2\" items-after-collapse=\"2\">\n * <wje-breadcrumb>Home</wje-breadcrumb>\n * <wje-breadcrumb>About</wje-breadcrumb>\n * <wje-breadcrumb>Services</wje-breadcrumb>\n * <wje-breadcrumb>Portfolio</wje-breadcrumb>\n * <wje-breadcrumb>Contact</wje-breadcrumb>\n * </wje-breadcrumbs>\n \n <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->\n /\n\nexport default class Breadcrumbs extends WJElement {\n /\n Breadcrumbs constructor method.\n * @class\n /\n constructor() {\n super();\n\n /\n Last breadcrumb flag\n * @type {boolean}\n /\n this.last = false;\n }\n\n /\n Set variant attribute for the Breadcrumbs element.\n * @param value\n /\n set variant(value) {\n this.setAttribute('variant', value);\n }\n\n /\n Get variant attribute for the Breadcrumbs element.\n * @returns {string}\n /\n get variant() {\n return this.getAttribute('variant') \|\| 'button';\n }\n\n /\n Get items before collapse attribute.\n * @param {string} value\n /\n set maxItems(value) {\n this.setAttribute('max-items', value \|\| 0);\n }\n\n /\n Get items before collapse attribute.\n * @returns {number}\n /\n get maxItems() {\n return +this.getAttribute('max-items' \|\| 0);\n }\n\n /\n Get items before collapse attribute.\n * @param value\n /\n set itemsBeforeCollapse(value) {\n this.setAttribute('items-before-collapse', value \|\| 1);\n }\n\n /\n Get items before collapse attribute.\n * @returns {number}\n /\n get itemsBeforeCollapse() {\n return +this.getAttribute('items-before-collapse') \|\| 1;\n }\n\n /\n Get items after collapse attribute.\n * @param value\n /\n set itemsAfterCollapse(value) {\n this.setAttribute('items-after-collapse', value \|\| 1);\n }\n\n /\n Get items after collapse attribute.\n * @returns {number}\n /\n get itemsAfterCollapse() {\n return +this.getAttribute('items-after-collapse') \|\| 1;\n }\n\n /\n Class name for the Breadcrumbs element.\n * @type {string}\n /\n className = 'Breadcrumbs';\n\n /\n Get CSS stylesheet for the Breadcrumbs element.\n * @static\n * @returns {object} styles - The CSS styles\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Get observed attributes for the Breadcrumb element.\n * @static\n * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n /\n static get observedAttributes() {\n return [];\n }\n\n /\n Setup attributes for the Breadcrumbs element.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Draw method for the Breadcrumbs element.\n * @returns {object} fragment - The document fragment\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('slot');\n\n fragment.appendChild(element);\n\n return fragment;\n }\n\n /\n Updates the breadcrumb elements after they are drawn on the page.\n * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs\n * if the total exceeds the specified maximum items.\n * @returns {void} This method does not return a value.\n /\n afterDraw() {\n let breadcrumbs = this.getBreadcrumbs();\n\n if (breadcrumbs.length === 0) return;\n\n let breadcrumb = breadcrumbs.findLast((e) => e);\n\n breadcrumb.setAttribute('last', true);\n\n const shouldCollapse =\n this.maxItems !== undefined &&\n breadcrumbs.length > this.maxItems &&\n this.itemsBeforeCollapse + this.itemsAfterCollapse <= this.maxItems;\n\n if (shouldCollapse) {\n breadcrumbs.forEach((b, index) => {\n if (index === this.itemsBeforeCollapse) {\n b.setAttribute('show-collapsed-indicator', true);\n }\n\n if (index >= this.itemsBeforeCollapse && index < breadcrumbs.length - this.itemsAfterCollapse) {\n b.setAttribute('collapsed', true);\n }\n });\n }\n }\n\n /\n Retrieves all breadcrumb elements within the current instance.\n * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.\n /\n getBreadcrumbs() {\n return Array.from(this.querySelectorAll('wje-breadcrumb')) \|\| [];\n }\n\n /\n Retrieves all breadcrumb elements that have the 'collapsed' attribute.\n * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.\n */\n getBreadcrumbsCollapsed() {\n return Array.from(this.querySelectorAll('wje-breadcrumb[collapsed]')) \|\| [];\n }\n}\n","import Breadcrumbs from './breadcrumbs.element.js';\n\nexport default Breadcrumbs;\n\nBreadcrumbs.define('wje-breadcrumbs', Breadcrumbs);\n"],"names":[],"mappings":";;;;;AA2Be,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/C,cAAc;AACV,UAAO;AA6EX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAvER,SAAK,OAAO;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,aAAa,SAAS,CAAC;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,CAAC,KAAK,aAAa,WAAgB;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,oBAAoB,OAAO;AAC3B,SAAK,aAAa,yBAAyB,SAAS,CAAC;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,sBAAsB;AACtB,WAAO,CAAC,KAAK,aAAa,uBAAuB,KAAK;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,mBAAmB,OAAO;AAC1B,SAAK,aAAa,wBAAwB,SAAS,CAAC;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,qBAAqB;AACrB,WAAO,CAAC,KAAK,aAAa,sBAAsB,KAAK;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,YAAY;AACR,QAAI,cAAc,KAAK,eAAgB;AAEvC,QAAI,YAAY,WAAW,EAAG;AAE9B,QAAI,aAAa,YAAY,SAAS,CAAC,MAAM,CAAC;AAE9C,eAAW,aAAa,QAAQ,IAAI;AAEpC,UAAM,iBACF,KAAK,aAAa,UAClB,YAAY,SAAS,KAAK,YAC1B,KAAK,sBAAsB,KAAK,sBAAsB,KAAK;AAE/D,QAAI,gBAAgB;AAChB,kBAAY,QAAQ,CAAC,GAAG,UAAU;AAC9B,YAAI,UAAU,KAAK,qBAAqB;AACpC,YAAE,aAAa,4BAA4B,IAAI;AAAA,QACnE;AAEgB,YAAI,SAAS,KAAK,uBAAuB,QAAQ,YAAY,SAAS,KAAK,oBAAoB;AAC3F,YAAE,aAAa,aAAa,IAAI;AAAA,QACpD;AAAA,MACA,CAAa;AAAA,IACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,iBAAiB;AACb,WAAO,MAAM,KAAK,KAAK,iBAAiB,gBAAgB,CAAC,KAAK,CAAE;AAAA,EACxE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,0BAA0B;AACtB,WAAO,MAAM,KAAK,KAAK,iBAAiB,2BAA2B,CAAC,KAAK,CAAE;AAAA,EACnF;AACA;~~ACnMA~~,YAAY,OAAO,mBAAmB,WAAW;"}
1	+ {"version":3,"file":"wje-breadcrumbs.js","sources":["../packages/wje-breadcrumbs/breadcrumbs.element.js","../packages/wje-breadcrumbs/breadcrumbs.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n * @documentation https://elements.webjet.sk/components/breadcrumbs\n * @status stable\n * @augments WJElement\n * @slot - The container for breadcrumb elements.\n * @csspart container - The component's container wrapper.\n * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.\n * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.\n * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.\n * @tag wje-breadcrumbs\n * @example\n * <!-- Example usage -->\n * <wje-breadcrumbs max-items=\"5\" items-before-collapse=\"2\" items-after-collapse=\"2\">\n * <wje-breadcrumb>Home</wje-breadcrumb>\n * <wje-breadcrumb>About</wje-breadcrumb>\n * <wje-breadcrumb>Services</wje-breadcrumb>\n * <wje-breadcrumb>Portfolio</wje-breadcrumb>\n * <wje-breadcrumb>Contact</wje-breadcrumb>\n * </wje-breadcrumbs>\n \n <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->\n /\n\nexport default class Breadcrumbs extends WJElement {\n /\n Breadcrumbs constructor method.\n * @class\n /\n constructor() {\n super();\n\n /\n Last breadcrumb flag\n * @type {boolean}\n /\n this.last = false;\n }\n\n /\n Set variant attribute for the Breadcrumbs element.\n * @param value\n /\n set variant(value) {\n this.setAttribute('variant', value);\n }\n\n /\n Get variant attribute for the Breadcrumbs element.\n * @returns {string}\n /\n get variant() {\n return this.getAttribute('variant') \|\| 'button';\n }\n\n /\n Get items before collapse attribute.\n * @param {string} value\n /\n set maxItems(value) {\n this.setAttribute('max-items', value \|\| 0);\n }\n\n /\n Get items before collapse attribute.\n * @returns {number}\n /\n get maxItems() {\n return +this.getAttribute('max-items' \|\| 0);\n }\n\n /\n Get items before collapse attribute.\n * @param value\n /\n set itemsBeforeCollapse(value) {\n this.setAttribute('items-before-collapse', value \|\| 1);\n }\n\n /\n Get items before collapse attribute.\n * @returns {number}\n /\n get itemsBeforeCollapse() {\n return +this.getAttribute('items-before-collapse') \|\| 1;\n }\n\n /\n Get items after collapse attribute.\n * @param value\n /\n set itemsAfterCollapse(value) {\n this.setAttribute('items-after-collapse', value \|\| 1);\n }\n\n /\n Get items after collapse attribute.\n * @returns {number}\n /\n get itemsAfterCollapse() {\n return +this.getAttribute('items-after-collapse') \|\| 1;\n }\n\n /\n Class name for the Breadcrumbs element.\n * @type {string}\n /\n className = 'Breadcrumbs';\n\n /\n Get CSS stylesheet for the Breadcrumbs element.\n * @static\n * @returns {object} styles - The CSS styles\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Get observed attributes for the Breadcrumb element.\n * @static\n * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n /\n static get observedAttributes() {\n return [];\n }\n\n /\n Setup attributes for the Breadcrumbs element.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({ role: 'navigation' });\n }\n\n /\n Draw method for the Breadcrumbs element.\n * @returns {object} fragment - The document fragment\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('slot');\n\n fragment.appendChild(element);\n\n return fragment;\n }\n\n /\n Updates the breadcrumb elements after they are drawn on the page.\n * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs\n * if the total exceeds the specified maximum items.\n * @returns {void} This method does not return a value.\n /\n afterDraw() {\n let breadcrumbs = this.getBreadcrumbs();\n\n if (breadcrumbs.length === 0) return;\n\n let breadcrumb = breadcrumbs.findLast((e) => e);\n\n breadcrumb.setAttribute('last', true);\n\n const shouldCollapse =\n this.maxItems !== undefined &&\n breadcrumbs.length > this.maxItems &&\n this.itemsBeforeCollapse + this.itemsAfterCollapse <= this.maxItems;\n\n if (shouldCollapse) {\n breadcrumbs.forEach((b, index) => {\n if (index === this.itemsBeforeCollapse) {\n b.setAttribute('show-collapsed-indicator', true);\n }\n\n if (index >= this.itemsBeforeCollapse && index < breadcrumbs.length - this.itemsAfterCollapse) {\n b.setAttribute('collapsed', true);\n }\n });\n }\n }\n\n /\n Retrieves all breadcrumb elements within the current instance.\n * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.\n /\n getBreadcrumbs() {\n return Array.from(this.querySelectorAll('wje-breadcrumb')) \|\| [];\n }\n\n /\n Retrieves all breadcrumb elements that have the 'collapsed' attribute.\n * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.\n */\n getBreadcrumbsCollapsed() {\n return Array.from(this.querySelectorAll('wje-breadcrumb[collapsed]')) \|\| [];\n }\n}\n","import Breadcrumbs from './breadcrumbs.element.js';\n\nexport default Breadcrumbs;\n\nBreadcrumbs.define('wje-breadcrumbs', Breadcrumbs);\n"],"names":[],"mappings":";;;;;AA2Be,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/C,cAAc;AACV,UAAO;AA6EX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAvER,SAAK,OAAO;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,aAAa,SAAS,CAAC;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,CAAC,KAAK,aAAa,WAAgB;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,oBAAoB,OAAO;AAC3B,SAAK,aAAa,yBAAyB,SAAS,CAAC;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,sBAAsB;AACtB,WAAO,CAAC,KAAK,aAAa,uBAAuB,KAAK;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,mBAAmB,OAAO;AAC1B,SAAK,aAAa,wBAAwB,SAAS,CAAC;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,qBAAqB;AACrB,WAAO,CAAC,KAAK,aAAa,sBAAsB,KAAK;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,EAAE,MAAM,aAAY,CAAE;AAAA,EAChD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,YAAY;AACR,QAAI,cAAc,KAAK,eAAgB;AAEvC,QAAI,YAAY,WAAW,EAAG;AAE9B,QAAI,aAAa,YAAY,SAAS,CAAC,MAAM,CAAC;AAE9C,eAAW,aAAa,QAAQ,IAAI;AAEpC,UAAM,iBACF,KAAK,aAAa,UAClB,YAAY,SAAS,KAAK,YAC1B,KAAK,sBAAsB,KAAK,sBAAsB,KAAK;AAE/D,QAAI,gBAAgB;AAChB,kBAAY,QAAQ,CAAC,GAAG,UAAU;AAC9B,YAAI,UAAU,KAAK,qBAAqB;AACpC,YAAE,aAAa,4BAA4B,IAAI;AAAA,QACnE;AAEgB,YAAI,SAAS,KAAK,uBAAuB,QAAQ,YAAY,SAAS,KAAK,oBAAoB;AAC3F,YAAE,aAAa,aAAa,IAAI;AAAA,QACpD;AAAA,MACA,CAAa;AAAA,IACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,iBAAiB;AACb,WAAO,MAAM,KAAK,KAAK,iBAAiB,gBAAgB,CAAC,KAAK,CAAE;AAAA,EACxE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,0BAA0B;AACtB,WAAO,MAAM,KAAK,KAAK,iBAAiB,2BAA2B,CAAC,KAAK,CAAE;AAAA,EACnF;AACA;ACpMA,YAAY,OAAO,mBAAmB,WAAW;"}

package/dist/{packages/wje-button → wje-button}/button.element.d.ts RENAMED Viewed

@@ -40,7 +40,6 @@ export default class Button extends WJElement {
      * @type {boolean}
      */
     static formAssociated: boolean;
-    internals_: ElementInternals;
     /**
      * Dependencies of the Button element.
      * @type {object}
@@ -166,6 +165,7 @@ export default class Button extends WJElement {
      * @returns {object} An object containing key-value pairs of custom event parameters.
      */
     get customEventParameters(): object;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     /**
      * @summary Callback function that is called when the custom element is associated with a form.
      * This function sets the internal `_form` property to the associated form.
@@ -200,5 +200,9 @@ export default class Button extends WJElement {
      * Toggle states method for the Button element.
      */
     toggleStates: () => void;
+    /**
+     * Syncs ARIA attributes on the host element.
+     */
+    syncAria(): void;
     #private;
 }

package/dist/{packages/wje-button-group → wje-button-group}/button-group.element.d.ts RENAMED Viewed

@@ -73,6 +73,10 @@ export default class ButtonGroup extends WJElement {
      * After draw method for the ButtonGroup element.
      */
     afterDraw(): void;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
     /**
      * Find button method to find the button element.
      * @param {object} el The element

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

@@ -97,6 +97,7 @@ class ButtonGroup extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draw method for the ButtonGroup element.
@@ -123,6 +124,7 @@ class ButtonGroup extends WJElement {
    * After draw method for the ButtonGroup element.
    */
   afterDraw() {
+    this.syncAria();
     const slottedElements = [...this.slotElement.assignedElements({ flatten: true })];
     slottedElements.forEach((el) => {
       let index = slottedElements.indexOf(el);
@@ -141,6 +143,14 @@ class ButtonGroup extends WJElement {
       }
     });
   }
+  /**
+   * Sync ARIA attributes on host.
+   */
+  syncAria() {
+    if (!this.hasAttribute("role")) {
+      this.setAriaState({ role: "group" });
+    }
+  }
   /**
    * Find button method to find the button element.
    * @param {object} el The element

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-button-group.js","sources":["../packages/wje-button-group/button-group.element.js","../packages/wje-button-group/button-group.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary ButtonGroup class\n * @class\n * @augments WJElement\n * @csspart native - The component's native wrapper.\n * @slot - The button group main content.\n * @csspart native - The component's native wrapper.\n /\n\nexport default class ButtonGroup extends WJElement {\n /\n ButtonGroup constructor method.\n * @class\n /\n constructor() {\n super();\n }\n\n /\n Sets the \"active\" attribute to indicate the active state.\n * @param {boolean\|string\|number} value The value to set for the \"active\" attribute, indicating the active state.\n /\n set active(value) {\n this.setAttribute('active', value);\n }\n\n /\n Retrieves the value of the 'active' attribute.\n * If the attribute is not set, it returns false.\n * @returns {string\|boolean} The value of the 'active' attribute or false if it is not set.\n /\n get active() {\n return +this.getAttribute('active') \|\| false;\n }\n\n /\n Sets the color attribute of the element.\n * @param {string} value The value to set for the color attribute.\n /\n set color(value) {\n this.setAttribute('color', value);\n }\n\n /\n Retrieves the current value of the 'color' attribute.\n * If the 'color' attribute is not set, it defaults to 'primary'.\n * @returns {string} The value of the 'color' attribute or the default value 'primary'.\n /\n get color() {\n return this.getAttribute('color') \|\| 'primary';\n }\n\n /\n Sets the round attribute for the element.\n * @param {string} value The value to set for the round attribute.\n /\n set round(value) {\n this.setAttribute('round', value);\n }\n\n /\n Returns whether the element has the 'round' attribute.\n * @returns {boolean} True if the 'round' attribute is present, otherwise false.\n /\n get round() {\n return this.hasAttribute('round');\n }\n\n /\n Sets the 'fill' attribute of the element.\n * @param {string} value The value to assign to the 'fill' attribute.\n /\n set fill(value) {\n this.setAttribute('fill', value);\n }\n\n /\n Retrieves the 'fill' attribute of the element. If the 'fill' attribute is not set,\n * it returns the default value 'link'.\n * @returns {string} The value of the 'fill' attribute, or 'link' if the attribute is not present.\n /\n get fill() {\n return this.getAttribute('fill') \|\| 'link';\n }\n\n /\n Class name for the ButtonGroup element\n * @type {string}\n /\n className = 'ButtonGroup';\n\n /\n Get CSS stylesheet for the ButtonGroup element.\n * @static\n * @returns {object} styles - The CSS styles\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Get observed attributes for the ButtonGroup element.\n * @static\n * @returns {Array<string>} observedAttributes - The observed attributes array\n /\n static get observedAttributes() {\n return [];\n }\n\n /\n Setup attributes for the ButtonGroup element.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Draw method for the ButtonGroup element.\n * @returns {object} fragment - The document fragment\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('div');\n element.classList.add('native-button-group');\n element.setAttribute('part', 'native');\n\n let content = document.createElement('div');\n content.classList.add('wje-button-group-content');\n\n let border = document.createElement('div');\n border.classList.add('wje-button-group-border');\n\n let slot = document.createElement('slot');\n\n content.append(slot);\n\n element.append(border);\n element.append(content);\n\n fragment.append(element);\n\n this.slotElement = slot;\n\n return fragment;\n }\n\n /\n After draw method for the ButtonGroup element.\n /\n afterDraw() {\n const slottedElements = [...this.slotElement.assignedElements({ flatten: true })];\n\n slottedElements.forEach((el) => {\n let index = slottedElements.indexOf(el);\n let button = this.findButton(el);\n if (button) {\n button.setAttribute('fill', this.fill);\n if(this.round) {\n button.round = true;\n }\n\n event.addListener(button, 'wje-button:click', null,(e) => {\n this.toggle(e.target, slottedElements, index);\n });\n\n if(this.active && this.active === index + 1) {\n this.updateButtonState(button, 'fill')\n }\n }\n });\n }\n\n /\n Find button method to find the button element.\n * @param {object} el The element\n * @returns {object} button - The button element\n /\n findButton(el) {\n const selector = 'wje-button';\n\n return el.closest(selector) ?? el.querySelector(selector);\n }\n\n /\n Toggles the state of a group of buttons based on the active button.\n * @param {object} activeButton The button that is currently active.\n * @param {Array<object>} buttons An array of button objects to be toggled.\n * @returns {void} This method does not return a value.\n /\n toggle(activeButton, buttons, index) {\n this.active = index + 1;\n buttons.forEach(button => {\n const mode = button === activeButton ? 'fill' : 'color';\n this.updateButtonState(button, mode);\n });\n }\n\n /\n Updates the state of a button by removing one mode attribute and setting another mode attribute.\n * @param {HTMLElement} button The button element whose state is to be updated.\n * @param {string} modeToRemove The mode attribute to be removed from the button. Expected values are 'color' or 'fill'.\n * @returns {void}\n /\n updateButtonState(button, modeToRemove) {\n button.removeAttribute(modeToRemove);\n\n const modeToSet = modeToRemove === 'color' ? 'fill' : 'color';\n button.setAttribute(modeToSet, this[modeToSet]);\n }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport ButtonGroup from './button-group.element.js';\n\n// export from \"./button-group.element.js\";\nexport default ButtonGroup;\n\nWJElement.define('wje-button-group', ButtonGroup);\n"],"names":[],"mappings":";;;;;;AAYe,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/C,cAAc;AACV,UAAO;AA0EX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EAzEhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO,OAAO;AACd,SAAK,aAAa,UAAU,KAAK;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,SAAS;AACT,WAAO,CAAC,KAAK,aAAa,QAAQ,KAAK;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,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,KAAK;AAC1C,YAAQ,UAAU,IAAI,qBAAqB;AAC3C,YAAQ,aAAa,QAAQ,QAAQ;AAErC,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,UAAU,IAAI,0BAA0B;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,yBAAyB;AAE9C,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,YAAQ,OAAO,IAAI;AAEnB,YAAQ,OAAO,MAAM;AACrB,YAAQ,OAAO,OAAO;AAEtB,aAAS,OAAO,OAAO;AAEvB,SAAK,cAAc;AAEnB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,UAAM,kBAAkB,CAAC,GAAG,KAAK,YAAY,iBAAiB,EAAE,SAAS,KAAI,CAAE,CAAC;AAEhF,oBAAgB,QAAQ,CAAC,OAAO;AAC5B,UAAI,QAAQ,gBAAgB,QAAQ,EAAE;AACtC,UAAI,SAAS,KAAK,WAAW,EAAE;AAC/B,UAAI,QAAQ;AACR,eAAO,aAAa,QAAQ,KAAK,IAAI;AACrC,YAAG,KAAK,OAAO;AACX,iBAAO,QAAQ;AAAA,QACnC;AAEgB,cAAM,YAAY,QAAQ,oBAAoB,MAAK,CAAC,MAAM;AACtD,eAAK,OAAO,EAAE,QAAQ,iBAAiB,KAAK;AAAA,QAChE,CAAiB;AAED,YAAG,KAAK,UAAU,KAAK,WAAW,QAAQ,GAAG;AACzC,eAAK,kBAAkB,QAAQ,MAAM;AAAA,QACzD;AAAA,MACA;AAAA,IACA,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,IAAI;AACX,UAAM,WAAW;AAEjB,WAAO,GAAG,QAAQ,QAAQ,KAAK,GAAG,cAAc,QAAQ;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,OAAO,cAAc,SAAS,OAAO;AACjC,SAAK,SAAS,QAAQ;AACtB,YAAQ,QAAQ,YAAU;AACtB,YAAM,OAAO,WAAW,eAAe,SAAS;AAChD,WAAK,kBAAkB,QAAQ,IAAI;AAAA,IAC/C,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,kBAAkB,QAAQ,cAAc;AACpC,WAAO,gBAAgB,YAAY;AAEnC,UAAM,YAAY,iBAAiB,UAAU,SAAS;AACtD,WAAO,aAAa,WAAW,KAAK,SAAS,CAAC;AAAA,EACtD;AACA;~~AC/MA~~,UAAU,OAAO,oBAAoB,WAAW;"}
1	+ {"version":3,"file":"wje-button-group.js","sources":["../packages/wje-button-group/button-group.element.js","../packages/wje-button-group/button-group.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary ButtonGroup class\n * @class\n * @augments WJElement\n * @csspart native - The component's native wrapper.\n * @slot - The button group main content.\n * @csspart native - The component's native wrapper.\n /\n\nexport default class ButtonGroup extends WJElement {\n /\n ButtonGroup constructor method.\n * @class\n /\n constructor() {\n super();\n }\n\n /\n Sets the \"active\" attribute to indicate the active state.\n * @param {boolean\|string\|number} value The value to set for the \"active\" attribute, indicating the active state.\n /\n set active(value) {\n this.setAttribute('active', value);\n }\n\n /\n Retrieves the value of the 'active' attribute.\n * If the attribute is not set, it returns false.\n * @returns {string\|boolean} The value of the 'active' attribute or false if it is not set.\n /\n get active() {\n return +this.getAttribute('active') \|\| false;\n }\n\n /\n Sets the color attribute of the element.\n * @param {string} value The value to set for the color attribute.\n /\n set color(value) {\n this.setAttribute('color', value);\n }\n\n /\n Retrieves the current value of the 'color' attribute.\n * If the 'color' attribute is not set, it defaults to 'primary'.\n * @returns {string} The value of the 'color' attribute or the default value 'primary'.\n /\n get color() {\n return this.getAttribute('color') \|\| 'primary';\n }\n\n /\n Sets the round attribute for the element.\n * @param {string} value The value to set for the round attribute.\n /\n set round(value) {\n this.setAttribute('round', value);\n }\n\n /\n Returns whether the element has the 'round' attribute.\n * @returns {boolean} True if the 'round' attribute is present, otherwise false.\n /\n get round() {\n return this.hasAttribute('round');\n }\n\n /\n Sets the 'fill' attribute of the element.\n * @param {string} value The value to assign to the 'fill' attribute.\n /\n set fill(value) {\n this.setAttribute('fill', value);\n }\n\n /\n Retrieves the 'fill' attribute of the element. If the 'fill' attribute is not set,\n * it returns the default value 'link'.\n * @returns {string} The value of the 'fill' attribute, or 'link' if the attribute is not present.\n /\n get fill() {\n return this.getAttribute('fill') \|\| 'link';\n }\n\n /\n Class name for the ButtonGroup element\n * @type {string}\n /\n className = 'ButtonGroup';\n\n /\n Get CSS stylesheet for the ButtonGroup element.\n * @static\n * @returns {object} styles - The CSS styles\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Get observed attributes for the ButtonGroup element.\n * @static\n * @returns {Array<string>} observedAttributes - The observed attributes array\n /\n static get observedAttributes() {\n return [];\n }\n\n /\n Setup attributes for the ButtonGroup element.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /\n Draw method for the ButtonGroup element.\n * @returns {object} fragment - The document fragment\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('div');\n element.classList.add('native-button-group');\n element.setAttribute('part', 'native');\n\n let content = document.createElement('div');\n content.classList.add('wje-button-group-content');\n\n let border = document.createElement('div');\n border.classList.add('wje-button-group-border');\n\n let slot = document.createElement('slot');\n\n content.append(slot);\n\n element.append(border);\n element.append(content);\n\n fragment.append(element);\n\n this.slotElement = slot;\n\n return fragment;\n }\n\n /\n After draw method for the ButtonGroup element.\n /\n afterDraw() {\n this.syncAria();\n const slottedElements = [...this.slotElement.assignedElements({ flatten: true })];\n\n slottedElements.forEach((el) => {\n let index = slottedElements.indexOf(el);\n let button = this.findButton(el);\n if (button) {\n button.setAttribute('fill', this.fill);\n if(this.round) {\n button.round = true;\n }\n\n event.addListener(button, 'wje-button:click', null,(e) => {\n this.toggle(e.target, slottedElements, index);\n });\n\n if(this.active && this.active === index + 1) {\n this.updateButtonState(button, 'fill')\n }\n }\n });\n }\n\n /\n Sync ARIA attributes on host.\n /\n syncAria() {\n if (!this.hasAttribute('role')) {\n this.setAriaState({ role: 'group' });\n }\n }\n\n /\n Find button method to find the button element.\n * @param {object} el The element\n * @returns {object} button - The button element\n /\n findButton(el) {\n const selector = 'wje-button';\n\n return el.closest(selector) ?? el.querySelector(selector);\n }\n\n /\n Toggles the state of a group of buttons based on the active button.\n * @param {object} activeButton The button that is currently active.\n * @param {Array<object>} buttons An array of button objects to be toggled.\n * @returns {void} This method does not return a value.\n /\n toggle(activeButton, buttons, index) {\n this.active = index + 1;\n buttons.forEach(button => {\n const mode = button === activeButton ? 'fill' : 'color';\n this.updateButtonState(button, mode);\n });\n }\n\n /\n Updates the state of a button by removing one mode attribute and setting another mode attribute.\n * @param {HTMLElement} button The button element whose state is to be updated.\n * @param {string} modeToRemove The mode attribute to be removed from the button. Expected values are 'color' or 'fill'.\n * @returns {void}\n /\n updateButtonState(button, modeToRemove) {\n button.removeAttribute(modeToRemove);\n\n const modeToSet = modeToRemove === 'color' ? 'fill' : 'color';\n button.setAttribute(modeToSet, this[modeToSet]);\n }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport ButtonGroup from './button-group.element.js';\n\n// export from \"./button-group.element.js\";\nexport default ButtonGroup;\n\nWJElement.define('wje-button-group', ButtonGroup);\n"],"names":[],"mappings":"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"}

package/dist/wje-button.js CHANGED Viewed

@@ -11,7 +11,7 @@ var _Button_instances, populateCustomEvent_fn;
 import { b as bindRouterLinks } from "./router-links-CJnOdbas.js";
 import { bool } from "./utils.js";
 import WJElement from "./wje-element.js";
-import { I as Icon } from "./icon-DY5AZ6xM.js";
+import { I as Icon } from "./icon-DVyMc4Wv.js";
 import { WjElementUtils } from "./element-utils.js";
 import { event } from "./event.js";
 const styles = "/*\n[ WJ Button ]\n*/\n\n/*PRIMARY*/\n.wje-button-solid.wje-color-primary {\n    background-color: var(--wje-color-primary-9);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-primary {\n    background-color: var(--wje-color-primary-1);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-primary-9);\n}\n\n.wje-button-link.wje-color-primary {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n.wje-button-solid.wje-color-complete {\n    background-color: var(--wje-color-complete-9);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-complete {\n    background-color: var(--wje-color-complete-1);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-complete-9);\n}\n\n.wje-button-link.wje-color-complete {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n.wje-button-solid.wje-color-success {\n    background-color: var(--wje-color-success-9);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-success {\n    background-color: var(--wje-color-success-1);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-success-9);\n}\n\n.wje-button-link.wje-color-success {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n.wje-button-solid.wje-color-warning {\n    background-color: var(--wje-color-warning-9);\n    border-color: var(--wje-color-warning-9);\n    color: var(--wje-color-black);\n}\n\n.wje-button-outline.wje-color-warning {\n    background-color: var(--wje-color-warning-1);\n    border-color: var(--wje-color-warning-11);\n    color: var(--wje-color-warning-11);\n}\n\n.wje-button-link.wje-color-warning {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-warning-11);\n}\n\n/*DANGER*/\n.wje-button-solid.wje-color-danger {\n    background-color: var(--wje-color-danger-9);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-danger {\n    background-color: var(--wje-color-danger-1);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-danger-9);\n}\n\n.wje-button-link.wje-color-danger {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-danger-9);\n}\n\n/*NEUTRAL*/\n.wje-button-solid.wje-color-info {\n    background-color: var(--wje-color-contrast-9);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-info {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-9);\n}\n\n.wje-button-link.wje-color-info {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-contrast-9);\n}\n\n/*DEFAULT*/\n.wje-button-solid.wje-color-default {\n    background-color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-contrast-3);\n    color: var(--wje-color-contrast-11);\n}\n\n.wje-button-outline.wje-color-default {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-5);\n    color: var(--wje-color-contrast-11);\n}\n\n.wje-button-link.wje-color-default {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-contrast-11);\n}\n\n:host {\n    --wje-padding-top: 0.4rem;\n    --wje-padding-start: 0.5rem;\n    --wje-padding-end: 0.5rem;\n    --wje-padding-bottom: 0.4rem;\n\n    display: inline-flex;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n    margin-inline: var(--wje-button-margin-inline);\n}\n\n:host(.wje-button-group-button) {\n    display: block;\n}\n\n.native-button {\n    font-family: var(--wje-font-family);\n    font-size: var(--wje-font-size);\n    display: flex;\n    position: relative;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n    /*overflow: hidden;*/ /* Sposobovalo problemy s badge a tooltip */\n    border-width: var(--wje-button-border-width);\n    border-style: var(--wje-button-border-style);\n    border-color: var(--wje-button-border-color);\n    background-color: transparent;\n    /*color: var(--wje-button-color);*/\n    line-height: 1;\n    contain: layout style;\n    cursor: pointer;\n    z-index: 0;\n    box-sizing: border-box;\n    appearance: none;\n    margin: 0;\n    border-radius: var(--wje-button-border-radius);\n    padding-top: var(--wje-padding-top);\n    padding-bottom: var(--wje-padding-bottom);\n    padding-inline: var(--wje-padding-start) var(--wje-padding-end);\n    white-space: nowrap;\n}\n\n.native-button:hover {\n    outline-style: solid;\n    outline-width: var(--wje-button-outline-width);\n    transition: outline-width 0.1s linear;\n}\n\n@media (any-hover: hover) {\n    .wje-button-solid.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-9);\n        border-color: var(--wje-color-primary-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-primary-2);\n    }\n\n    .wje-button-outline.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-1);\n        border-color: var(--wje-color-primary-9);\n        color: var(--wje-color-primary-9);\n        outline-color: var(--wje-color-primary-2);\n    }\n\n    .wje-button-link.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-1);\n        border-color: transparent;\n        color: var(--wje-color-primary-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-9);\n        border-color: var(--wje-color-complete-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-complete-2);\n    }\n\n    .wje-button-outline.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-1);\n        border-color: var(--wje-color-complete-9);\n        color: var(--wje-color-complete-9);\n        outline-color: var(--wje-color-complete-2);\n    }\n\n    .wje-button-link.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-1);\n        border-color: transparent;\n        color: var(--wje-color-complete-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-success:hover {\n        background-color: var(--wje-color-success-9);\n        border-color: var(--wje-color-success-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-success-2);\n    }\n\n    .wje-button-outline.wje-color-success:hover {\n        background-color: var(--wje-color-success-1);\n        border-color: var(--wje-color-success-9);\n        color: var(--wje-color-success-9);\n        outline-color: var(--wje-color-success-2);\n    }\n\n    .wje-button-link.wje-color-success:hover {\n        background-color: var(--wje-color-success-1);\n        border-color: transparent;\n        color: var(--wje-color-success-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-9);\n        border-color: var(--wje-color-warning-9);\n        color: var(--wje-color-black);\n        outline-color: var(--wje-color-warning-2);\n    }\n\n    .wje-button-outline.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-1);\n        border-color: var(--wje-color-warning-11);\n        color: var(--wje-color-warning-11);\n        outline-color: var(--wje-color-warning-2);\n    }\n\n    .wje-button-link.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-1);\n        border-color: transparent;\n        color: var(--wje-color-warning-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-9);\n        border-color: var(--wje-color-danger-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-danger-2);\n    }\n\n    .wje-button-outline.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-1);\n        border-color: var(--wje-color-danger-9);\n        color: var(--wje-color-danger-9);\n        outline-color: var(--wje-color-danger-2);\n    }\n\n    .wje-button-link.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-1);\n        border-color: transparent;\n        color: var(--wje-color-danger-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-9);\n        border-color: var(--wje-color-contrast-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-outline.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-1);\n        border-color: var(--wje-color-contrast-9);\n        color: var(--wje-color-contrast-9);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-link.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-3);\n        border-color: transparent;\n        color: var(--wje-color-contrast-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-0);\n        border-color: var(--wje-color-contrast-3);\n        color: var(--wje-color-contrast-11);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-outline.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-2);\n        border-color: var(--wje-color-contrast-5);\n        color: var(--wje-color-contrast-11);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-link.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-3);\n        border-color: transparent;\n        color: var(--wje-color-contrast-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n}\n\n.button-inner {\n    display: flex;\n    position: relative;\n    flex-flow: row nowrap;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    line-height: normal;\n}\n\n/*\n[ Link ]\n*/\n\n.wje-button-link {\n    border-width: var(--wje-button-border-width);\n    border-radius: var(--wje-button-border-radius);\n    border-color: transparent;\n    background-color: transparent;\n}\n\n/*\n[ Disabled ]\n*/\n\n.wje-button-disabled {\n    cursor: default;\n    opacity: 0.5;\n    pointer-events: none;\n}\n\n/*\n[ Round ]\n*/\n\n:host([round]) .native-button {\n    border-radius: var(--wje-border-radius-pill);\n}\n\n:host([circle]) .native-button {\n    border-radius: var(--wje-border-radius-circle);\n    aspect-ratio: 1/1;\n    width: 1.988rem;\n    display: flex;\n    align-items: center;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n:host([size='small']) .native-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n}\n\n:host([size='large']) .native-button {\n    --wje-padding-top: 0.6rem;\n    --wje-padding-start: 0.7rem;\n    --wje-padding-end: 0.7rem;\n    --wje-padding-bottom: 0.6rem;\n}\n\n:host([size='small'][circle]) .native-button {\n    width: 1.688rem;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n:host([size='large'][circle]) .native-button {\n    width: 2.388rem;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n::slotted(wje-icon[slot='start']) {\n    margin: 0 0.3rem 0 0;\n}\n\n::slotted(wje-icon[slot='end']) {\n    margin: 0 -0.2rem 0 0.3rem;\n}\n\n:host(:not([only-caret])) slot[name='caret'] {\n    padding: 0 0 0 0.3rem;\n}\n\n:host([only-caret]) {\n    .native-button {\n        aspect-ratio: 1/1;\n        width: 1.988rem;\n        display: flex;\n        align-items: center;\n    }\n    slot[name='caret'] {\n        padding: 0;\n        display: block;\n    }\n}\n\n::slotted([slot='toggle']) {\n    display: none;\n}\n\n::slotted([slot='toggle'].show) {\n    display: block;\n}\n";
@@ -55,8 +55,8 @@ class Button extends WJElement {
           this.setAttribute("value", index === 0 ? "on" : "off");
         }
       });
+      this.syncAria();
     });
-    this.internals_ = this.attachInternals();
   }
   /**
    * Properties of the element Button.
@@ -250,7 +250,14 @@ class Button extends WJElement {
    * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.
    */
   static get observedAttributes() {
-    return ["disabled", "color"];
+    return ["disabled", "color", "value", "active", "href"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    var _a, _b;
+    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
+    if (["disabled", "value", "active", "href"].includes(name)) {
+      (_b = this.syncAria) == null ? void 0 : _b.call(this);
+    }
   }
   /**
    * @summary Callback function that is called when the custom element is associated with a form.
@@ -277,6 +284,7 @@ class Button extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draw method for the Button element.
@@ -382,14 +390,17 @@ class Button extends WJElement {
       });
     if (this.type === "submit") {
       event.addListener(this, "click", "wje-button:submit", () => {
-        event.dispatchCustomEvent(this.internals_.form, "submit", {});
+        var _a;
+        event.dispatchCustomEvent((_a = this.internals) == null ? void 0 : _a.form, "submit", {});
       });
     }
     if (this.type === "reset") {
       event.addListener(this, "click", "wje-button:reset", () => {
-        this.internals_.form.reset();
+        var _a;
+        (_a = this.internals) == null ? void 0 : _a.form.reset();
       });
     }
+    this.syncAria();
   }
   /**
    * Before disconnect method for the Button element.
@@ -405,6 +416,19 @@ class Button extends WJElement {
     this.removeEventListener("click", this.eventDialogOpen);
     (_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
   }
+  /**
+   * Syncs ARIA attributes on the host element.
+   */
+  syncAria() {
+    const isLink = this.hasAttribute("href");
+    const isToggle = !!this.hasToggle;
+    const pressed = isToggle && !isLink ? this.getAttribute("value") === "on" : void 0;
+    this.setAriaState({
+      role: isLink ? "link" : "button",
+      disabled: this.disabled,
+      pressed
+    });
+  }
 }
 _Button_instances = new WeakSet();
 /**