wj-elements 0.4.1 → 0.4.3
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.
- package/dist/base-path.js.map +1 -1
- package/dist/packages/wje-accordion-item/accordion-item.element.d.ts +2 -2
- package/dist/packages/wje-avatar/service/service.d.ts +0 -1
- package/dist/packages/wje-breadcrumb/breadcrumb.element.d.ts +1 -2
- package/dist/packages/wje-carousel/carousel.element.d.ts +6 -6
- package/dist/packages/wje-copy-button/copy-button.element.d.ts +5 -3
- package/dist/packages/wje-dropdown/dropdown.element.d.ts +29 -1
- package/dist/packages/wje-element/element.d.ts +1 -1
- package/dist/packages/wje-input/input.element.d.ts +1 -0
- package/dist/packages/wje-option/option.element.d.ts +3 -0
- package/dist/packages/wje-select/select.element.d.ts +17 -0
- package/dist/{popup.element-DklicGea.js → popup.element-C8-g3WLs.js} +3 -3
- package/dist/{popup.element-DklicGea.js.map → popup.element-C8-g3WLs.js.map} +1 -1
- package/dist/wje-accordion-item.js.map +1 -1
- package/dist/wje-avatar.js.map +1 -1
- package/dist/wje-breadcrumb.js +0 -1
- package/dist/wje-breadcrumb.js.map +1 -1
- package/dist/wje-carousel.js +6 -6
- package/dist/wje-carousel.js.map +1 -1
- package/dist/wje-copy-button.js +21 -12
- package/dist/wje-copy-button.js.map +1 -1
- package/dist/wje-dropdown.js +67 -2
- package/dist/wje-dropdown.js.map +1 -1
- package/dist/wje-element.js +1 -1
- package/dist/wje-element.js.map +1 -1
- package/dist/wje-file-upload.js +0 -1
- package/dist/wje-file-upload.js.map +1 -1
- package/dist/wje-input.js +50 -6
- package/dist/wje-input.js.map +1 -1
- package/dist/wje-master.js +1 -1
- package/dist/wje-option.js +8 -2
- package/dist/wje-option.js.map +1 -1
- package/dist/wje-options.js +15 -2
- package/dist/wje-options.js.map +1 -1
- package/dist/wje-popup.js +1 -1
- package/dist/wje-select.js +187 -28
- package/dist/wje-select.js.map +1 -1
- package/dist/wje-tab.js.map +1 -1
- package/dist/wje-tooltip.js +1 -1
- package/package.json +5 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-accordion-item.js","sources":["../packages/wje-accordion-item/accordion-item.element.js","../packages/wje-accordion-item/accordion-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Accordion Item element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/accordion-item\n * @status stable\n * @augments WJElement\n * @attribute {string} color - Applies a contextual color variant such as `primary`, `success`, `danger`, `warning`, `info`, or `complete`.\n * @slot headline - Slot for the clickable accordion headline content.\n * @slot description - Slot for supporting text shown below the headline.\n * @slot toggle - Slot for a custom toggle icon or toggle content.\n * @slot content - Slot for the expandable panel body.\n * @csspart native - The wrapper of the whole accordion item.\n * @csspart headline - The clickable headline area.\n * @csspart description - The description slot container inside the headline.\n * @csspart toggle - The toggle slot container and fallback chevron area.\n * @csspart content - The expandable content panel.\n * @cssproperty [--wje-accordion-background=var(--wje-color-contrast-0)] - Background color of the collapsed item wrapper.\n * @cssproperty [--wje-accordion-border=var(--wje-color-contrast-0)] - Border color of the collapsed item wrapper.\n * @cssproperty [--wje-accordion-border-radius=var(--wje-border-radius-large)] - Border radius of the item wrapper.\n * @cssproperty [--wje-accordion-background-hover=var(--wje-color-contrast-1)] - Background color used when the headline is hovered.\n * @cssproperty [--wje-accordion-border-hover=var(--wje-color-contrast-2)] - Border color used when the headline is hovered.\n * @cssproperty [--wje-accordion-background-expanded=var(--wje-color-contrast-0)] - Background color of the expanded item wrapper.\n * @cssproperty [--wje-accordion-border-expanded=var(--wje-color-contrast-0)] - Border color of the expanded item wrapper.\n * @cssproperty [--wje-accordion-headline-color=var(--wje-color-contrast-11)] - Text color of the headline area.\n * @cssproperty [--wje-accordion-content-color=var(--wje-color-contrast-6)] - Text color of the expandable content area.\n * @cssproperty [--wje-accordion-marker-rotate=0deg] - Rotation applied to the toggle marker icon.\n * @fires wje-accordion-item:open - Dispatched when the item is expanded.\n * @fires wje-accordion-item:close - Dispatched when the item is collapsed.\n * @tag wje-accordion-item\n */\nexport default class AccordionItem extends WJElement {\n static _instanceId = 0;\n /**\n * Constructor for the AccordionItem class.\n */\n constructor() {\n super();\n this._instanceId = ++AccordionItem._instanceId;\n }\n\n /**\n * The class name for the Accordion Item element.\n * @type {string}\n */\n className = 'AccordionItem';\n\n /**\n * Getter for the CSS stylesheet.\n * @returns {object} The styles for the Accordion Item element.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observed attributes.\n * @returns {Array} An array containing the name of the observed attribute.\n */\n static get observedAttributes() {\n return [];\n }\n\n /**\n * Method to setup attributes for the Accordion Item element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.\n * @returns {object} The document fragment containing the drawn element.\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-accordion-item');\n\n let headline = document.createElement('div');\n headline.setAttribute('part', 'headline');\n headline.classList.add('headline');\n const baseId = this.id || `wje-accordion-item-${this._instanceId}`;\n headline.id = `${baseId}-header`;\n\n let headlineDescription = document.createElement('slot');\n headlineDescription.setAttribute('part', 'description');\n headlineDescription.setAttribute('name', 'description');\n\n let slotHeadline = document.createElement('slot');\n slotHeadline.setAttribute('name', 'headline');\n\n let toggle = document.createElement('slot');\n toggle.setAttribute('part', 'toggle');\n toggle.setAttribute('name', 'toggle');\n\n let mark = document.createElement('wje-icon');\n mark.setAttribute('name', 'chevron-down');\n\n let content = document.createElement('div');\n content.setAttribute('part', 'content');\n content.setAttribute('id', `${baseId}-panel`);\n content.setAttribute('role', 'region');\n content.setAttribute('aria-labelledby', headline.id);\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'content');\n\n toggle.appendChild(mark);\n\n headline.appendChild(slotHeadline);\n headline.appendChild(toggle);\n headline.appendChild(headlineDescription);\n\n content.appendChild(slot);\n\n native.appendChild(headline);\n native.appendChild(content);\n\n fragment.appendChild(native);\n\n this.headline = headline;\n this.toggle = toggle;\n this.content = content;\n\n return fragment;\n }\n\n /**\n * Method to execute after the Accordion Item element is drawn.\n */\n afterDraw() {\n if (!this.classList.contains('expanded')) this.classList.add('collapsed');\n\n this.headline.setAttribute('role', 'button');\n this.headline.setAttribute('tabindex', '0');\n this.headline.setAttribute('aria-controls', this.content.id);\n this.headline.setAttribute('aria-expanded', this.classList.contains('expanded') ? 'true' : 'false');\n\n this.headline.addEventListener('click', () => {\n if (this.classList.contains('collapsed')) {\n event.dispatchCustomEvent(this, 'wje-accordion-item:open');\n this.toggle.style.setProperty('--wje-accordion-marker-rotate', '180deg');\n this.expand();\n } else {\n event.dispatchCustomEvent(this, 'wje-accordion-item:close');\n this.toggle.style.setProperty('--wje-accordion-marker-rotate', '0deg');\n this.collapse();\n }\n });\n\n this.headline.addEventListener('keydown', (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.headline.click();\n }\n });\n }\n\n /**\n * Collapses the accordion item and updates the headline ARIA state.\n */\n collapse() {\n this.classList.remove('expanded');\n this.classList.add('collapsed');\n this.headline?.setAttribute('aria-expanded', 'false');\n }\n\n /**\n * Expands the accordion item and updates the headline ARIA state.\n */\n expand() {\n this.classList.remove('collapsed');\n this.classList.add('expanded');\n this.headline?.setAttribute('aria-expanded', 'true');\n }\n}\n","import AccordionItem from './accordion-item.element.js';\n\nexport default AccordionItem;\n\nAccordionItem.define('wje-accordion-item', AccordionItem);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-accordion-item.js","sources":["../packages/wje-accordion-item/accordion-item.element.js","../packages/wje-accordion-item/accordion-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Accordion Item element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/accordion-item\n * @status stable\n * @augments WJElement\n * @attribute {string} color - Applies a contextual color variant such as `primary`, `success`, `danger`, `warning`, `info`, or `complete`.\n * @slot headline - Slot for the clickable accordion headline content.\n * @slot description - Slot for supporting text shown below the headline.\n * @slot toggle - Slot for a custom toggle icon or toggle content.\n * @slot content - Slot for the expandable panel body.\n * @csspart native - The wrapper of the whole accordion item.\n * @csspart headline - The clickable headline area.\n * @csspart description - The description slot container inside the headline.\n * @csspart toggle - The toggle slot container and fallback chevron area.\n * @csspart content - The expandable content panel.\n * @cssproperty [--wje-accordion-background=var(--wje-color-contrast-0)] - Background color of the collapsed item wrapper.\n * @cssproperty [--wje-accordion-border=var(--wje-color-contrast-0)] - Border color of the collapsed item wrapper.\n * @cssproperty [--wje-accordion-border-radius=var(--wje-border-radius-large)] - Border radius of the item wrapper.\n * @cssproperty [--wje-accordion-background-hover=var(--wje-color-contrast-1)] - Background color used when the headline is hovered.\n * @cssproperty [--wje-accordion-border-hover=var(--wje-color-contrast-2)] - Border color used when the headline is hovered.\n * @cssproperty [--wje-accordion-background-expanded=var(--wje-color-contrast-0)] - Background color of the expanded item wrapper.\n * @cssproperty [--wje-accordion-border-expanded=var(--wje-color-contrast-0)] - Border color of the expanded item wrapper.\n * @cssproperty [--wje-accordion-headline-color=var(--wje-color-contrast-11)] - Text color of the headline area.\n * @cssproperty [--wje-accordion-content-color=var(--wje-color-contrast-6)] - Text color of the expandable content area.\n * @cssproperty [--wje-accordion-marker-rotate=0deg] - Rotation applied to the toggle marker icon.\n * // @fires wje-accordion-item:open - Dispatched when the item is expanded.\n * // @fires wje-accordion-item:close - Dispatched when the item is collapsed.\n * @tag wje-accordion-item\n */\nexport default class AccordionItem extends WJElement {\n static _instanceId = 0;\n /**\n * Constructor for the AccordionItem class.\n */\n constructor() {\n super();\n this._instanceId = ++AccordionItem._instanceId;\n }\n\n /**\n * The class name for the Accordion Item element.\n * @type {string}\n */\n className = 'AccordionItem';\n\n /**\n * Getter for the CSS stylesheet.\n * @returns {object} The styles for the Accordion Item element.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observed attributes.\n * @returns {Array} An array containing the name of the observed attribute.\n */\n static get observedAttributes() {\n return [];\n }\n\n /**\n * Method to setup attributes for the Accordion Item element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.\n * @returns {object} The document fragment containing the drawn element.\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-accordion-item');\n\n let headline = document.createElement('div');\n headline.setAttribute('part', 'headline');\n headline.classList.add('headline');\n const baseId = this.id || `wje-accordion-item-${this._instanceId}`;\n headline.id = `${baseId}-header`;\n\n let headlineDescription = document.createElement('slot');\n headlineDescription.setAttribute('part', 'description');\n headlineDescription.setAttribute('name', 'description');\n\n let slotHeadline = document.createElement('slot');\n slotHeadline.setAttribute('name', 'headline');\n\n let toggle = document.createElement('slot');\n toggle.setAttribute('part', 'toggle');\n toggle.setAttribute('name', 'toggle');\n\n let mark = document.createElement('wje-icon');\n mark.setAttribute('name', 'chevron-down');\n\n let content = document.createElement('div');\n content.setAttribute('part', 'content');\n content.setAttribute('id', `${baseId}-panel`);\n content.setAttribute('role', 'region');\n content.setAttribute('aria-labelledby', headline.id);\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'content');\n\n toggle.appendChild(mark);\n\n headline.appendChild(slotHeadline);\n headline.appendChild(toggle);\n headline.appendChild(headlineDescription);\n\n content.appendChild(slot);\n\n native.appendChild(headline);\n native.appendChild(content);\n\n fragment.appendChild(native);\n\n this.headline = headline;\n this.toggle = toggle;\n this.content = content;\n\n return fragment;\n }\n\n /**\n * Method to execute after the Accordion Item element is drawn.\n */\n afterDraw() {\n if (!this.classList.contains('expanded')) this.classList.add('collapsed');\n\n this.headline.setAttribute('role', 'button');\n this.headline.setAttribute('tabindex', '0');\n this.headline.setAttribute('aria-controls', this.content.id);\n this.headline.setAttribute('aria-expanded', this.classList.contains('expanded') ? 'true' : 'false');\n\n this.headline.addEventListener('click', () => {\n if (this.classList.contains('collapsed')) {\n event.dispatchCustomEvent(this, 'wje-accordion-item:open');\n this.toggle.style.setProperty('--wje-accordion-marker-rotate', '180deg');\n this.expand();\n } else {\n event.dispatchCustomEvent(this, 'wje-accordion-item:close');\n this.toggle.style.setProperty('--wje-accordion-marker-rotate', '0deg');\n this.collapse();\n }\n });\n\n this.headline.addEventListener('keydown', (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.headline.click();\n }\n });\n }\n\n /**\n * Collapses the accordion item and updates the headline ARIA state.\n */\n collapse() {\n this.classList.remove('expanded');\n this.classList.add('collapsed');\n this.headline?.setAttribute('aria-expanded', 'false');\n }\n\n /**\n * Expands the accordion item and updates the headline ARIA state.\n */\n expand() {\n this.classList.remove('collapsed');\n this.classList.add('expanded');\n this.headline?.setAttribute('aria-expanded', 'true');\n }\n}\n","import AccordionItem from './accordion-item.element.js';\n\nexport default AccordionItem;\n\nAccordionItem.define('wje-accordion-item', AccordionItem);\n"],"names":[],"mappings":"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"}
|
package/dist/wje-avatar.js.map
CHANGED
|
@@ -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 * @attribute {boolean} initials - Renders generated initials from `label` instead of the default slotted content.\n * @attribute {string} label - Provides the source text for generated initials and the accessible label of the avatar.\n * @attribute {string} size - Selects a predefined avatar size such as `small`, `medium`, `normal`, `large`, or larger variants.\n * @attribute {string} status-placement - Positions the `status` slot on one of the avatar corners.\n * @slot default - Slot for the main avatar content, typically an image.\n * @slot icon - Slot for an icon rendered inside the avatar.\n * @slot status - Slot for a status badge or indicator positioned on the avatar edge.\n * @slot secondary - Slot for additional secondary content rendered with the avatar.\n * @csspart native - The component's native wrapper.\n * @csspart status - The positioned slot container for status content.\n * @csspart secondary - The slot container for secondary avatar content.\n * @cssproperty [--wje-avatar-size] - Controls the overall rendered size of the avatar shell.\n * @cssproperty [--wje-avatar-font-size] - Controls the font size used for initials and text content.\n * @cssproperty [--wje-avatar-font-weight] - Controls the font weight used for initials and text content.\n * @cssproperty [--wje-avatar-color] - Controls the text color inside the avatar.\n * @cssproperty [--wje-avatar-background-color] - Controls the background color of the avatar surface.\n * @cssproperty [--wje-avatar-border-radius] - Controls the avatar border radius.\n * @cssproperty [--wje-avatar-border-color] - Controls the avatar border color when a border is applied.\n * @cssproperty [--wje-avatar-border-width] - Controls the avatar border width when a border is applied.\n * @cssproperty [--wje-avatar-border-style] - Controls the avatar border style when a border is applied.\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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"}
|
|
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 * @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 * @attribute {boolean} initials - Renders generated initials from `label` instead of the default slotted content.\n * @attribute {string} label - Provides the source text for generated initials and the accessible label of the avatar.\n * @attribute {string} size - Selects a predefined avatar size such as `small`, `medium`, `normal`, `large`, or larger variants.\n * @attribute {string} status-placement - Positions the `status` slot on one of the avatar corners.\n * @slot default - Slot for the main avatar content, typically an image.\n * @slot icon - Slot for an icon rendered inside the avatar.\n * @slot status - Slot for a status badge or indicator positioned on the avatar edge.\n * @slot secondary - Slot for additional secondary content rendered with the avatar.\n * @csspart native - The component's native wrapper.\n * @csspart status - The positioned slot container for status content.\n * @csspart secondary - The slot container for secondary avatar content.\n * @cssproperty [--wje-avatar-size] - Controls the overall rendered size of the avatar shell.\n * @cssproperty [--wje-avatar-font-size] - Controls the font size used for initials and text content.\n * @cssproperty [--wje-avatar-font-weight] - Controls the font weight used for initials and text content.\n * @cssproperty [--wje-avatar-color] - Controls the text color inside the avatar.\n * @cssproperty [--wje-avatar-background-color] - Controls the background color of the avatar surface.\n * @cssproperty [--wje-avatar-border-radius] - Controls the avatar border radius.\n * @cssproperty [--wje-avatar-border-color] - Controls the avatar border color when a border is applied.\n * @cssproperty [--wje-avatar-border-width] - Controls the avatar border width when a border is applied.\n * @cssproperty [--wje-avatar-border-style] - Controls the avatar border style when a border is applied.\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-breadcrumb.js
CHANGED
|
@@ -70,7 +70,6 @@ class Breadcrumb extends WJElement {
|
|
|
70
70
|
* @param {string} name The name of the attribute that was changed.
|
|
71
71
|
* @param {string|null} oldValue The previous value of the attribute before it was changed. Null if the attribute was not previously set.
|
|
72
72
|
* @param {string|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.
|
|
73
|
-
* @returns {boolean} Returns false to signal no default behavior is implemented.
|
|
74
73
|
*/
|
|
75
74
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
76
75
|
var _a;
|
|
@@ -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.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":"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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 */\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,UAAK;AA2CT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAzCR,SAAK,iBAAiB;AACtB,SAAK,0BAA0B;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,gBAAgB;AAChB,WAAO,KAAK;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,cAAc,OAAO;AACrB,SAAK,iBAAiB;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,iBAAiB,OAAO;AACxB,SAAK,oBAAoB;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,mBAAmB;;AACnB,QAAI,YAAU,UAAK,kBAAL,mBAAoB,YAAW,KAAK;AAClD,WAAO,QAAQ,YAAW;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAC,4BAA4B,aAAa,MAAM;AAAA,EAC3D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,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,IAEpG,WAAW,SAAS,4BAA4B;AAC5C,YAAM,OAAO,eAAe,gBAAgB,QAAQ;AACpD,WAAK,0BAA0B;AAC/B,WAAK,QAAO;AAAA,IAEhB,WAAW,SAAS,QAAQ;AACxB,YAAM,SAAS,eAAe,gBAAgB,QAAQ;AACtD,WAAK,SAAS;AACd,WAAK,gBAAgB,CAAC;AACtB,WAAK,SAAQ;AACb,UAAI,KAAK,QAAQ;AACb,YAAI,OAAQ,MAAK,OAAO,aAAa,gBAAgB,MAAM;AAAA,YACtD,MAAK,OAAO,gBAAgB,cAAc;AAAA,MACnD;AACA,WAAK,QAAO;AAAA,IAChB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAQ;AAAA,EACjB;AAAA,EAEA,WAAW;AACP,SAAK,aAAa,EAAE,MAAM,OAAM,CAAE;AAClC,QAAI,KAAK,OAAQ,MAAK,aAAa,EAAE,SAAS,QAAQ;AAAA,QACjD,MAAK,gBAAgB,cAAc;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,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,IACjC;AAEA,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,MAClC,OAAO;AACH,kBAAU,YAAY,kBAAkB,KAAK,aAAa,eAAe;AAAA,MAC7E;AAEA,eAAS,OAAO,SAAS;AAAA,IAC7B;AAEA,SAAK,SAAS;AAEd,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,yBAAyB;AACrB,QAAI,qBAAqB;AAEzB,QAAI,KAAK,qBAAqB,YAAY;AACtC,2BAAqB,KAAK,iBAAgB;AAAA,IAC9C,OAAO;AACH,2BAAqB,KAAK,eAAc;AAAA,IAC5C;AAEA,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,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,gBAAe;AACjB,cAAE,6BAAF;AAAA,IACJ,CAAC;AAED,SAAK,eAAc,EAAG,wBAAuB,EAAG,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,gBAAe;AACjB,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,MAAK;AAAA,QAChB,WAAW,OAAO,WAAW,UAAU,YAAY;AAC/C,qBAAW,MAAK;AAAA,QACpB,OAAO;AACH,qBAAW;AAAA,YACP,IAAI,WAAW,SAAS;AAAA,cACpB,SAAS;AAAA,cACT,UAAU;AAAA,cACV,YAAY;AAAA,YACxC,CAAyB;AAAA,UACzB;AAAA,QACgB;AAAA,MACJ,CAAC;AAED,WAAK,OAAO,QAAQ;AAAA,IACxB,CAAC;AAED,aAAS,OAAO,QAAQ,IAAI;AAE5B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,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,OAAM;AACb,WAAK,eAAc,EAAG,wBAAuB,EAAG,QAAQ,CAAC,OAAO;AAC5D,WAAG,UAAU,OAAO,WAAW;AAAA,MACnC,CAAC;AACD,QAAE,gBAAe;AAAA,IACrB,CAAC;AAED,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,iBAAiB;AACb,WAAO,KAAK;AAAA,EAChB;AACJ;AC7SA,WAAW,OAAO,kBAAkB,UAAU;"}
|
package/dist/wje-carousel.js
CHANGED
|
@@ -222,14 +222,14 @@ class Carousel extends WJElement {
|
|
|
222
222
|
*/
|
|
223
223
|
getScrollPaddingInlineStart() {
|
|
224
224
|
if (!this.slides) return 0;
|
|
225
|
-
const
|
|
226
|
-
return parseFloat(
|
|
225
|
+
const slideStyles = getComputedStyle(this.slides);
|
|
226
|
+
return parseFloat(slideStyles.scrollPaddingInlineStart || slideStyles.scrollPaddingLeft || "0") || 0;
|
|
227
227
|
}
|
|
228
228
|
/**
|
|
229
229
|
* Returns the interaction scroll behavior for UI controls.
|
|
230
230
|
* Continuous multi-slide loops use instant snapping to avoid blank edge states
|
|
231
231
|
* while the browser is still animating a previous smooth scroll.
|
|
232
|
-
* @returns {
|
|
232
|
+
* @returns {string}
|
|
233
233
|
*/
|
|
234
234
|
getControlBehavior() {
|
|
235
235
|
return this.continuousLoop && this.slidePerPage > 1 ? "auto" : "smooth";
|
|
@@ -368,7 +368,7 @@ class Carousel extends WJElement {
|
|
|
368
368
|
/**
|
|
369
369
|
* Scrolls the carousel to a visual slide index.
|
|
370
370
|
* @param {number} vIndex
|
|
371
|
-
* @param {
|
|
371
|
+
* @param {string} behavior
|
|
372
372
|
*/
|
|
373
373
|
scrollToVisualIndex(vIndex, behavior = "smooth") {
|
|
374
374
|
const withClones = this.getSlidesWithClones();
|
|
@@ -535,11 +535,11 @@ class Carousel extends WJElement {
|
|
|
535
535
|
getSlidesWithClones() {
|
|
536
536
|
return Array.from(this.querySelectorAll("wje-carousel-item"));
|
|
537
537
|
}
|
|
538
|
-
/** Maps logical index
|
|
538
|
+
/** Maps logical index to visual index, including leading clones when loop is enabled. */
|
|
539
539
|
getVisualIndexForLogical(index) {
|
|
540
540
|
return this.loop ? index + this.getLoopCloneCount() : index;
|
|
541
541
|
}
|
|
542
|
-
/** Maps visual index
|
|
542
|
+
/** Maps visual index to logical index, including edge clones when loop is enabled. */
|
|
543
543
|
getLogicalIndexForVisual(vIndex) {
|
|
544
544
|
const slides = this.getSlides();
|
|
545
545
|
const maxIndex = this.getMaxVisibleStartIndex(slides.length);
|
package/dist/wje-carousel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-carousel.js","sources":["../packages/wje-carousel/carousel.element.js","../packages/wje-carousel/carousel.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Carousel class that extends WJElement.\n * @documentation https://elements.webjet.sk/components/carousel\n * @status stable\n * @augments WJElement\n * @slot - The carousel main content.\n * @cssproperty [--wje-carousel-size=100%] - Effective size of one carousel item.\n * @cssproperty [--wje-carousel-gap=0.5rem] - Gap between carousel items.\n */\nexport default class Carousel extends WJElement {\n /**\n * Carousel constructor method.\n */\n constructor() {\n super();\n\n this.slidePerPage = 1;\n }\n\n /**\n * Active slide attribute.\n * @param value\n */\n set activeSlide(value) {\n this.setAttribute('active-slide', value);\n }\n\n /**\n * Active slide attribute.\n * @returns {number|number}\n */\n get activeSlide() {\n return +this.getAttribute('active-slide') || 0;\n }\n\n /**\n * Pagination attribute.\n * @returns {boolean}\n */\n get pagination() {\n return this.hasAttribute('pagination');\n }\n\n /**\n * Navigation attribute.\n * @returns {boolean}\n */\n get navigation() {\n return this.hasAttribute('navigation');\n }\n\n /**\n * Thumbnails attribute.\n * @returns {boolean}\n */\n get thumbnails() {\n return this.hasAttribute('thumbnails');\n }\n\n /**\n * Loop attribute.\n * @returns {boolean}\n */\n get loop() {\n return this.hasAttribute('loop');\n }\n\n /**\n * Continuous loop attribute.\n * @returns {boolean}\n */\n get continuousLoop() {\n return this.hasAttribute('continuous-loop');\n }\n\n /**\n * Class name for the Carousel.\n * @type {string}\n */\n className = 'Carousel';\n\n /**\n * Getter for the CSS stylesheet.\n * @returns {*}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observed attributes.\n * @returns {string[]}\n */\n static get observedAttributes() {\n return ['active-slide', 'slide-per-page', 'continuous-loop'];\n }\n\n /**\n * Sets up the attributes for the Carousel.\n * @param name\n * @param old\n * @param newName\n */\n attributeChangedCallback(name, old, newName) {\n if (name === 'active-slide') {\n if (this.pagination) this.changePagination();\n\n if (this.thumbnails) this.changeThumbnails();\n }\n\n if (['slide-per-page', 'continuous-loop'].includes(name) && old !== newName && this.slides) {\n this.syncSlideMetrics();\n\n if (this.loop) {\n this.refresh();\n return;\n }\n\n this.goToSlide(this.activeSlide, 'auto');\n }\n }\n\n /**\n * Sets up the attributes for the Carousel.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /**\n * Before draw method for the Carousel.\n */\n beforeDraw() {\n this.syncSlideMetrics();\n this.removeLoopClones();\n this.cloneFirstAndLastItems();\n }\n\n /**\n * Draw method for the Carousel.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-carousel');\n\n let wrapper = document.createElement('div');\n wrapper.classList.add('slides-wrapper');\n\n let slides = document.createElement('div');\n slides.classList.add('carousel-slides');\n\n let slot = document.createElement('slot');\n\n let slotPrev = document.createElement('slot');\n slotPrev.setAttribute('name', 'prev');\n\n let slotNext = document.createElement('slot');\n slotNext.setAttribute('name', 'next');\n\n slides.append(slot);\n native.append(wrapper);\n\n if (this.navigation) {\n let existingPrev = this.querySelector('[slot=\"prev\"]');\n let existingNext = this.querySelector('[slot=\"next\"]');\n\n this.prevButton = existingPrev || this.createPreviousButton();\n this.nextButton = existingNext || this.createNextButton();\n\n if (this.prevButton && !this.prevButton.dataset.wjeCarouselNavBound) {\n this.prevButton.addEventListener('click', () => this.previousSlide());\n this.prevButton.dataset.wjeCarouselNavBound = 'true';\n }\n\n if (this.nextButton && !this.nextButton.dataset.wjeCarouselNavBound) {\n this.nextButton.addEventListener('click', () => this.nextSlide());\n this.nextButton.dataset.wjeCarouselNavBound = 'true';\n }\n\n if (!existingPrev) this.append(this.prevButton);\n if (!existingNext) this.append(this.nextButton);\n\n wrapper.append(slotPrev);\n wrapper.append(slotNext);\n }\n\n wrapper.append(slides);\n\n if (this.pagination) native.append(this.createPagination());\n\n if (this.thumbnails) native.append(this.createThumbnails());\n\n fragment.append(native);\n\n this.slides = slides;\n\n return fragment;\n }\n\n /**\n * After draw method for the Carousel.\n */\n afterDraw() {\n this.setIntersectionObserver();\n this.getSlidesWithClones().forEach((slide, i) => {\n this.intersectionObserver.observe(slide);\n });\n\n this.syncSlideMetrics();\n\n this.goToSlide(this.activeSlide, 'auto');\n\n requestAnimationFrame(() => requestAnimationFrame(() => this.syncActiveToSnapStart()));\n\n this.slides.addEventListener('scrollend', (e) => {\n this.syncActiveToSnapStart();\n });\n\n this.syncAria();\n }\n\n /**\n * Sync `activeSlide` to the slide whose leading edge is closest to the snap start.\n */\n syncActiveToSnapStart() {\n const slides = this.getSlides();\n const withClones = this.getSlidesWithClones();\n if (!withClones.length) return;\n\n const containerRect = this.slides.getBoundingClientRect();\n const snapStartX = containerRect.left + this.getScrollPaddingInlineStart();\n\n let best = null;\n let bestDist = Infinity;\n withClones.forEach((el) => {\n const r = el.getBoundingClientRect();\n const dist = Math.abs(r.left - snapStartX);\n if (dist < bestDist) {\n bestDist = dist;\n best = el;\n }\n });\n\n if (!best) return;\n\n const vIndex = withClones.indexOf(best);\n if (vIndex === -1) return;\n\n const logicalIndex = this.getLogicalIndexForVisual(vIndex);\n this.activeSlide = logicalIndex;\n this.setActiveVisualSlide(vIndex);\n\n const canonicalVisualIndex = this.getVisualIndexForLogical(logicalIndex);\n if (canonicalVisualIndex !== vIndex) {\n this.goToSlide(logicalIndex, 'auto');\n }\n }\n\n /**\n * Syncs computed CSS variables derived from `slide-per-page`.\n */\n syncSlideMetrics() {\n this.slidePerPage = Math.max(parseInt(this.getAttribute('slide-per-page'), 10) || 1, 1);\n const visibleGapCount = Math.max(this.slidePerPage - 1, 0);\n const computedItemSize = `calc((100% - (${visibleGapCount} * var(--wje-carousel-gap, 0.5rem))) / ${this.slidePerPage})`;\n\n this.style.setProperty('--wje-carousel-slides-per-page', `${this.slidePerPage}`);\n this.style.setProperty('--wje-carousel-visible-gap-count', `${visibleGapCount}`);\n this.style.setProperty('--wje-carousel-size', computedItemSize);\n this.style.setProperty('--wje-carousel-item-basis', 'var(--wje-carousel-size)');\n }\n\n /**\n * Returns the inline scroll padding used by the snap area.\n * @returns {number}\n */\n getScrollPaddingInlineStart() {\n if (!this.slides) return 0;\n\n const styles = getComputedStyle(this.slides);\n return parseFloat(styles.scrollPaddingInlineStart || styles.scrollPaddingLeft || '0') || 0;\n }\n\n /**\n * Returns the interaction scroll behavior for UI controls.\n * Continuous multi-slide loops use instant snapping to avoid blank edge states\n * while the browser is still animating a previous smooth scroll.\n * @returns {ScrollBehavior|string}\n */\n getControlBehavior() {\n return this.continuousLoop && this.slidePerPage > 1 ? 'auto' : 'smooth';\n }\n\n /**\n * Sets up the IntersectionObserver for the Carousel.\n */\n setIntersectionObserver() {\n this.intersectionObserver = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n this.entriesMap.set(entry.target, entry);\n });\n },\n {\n root: this.context.querySelector('.carousel-slides'),\n threshold: 0.5,\n }\n );\n\n this.entriesMap = new Map();\n this.records = this.intersectionObserver.takeRecords();\n this.records.forEach((entry) => {\n this.entriesMap.set(entry.target, entry);\n });\n }\n\n /**\n * Goes to the slide.\n * @param index\n * @param behavior\n * @param next\n */\n goToSlide(index, behavior = 'smooth', next = true) {\n const slides = this.getSlides();\n const withClones = this.getSlidesWithClones();\n\n // compute logical index: wrap when loop=true, else clamp\n const maxIndex = this.getMaxVisibleStartIndex(slides.length);\n let logical;\n if (this.loop && slides.length > 0) {\n logical = this.normalizeLoopIndex(index, slides.length);\n } else {\n logical = Math.min(Math.max(index, 0), maxIndex);\n }\n this.activeSlide = logical;\n\n // compute visual target considering clones when loop=true\n const vIndex = this.getVisualIndexForLogical(logical);\n const targetEl = withClones[vIndex];\n if (!targetEl) return;\n\n this.setActiveVisualSlide(vIndex);\n this.scrollToVisualIndex(vIndex, behavior);\n\n if (this.navigation && !this.loop) {\n this.nextButton.removeAttribute('disabled');\n this.prevButton.removeAttribute('disabled');\n\n if (this.activeSlide === maxIndex) this.nextButton.setAttribute('disabled', '');\n if (this.activeSlide === 0) this.prevButton.setAttribute('disabled', '');\n }\n\n this.syncAria();\n }\n\n /**\n * Sets the active class on the currently targeted visual slide and removes it elsewhere.\n * @param {number} vIndex\n */\n setActiveVisualSlide(vIndex) {\n this.getSlidesWithClones().forEach((slide, index) => {\n slide.classList.toggle('active', index === vIndex);\n });\n }\n\n /**\n * Syncs ARIA attributes on the carousel and slides.\n */\n syncAria() {\n this.setAriaState({\n role: 'region',\n roledescription: 'carousel',\n });\n\n const slides = this.getSlides();\n const total = slides.length;\n slides.forEach((slide, index) => {\n slide.setAttribute('role', 'group');\n slide.setAttribute('aria-roledescription', 'slide');\n slide.setAttribute('aria-label', `Slide ${index + 1} of ${total}`);\n slide.setAttribute('aria-hidden', slide.classList.contains('active') ? 'false' : 'true');\n });\n\n const clones = this.querySelectorAll('.clone');\n clones.forEach((slide) => {\n slide.setAttribute('aria-hidden', 'true');\n });\n }\n\n /**\n * Clones the first and last items.\n */\n cloneFirstAndLastItems() {\n const items = this.getSlides();\n\n if (items.length && this.loop) {\n const cloneCount = this.getLoopCloneCount(items.length);\n const firstOriginal = items[0];\n\n items.slice(items.length - cloneCount).forEach((item) => {\n const clone = this.createLoopClone(item);\n this.insertBefore(clone, firstOriginal);\n });\n\n items.slice(0, cloneCount).forEach((item) => {\n const clone = this.createLoopClone(item);\n this.append(clone);\n });\n }\n }\n\n /**\n * Creates a sanitized loop clone that does not inherit transient render state\n * such as inline `visibility: hidden` from the source slide.\n * @param {HTMLElement} item\n * @returns {HTMLElement}\n */\n createLoopClone(item) {\n const clone = item.cloneNode(true);\n clone.classList.add('clone');\n clone.classList.remove('active');\n clone.style.removeProperty('visibility');\n\n if (!clone.getAttribute('style')?.trim()) {\n clone.removeAttribute('style');\n }\n\n return clone;\n }\n\n /**\n * Removes loop clones so they can be rebuilt for the current configuration.\n */\n removeLoopClones() {\n this.querySelectorAll('wje-carousel-item.clone').forEach((clone) => clone.remove());\n }\n\n /**\n * Returns how many slides should be cloned on each side when loop is enabled.\n * @param {number} totalSlides\n * @returns {number}\n */\n getLoopCloneCount(totalSlides = this.getSlides().length) {\n if (!this.loop || !totalSlides) return 0;\n\n return this.continuousLoop ? Math.min(this.slidePerPage, totalSlides) : 1;\n }\n\n /**\n * Scrolls the carousel to a visual slide index.\n * @param {number} vIndex\n * @param {ScrollBehavior|string} behavior\n */\n scrollToVisualIndex(vIndex, behavior = 'smooth') {\n const withClones = this.getSlidesWithClones();\n const firstEl = withClones[0];\n const targetEl = withClones[vIndex];\n\n if (!firstEl || !targetEl || !this.slides) return;\n\n const firstRect = firstEl.getBoundingClientRect();\n const targetRect = targetEl.getBoundingClientRect();\n const contentOffsetLeft = targetRect.left - firstRect.left;\n const nextLeft = contentOffsetLeft - this.getScrollPaddingInlineStart();\n const targetLeft = Math.max(nextLeft, 0);\n\n if (behavior === 'smooth') {\n this.slides.scrollTo({\n left: targetLeft,\n top: this.slides.scrollTop,\n behavior: 'smooth',\n });\n return;\n }\n\n if (this.snapRestoreFrame) {\n cancelAnimationFrame(this.snapRestoreFrame);\n }\n\n const inlineSnapType = this.slides.style.scrollSnapType;\n this.slides.style.scrollSnapType = 'none';\n this.slides.scrollTo({\n left: targetLeft,\n top: this.slides.scrollTop,\n behavior: 'auto',\n });\n this.snapRestoreFrame = requestAnimationFrame(() => {\n this.slides.style.scrollSnapType = inlineSnapType;\n this.snapRestoreFrame = null;\n });\n }\n\n /**\n * Goes to the next slide.\n */\n removeActiveSlide() {\n this.getSlidesWithClones().forEach((slide, i) => {\n slide.classList.remove('active');\n });\n\n if (this.pagination) {\n this.context.querySelectorAll('.pagination-item').forEach((item) => {\n item.classList.remove('active');\n });\n }\n\n if (this.thumbnails) {\n this.context.querySelectorAll('wje-thumbnail').forEach((item) => {\n item.classList.remove('active');\n });\n }\n }\n\n /**\n * Goes to the next slide.\n */\n changePagination() {\n if (this.pagination) {\n this.context.querySelectorAll('.pagination-item').forEach((item, i) => {\n item.classList.toggle('active', i === this.activeSlide);\n });\n }\n }\n\n /**\n * Goes to the next slide.\n */\n changeThumbnails() {\n if (this.thumbnails) {\n this.context.querySelectorAll('wje-thumbnail').forEach((item, i) => {\n item.classList.toggle('active', i === this.activeSlide);\n });\n }\n }\n\n /**\n * Goes to the next slide.\n * @returns {Element}\n */\n createNextButton() {\n const nextButton = document.createElement('wje-button');\n nextButton.setAttribute('part', 'next-button');\n nextButton.setAttribute('circle', '');\n nextButton.setAttribute('fill', 'link');\n nextButton.setAttribute('slot', 'next');\n nextButton.innerHTML = '<wje-icon name=\"chevron-right\" size=\"large\"></wje-icon>';\n nextButton.classList.add('next');\n\n return nextButton;\n }\n\n /**\n * Goes to the next slide.\n * @returns {Element}\n */\n createPreviousButton() {\n const previousButton = document.createElement('wje-button');\n previousButton.setAttribute('part', 'previous-button');\n previousButton.setAttribute('circle', '');\n previousButton.setAttribute('fill', 'link');\n previousButton.setAttribute('slot', 'prev');\n previousButton.innerHTML = '<wje-icon name=\"chevron-left\" size=\"large\"></wje-icon>';\n previousButton.classList.add('prev');\n\n return previousButton;\n }\n\n /**\n * Goes to the next slide.\n * @returns {Element}\n */\n createPagination() {\n const pagination = document.createElement('div');\n pagination.setAttribute('part', 'pagination');\n pagination.classList.add('pagination');\n\n this.getPaginationIndexes().forEach((i) => {\n const paginationItem = document.createElement('div');\n paginationItem.classList.add('pagination-item');\n paginationItem.addEventListener('click', (e) => {\n this.removeActiveSlide();\n e.target.classList.add('active');\n this.goToSlide(i, this.getControlBehavior());\n });\n pagination.append(paginationItem);\n });\n\n return pagination;\n }\n\n /**\n * Goes to the next slide.\n * @returns {Element}\n */\n createThumbnails() {\n const thumbnails = document.createElement('div');\n thumbnails.classList.add('thumbnails');\n\n const slides = this.getSlides();\n slides.forEach((slide, i) => {\n const thumbnail = document.createElement('wje-thumbnail');\n thumbnail.innerHTML = `<img src=\"${slide.querySelector('wje-img').getAttribute('src')}\"></img>`;\n thumbnail.addEventListener('click', (e) => {\n this.removeActiveSlide();\n e.target.closest('wje-thumbnail').classList.add('active');\n this.goToSlide(i, this.getControlBehavior());\n });\n thumbnails.append(thumbnail);\n });\n\n return thumbnails;\n }\n\n /**\n * Goes to the next slide.\n */\n nextSlide() {\n this.goToSlide(this.activeSlide + 1, this.getControlBehavior());\n }\n\n /**\n * Goes to the previous slide.\n */\n previousSlide() {\n this.goToSlide(this.activeSlide - 1, this.getControlBehavior());\n }\n\n /**\n * Goes to the slide.\n * @returns {Array}\n */\n getSlides() {\n return Array.from(this.querySelectorAll('wje-carousel-item:not(.clone)'));\n }\n\n /**\n * Goes to the slide.\n * @returns {Array}\n */\n getSlidesWithClones() {\n return Array.from(this.querySelectorAll('wje-carousel-item'));\n }\n\n /** Maps logical index -> visual index (accounts for leading clone when loop=true) */\n getVisualIndexForLogical(index) {\n return this.loop ? index + this.getLoopCloneCount() : index;\n }\n\n /** Maps visual index -> logical index (handles clones at 0 and last when loop=true) */\n getLogicalIndexForVisual(vIndex) {\n const slides = this.getSlides();\n const maxIndex = this.getMaxVisibleStartIndex(slides.length);\n const cloneCount = this.getLoopCloneCount(slides.length);\n if (!this.loop) return Math.min(Math.max(vIndex, 0), maxIndex);\n if (this.continuousLoop) {\n if (vIndex < cloneCount) return slides.length - cloneCount + vIndex;\n if (vIndex >= cloneCount + slides.length) return vIndex - (cloneCount + slides.length);\n return vIndex - cloneCount;\n }\n\n if (vIndex < cloneCount) return maxIndex;\n if (vIndex >= cloneCount + slides.length) return 0;\n return Math.min(Math.max(vIndex - cloneCount, 0), maxIndex);\n }\n\n /**\n * Returns the maximum logical slide index that can still render a full viewport.\n * @param {number} totalSlides\n * @returns {number}\n */\n getMaxVisibleStartIndex(totalSlides = this.getSlides().length) {\n const visibleSlides = Math.min(this.slidePerPage, totalSlides);\n return Math.max(totalSlides - visibleSlides, 0);\n }\n\n /**\n * Normalizes a logical index for the active loop mode.\n * @param {number} index\n * @param {number} totalSlides\n * @returns {number}\n */\n normalizeLoopIndex(index, totalSlides = this.getSlides().length) {\n const logicalCount = this.getLoopLogicalCount(totalSlides);\n if (!logicalCount) return 0;\n\n return ((index % logicalCount) + logicalCount) % logicalCount;\n }\n\n /**\n * Returns how many logical positions are reachable for the current loop mode.\n * @param {number} totalSlides\n * @returns {number}\n */\n getLoopLogicalCount(totalSlides = this.getSlides().length) {\n if (!totalSlides) return 0;\n\n return this.continuousLoop ? totalSlides : this.getMaxVisibleStartIndex(totalSlides) + 1;\n }\n\n /**\n * Returns the pagination indexes for the current carousel mode.\n * @returns {number[]}\n */\n getPaginationIndexes() {\n return Array.from({ length: this.getLoopLogicalCount() }, (_, index) => index);\n }\n\n /**\n * Goes to the slide.\n * @returns {boolean}\n */\n canGoNext() {\n const el = this.context.querySelector('.carousel-slides');\n return el.scrollLeft < (el.scrollWidth - el.clientWidth);\n }\n\n /**\n * Goes to the slide.\n * @returns {boolean}\n */\n canGoPrevious() {\n const el = this.context.querySelector('.carousel-slides');\n return el.scrollLeft > 0;\n }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Carousel from './carousel.element.js';\n\n// export * from \"./carousel.element.js\";\nexport default Carousel;\n\nWJElement.define('wje-carousel', Carousel);\n"],"names":["styles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-carousel.js","sources":["../packages/wje-carousel/carousel.element.js","../packages/wje-carousel/carousel.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Carousel class that extends WJElement.\n * @documentation https://elements.webjet.sk/components/carousel\n * @status stable\n * @augments WJElement\n * @slot - The carousel main content.\n * @cssproperty [--wje-carousel-size=100%] - Effective size of one carousel item.\n * @cssproperty [--wje-carousel-gap=0.5rem] - Gap between carousel items.\n */\nexport default class Carousel extends WJElement {\n /**\n * Carousel constructor method.\n */\n constructor() {\n super();\n\n this.slidePerPage = 1;\n }\n\n /**\n * Active slide attribute.\n * @param value\n */\n set activeSlide(value) {\n this.setAttribute('active-slide', value);\n }\n\n /**\n * Active slide attribute.\n * @returns {number|number}\n */\n get activeSlide() {\n return +this.getAttribute('active-slide') || 0;\n }\n\n /**\n * Pagination attribute.\n * @returns {boolean}\n */\n get pagination() {\n return this.hasAttribute('pagination');\n }\n\n /**\n * Navigation attribute.\n * @returns {boolean}\n */\n get navigation() {\n return this.hasAttribute('navigation');\n }\n\n /**\n * Thumbnails attribute.\n * @returns {boolean}\n */\n get thumbnails() {\n return this.hasAttribute('thumbnails');\n }\n\n /**\n * Loop attribute.\n * @returns {boolean}\n */\n get loop() {\n return this.hasAttribute('loop');\n }\n\n /**\n * Continuous loop attribute.\n * @returns {boolean}\n */\n get continuousLoop() {\n return this.hasAttribute('continuous-loop');\n }\n\n /**\n * Class name for the Carousel.\n * @type {string}\n */\n className = 'Carousel';\n\n /**\n * Getter for the CSS stylesheet.\n * @returns {*}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observed attributes.\n * @returns {string[]}\n */\n static get observedAttributes() {\n return ['active-slide', 'slide-per-page', 'continuous-loop'];\n }\n\n /**\n * Sets up the attributes for the Carousel.\n * @param name\n * @param old\n * @param newName\n */\n attributeChangedCallback(name, old, newName) {\n if (name === 'active-slide') {\n if (this.pagination) this.changePagination();\n\n if (this.thumbnails) this.changeThumbnails();\n }\n\n if (['slide-per-page', 'continuous-loop'].includes(name) && old !== newName && this.slides) {\n this.syncSlideMetrics();\n\n if (this.loop) {\n this.refresh();\n return;\n }\n\n this.goToSlide(this.activeSlide, 'auto');\n }\n }\n\n /**\n * Sets up the attributes for the Carousel.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /**\n * Before draw method for the Carousel.\n */\n beforeDraw() {\n this.syncSlideMetrics();\n this.removeLoopClones();\n this.cloneFirstAndLastItems();\n }\n\n /**\n * Draw method for the Carousel.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-carousel');\n\n let wrapper = document.createElement('div');\n wrapper.classList.add('slides-wrapper');\n\n let slides = document.createElement('div');\n slides.classList.add('carousel-slides');\n\n let slot = document.createElement('slot');\n\n let slotPrev = document.createElement('slot');\n slotPrev.setAttribute('name', 'prev');\n\n let slotNext = document.createElement('slot');\n slotNext.setAttribute('name', 'next');\n\n slides.append(slot);\n native.append(wrapper);\n\n if (this.navigation) {\n let existingPrev = this.querySelector('[slot=\"prev\"]');\n let existingNext = this.querySelector('[slot=\"next\"]');\n\n this.prevButton = existingPrev || this.createPreviousButton();\n this.nextButton = existingNext || this.createNextButton();\n\n if (this.prevButton && !this.prevButton.dataset.wjeCarouselNavBound) {\n this.prevButton.addEventListener('click', () => this.previousSlide());\n this.prevButton.dataset.wjeCarouselNavBound = 'true';\n }\n\n if (this.nextButton && !this.nextButton.dataset.wjeCarouselNavBound) {\n this.nextButton.addEventListener('click', () => this.nextSlide());\n this.nextButton.dataset.wjeCarouselNavBound = 'true';\n }\n\n if (!existingPrev) this.append(this.prevButton);\n if (!existingNext) this.append(this.nextButton);\n\n wrapper.append(slotPrev);\n wrapper.append(slotNext);\n }\n\n wrapper.append(slides);\n\n if (this.pagination) native.append(this.createPagination());\n\n if (this.thumbnails) native.append(this.createThumbnails());\n\n fragment.append(native);\n\n this.slides = slides;\n\n return fragment;\n }\n\n /**\n * After draw method for the Carousel.\n */\n afterDraw() {\n this.setIntersectionObserver();\n this.getSlidesWithClones().forEach((slide, i) => {\n this.intersectionObserver.observe(slide);\n });\n\n this.syncSlideMetrics();\n\n this.goToSlide(this.activeSlide, 'auto');\n\n requestAnimationFrame(() => requestAnimationFrame(() => this.syncActiveToSnapStart()));\n\n this.slides.addEventListener('scrollend', (e) => {\n this.syncActiveToSnapStart();\n });\n\n this.syncAria();\n }\n\n /**\n * Sync `activeSlide` to the slide whose leading edge is closest to the snap start.\n */\n syncActiveToSnapStart() {\n const slides = this.getSlides();\n const withClones = this.getSlidesWithClones();\n if (!withClones.length) return;\n\n const containerRect = this.slides.getBoundingClientRect();\n const snapStartX = containerRect.left + this.getScrollPaddingInlineStart();\n\n let best = null;\n let bestDist = Infinity;\n withClones.forEach((el) => {\n const r = el.getBoundingClientRect();\n const dist = Math.abs(r.left - snapStartX);\n if (dist < bestDist) {\n bestDist = dist;\n best = el;\n }\n });\n\n if (!best) return;\n\n const vIndex = withClones.indexOf(best);\n if (vIndex === -1) return;\n\n const logicalIndex = this.getLogicalIndexForVisual(vIndex);\n this.activeSlide = logicalIndex;\n this.setActiveVisualSlide(vIndex);\n\n const canonicalVisualIndex = this.getVisualIndexForLogical(logicalIndex);\n if (canonicalVisualIndex !== vIndex) {\n this.goToSlide(logicalIndex, 'auto');\n }\n }\n\n /**\n * Syncs computed CSS variables derived from `slide-per-page`.\n */\n syncSlideMetrics() {\n this.slidePerPage = Math.max(parseInt(this.getAttribute('slide-per-page'), 10) || 1, 1);\n const visibleGapCount = Math.max(this.slidePerPage - 1, 0);\n const computedItemSize = `calc((100% - (${visibleGapCount} * var(--wje-carousel-gap, 0.5rem))) / ${this.slidePerPage})`;\n\n this.style.setProperty('--wje-carousel-slides-per-page', `${this.slidePerPage}`);\n this.style.setProperty('--wje-carousel-visible-gap-count', `${visibleGapCount}`);\n this.style.setProperty('--wje-carousel-size', computedItemSize);\n this.style.setProperty('--wje-carousel-item-basis', 'var(--wje-carousel-size)');\n }\n\n /**\n * Returns the inline scroll padding used by the snap area.\n * @returns {number}\n */\n getScrollPaddingInlineStart() {\n if (!this.slides) return 0;\n\n const slideStyles = getComputedStyle(this.slides);\n return parseFloat(slideStyles.scrollPaddingInlineStart || slideStyles.scrollPaddingLeft || '0') || 0;\n }\n\n /**\n * Returns the interaction scroll behavior for UI controls.\n * Continuous multi-slide loops use instant snapping to avoid blank edge states\n * while the browser is still animating a previous smooth scroll.\n * @returns {string}\n */\n getControlBehavior() {\n return this.continuousLoop && this.slidePerPage > 1 ? 'auto' : 'smooth';\n }\n\n /**\n * Sets up the IntersectionObserver for the Carousel.\n */\n setIntersectionObserver() {\n this.intersectionObserver = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n this.entriesMap.set(entry.target, entry);\n });\n },\n {\n root: this.context.querySelector('.carousel-slides'),\n threshold: 0.5,\n }\n );\n\n this.entriesMap = new Map();\n this.records = this.intersectionObserver.takeRecords();\n this.records.forEach((entry) => {\n this.entriesMap.set(entry.target, entry);\n });\n }\n\n /**\n * Goes to the slide.\n * @param index\n * @param behavior\n * @param next\n */\n goToSlide(index, behavior = 'smooth', next = true) {\n const slides = this.getSlides();\n const withClones = this.getSlidesWithClones();\n\n // compute logical index: wrap when loop=true, else clamp\n const maxIndex = this.getMaxVisibleStartIndex(slides.length);\n let logical;\n if (this.loop && slides.length > 0) {\n logical = this.normalizeLoopIndex(index, slides.length);\n } else {\n logical = Math.min(Math.max(index, 0), maxIndex);\n }\n this.activeSlide = logical;\n\n // compute visual target considering clones when loop=true\n const vIndex = this.getVisualIndexForLogical(logical);\n const targetEl = withClones[vIndex];\n if (!targetEl) return;\n\n this.setActiveVisualSlide(vIndex);\n this.scrollToVisualIndex(vIndex, behavior);\n\n if (this.navigation && !this.loop) {\n this.nextButton.removeAttribute('disabled');\n this.prevButton.removeAttribute('disabled');\n\n if (this.activeSlide === maxIndex) this.nextButton.setAttribute('disabled', '');\n if (this.activeSlide === 0) this.prevButton.setAttribute('disabled', '');\n }\n\n this.syncAria();\n }\n\n /**\n * Sets the active class on the currently targeted visual slide and removes it elsewhere.\n * @param {number} vIndex\n */\n setActiveVisualSlide(vIndex) {\n this.getSlidesWithClones().forEach((slide, index) => {\n slide.classList.toggle('active', index === vIndex);\n });\n }\n\n /**\n * Syncs ARIA attributes on the carousel and slides.\n */\n syncAria() {\n this.setAriaState({\n role: 'region',\n roledescription: 'carousel',\n });\n\n const slides = this.getSlides();\n const total = slides.length;\n slides.forEach((slide, index) => {\n slide.setAttribute('role', 'group');\n slide.setAttribute('aria-roledescription', 'slide');\n slide.setAttribute('aria-label', `Slide ${index + 1} of ${total}`);\n slide.setAttribute('aria-hidden', slide.classList.contains('active') ? 'false' : 'true');\n });\n\n const clones = this.querySelectorAll('.clone');\n clones.forEach((slide) => {\n slide.setAttribute('aria-hidden', 'true');\n });\n }\n\n /**\n * Clones the first and last items.\n */\n cloneFirstAndLastItems() {\n const items = this.getSlides();\n\n if (items.length && this.loop) {\n const cloneCount = this.getLoopCloneCount(items.length);\n const firstOriginal = items[0];\n\n items.slice(items.length - cloneCount).forEach((item) => {\n const clone = this.createLoopClone(item);\n this.insertBefore(clone, firstOriginal);\n });\n\n items.slice(0, cloneCount).forEach((item) => {\n const clone = this.createLoopClone(item);\n this.append(clone);\n });\n }\n }\n\n /**\n * Creates a sanitized loop clone that does not inherit transient render state\n * such as inline `visibility: hidden` from the source slide.\n * @param {HTMLElement} item\n * @returns {HTMLElement}\n */\n createLoopClone(item) {\n const clone = item.cloneNode(true);\n clone.classList.add('clone');\n clone.classList.remove('active');\n clone.style.removeProperty('visibility');\n\n if (!clone.getAttribute('style')?.trim()) {\n clone.removeAttribute('style');\n }\n\n return clone;\n }\n\n /**\n * Removes loop clones so they can be rebuilt for the current configuration.\n */\n removeLoopClones() {\n this.querySelectorAll('wje-carousel-item.clone').forEach((clone) => clone.remove());\n }\n\n /**\n * Returns how many slides should be cloned on each side when loop is enabled.\n * @param {number} totalSlides\n * @returns {number}\n */\n getLoopCloneCount(totalSlides = this.getSlides().length) {\n if (!this.loop || !totalSlides) return 0;\n\n return this.continuousLoop ? Math.min(this.slidePerPage, totalSlides) : 1;\n }\n\n /**\n * Scrolls the carousel to a visual slide index.\n * @param {number} vIndex\n * @param {string} behavior\n */\n scrollToVisualIndex(vIndex, behavior = 'smooth') {\n const withClones = this.getSlidesWithClones();\n const firstEl = withClones[0];\n const targetEl = withClones[vIndex];\n\n if (!firstEl || !targetEl || !this.slides) return;\n\n const firstRect = firstEl.getBoundingClientRect();\n const targetRect = targetEl.getBoundingClientRect();\n const contentOffsetLeft = targetRect.left - firstRect.left;\n const nextLeft = contentOffsetLeft - this.getScrollPaddingInlineStart();\n const targetLeft = Math.max(nextLeft, 0);\n\n if (behavior === 'smooth') {\n this.slides.scrollTo({\n left: targetLeft,\n top: this.slides.scrollTop,\n behavior: 'smooth',\n });\n return;\n }\n\n if (this.snapRestoreFrame) {\n cancelAnimationFrame(this.snapRestoreFrame);\n }\n\n const inlineSnapType = this.slides.style.scrollSnapType;\n this.slides.style.scrollSnapType = 'none';\n this.slides.scrollTo({\n left: targetLeft,\n top: this.slides.scrollTop,\n behavior: 'auto',\n });\n this.snapRestoreFrame = requestAnimationFrame(() => {\n this.slides.style.scrollSnapType = inlineSnapType;\n this.snapRestoreFrame = null;\n });\n }\n\n /**\n * Goes to the next slide.\n */\n removeActiveSlide() {\n this.getSlidesWithClones().forEach((slide, i) => {\n slide.classList.remove('active');\n });\n\n if (this.pagination) {\n this.context.querySelectorAll('.pagination-item').forEach((item) => {\n item.classList.remove('active');\n });\n }\n\n if (this.thumbnails) {\n this.context.querySelectorAll('wje-thumbnail').forEach((item) => {\n item.classList.remove('active');\n });\n }\n }\n\n /**\n * Goes to the next slide.\n */\n changePagination() {\n if (this.pagination) {\n this.context.querySelectorAll('.pagination-item').forEach((item, i) => {\n item.classList.toggle('active', i === this.activeSlide);\n });\n }\n }\n\n /**\n * Goes to the next slide.\n */\n changeThumbnails() {\n if (this.thumbnails) {\n this.context.querySelectorAll('wje-thumbnail').forEach((item, i) => {\n item.classList.toggle('active', i === this.activeSlide);\n });\n }\n }\n\n /**\n * Goes to the next slide.\n * @returns {Element}\n */\n createNextButton() {\n const nextButton = document.createElement('wje-button');\n nextButton.setAttribute('part', 'next-button');\n nextButton.setAttribute('circle', '');\n nextButton.setAttribute('fill', 'link');\n nextButton.setAttribute('slot', 'next');\n nextButton.innerHTML = '<wje-icon name=\"chevron-right\" size=\"large\"></wje-icon>';\n nextButton.classList.add('next');\n\n return nextButton;\n }\n\n /**\n * Goes to the next slide.\n * @returns {Element}\n */\n createPreviousButton() {\n const previousButton = document.createElement('wje-button');\n previousButton.setAttribute('part', 'previous-button');\n previousButton.setAttribute('circle', '');\n previousButton.setAttribute('fill', 'link');\n previousButton.setAttribute('slot', 'prev');\n previousButton.innerHTML = '<wje-icon name=\"chevron-left\" size=\"large\"></wje-icon>';\n previousButton.classList.add('prev');\n\n return previousButton;\n }\n\n /**\n * Goes to the next slide.\n * @returns {Element}\n */\n createPagination() {\n const pagination = document.createElement('div');\n pagination.setAttribute('part', 'pagination');\n pagination.classList.add('pagination');\n\n this.getPaginationIndexes().forEach((i) => {\n const paginationItem = document.createElement('div');\n paginationItem.classList.add('pagination-item');\n paginationItem.addEventListener('click', (e) => {\n this.removeActiveSlide();\n e.target.classList.add('active');\n this.goToSlide(i, this.getControlBehavior());\n });\n pagination.append(paginationItem);\n });\n\n return pagination;\n }\n\n /**\n * Goes to the next slide.\n * @returns {Element}\n */\n createThumbnails() {\n const thumbnails = document.createElement('div');\n thumbnails.classList.add('thumbnails');\n\n const slides = this.getSlides();\n slides.forEach((slide, i) => {\n const thumbnail = document.createElement('wje-thumbnail');\n thumbnail.innerHTML = `<img src=\"${slide.querySelector('wje-img').getAttribute('src')}\"></img>`;\n thumbnail.addEventListener('click', (e) => {\n this.removeActiveSlide();\n e.target.closest('wje-thumbnail').classList.add('active');\n this.goToSlide(i, this.getControlBehavior());\n });\n thumbnails.append(thumbnail);\n });\n\n return thumbnails;\n }\n\n /**\n * Goes to the next slide.\n */\n nextSlide() {\n this.goToSlide(this.activeSlide + 1, this.getControlBehavior());\n }\n\n /**\n * Goes to the previous slide.\n */\n previousSlide() {\n this.goToSlide(this.activeSlide - 1, this.getControlBehavior());\n }\n\n /**\n * Goes to the slide.\n * @returns {Array}\n */\n getSlides() {\n return Array.from(this.querySelectorAll('wje-carousel-item:not(.clone)'));\n }\n\n /**\n * Goes to the slide.\n * @returns {Array}\n */\n getSlidesWithClones() {\n return Array.from(this.querySelectorAll('wje-carousel-item'));\n }\n\n /** Maps logical index to visual index, including leading clones when loop is enabled. */\n getVisualIndexForLogical(index) {\n return this.loop ? index + this.getLoopCloneCount() : index;\n }\n\n /** Maps visual index to logical index, including edge clones when loop is enabled. */\n getLogicalIndexForVisual(vIndex) {\n const slides = this.getSlides();\n const maxIndex = this.getMaxVisibleStartIndex(slides.length);\n const cloneCount = this.getLoopCloneCount(slides.length);\n if (!this.loop) return Math.min(Math.max(vIndex, 0), maxIndex);\n if (this.continuousLoop) {\n if (vIndex < cloneCount) return slides.length - cloneCount + vIndex;\n if (vIndex >= cloneCount + slides.length) return vIndex - (cloneCount + slides.length);\n return vIndex - cloneCount;\n }\n\n if (vIndex < cloneCount) return maxIndex;\n if (vIndex >= cloneCount + slides.length) return 0;\n return Math.min(Math.max(vIndex - cloneCount, 0), maxIndex);\n }\n\n /**\n * Returns the maximum logical slide index that can still render a full viewport.\n * @param {number} totalSlides\n * @returns {number}\n */\n getMaxVisibleStartIndex(totalSlides = this.getSlides().length) {\n const visibleSlides = Math.min(this.slidePerPage, totalSlides);\n return Math.max(totalSlides - visibleSlides, 0);\n }\n\n /**\n * Normalizes a logical index for the active loop mode.\n * @param {number} index\n * @param {number} totalSlides\n * @returns {number}\n */\n normalizeLoopIndex(index, totalSlides = this.getSlides().length) {\n const logicalCount = this.getLoopLogicalCount(totalSlides);\n if (!logicalCount) return 0;\n\n return ((index % logicalCount) + logicalCount) % logicalCount;\n }\n\n /**\n * Returns how many logical positions are reachable for the current loop mode.\n * @param {number} totalSlides\n * @returns {number}\n */\n getLoopLogicalCount(totalSlides = this.getSlides().length) {\n if (!totalSlides) return 0;\n\n return this.continuousLoop ? totalSlides : this.getMaxVisibleStartIndex(totalSlides) + 1;\n }\n\n /**\n * Returns the pagination indexes for the current carousel mode.\n * @returns {number[]}\n */\n getPaginationIndexes() {\n return Array.from({ length: this.getLoopLogicalCount() }, (_, index) => index);\n }\n\n /**\n * Goes to the slide.\n * @returns {boolean}\n */\n canGoNext() {\n const el = this.context.querySelector('.carousel-slides');\n return el.scrollLeft < (el.scrollWidth - el.clientWidth);\n }\n\n /**\n * Goes to the slide.\n * @returns {boolean}\n */\n canGoPrevious() {\n const el = this.context.querySelector('.carousel-slides');\n return el.scrollLeft > 0;\n }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Carousel from './carousel.element.js';\n\n// export * from \"./carousel.element.js\";\nexport default Carousel;\n\nWJElement.define('wje-carousel', Carousel);\n"],"names":[],"mappings":"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"}
|
package/dist/wje-copy-button.js
CHANGED
|
@@ -91,20 +91,23 @@ class CopyButton extends WJElement {
|
|
|
91
91
|
/**
|
|
92
92
|
* Handles the copied event.
|
|
93
93
|
* You can override this method to customize the behavior when the text is copied.
|
|
94
|
-
* @param {Event} e The event object.
|
|
95
94
|
*/
|
|
96
|
-
__publicField(this, "copied", (
|
|
95
|
+
__publicField(this, "copied", () => {
|
|
97
96
|
if (this.hasOwnProperty("icon")) {
|
|
98
97
|
this.icon.setAttribute("color", "success");
|
|
99
98
|
this.icon.setAttribute("name", "check");
|
|
100
99
|
}
|
|
101
|
-
|
|
100
|
+
if (this._tooltipElement) {
|
|
101
|
+
this._tooltipElement.setAttribute("content", this.labelSuccess || "Copied");
|
|
102
|
+
}
|
|
102
103
|
setTimeout(() => {
|
|
103
104
|
if (this.hasOwnProperty("icon")) {
|
|
104
105
|
this.icon.removeAttribute("color");
|
|
105
106
|
this.icon.setAttribute("name", "clipboard");
|
|
106
107
|
}
|
|
107
|
-
|
|
108
|
+
if (this._tooltipElement) {
|
|
109
|
+
this._tooltipElement.setAttribute("content", this.getAttribute("tooltip") || this.label || "Copy");
|
|
110
|
+
}
|
|
108
111
|
}, this.timeout);
|
|
109
112
|
});
|
|
110
113
|
this.timeout = 1e3;
|
|
@@ -150,20 +153,26 @@ class CopyButton extends WJElement {
|
|
|
150
153
|
*/
|
|
151
154
|
draw() {
|
|
152
155
|
let fragment = document.createDocumentFragment();
|
|
153
|
-
let
|
|
154
|
-
|
|
155
|
-
tooltip.setAttribute("content", this.label || "Copy");
|
|
156
|
+
let content;
|
|
157
|
+
this._tooltipElement = null;
|
|
156
158
|
if (WjElementUtils.hasSlot(this)) {
|
|
157
|
-
|
|
158
|
-
tooltip.appendChild(slot);
|
|
159
|
+
content = document.createElement("slot");
|
|
159
160
|
} else {
|
|
160
161
|
let icon = document.createElement("wje-icon");
|
|
161
162
|
icon.setAttribute("name", "clipboard");
|
|
162
|
-
|
|
163
|
+
content = icon;
|
|
163
164
|
this.icon = icon;
|
|
164
165
|
}
|
|
165
|
-
|
|
166
|
-
|
|
166
|
+
if (this.hasAttribute("tooltip")) {
|
|
167
|
+
let tooltip = document.createElement("wje-tooltip");
|
|
168
|
+
tooltip.setAttribute("offset", "5");
|
|
169
|
+
tooltip.setAttribute("content", this.getAttribute("tooltip") || this.label || "Copy");
|
|
170
|
+
tooltip.appendChild(content);
|
|
171
|
+
fragment.appendChild(tooltip);
|
|
172
|
+
this._tooltipElement = tooltip;
|
|
173
|
+
} else {
|
|
174
|
+
fragment.appendChild(content);
|
|
175
|
+
}
|
|
167
176
|
return fragment;
|
|
168
177
|
}
|
|
169
178
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-copy-button.js","sources":["../packages/wje-copy-button/service/service.js","../packages/wje-copy-button/copy-button.element.js","../packages/wje-copy-button/copy-button.js"],"sourcesContent":["/**\n * Create a node with the text content.\n * @param text\n * @returns {Element}\n */\nfunction createNode(text) {\n const node = document.createElement('pre');\n node.style.width = '1px';\n node.style.height = '1px';\n node.style.position = 'fixed';\n node.style.top = '5px';\n node.textContent = text;\n return node;\n}\n\n/**\n * Copy the node to the clipboard.\n * @param node\n * @returns {Promise<never>|Promise<void>}\n */\nexport function copyNode(node) {\n if ('clipboard' in navigator) {\n return navigator.clipboard.writeText(node.textContent || '');\n }\n\n const selection = getSelection(); // Firefox return null\n if (selection === null) {\n return Promise.reject(new Error());\n }\n\n selection.removeAllRanges();\n\n const range = document.createRange();\n range.selectNodeContents(node);\n selection.addRange(range);\n\n // document.execCommand(\"copy\")\n selection.removeAllRanges();\n return Promise.resolve();\n}\n\n/**\n * Copy the text to the clipboard.\n * @param text\n * @returns {Promise<never>|Promise<void>}\n */\nexport function copyText(text) {\n if ('clipboard' in navigator) {\n return navigator.clipboard.writeText(text);\n }\n\n const body = document.body;\n if (!body) {\n return Promise.reject(new Error());\n }\n\n const node = createNode(text);\n body.appendChild(node);\n copyNode(node);\n body.removeChild(node);\n return Promise.resolve();\n}\n","import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Input from '../wje-input/input.js';\nimport { copyNode, copyText } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary CopyButton is a custom web component that extends WJElement.\n * It provides a button that, when clicked, copies a specified text to the clipboard.\n * The text to be copied can be specified through the `value` attribute.\n * The CopyButton also supports keyboard interaction, copying the text when the space or enter key is pressed.\n * @documentation https://elements.webjet.sk/components/copy-button\n * @status stable\n * @augments WJElement\n * @attribute {string} for - The id of the element to copy content from.\n * @attribute {string} value - The text to be copied.\n * @slot - This is a default/unnamed slot.\n * @csspart button - Styles the button element.\n * @cssproperty --text-color - Controls the color of the text.\n * @cssproperty --background-color - Controls the background color of the button.\n * //@fires wje:copy-button - Dispatched when the button is clicked and the text is copied.\n * @tag wje-copy-button\n */\nexport default class CopyButton extends WJElement {\n /**\n * Constructor for the CopyButton class.\n * Initializes the timeout property.\n */\n constructor() {\n super();\n\n this.timeout = 1000;\n }\n\n /**\n * Setter for the value property.\n * @param {string} value The value to be set.\n */\n set value(value) {\n this.setAttribute('value', value);\n }\n\n /**\n * Getter for the value property.\n * @returns {string} The value of the value property.\n */\n get value() {\n return this.getAttribute('value') || '';\n }\n\n className = 'CopyButton';\n\n /**\n * Getter for the cssStyleSheet property.\n * @returns {string} The CSS styles.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observedAttributes property.\n * @returns {Array} An empty array.\n */\n static get observedAttributes() {\n return [];\n }\n\n /**\n * Sets up the attributes for the CopyButton.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /**\n * Draws the ColorPicker element.\n * @returns {DocumentFragment} The created document fragment.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('offset', '5');\n tooltip.setAttribute('content', this.label || 'Copy');\n\n if (WjElementUtils.hasSlot(this)) {\n let slot = document.createElement('slot');\n tooltip.appendChild(slot);\n } else {\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'clipboard');\n\n tooltip.appendChild(icon);\n this.icon = icon;\n }\n\n fragment.appendChild(tooltip);\n\n this.tooltip = tooltip;\n\n return fragment;\n }\n\n /**\n * Adds event listeners for the click, focus, and blur events.\n */\n afterDraw() {\n this.syncAria();\n event.addListener(this, 'click', null, this.clicked);\n event.addListener(this, 'focus', null, this.focused);\n event.addListener(this, 'blur', null, this.blurred);\n\n event.addListener(this, 'wje-copy-button:click', null, this.copied);\n }\n\n /**\n * Sync ARIA attributes on host.\n */\n syncAria() {\n if (!this.hasAttribute('role')) {\n this.setAriaState({ role: 'button' });\n }\n\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n\n const ariaLabel = this.getAttribute('aria-label');\n const label = this.getAttribute('label') || this.label || 'Copy';\n if (!ariaLabel && label) {\n this.setAriaState({ label });\n }\n\n if (this.hasAttribute('disabled')) {\n this.setAriaState({ disabled: true });\n }\n }\n\n /**\n * Handles the click event.\n * @param {Event} e The event object.\n */\n clicked = (e) => {\n const button = e.currentTarget;\n if (button instanceof HTMLElement) {\n this.copy(button);\n }\n };\n\n /**\n * Handles the keydown event.\n * @param {Event} e The event object.\n */\n keydown = (e) => {\n if (e.key === ' ' || e.key === 'Enter') {\n const button = e.currentTarget;\n if (button instanceof HTMLElement) {\n this.copy(button);\n }\n }\n };\n\n /**\n * Handles the focus event.\n * @param {Event} e The event object.\n */\n focused = (e) => {\n e.currentTarget.addEventListener('keydown', this.keydown);\n };\n\n /**\n * Handles the blur event.\n * @param {Event} e The event object.\n */\n blurred = (e) => {\n e.currentTarget.removeEventListener('keydown', this.keydown);\n };\n\n /**\n * Handles the copied event.\n * You can override this method to customize the behavior when the text is copied.\n * @param {Event} e The event object.\n */\n copied = (e) => {\n if (this.hasOwnProperty('icon')) {\n this.icon.setAttribute('color', 'success');\n this.icon.setAttribute('name', 'check');\n }\n this.tooltip.setAttribute('content', this.labelSuccess || 'Copied');\n\n setTimeout(() => {\n if (this.hasOwnProperty('icon')) {\n this.icon.removeAttribute('color');\n this.icon.setAttribute('name', 'clipboard');\n }\n this.tooltip.setAttribute('content', this.label || 'Copy');\n }, this.timeout);\n };\n\n /**\n * Copies the specified text or node.\n * @param {HTMLElement} button The button element.\n */\n async copy(button) {\n const id = this.getAttribute('for');\n const text = this.getAttribute('value');\n\n if (button.getAttribute('aria-disabled') === 'true') {\n return;\n }\n\n if (text) {\n await copyText(text);\n event.dispatchCustomEvent(this, 'wje-copy-button:click');\n } else if (id) {\n const root = 'getRootNode' in Element.prototype ? button.getRootNode() : button.ownerDocument;\n if (!(root instanceof Document || ('ShadowRoot' in window && root instanceof ShadowRoot))) return;\n\n const node = root.getElementById(id);\n if (node) {\n await this.copyTarget(node);\n event.dispatchCustomEvent(this, 'wje-copy-button:click');\n }\n }\n }\n\n /**\n * Copies the target content.\n * @param {HTMLElement} content The content to be copied.\n * @returns {Promise} A promise that resolves when the content is copied.\n */\n copyTarget(content) {\n if (content instanceof HTMLInputElement || content instanceof HTMLTextAreaElement || content instanceof Input) {\n return copyText(content.value);\n } else if (content instanceof HTMLAnchorElement && content.hasAttribute('href')) {\n return copyText(content.href);\n } else {\n return copyNode(content);\n }\n }\n}\n","import CopyButton from './copy-button.element.js';\n\nexport default CopyButton;\n\nCopyButton.define('wje-copy-button', CopyButton);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-copy-button.js","sources":["../packages/wje-copy-button/service/service.js","../packages/wje-copy-button/copy-button.element.js","../packages/wje-copy-button/copy-button.js"],"sourcesContent":["/**\n * Create a node with the text content.\n * @param text\n * @returns {Element}\n */\nfunction createNode(text) {\n const node = document.createElement('pre');\n node.style.width = '1px';\n node.style.height = '1px';\n node.style.position = 'fixed';\n node.style.top = '5px';\n node.textContent = text;\n return node;\n}\n\n/**\n * Copy the node to the clipboard.\n * @param node\n * @returns {Promise<never>|Promise<void>}\n */\nexport function copyNode(node) {\n if ('clipboard' in navigator) {\n return navigator.clipboard.writeText(node.textContent || '');\n }\n\n const selection = getSelection(); // Firefox return null\n if (selection === null) {\n return Promise.reject(new Error());\n }\n\n selection.removeAllRanges();\n\n const range = document.createRange();\n range.selectNodeContents(node);\n selection.addRange(range);\n\n // document.execCommand(\"copy\")\n selection.removeAllRanges();\n return Promise.resolve();\n}\n\n/**\n * Copy the text to the clipboard.\n * @param text\n * @returns {Promise<never>|Promise<void>}\n */\nexport function copyText(text) {\n if ('clipboard' in navigator) {\n return navigator.clipboard.writeText(text);\n }\n\n const body = document.body;\n if (!body) {\n return Promise.reject(new Error());\n }\n\n const node = createNode(text);\n body.appendChild(node);\n copyNode(node);\n body.removeChild(node);\n return Promise.resolve();\n}\n","import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Input from '../wje-input/input.js';\nimport { copyNode, copyText } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary CopyButton is a custom web component that extends WJElement.\n * It provides a button that, when clicked, copies a specified text to the clipboard.\n * The text to be copied can be specified through the `value` attribute.\n * The CopyButton also supports keyboard interaction, copying the text when the space or enter key is pressed.\n * @documentation https://elements.webjet.sk/components/copy-button\n * @status stable\n * @augments WJElement\n * @attribute {string} for - The id of the element to copy content from.\n * @attribute {string} label - Accessible label for the button. Also used as fallback tooltip text when the `tooltip` attribute is present without a value.\n * @attribute {string} label-success - Text displayed in the tooltip after a successful copy. Used only when the `tooltip` attribute is present.\n * @attribute {string} tooltip - Enables the tooltip. When set to a string, the value is used as the default tooltip content.\n * @attribute {string} value - The text to be copied.\n * @slot - This is a default/unnamed slot.\n * @csspart button - Styles the button element.\n * @cssproperty --text-color - Controls the color of the text.\n * @cssproperty --background-color - Controls the background color of the button.\n * //@fires wje:copy-button - Dispatched when the button is clicked and the text is copied.\n * @tag wje-copy-button\n */\nexport default class CopyButton extends WJElement {\n /**\n * Constructor for the CopyButton class.\n * Initializes the timeout property.\n */\n constructor() {\n super();\n\n this.timeout = 1000;\n }\n\n /**\n * Setter for the value property.\n * @param {string} value The value to be set.\n */\n set value(value) {\n this.setAttribute('value', value);\n }\n\n /**\n * Getter for the value property.\n * @returns {string} The value of the value property.\n */\n get value() {\n return this.getAttribute('value') || '';\n }\n\n className = 'CopyButton';\n\n /**\n * Getter for the cssStyleSheet property.\n * @returns {string} The CSS styles.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observedAttributes property.\n * @returns {Array} An empty array.\n */\n static get observedAttributes() {\n return [];\n }\n\n /**\n * Sets up the attributes for the CopyButton.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /**\n * Draws the ColorPicker element.\n * @returns {DocumentFragment} The created document fragment.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n let content;\n this._tooltipElement = null;\n\n if (WjElementUtils.hasSlot(this)) {\n content = document.createElement('slot');\n } else {\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'clipboard');\n\n content = icon;\n this.icon = icon;\n }\n\n if (this.hasAttribute('tooltip')) {\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('offset', '5');\n tooltip.setAttribute('content', this.getAttribute('tooltip') || this.label || 'Copy');\n\n tooltip.appendChild(content);\n fragment.appendChild(tooltip);\n\n this._tooltipElement = tooltip;\n } else {\n fragment.appendChild(content);\n }\n\n return fragment;\n }\n\n /**\n * Adds event listeners for the click, focus, and blur events.\n */\n afterDraw() {\n this.syncAria();\n event.addListener(this, 'click', null, this.clicked);\n event.addListener(this, 'focus', null, this.focused);\n event.addListener(this, 'blur', null, this.blurred);\n\n event.addListener(this, 'wje-copy-button:click', null, this.copied);\n }\n\n /**\n * Sync ARIA attributes on host.\n */\n syncAria() {\n if (!this.hasAttribute('role')) {\n this.setAriaState({ role: 'button' });\n }\n\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n\n const ariaLabel = this.getAttribute('aria-label');\n const label = this.getAttribute('label') || this.label || 'Copy';\n if (!ariaLabel && label) {\n this.setAriaState({ label });\n }\n\n if (this.hasAttribute('disabled')) {\n this.setAriaState({ disabled: true });\n }\n }\n\n /**\n * Handles the click event.\n * @param {Event} e The event object.\n */\n clicked = (e) => {\n const button = e.currentTarget;\n if (button instanceof HTMLElement) {\n this.copy(button);\n }\n };\n\n /**\n * Handles the keydown event.\n * @param {Event} e The event object.\n */\n keydown = (e) => {\n if (e.key === ' ' || e.key === 'Enter') {\n const button = e.currentTarget;\n if (button instanceof HTMLElement) {\n this.copy(button);\n }\n }\n };\n\n /**\n * Handles the focus event.\n * @param {Event} e The event object.\n */\n focused = (e) => {\n e.currentTarget.addEventListener('keydown', this.keydown);\n };\n\n /**\n * Handles the blur event.\n * @param {Event} e The event object.\n */\n blurred = (e) => {\n e.currentTarget.removeEventListener('keydown', this.keydown);\n };\n\n /**\n * Handles the copied event.\n * You can override this method to customize the behavior when the text is copied.\n */\n copied = () => {\n if (this.hasOwnProperty('icon')) {\n this.icon.setAttribute('color', 'success');\n this.icon.setAttribute('name', 'check');\n }\n\n if (this._tooltipElement) {\n this._tooltipElement.setAttribute('content', this.labelSuccess || 'Copied');\n }\n\n setTimeout(() => {\n if (this.hasOwnProperty('icon')) {\n this.icon.removeAttribute('color');\n this.icon.setAttribute('name', 'clipboard');\n }\n\n if (this._tooltipElement) {\n this._tooltipElement.setAttribute('content', this.getAttribute('tooltip') || this.label || 'Copy');\n }\n }, this.timeout);\n };\n\n /**\n * Copies the specified text or node.\n * @param {HTMLElement} button The button element.\n */\n async copy(button) {\n const id = this.getAttribute('for');\n const text = this.getAttribute('value');\n\n if (button.getAttribute('aria-disabled') === 'true') {\n return;\n }\n\n if (text) {\n await copyText(text);\n event.dispatchCustomEvent(this, 'wje-copy-button:click');\n } else if (id) {\n const root = 'getRootNode' in Element.prototype ? button.getRootNode() : button.ownerDocument;\n if (!(root instanceof Document || ('ShadowRoot' in window && root instanceof ShadowRoot))) return;\n\n const node = root.getElementById(id);\n if (node) {\n await this.copyTarget(node);\n event.dispatchCustomEvent(this, 'wje-copy-button:click');\n }\n }\n }\n\n /**\n * Copies the target content.\n * @param {HTMLElement} content The content to be copied.\n * @returns {Promise} A promise that resolves when the content is copied.\n */\n copyTarget(content) {\n if (content instanceof HTMLInputElement || content instanceof HTMLTextAreaElement || content instanceof Input) {\n return copyText(content.value);\n } else if (content instanceof HTMLAnchorElement && content.hasAttribute('href')) {\n return copyText(content.href);\n } else {\n return copyNode(content);\n }\n }\n}\n","import CopyButton from './copy-button.element.js';\n\nexport default CopyButton;\n\nCopyButton.define('wje-copy-button', CopyButton);\n"],"names":[],"mappings":"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"}
|