npm - @spw-ds/spw-stencil-library - Versions diffs - 1.2.0 → 1.2.1 - Mend

@spw-ds/spw-stencil-library 1.2.0 → 1.2.1

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

Files changed (658) hide show

package/dist/spw-stencil-library/spw-modal.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-modal.entry.esm.js","sources":["src/utils/focus-trap.ts","src/utils/animation.ts","src/components/spw-modal/spw-modal.scss?tag=spw-modal&encapsulation=shadow","src/components/spw-modal/spw-modal.tsx"],"sourcesContent":["/*\n Copy/pasted from https://github.com/andreasbm/focus-trap\n /\n\n/\n Traverses the slots of the open shadowroots and returns all children matching the query.\n * We need to traverse each child-depth one at a time because if an element should be skipped\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"\")\n the information of whether the children is within a hidden parent is lost.\n * @param {ShadowRoot \| HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n /\nexport function queryShadowRoot(\n root: ShadowRoot \| HTMLElement,\n skipNode: ($elem: HTMLElement) => boolean,\n isMatch: ($elem: HTMLElement) => boolean,\n maxDepth: number = 20,\n depth: number = 0,\n): HTMLElement[] {\n const matches: HTMLElement[] = [];\n\n // If the depth is above the max depth, abort the searching here.\n if (depth >= maxDepth) {\n return matches;\n }\n\n // Traverses a slot element\n const traverseSlot = ($slot: HTMLSlotElement) => {\n // Only check nodes that are of the type Node.ELEMENT_NODE\n // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n const assignedNodes = $slot.assignedNodes().filter(node => node.nodeType === 1);\n if (assignedNodes.length > 0) {\n const $slotParent = assignedNodes[0].parentElement!;\n return queryShadowRoot($slotParent, skipNode, isMatch, maxDepth, depth + 1);\n }\n\n return [];\n };\n\n // Go through each child and continue the traversing if necessary\n // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n // Therefore we fallback to an empty array if it is undefined.\n const children = Array.from(root.children \|\| []) as HTMLElement[];\n for (const $child of children) {\n // Check if the element and its descendants should be skipped\n if (skipNode($child)) {\n // console.log('-- SKIP', $child);\n continue;\n }\n\n // console.log('$child', $child);\n\n // If the element matches we always add it\n if (isMatch($child)) {\n matches.push($child);\n }\n\n if ($child.shadowRoot != null) {\n // If the element has a shadow root we need to traverse it\n matches.push(...queryShadowRoot($child.shadowRoot, skipNode, isMatch, maxDepth, depth + 1));\n } else if ($child.tagName === 'SLOT') {\n // If the child is a slot we need to traverse each assigned node\n matches.push(...traverseSlot($child as HTMLSlotElement));\n } else {\n // Traverse the children of the element\n matches.push(...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1));\n }\n }\n\n return matches;\n}\n\n/\n Returns whether the element is hidden.\n * @param $elem\n /\nexport function isHidden($elem: HTMLElement): boolean {\n return (\n $elem.hasAttribute('hidden') \|\|\n ($elem.hasAttribute('aria-hidden') && $elem.getAttribute('aria-hidden') !== 'false') \|\|\n // A quick and dirty way to check whether the element is hidden.\n // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n // we won't be able to catch it here. We accept it due to the huge performance benefits.\n $elem.style.display === `none` \|\|\n $elem.style.opacity === `0` \|\|\n $elem.style.visibility === `hidden` \|\|\n $elem.style.visibility === `collapse`\n );\n\n // If offsetParent is null we can assume that the element is hidden\n // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n // \|\| $elem.offsetParent == null;\n}\n\n/\n Returns whether the element is disabled.\n * @param $elem\n /\nexport function isDisabled($elem: HTMLElement): boolean {\n return $elem.hasAttribute('disabled') \|\| ($elem.hasAttribute('aria-disabled') && $elem.getAttribute('aria-disabled') !== 'false');\n}\n\n/\n Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n /\nexport function isFocusable($elem: HTMLElement): boolean {\n // Discard elements that are removed from the tab order.\n if ($elem.getAttribute('tabindex') === '-1' \|\| isHidden($elem) \|\| isDisabled($elem)) {\n return false;\n }\n\n return (\n // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n $elem.hasAttribute('tabindex') \|\|\n // Anchor tags or area tags with a href set\n (($elem instanceof HTMLAnchorElement \|\| $elem instanceof HTMLAreaElement) && $elem.hasAttribute('href')) \|\|\n // Form elements which are not disabled\n $elem instanceof HTMLButtonElement \|\|\n $elem instanceof HTMLInputElement \|\|\n $elem instanceof HTMLTextAreaElement \|\|\n $elem instanceof HTMLSelectElement \|\|\n // IFrames\n $elem instanceof HTMLIFrameElement\n );\n}\n","export function animationTo(element: HTMLElement, keyframes: Keyframe \| Keyframe[], options?: KeyframeAnimationOptions) {\n const animated = element.animate(keyframes, { ...options, fill: 'both' });\n animated.addEventListener('finish', () => {\n // @ts-ignore\n animated.commitStyles();\n animated.cancel();\n });\n\n return animated;\n}\n\nconst keyframeDefaults = {\n easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n};\n\nexport const KEYFRAMES = {\n fadeIn: [\n {\n offset: 0,\n ...keyframeDefaults,\n opacity: 0,\n },\n {\n offset: 1,\n ...keyframeDefaults,\n opacity: 1,\n },\n ],\n fadeOut: [\n {\n offset: 0,\n ...keyframeDefaults,\n opacity: 1,\n },\n {\n offset: 1,\n ...keyframeDefaults,\n opacity: 0,\n },\n ],\n};\n",":host {\n display: contents;\n}\n\n.spw-modal {\n display: none;\n justify-content: center;\n align-items: center;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1060;\n overflow-y: auto;\n\n &--opened {\n display: flex;\n }\n}\n\n.spw-modal__overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: black;\n opacity: 0.7;\n z-index: 0;\n}\n\n.spw-modal__content-container {\n position: absolute;\n display: flex;\n justify-content: center;\n width: 90%;\n background-color: #fff;\n box-shadow: var(--spw-effect-elevation-6);\n overflow: hidden;\n box-sizing: border-box;\n align-items: stretch;\n border-radius: var(--spw-spacings-border-radius-lg);\n\n &--small {\n max-width: 480px;\n }\n\n &--medium {\n max-width: 600px;\n }\n\n &--large {\n max-width: 768px;\n }\n\n &--fluid {\n max-width: 100%;\n }\n}\n\n.spw-modal__content {\n display: flex;\n flex-direction: column;\n border: 1px solid var(--spw-color-themes-grey-grey-300);\n width: 100%;\n max-height: 90vh;\n overflow-y: auto;\n\n .spw-modal--sticky-buttons & {\n overflow-y: visible;\n }\n}\n\n.spw-modal__icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n background-color: #fff;\n align-self: stretch;\n}\n\n.spw-modal__header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n padding-bottom: 0;\n margin-top: 6px;\n margin-bottom: 12px;\n box-sizing: border-box;\n border-radius: 1px 1px 0px 0px;\n color: var(--spw-colors-support-grey-grey-900);\n}\n\n.spw-modal__caption {\n overflow: hidden;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n.spw-modal__header h2 {\n margin: 0;\n font-size: 18px;\n color: var(--spw-colors-support-grey-grey-900);\n}\n\n.spw-modal__header button {\n background: none;\n border: none;\n font-size: 1.5em;\n padding: 0;\n cursor: pointer;\n}\n\n.spw-modal__close-button {\n position: absolute;\n top: 12px;\n right: 12px;\n cursor: pointer;\n font-size: 21px;\n &:hover {\n opacity: 0.7;\n }\n}\n\n.spw-modal__body {\n padding: 0 24px;\n margin-bottom: 12px;\n box-sizing: border-box;\n flex: 1;\n font-size: 16px;\n color: var(--spw-colors-support-grey-grey-700);\n\n .spw-modal--sticky-buttons & {\n overflow-y: auto;\n }\n}\n\n.spw-modal__buttons {\n ::slotted([slot='buttons']) {\n padding: 24px;\n padding-top: 12px;\n }\n}\n\n.spw-modal__footer--buttons-present ::slotted() {\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 24px;\n padding-top: 8px;\n\n .spw-modal__content-container--small & {\n flex-direction: column;\n gap: 8px;\n }\n\n .spw-modal__content-container--medium & {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n\n.spw-modal__border {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n font-size: 1.5em;\n flex-grow: 1;\n}\n","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch, Method } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '@utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '@utils/animation';\n\ntype CloseEventTrigger = 'CLOSE_BUTTON' \| 'ESCAPE_KEY' \| 'BACKDROP' \| 'PROGRAMMATIC';\n\nexport interface BeforeCloseEventDetail {\n trigger: CloseEventTrigger;\n}\n\n@Component({\n tag: 'spw-modal',\n styleUrl: 'spw-modal.scss',\n shadow: true,\n})\nexport class SpwModal {\n /** Indique si la modal est ouverte ou fermée, mutable et reflétée dans le DOM /\n @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n\n @State() showModal: boolean = this.opened \|\| false;\n\n /* Titre de la modal /\n @Prop() caption: string = 'Titre de la modal';\n /* Indique si la fermeture de la modal est possible en cliquant sur l'overlay /\n @Prop() closeOnOverlayClick: boolean = true;\n /* Rend les boutons en bas de la modal \"collants\" (toujours visibles) si vrai /\n @Prop() stickyButtons: boolean = false;\n /* Événement déclenché lors de l'ouverture de la modal /\n @Event() spwModalOpen: EventEmitter;\n /* Événement déclenché lors de la fermeture de la modal /\n @Event() spwModalClose: EventEmitter;\n /* Définit la taille de la modal : 'small', 'medium', 'large' ou 'fluid' /\n @Prop() size: 'small' \| 'medium' \| 'large' \| 'fluid' = 'small';\n /* Icône d'alerte à afficher dans la modal /\n @Prop() alertIcon: string = '';\n\n @Element() hostElement: HTMLSpwModalElement;\n\n @State() slotButtonsPresent: boolean = false;\n\n /* Indique si le bouton de fermeture est visible /\n @Prop() showCloseButton: boolean = true;\n\n private modalContainer: HTMLElement;\n private focusableElements: HTMLElement[] = [];\n private closeButton: HTMLSpwIconElement;\n\n /\n Méthode publique pour fermer la modal programmatiquement\n * @returns Promise qui se résout quand la modal est fermée\n /\n @Method()\n async closeModal(): Promise<void> {\n this.doBeforeClose('PROGRAMMATIC');\n }\n\n /\n Méthode publique pour ouvrir la modal programmatiquement\n * @returns Promise qui se résout quand la modal est ouverte\n */\n @Method()\n async openModal(): Promise<void> {\n this.opened = true;\n }\n\n componentDidLoad() {\n this.focusableElements = queryShadowRoot(this.hostElement.shadowRoot, el => isHidden(el) \|\| el.matches('[data-focus-trap-edge]'), isFocusable);\n document.addEventListener('click', this.handleClick);\n document.addEventListener('click', this.handleClose);\n document.addEventListener('keydown', this.handleKeypress);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleClick);\n document.removeEventListener('click', this.handleClose);\n document.removeEventListener('keydown', this.handleKeypress);\n }\n\n private handleClick = (event: MouseEvent) => {\n const trigger = (event.target as HTMLElement).closest('[data-modal-trigger]');\n if (trigger) {\n const modalId = trigger.getAttribute('data-modal-trigger');\n if (modalId === this.hostElement.id) {\n this.opened = true;\n }\n }\n };\n\n private handleClose = (event: MouseEvent) => {\n const trigger = (event.target as HTMLElement).closest('[data-modal-close]');\n if (trigger) {\n const modalId = trigger.getAttribute('data-modal-close');\n if (modalId === this.hostElement.id) {\n this.opened = false;\n }\n }\n };\n\n private getFirstFocusableElement(): HTMLElement \| null {\n return this.focusableElements[0];\n }\n\n private getLastFocusableElement(): HTMLElement \| null {\n return this.focusableElements[this.focusableElements.length - 1];\n }\n\n private handleTopFocus = () => {\n this.attemptFocus(this.getLastFocusableElement());\n };\n\n private handleBottomFocus = () => {\n this.attemptFocus(this.getFirstFocusableElement());\n };\n\n private attemptFocus(element: HTMLElement \| null) {\n if (element == null) {\n setTimeout(() => {\n this.closeButton.focus();\n });\n return;\n }\n\n setTimeout(() => {\n element.focus();\n }, 0);\n }\n\n private open() {\n this.showModal = true;\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n setTimeout(() => {\n this.getLastFocusableElement()?.focus();\n this.getLastFocusableElement()?.blur();\n }, 0);\n\n this.spwModalOpen.emit();\n });\n } catch (err) {\n this.spwModalOpen.emit();\n }\n }\n\n private close() {\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n this.showModal = false;\n this.spwModalClose.emit();\n });\n } catch (err) {\n this.showModal = false;\n this.spwModalClose.emit();\n }\n }\n\n private handleKeypress = (event: KeyboardEvent) => {\n if (this.showModal && event.key === 'Escape') {\n this.doBeforeClose('ESCAPE_KEY');\n }\n };\n\n private doBeforeClose(trigger: CloseEventTrigger) {\n const triggers = [];\n triggers.push(trigger);\n const prevented = triggers.some(event => event.defaultPrevented);\n if (!prevented) {\n this.opened = false;\n }\n }\n\n @Watch('opened')\n openedChanged(newValue: boolean) {\n newValue === true ? this.open() : this.close();\n }\n\n private handleOverlayClick() {\n if (this.closeOnOverlayClick) {\n this.doBeforeClose('BACKDROP');\n }\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-modal': true,\n 'spw-modal--opened': this.showModal,\n 'spw-modal--sticky-buttons': this.stickyButtons,\n };\n }\n\n render() {\n return (\n <Host>\n <div ref={el => (this.modalContainer = el)} class={this.elementClass}>\n <div class=\"spw-modal__overlay\" onClick={() => this.handleOverlayClick()}></div>\n <div data-focus-trap-edge onFocus={this.handleTopFocus} tabindex=\"0\"></div>\n <div class={`spw-modal__content-container spw-modal__content-container--${this.size}`} role=\"dialog\" aria-modal=\"true\" aria-label={this.caption}>\n <div class=\"spw-modal__content\">\n <div class=\"spw-modal__header\">\n <h2 class=\"spw-modal__caption\">{this.caption}</h2>\n {this.showCloseButton && (\n <spw-icon class=\"spw-modal__close-button\" ref={el => (this.closeButton = el)} icon=\"fa-xmark\" onClick={() => this.doBeforeClose('CLOSE_BUTTON')}></spw-icon>\n )}\n </div>\n <div class=\"spw-modal__body\">\n <slot name=\"content\" />\n </div>\n <div class=\"spw-modal__buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n </div>\n <div data-focus-trap-edge onFocus={this.handleBottomFocus} tabindex=\"0\"></div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"spw-modal.entry.esm.js","sources":["src/utils/focus-trap.ts","src/utils/animation.ts","src/components/spw-modal/spw-modal.scss?tag=spw-modal&encapsulation=shadow","src/components/spw-modal/spw-modal.tsx"],"sourcesContent":["/*\n Copy/pasted from https://github.com/andreasbm/focus-trap\n /\n\n/\n Traverses the slots of the open shadowroots and returns all children matching the query.\n * We need to traverse each child-depth one at a time because if an element should be skipped\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"\")\n the information of whether the children is within a hidden parent is lost.\n * @param {ShadowRoot \| HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n /\nexport function queryShadowRoot(\n root: ShadowRoot \| HTMLElement,\n skipNode: ($elem: HTMLElement) => boolean,\n isMatch: ($elem: HTMLElement) => boolean,\n maxDepth: number = 20,\n depth: number = 0,\n): HTMLElement[] {\n const matches: HTMLElement[] = [];\n\n // If the depth is above the max depth, abort the searching here.\n if (depth >= maxDepth) {\n return matches;\n }\n\n // Traverses a slot element\n const traverseSlot = ($slot: HTMLSlotElement) => {\n // Only check nodes that are of the type Node.ELEMENT_NODE\n // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n const assignedNodes = $slot.assignedNodes().filter(node => node.nodeType === 1);\n if (assignedNodes.length > 0) {\n const $slotParent = assignedNodes[0].parentElement!;\n return queryShadowRoot($slotParent, skipNode, isMatch, maxDepth, depth + 1);\n }\n\n return [];\n };\n\n // Go through each child and continue the traversing if necessary\n // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n // Therefore we fallback to an empty array if it is undefined.\n const children = Array.from(root.children \|\| []) as HTMLElement[];\n for (const $child of children) {\n // Check if the element and its descendants should be skipped\n if (skipNode($child)) {\n // console.log('-- SKIP', $child);\n continue;\n }\n\n // console.log('$child', $child);\n\n // If the element matches we always add it\n if (isMatch($child)) {\n matches.push($child);\n }\n\n if ($child.shadowRoot != null) {\n // If the element has a shadow root we need to traverse it\n matches.push(...queryShadowRoot($child.shadowRoot, skipNode, isMatch, maxDepth, depth + 1));\n } else if ($child.tagName === 'SLOT') {\n // If the child is a slot we need to traverse each assigned node\n matches.push(...traverseSlot($child as HTMLSlotElement));\n } else {\n // Traverse the children of the element\n matches.push(...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1));\n }\n }\n\n return matches;\n}\n\n/\n Returns whether the element is hidden.\n * @param $elem\n /\nexport function isHidden($elem: HTMLElement): boolean {\n return (\n $elem.hasAttribute('hidden') \|\|\n ($elem.hasAttribute('aria-hidden') && $elem.getAttribute('aria-hidden') !== 'false') \|\|\n // A quick and dirty way to check whether the element is hidden.\n // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n // we won't be able to catch it here. We accept it due to the huge performance benefits.\n $elem.style.display === `none` \|\|\n $elem.style.opacity === `0` \|\|\n $elem.style.visibility === `hidden` \|\|\n $elem.style.visibility === `collapse`\n );\n\n // If offsetParent is null we can assume that the element is hidden\n // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n // \|\| $elem.offsetParent == null;\n}\n\n/\n Returns whether the element is disabled.\n * @param $elem\n /\nexport function isDisabled($elem: HTMLElement): boolean {\n return $elem.hasAttribute('disabled') \|\| ($elem.hasAttribute('aria-disabled') && $elem.getAttribute('aria-disabled') !== 'false');\n}\n\n/\n Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n /\nexport function isFocusable($elem: HTMLElement): boolean {\n // Discard elements that are removed from the tab order.\n if ($elem.getAttribute('tabindex') === '-1' \|\| isHidden($elem) \|\| isDisabled($elem)) {\n return false;\n }\n\n return (\n // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n $elem.hasAttribute('tabindex') \|\|\n // Anchor tags or area tags with a href set\n (($elem instanceof HTMLAnchorElement \|\| $elem instanceof HTMLAreaElement) && $elem.hasAttribute('href')) \|\|\n // Form elements which are not disabled\n $elem instanceof HTMLButtonElement \|\|\n $elem instanceof HTMLInputElement \|\|\n $elem instanceof HTMLTextAreaElement \|\|\n $elem instanceof HTMLSelectElement \|\|\n // IFrames\n $elem instanceof HTMLIFrameElement\n );\n}\n","export function animationTo(element: HTMLElement, keyframes: Keyframe \| Keyframe[], options?: KeyframeAnimationOptions) {\n const animated = element.animate(keyframes, { ...options, fill: 'both' });\n animated.addEventListener('finish', () => {\n // @ts-ignore\n animated.commitStyles();\n animated.cancel();\n });\n\n return animated;\n}\n\nconst keyframeDefaults = {\n easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n};\n\nexport const KEYFRAMES = {\n fadeIn: [\n {\n offset: 0,\n ...keyframeDefaults,\n opacity: 0,\n },\n {\n offset: 1,\n ...keyframeDefaults,\n opacity: 1,\n },\n ],\n fadeOut: [\n {\n offset: 0,\n ...keyframeDefaults,\n opacity: 1,\n },\n {\n offset: 1,\n ...keyframeDefaults,\n opacity: 0,\n },\n ],\n};\n",":host {\n display: contents;\n}\n\n.spw-modal {\n display: none;\n justify-content: center;\n align-items: center;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1060;\n overflow-y: auto;\n\n &--opened {\n display: flex;\n }\n}\n\n.spw-modal__overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: black;\n opacity: 0.7;\n z-index: 0;\n}\n\n.spw-modal__content-container {\n position: absolute;\n display: flex;\n justify-content: center;\n width: 90%;\n background-color: #fff;\n box-shadow: var(--spw-effect-elevation-6);\n overflow: hidden;\n box-sizing: border-box;\n align-items: stretch;\n border-radius: var(--spw-spacings-border-radius-lg);\n\n &--small {\n max-width: 480px;\n }\n\n &--medium {\n max-width: 600px;\n }\n\n &--large {\n max-width: 768px;\n }\n\n &--fluid {\n max-width: 100%;\n }\n}\n\n.spw-modal__content {\n display: flex;\n flex-direction: column;\n border: 1px solid var(--spw-color-themes-grey-grey-300);\n width: 100%;\n max-height: 90vh;\n overflow-y: auto;\n\n .spw-modal--sticky-buttons & {\n overflow-y: visible;\n }\n}\n\n.spw-modal__icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n background-color: #fff;\n align-self: stretch;\n}\n\n.spw-modal__header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n padding-bottom: 0;\n margin-top: 6px;\n margin-bottom: 12px;\n box-sizing: border-box;\n border-radius: 1px 1px 0px 0px;\n color: var(--spw-colors-support-grey-grey-900);\n}\n\n.spw-modal__caption {\n overflow: hidden;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n.spw-modal__header h2 {\n margin: 0;\n font-size: 18px;\n color: var(--spw-colors-support-grey-grey-900);\n}\n\n.spw-modal__header button {\n background: none;\n border: none;\n font-size: 1.5em;\n padding: 0;\n cursor: pointer;\n}\n\n.spw-modal__close-button {\n position: absolute;\n top: 12px;\n right: 12px;\n cursor: pointer;\n font-size: 21px;\n &:hover {\n opacity: 0.7;\n }\n}\n\n.spw-modal__body {\n padding: 0 24px;\n margin-bottom: 12px;\n box-sizing: border-box;\n flex: 1;\n font-size: 16px;\n color: var(--spw-colors-support-grey-grey-700);\n\n .spw-modal--sticky-buttons & {\n overflow-y: auto;\n }\n}\n\n.spw-modal__buttons {\n ::slotted([slot='buttons']) {\n padding: 24px;\n padding-top: 12px;\n }\n}\n\n.spw-modal__footer--buttons-present ::slotted() {\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 24px;\n padding-top: 8px;\n\n .spw-modal__content-container--small & {\n flex-direction: column;\n gap: 8px;\n }\n\n .spw-modal__content-container--medium & {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n\n.spw-modal__border {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n font-size: 1.5em;\n flex-grow: 1;\n}\n","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch, Method } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '@utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '@utils/animation';\n\ntype CloseEventTrigger = 'CLOSE_BUTTON' \| 'ESCAPE_KEY' \| 'BACKDROP' \| 'PROGRAMMATIC';\n\nexport interface BeforeCloseEventDetail {\n trigger: CloseEventTrigger;\n}\n\n@Component({\n tag: 'spw-modal',\n styleUrl: 'spw-modal.scss',\n shadow: true,\n})\nexport class SpwModal {\n /** Indique si la modal est ouverte ou fermée, mutable et reflétée dans le DOM /\n @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n\n @State() showModal: boolean = this.opened \|\| false;\n\n /* Titre de la modal /\n @Prop() caption: string = 'Titre de la modal';\n /* Indique si la fermeture de la modal est possible en cliquant sur l'overlay /\n @Prop() closeOnOverlayClick: boolean = true;\n /* Rend les boutons en bas de la modal \"collants\" (toujours visibles) si vrai /\n @Prop() stickyButtons: boolean = false;\n /* Événement déclenché lors de l'ouverture de la modal /\n @Event() spwModalOpen: EventEmitter;\n /* Événement déclenché lors de la fermeture de la modal /\n @Event() spwModalClose: EventEmitter;\n /* Définit la taille de la modal : 'small', 'medium', 'large' ou 'fluid' /\n @Prop() size: 'small' \| 'medium' \| 'large' \| 'fluid' = 'small';\n /* Icône d'alerte à afficher dans la modal /\n @Prop() alertIcon: string = '';\n\n @Element() hostElement: HTMLSpwModalElement;\n\n @State() slotButtonsPresent: boolean = false;\n\n /* Indique si le bouton de fermeture est visible /\n @Prop() showCloseButton: boolean = true;\n\n private modalContainer: HTMLElement;\n private focusableElements: HTMLElement[] = [];\n private closeButton: HTMLSpwIconElement;\n\n /\n Méthode publique pour fermer la modal programmatiquement\n * @returns Promise qui se résout quand la modal est fermée\n /\n @Method()\n async closeModal(): Promise<void> {\n this.doBeforeClose('PROGRAMMATIC');\n }\n\n /\n Méthode publique pour ouvrir la modal programmatiquement\n * @returns Promise qui se résout quand la modal est ouverte\n */\n @Method()\n async openModal(): Promise<void> {\n this.opened = true;\n }\n\n componentDidLoad() {\n this.focusableElements = queryShadowRoot(this.hostElement.shadowRoot, el => isHidden(el) \|\| el.matches('[data-focus-trap-edge]'), isFocusable);\n window.addEventListener('click', this.handleClick, { capture: true });\n window.addEventListener('click', this.handleClose, { capture: true });\n window.addEventListener('keydown', this.handleKeypress);\n }\n\n disconnectedCallback() {\n window.removeEventListener('click', this.handleClick);\n window.removeEventListener('click', this.handleClose);\n window.removeEventListener('keydown', this.handleKeypress);\n }\n\n private handleClick = (event: MouseEvent) => {\n const path = event.composedPath() as HTMLElement[];\n const trigger = path.find(el => el instanceof HTMLElement && el.hasAttribute?.('data-modal-trigger')) as HTMLElement \| undefined;\n\n if (trigger) {\n const modalId = trigger.getAttribute('data-modal-trigger');\n if (modalId === this.hostElement.id) {\n this.opened = true;\n }\n }\n };\n\n private handleClose = (event: MouseEvent) => {\n const path = event.composedPath() as HTMLElement[];\n const trigger = path.find(el => el instanceof HTMLElement && el.hasAttribute?.('data-modal-close')) as HTMLElement \| undefined;\n\n if (trigger) {\n const modalId = trigger.getAttribute('data-modal-close');\n if (modalId === this.hostElement.id) {\n this.opened = false;\n }\n }\n };\n\n private getFirstFocusableElement(): HTMLElement \| null {\n return this.focusableElements[0];\n }\n\n private getLastFocusableElement(): HTMLElement \| null {\n return this.focusableElements[this.focusableElements.length - 1];\n }\n\n private handleTopFocus = () => {\n this.attemptFocus(this.getLastFocusableElement());\n };\n\n private handleBottomFocus = () => {\n this.attemptFocus(this.getFirstFocusableElement());\n };\n\n private attemptFocus(element: HTMLElement \| null) {\n if (element == null) {\n setTimeout(() => {\n this.closeButton.focus();\n });\n return;\n }\n\n setTimeout(() => {\n element.focus();\n }, 0);\n }\n\n private open() {\n this.showModal = true;\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n setTimeout(() => {\n this.getLastFocusableElement()?.focus();\n this.getLastFocusableElement()?.blur();\n }, 0);\n\n this.spwModalOpen.emit();\n });\n } catch (err) {\n this.spwModalOpen.emit();\n }\n }\n\n private close() {\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n this.showModal = false;\n this.spwModalClose.emit();\n });\n } catch (err) {\n this.showModal = false;\n this.spwModalClose.emit();\n }\n }\n\n private handleKeypress = (event: KeyboardEvent) => {\n if (this.showModal && event.key === 'Escape') {\n this.doBeforeClose('ESCAPE_KEY');\n }\n };\n\n private doBeforeClose(trigger: CloseEventTrigger) {\n const triggers = [];\n triggers.push(trigger);\n const prevented = triggers.some(event => event.defaultPrevented);\n if (!prevented) {\n this.opened = false;\n }\n }\n\n @Watch('opened')\n openedChanged(newValue: boolean) {\n newValue === true ? this.open() : this.close();\n }\n\n private handleOverlayClick() {\n if (this.closeOnOverlayClick) {\n this.doBeforeClose('BACKDROP');\n }\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-modal': true,\n 'spw-modal--opened': this.showModal,\n 'spw-modal--sticky-buttons': this.stickyButtons,\n };\n }\n\n render() {\n return (\n <Host>\n <div ref={el => (this.modalContainer = el)} class={this.elementClass}>\n <div class=\"spw-modal__overlay\" onClick={() => this.handleOverlayClick()}></div>\n <div data-focus-trap-edge onFocus={this.handleTopFocus} tabindex=\"0\"></div>\n <div class={`spw-modal__content-container spw-modal__content-container--${this.size}`} role=\"dialog\" aria-modal=\"true\" aria-label={this.caption}>\n <div class=\"spw-modal__content\">\n <div class=\"spw-modal__header\">\n <h2 class=\"spw-modal__caption\">{this.caption}</h2>\n {this.showCloseButton && (\n <spw-icon class=\"spw-modal__close-button\" ref={el => (this.closeButton = el)} icon=\"fa-xmark\" onClick={() => this.doBeforeClose('CLOSE_BUTTON')}></spw-icon>\n )}\n </div>\n <div class=\"spw-modal__body\">\n <slot name=\"content\" />\n </div>\n <div class=\"spw-modal__buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n </div>\n <div data-focus-trap-edge onFocus={this.handleBottomFocus} tabindex=\"0\"></div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/spw-stencil-library/spw-select.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-select.entry.esm.js","sources":["src/components/spw-select/spw-select.scss?tag=spw-select&encapsulation=shadow","src/components/spw-select/spw-select.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-select {\n position: relative;\n &__container {\n position: relative;\n }\n &__arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: 12px;\n pointer-events: none;\n color: var(--spw-color-themes-grey-grey-600);\n font-size: 16px;\n }\n &__trigger {\n width: 100%;\n height: 40px;\n border-radius: 4px;\n border: 1px solid var(--spw-color-themes-grey-grey-800);\n background-color: #fff;\n font-size: 16px;\n color: var(--spw-color-themes-grey-grey-800);\n position: relative;\n padding: 0;\n margin: 0;\n appearance: none;\n padding: 0 12px;\n padding-right: 40px;\n\n &:hover {\n outline: 4px solid var(--spw-color-themes-grey-grey-300);\n }\n\n &:focus-visible {\n outline: 3px solid white;\n outline-offset: 0;\n box-shadow: 0 0 0 6px black;\n }\n\n &::after {\n content: '\\f078';\n font-family: var(--spw-ds-font-icons-solid);\n font-weight: 900;\n font-size: 14px;\n color: var(--spw-color-themes-grey-grey-800);\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n }\n\n .spw-select--is-error & {\n border-color: var(--spw-colors-states-error-error-300);\n }\n\n .spw-select--large & {\n height: 60px;\n padding: 0 24px;\n font-size: 18px;\n }\n\n .spw-select--disabled & {\n border-color: var(--spw-color-themes-grey-grey-400);\n background: var(--spw-color-themes-grey-grey-100);\n color: var(--spw-color-themes-grey-grey-500);\n cursor: not-allowed;\n &::placeholder {\n color: var(--spw-color-themes-grey-grey-500);\n }\n &:hover,\n &:focus,\n &:focus-visible {\n outline: none;\n }\n }\n }\n}\n","import { AttachInternals, Host, Component, Prop, State, Event, EventEmitter, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'spw-select',\n styleUrl: 'spw-select.scss',\n formAssociated: true,\n shadow: true,\n})\nexport class SpwSelect {\n @Element() el: HTMLSpwSelectElement;\n\n /** Emet un event si la valeur change /\n @Event() valueChanged: EventEmitter<string \| number>;\n @State() internalValue: string \| number;\n\n /* Valeur sélectionnée actuelle, mutable et reflétée dans le DOM /\n @Prop({ mutable: true, reflect: true }) value: string \| number;\n /* Label associé au champ de sélection /\n @Prop() label: string = '';\n /* Texte du placeholder à afficher lorsque rien n'est sélectionné /\n @Prop() placeholder: string = 'Sélectionner une option';\n /* Indique si le champ de sélection est désactivé /\n @Prop() disabled: boolean;\n /* Nom de l'élément utilisé dans les formulaires pour associer la valeur sélectionnée /\n @Prop() name: string;\n /* Indique si la sélection est obligatoire dans le formulaire /\n @Prop() required: boolean = false;\n /* Taille du champ de sélection : 'large' ou 'medium' /\n @Prop() size: 'large' \| 'medium' = 'medium';\n /* Texte d'assistance affiché sous le champ de sélection /\n @Prop() assistiveText?: string;\n /* Message d'erreur à afficher sous le champ de sélection /\n @Prop() error?: string = '';\n /* Message d'indication (hint) à afficher sous le champ de sélection /\n @Prop() hint?: string = '';\n /* Message de succès à afficher sous le champ de sélection /\n @Prop() success?: string = '';\n /* Message de warning à afficher sous le champ /\n @Prop() warning?: string = '';\n /* Affiche une icône d'erreur si vrai /\n @Prop() showErrorIcon?: boolean = true;\n /* Affiche une icône d'indication si vrai /\n @Prop() showHintIcon?: boolean = true;\n /* Affiche une icône de succès si vrai /\n @Prop() showSuccessIcon?: boolean = true;\n /* Affiche une icône de warning si vrai */\n @Prop() showWarningIcon?: boolean = true;\n\n private selectElement!: HTMLSelectElement;\n private defaultValue: string \| number \| null = null;\n\n @AttachInternals() internals: ElementInternals;\n\n componentWillLoad() {\n this.defaultValue = this.value ?? this.getInitialSelectedValue();\n this.internalValue = this.value \|\| this.getInitialSelectedValue();\n }\n\n componentDidLoad() {\n this.internals.setFormValue(this.getFormValue());\n this.moveOptionsToLightDom();\n }\n\n formResetCallback() {\n this.setValue(this.defaultValue ?? '');\n }\n\n private setValue(val: string \| number) {\n this.internalValue = val;\n this.value = val;\n\n if (this.selectElement) {\n this.selectElement.value = String(val);\n }\n\n this.internals.setFormValue(this.getFormValue());\n this.valueChanged.emit(this.internalValue);\n }\n\n private getFormValue(): string \| null {\n return this.internalValue ? String(this.internalValue) : null;\n }\n\n private getInitialSelectedValue(): string \| number \| null {\n const assignedNodes = Array.from(this.el.querySelectorAll('option')) as HTMLOptionElement[];\n for (const option of assignedNodes) {\n if (option.hasAttribute('selected')) {\n return option.getAttribute('value');\n }\n }\n return null;\n }\n\n private handleSelectChange(event: Event) {\n const select = event.target as HTMLSelectElement;\n this.internalValue = select.value;\n this.value = this.internalValue;\n this.internals.setFormValue(this.getFormValue());\n this.valueChanged.emit(this.internalValue);\n }\n\n private moveOptionsToLightDom() {\n const slot = this.el.shadowRoot.querySelector('slot');\n if (slot) {\n const assignedNodes = slot.assignedNodes({ flatten: true }) as HTMLElement[];\n assignedNodes.forEach(node => {\n if (node.nodeName === 'OPTION' \|\| node.nodeName === 'OPTGROUP') {\n this.selectElement.appendChild(node);\n }\n });\n }\n }\n\n private renderErrorMessage() {\n if (this.error) {\n return (\n <spw-field-message variant=\"error\" showIcon={this.showErrorIcon}>\n {this.error}\n </spw-field-message>\n );\n }\n }\n\n private renderHintMessage() {\n if (this.hint) {\n return (\n <spw-field-message variant=\"hint\" showIcon={this.showHintIcon}>\n {this.hint}\n </spw-field-message>\n );\n }\n }\n\n private renderSuccessMessage() {\n if (this.success) {\n return (\n <spw-field-message variant=\"success\" showIcon={this.showSuccessIcon}>\n {this.success}\n </spw-field-message>\n );\n }\n }\n\n private renderWarningMessage() {\n if (this.warning) {\n return (\n <spw-field-message variant=\"warning\" showIcon={this.showWarningIcon}>\n {this.warning}\n </spw-field-message>\n );\n }\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-select': true,\n [`spw-select--${this.size}`]: true,\n 'spw-select--disabled': this.disabled,\n 'spw-select--is-error': !!this.error,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.elementClass}>\n {this.label && <spw-field-label label={this.label} name={this.name} required={this.required}></spw-field-label>}\n {this.assistiveText && (\n <spw-field-message class=\"spw-tw-mb-2 -spw-tw-mt-1\" variant=\"hint\" showIcon={false}>\n {this.assistiveText}\n </spw-field-message>\n )}\n <div class=\"spw-select__container\">\n <select\n id={this.name}\n class=\"spw-select__trigger\"\n onChange={event => this.handleSelectChange(event)}\n disabled={this.disabled}\n ref={el => (this.selectElement = el as HTMLSelectElement)}\n tabindex={this.disabled ? -1 : 0}\n >\n <option value=\"\" disabled selected={!this.internalValue}>\n {this.placeholder}\n </option>\n </select>\n <spw-icon class=\"spw-select__arrow\" icon=\"fa-chevron-down\"></spw-icon>\n </div>\n <slot />\n </div>\n {this.renderErrorMessage()}\n {this.renderHintMessage()}\n {this.renderSuccessMessage()}\n {this.renderWarningMessage()}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"spw-select.entry.esm.js","sources":["src/components/spw-select/spw-select.scss?tag=spw-select&encapsulation=shadow","src/components/spw-select/spw-select.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-select {\n position: relative;\n &__container {\n position: relative;\n }\n &__arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: 12px;\n pointer-events: none;\n color: var(--spw-color-themes-grey-grey-600);\n font-size: 16px;\n }\n &__trigger {\n width: 100%;\n height: 40px;\n border-radius: 4px;\n border: 1px solid var(--spw-color-themes-grey-grey-800);\n background-color: #fff;\n font-size: 16px;\n color: var(--spw-color-themes-grey-grey-800);\n position: relative;\n padding: 0;\n margin: 0;\n appearance: none;\n padding: 0 12px;\n padding-right: 40px;\n\n &:hover {\n outline: 4px solid var(--spw-color-themes-grey-grey-300);\n }\n\n &:focus-visible {\n outline: 3px solid white;\n outline-offset: 0;\n box-shadow: 0 0 0 6px black;\n }\n\n &::after {\n content: '\\f078';\n font-family: var(--spw-ds-font-icons-solid);\n font-weight: 900;\n font-size: 14px;\n color: var(--spw-color-themes-grey-grey-800);\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n }\n\n .spw-select--is-error & {\n border-color: var(--spw-colors-states-error-error-300);\n }\n\n .spw-select--large & {\n height: 60px;\n padding: 0 24px;\n font-size: 18px;\n }\n\n .spw-select--disabled & {\n border-color: var(--spw-color-themes-grey-grey-400);\n background: var(--spw-color-themes-grey-grey-100);\n color: var(--spw-color-themes-grey-grey-500);\n cursor: not-allowed;\n &::placeholder {\n color: var(--spw-color-themes-grey-grey-500);\n }\n &:hover,\n &:focus,\n &:focus-visible {\n outline: none;\n }\n }\n }\n}\n","import { AttachInternals, Host, Component, Prop, State, Event, EventEmitter, h, Element, Watch } from '@stencil/core';\n\nexport interface SelectItem {\n label: string;\n value: string \| number;\n}\n\n@Component({\n tag: 'spw-select',\n styleUrl: 'spw-select.scss',\n formAssociated: true,\n shadow: true,\n})\nexport class SpwSelect {\n @Element() el: HTMLSpwSelectElement;\n\n /** Emet un event si la valeur change /\n @Event() valueChanged: EventEmitter<string \| number>;\n @State() internalValue: string \| number;\n\n /* Valeur sélectionnée actuelle, mutable et reflétée dans le DOM /\n @Prop({ mutable: true, reflect: true }) value: string \| number;\n /* Label associé au champ de sélection /\n @Prop() label: string = '';\n /* Texte du placeholder à afficher lorsque rien n'est sélectionné /\n @Prop() placeholder: string = 'Sélectionner une option';\n /* Indique si le champ de sélection est désactivé /\n @Prop() disabled: boolean;\n /* Nom de l'élément utilisé dans les formulaires pour associer la valeur sélectionnée /\n @Prop() name: string;\n /* Indique si la sélection est obligatoire dans le formulaire /\n @Prop() required: boolean = false;\n /* Taille du champ de sélection : 'large' ou 'medium' /\n @Prop() size: 'large' \| 'medium' = 'medium';\n /* Texte d'assistance affiché sous le champ de sélection /\n @Prop() assistiveText?: string;\n /* Message d'erreur à afficher sous le champ de sélection /\n @Prop() error?: string = '';\n /* Message d'indication (hint) à afficher sous le champ de sélection /\n @Prop() hint?: string = '';\n /* Message de succès à afficher sous le champ de sélection /\n @Prop() success?: string = '';\n /* Message de warning à afficher sous le champ /\n @Prop() warning?: string = '';\n /* Affiche une icône d'erreur si vrai /\n @Prop() showErrorIcon?: boolean = true;\n /* Affiche une icône d'indication si vrai /\n @Prop() showHintIcon?: boolean = true;\n /* Affiche une icône de succès si vrai /\n @Prop() showSuccessIcon?: boolean = true;\n /* Affiche une icône de warning si vrai /\n @Prop() showWarningIcon?: boolean = true;\n /* Liste d'items dynamiques pour générer les options (array d'objects avec label + value) /\n @Prop() items?: SelectItem[];\n /* Propriété à utiliser comme label des options /\n @Prop() itemLabel?: string;\n /* Propriété à utiliser comme valeur des options */\n @Prop() itemValue?: string;\n\n private selectElement!: HTMLSelectElement;\n private defaultValue: string \| number \| null = null;\n\n @AttachInternals() internals: ElementInternals;\n\n @Watch('items')\n handleItemsChange() {\n if (this.selectElement) {\n this.syncDynamicOptions();\n }\n }\n\n componentWillLoad() {\n this.defaultValue = this.value ?? this.getInitialSelectedValue();\n this.internalValue = this.value \|\| this.getInitialSelectedValue();\n }\n\n componentDidLoad() {\n this.internals.setFormValue(this.getFormValue());\n if (!this.items) {\n this.moveOptionsToLightDom();\n } else {\n this.syncDynamicOptions();\n }\n }\n\n formResetCallback() {\n this.setValue(this.defaultValue ?? '');\n }\n\n private setValue(val: string \| number) {\n this.internalValue = val;\n this.value = val;\n\n if (this.selectElement) {\n this.selectElement.value = String(val);\n }\n\n this.internals.setFormValue(this.getFormValue());\n this.valueChanged.emit(this.internalValue);\n }\n\n private getFormValue(): string \| null {\n return this.internalValue ? String(this.internalValue) : null;\n }\n\n private getInitialSelectedValue(): string \| number \| null {\n if (this.items && this.items.length > 0) {\n return null;\n }\n const assignedNodes = Array.from(this.el.querySelectorAll('option')) as HTMLOptionElement[];\n for (const option of assignedNodes) {\n if (option.hasAttribute('selected')) {\n return option.getAttribute('value');\n }\n }\n return null;\n }\n\n private handleSelectChange(event: Event) {\n const select = event.target as HTMLSelectElement;\n this.internalValue = select.value;\n this.value = this.internalValue;\n this.internals.setFormValue(this.getFormValue());\n this.valueChanged.emit(this.internalValue);\n }\n\n private moveOptionsToLightDom() {\n const slot = this.el.shadowRoot.querySelector('slot');\n if (slot) {\n const assignedNodes = slot.assignedNodes({ flatten: true }) as HTMLElement[];\n assignedNodes.forEach(node => {\n if (node.nodeName === 'OPTION' \|\| node.nodeName === 'OPTGROUP') {\n this.selectElement.appendChild(node);\n }\n });\n }\n }\n\n private syncDynamicOptions() {\n while (this.selectElement.options.length > 1) {\n this.selectElement.remove(1);\n }\n\n if (this.items && this.items.length > 0) {\n this.items.forEach(item => {\n const option = document.createElement('option');\n const value = this.itemValue ? item[this.itemValue] : item;\n const label = this.itemLabel ? item[this.itemLabel] : item;\n option.value = String(value);\n option.textContent = String(label);\n this.selectElement.appendChild(option);\n });\n }\n\n if (this.selectElement.value !== String(this.internalValue \|\| '')) {\n this.selectElement.value = String(this.internalValue \|\| '');\n }\n }\n\n private renderErrorMessage() {\n if (this.error) {\n return (\n <spw-field-message variant=\"error\" showIcon={this.showErrorIcon}>\n {this.error}\n </spw-field-message>\n );\n }\n }\n\n private renderHintMessage() {\n if (this.hint) {\n return (\n <spw-field-message variant=\"hint\" showIcon={this.showHintIcon}>\n {this.hint}\n </spw-field-message>\n );\n }\n }\n\n private renderSuccessMessage() {\n if (this.success) {\n return (\n <spw-field-message variant=\"success\" showIcon={this.showSuccessIcon}>\n {this.success}\n </spw-field-message>\n );\n }\n }\n\n private renderWarningMessage() {\n if (this.warning) {\n return (\n <spw-field-message variant=\"warning\" showIcon={this.showWarningIcon}>\n {this.warning}\n </spw-field-message>\n );\n }\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-select': true,\n [`spw-select--${this.size}`]: true,\n 'spw-select--disabled': this.disabled,\n 'spw-select--is-error': !!this.error,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.elementClass}>\n {this.label && <spw-field-label label={this.label} name={this.name} required={this.required}></spw-field-label>}\n {this.assistiveText && (\n <spw-field-message class=\"spw-tw-mb-2 -spw-tw-mt-1\" variant=\"hint\" showIcon={false}>\n {this.assistiveText}\n </spw-field-message>\n )}\n <div class=\"spw-select__container\">\n <select\n id={this.name}\n class=\"spw-select__trigger\"\n onChange={event => this.handleSelectChange(event)}\n disabled={this.disabled}\n ref={el => (this.selectElement = el as HTMLSelectElement)}\n tabindex={this.disabled ? -1 : 0}\n >\n <option value=\"\" disabled selected={!this.internalValue}>\n {this.placeholder}\n </option>\n </select>\n <spw-icon class=\"spw-select__arrow\" icon=\"fa-chevron-down\"></spw-icon>\n </div>\n {!this.items && <slot />}\n </div>\n {this.renderErrorMessage()}\n {this.renderHintMessage()}\n {this.renderSuccessMessage()}\n {this.renderWarningMessage()}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}