npm - wcs-core - Versions diffs - 7.0.0 → 7.1.0 - Mend

wcs-core 7.0.0 → 7.1.0

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

Files changed (442) hide show

package/dist/collection/components/tabs/tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Element,\n State,\n ComponentInterface,\n Event,\n EventEmitter,\n Watch,\n h,\n Host,\n Listen, Method\n} from '@stencil/core';\n\nimport { WcsTabsAlignment, WcsTabChangeEvent } from './tabs-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst TABS_INHERITED_ATTRS = [];\n\n/*\n Tabs component to switch between tab content. Use in conjunction with `wcs-tab`.\n * \n * @cssprop --wcs-tabs-indicator-height - Height of the tabs indicator \n * @cssprop --wcs-tabs-indicator-background-color - Background color of the tabs indicator\n * @cssprop --wcs-tabs-indicator-border-radius - Border radius of the tabs indicator\n * @cssprop --wcs-tabs-color-default - Text color of the tabs\n * @cssprop --wcs-tabs-color-hover - Text color of the tabs when hovered\n * @cssprop --wcs-tabs-color-press - Text color of the tabs when pressed\n * @cssprop --wcs-tabs-color-focus - Text color of the tabs when focused\n * @cssprop --wcs-tabs-color-selected - Text color of the tabs when selected\n * @cssprop --wcs-tabs-background-color-focus - Background color of the tabs when focused\n * @cssprop --wcs-tabs-background-color-hover - Background color of the tabs when hovered\n * @cssprop --wcs-tabs-background-color-press - Background color of the tabs when pressed\n * @cssprop --wcs-tabs-border-radius - Border radius of the tabs\n * @cssprop --wcs-tabs-border-color-focus - Outline color on a focused tab\n * @cssprop --wcs-tabs-font-weight-default - Font weight of the tabs\n * @cssprop --wcs-tabs-font-weight-selected - Font weight of the tabs when selected\n * @cssprop --wcs-tabs-padding-top - Padding top of the tabs\n * @cssprop --wcs-tabs-padding-right - Padding right of the tabs\n * @cssprop --wcs-tabs-padding-bottom - Padding bottom of the tabs\n * @cssprop --wcs-tabs-padding-left - Padding left of the tabs\n * @cssprop --wcs-tabs-headers-border-bottom - Border bottom (gutter) below the tabs\n * @cssprop --wcs-tabs-transition-duration - Transition duration of the tabs\n /\n@Component({\n tag: 'wcs-tabs',\n styleUrl: 'tabs.scss',\n shadow: true,\n})\nexport class Tabs implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLWcsTabsElement;\n private nativeTablist!: HTMLElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n /\n Tab headers alignment.\n /\n @Prop({reflect: true}) align: WcsTabsAlignment = 'start';\n\n /\n Current selected tab index.\n * Starts at 0.\n /\n @Prop() selectedIndex: number = 0;\n\n @Prop() selectedKey: any;\n\n /\n Whether to skip rendering the tabpanel with the content of the selected tab. Use this prop if you plan to\n * separately render the tab content.\n /\n @Prop() headersOnly: boolean = false;\n /* Determines if tabs header should have a border at the bottom /\n @Prop() gutter: boolean;\n\n /\n Description is used to provide aria-label for the tabs container which has `role=\"tablist\"`.\n /\n @Prop() description: string;\n\n /\n \n * Emitted when the selected tab change.\n /\n @Event() tabChange!: EventEmitter<WcsTabChangeEvent>;\n\n @State() private headers: string[] = [];\n\n @State() private currentActiveTabIndex = 0;\n\n private tabsId: number = tabsId++;\n\n @Watch('selectedIndex')\n selectedIndexChanged(newValue: number) {\n this.currentActiveTabIndex = newValue;\n }\n\n @Watch('selectedKey')\n selectedTabkeyChanged(newValue: any) {\n this.updateCurrentActiveIndexByTabKey(newValue);\n }\n\n private emitActiveTabChange() {\n this.tabChange.emit({\n tabName: this.headers[this.currentActiveTabIndex],\n tabIndex: this.currentActiveTabIndex,\n selectedKey: this.tabs[this.currentActiveTabIndex].itemKey\n });\n }\n\n private updateCurrentActiveIndexByTabKey(newValue: any) {\n for (let i = 0; i < this.tabs.length; i++) {\n const tab = this.tabs[i];\n if (tab.itemKey === newValue) {\n this.currentActiveTabIndex = i;\n }\n }\n }\n\n @Listen('tabLoaded')\n onTabLoaded() {\n this.refreshHeaders();\n }\n\n componentDidLoad() {\n this.putTabsInCorrectDivIfTheyAreNot();\n this.refreshHeaders();\n if (this.selectedIndex) {\n this.currentActiveTabIndex = this.selectedIndex;\n }\n if (this.selectedKey) {\n this.updateCurrentActiveIndexByTabKey(this.selectedKey);\n }\n }\n\n // XXX: Firefox < 63\n private putTabsInCorrectDivIfTheyAreNot() {\n const tabDiv = this.el.shadowRoot.querySelector('.wcs-tabs');\n if (tabDiv.querySelector('slot') === null) {\n Array.from(this.el.querySelectorAll('wcs-tab'))\n .filter(node => node.parentNode !== tabDiv)\n .forEach(tab => {\n if (tab.parentElement.isEqualNode(this.el)) {\n this.el.removeChild(tab);\n tabDiv.appendChild(tab);\n }\n });\n }\n }\n\n handleKeyDown(ev: KeyboardEvent, tabIndex: number) {\n const target = ev.target as HTMLDivElement;\n switch (ev.key) {\n case ' ':\n case 'Enter': {\n this.currentActiveTabIndex = tabIndex;\n this.emitActiveTabChange();\n ev.preventDefault();\n break;\n }\n case 'ArrowLeft': {\n if (target.previousElementSibling?.classList.contains('wcs-tab-header')) {\n (target.previousElementSibling as HTMLDivElement).focus();\n ev.preventDefault();\n }\n break;\n }\n case 'ArrowRight': {\n if (target.nextElementSibling?.classList.contains('wcs-tab-header')) {\n (target.nextElementSibling as HTMLDivElement).focus();\n ev.preventDefault();\n }\n break;\n }\n case 'Home': {\n const firstTab = this.el.shadowRoot.querySelector('.wcs-tab-header:first-child');\n if (firstTab) {\n (firstTab as HTMLDivElement).focus();\n ev.preventDefault();\n }\n break;\n }\n case 'End': {\n const lastTab = this.el.shadowRoot.querySelector('.wcs-tab-header:last-child');\n if (lastTab) {\n (lastTab as HTMLDivElement).focus();\n ev.preventDefault();\n }\n break;\n }\n }\n }\n\n private refreshHeaders() {\n this.headers = [];\n this.tabs\n .forEach(x => {\n this.headers.push(x.getAttribute('header'));\n });\n }\n\n private get tabs() {\n const tabsEl = this.el.shadowRoot.querySelector('.wcs-tabs');\n // FIXME: problem with this selector being too greedy in ff < 63\n const tabs = this.el.shadowRoot.querySelectorAll('.wcs-tabs > wcs-tab');\n\n return tabs.length !== 0\n ? tabs\n : tabsEl?.querySelector('slot')\n ? tabsEl?.querySelector('slot')?.assignedElements() as unknown as NodeListOf<HTMLWcsTabElement>\n : [];\n }\n\n private selectTabAndEmitChangeEvent(index: number) {\n this.currentActiveTabIndex = index;\n this.emitActiveTabChange()\n }\n\n componentWillUpdate() {\n if (!this.headersOnly) {\n this.updateTabVisibility();\n } else {\n this.hideAllTabsContent();\n }\n }\n\n componentWillLoad(): Promise<void> \| void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, TABS_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeTablist, attr, value);\n }\n\n private updateTabVisibility() {\n this.tabs.forEach((el: HTMLWcsTabElement, idx: number) => {\n if (idx !== this.currentActiveTabIndex) {\n el.hidden = true;\n } else {\n el.hidden = false;\n }\n });\n }\n\n private hideAllTabsContent() {\n this.tabs.forEach((el: HTMLWcsTabElement) => el.hidden = true);\n }\n\n render() {\n return (\n <Host>\n <div class=\"wcs-tabs-headers\"\n role=\"tablist\"\n ref={(el) => (this.nativeTablist = el)}\n aria-label={this.description}\n {...this.inheritedAttributes}>\n {this.headers.map((header, idx) =>\n <div class={'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : '')}\n onClick={() => this.selectTabAndEmitChangeEvent(idx)}\n onKeyDown={evt => this.handleKeyDown(evt, idx)}\n tabIndex={this.currentActiveTabIndex === idx ? 0 : -1}\n role=\"tab\"\n id={`tabs-id-${this.tabsId}-tab-id-${idx}`}\n // aria-controls refers to ID of the tab panel related to the header\n aria-controls={`tabs-id-${this.tabsId}-tab-panel-${idx}`}\n aria-label={header}\n aria-selected={this.currentActiveTabIndex === idx ? 'true' : 'false'}\n >\n <span>{header}</span>\n </div>\n )}\n </div>\n <div class=\"wcs-tabs\">\n <slot onSlotchange={() => this.onTabsSlotChange()} name=\"wcs-tab\"/>\n </div>\n </Host>\n );\n }\n\n /\n Observe when a new tab panel is added to the slot to let's handle accessibility properties for tabs panel:\n * - id: to let header tab refers it proper panel\n * - aria-label: take the same name as it's referenced header name\n * \n * @private\n */\n private onTabsSlotChange() {\n let tabId = 0;\n this.tabs.forEach(tab => {\n tab.setAttribute(\"aria-label\", this.headers.at(tabId));\n // set an ID to set aria-controls on header tab \n // (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/#:~:text=Refers%20to%20the%20element)\n tab.setAttribute(\"id\", `tabs-id-${this.tabsId}-tab-panel-${tabId}`);\n tabId++;\n });\n }\n}\n\nlet tabsId = 0;\n"]}
1	+ {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Element,\n State,\n ComponentInterface,\n Event,\n EventEmitter,\n Watch,\n h,\n Host,\n Listen, Method\n} from '@stencil/core';\n\nimport { WcsTabsAlignment, WcsTabChangeEvent } from './tabs-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst TABS_INHERITED_ATTRS = [];\n\n/*\n Tabs component to switch between tab content. Use in conjunction with `wcs-tab`.\n * \n * @cssprop --wcs-tabs-indicator-height - Height of the tabs indicator \n * @cssprop --wcs-tabs-indicator-background-color - Background color of the tabs indicator\n * @cssprop --wcs-tabs-indicator-border-radius - Border radius of the tabs indicator\n * @cssprop --wcs-tabs-color-default - Text color of the tabs\n * @cssprop --wcs-tabs-color-hover - Text color of the tabs when hovered\n * @cssprop --wcs-tabs-color-press - Text color of the tabs when pressed\n * @cssprop --wcs-tabs-color-focus - Text color of the tabs when focused\n * @cssprop --wcs-tabs-color-selected - Text color of the tabs when selected\n * @cssprop --wcs-tabs-background-color-focus - Background color of the tabs when focused\n * @cssprop --wcs-tabs-background-color-hover - Background color of the tabs when hovered\n * @cssprop --wcs-tabs-background-color-press - Background color of the tabs when pressed\n * @cssprop --wcs-tabs-border-radius - Border radius of the tabs\n * @cssprop --wcs-tabs-border-color-focus - Outline color on a focused tab\n * @cssprop --wcs-tabs-font-weight-default - Font weight of the tabs\n * @cssprop --wcs-tabs-font-weight-selected - Font weight of the tabs when selected\n * @cssprop --wcs-tabs-padding-top - Padding top of the tabs\n * @cssprop --wcs-tabs-padding-right - Padding right of the tabs\n * @cssprop --wcs-tabs-padding-bottom - Padding bottom of the tabs\n * @cssprop --wcs-tabs-padding-left - Padding left of the tabs\n * @cssprop --wcs-tabs-headers-border-bottom - Border bottom (gutter) below the tabs\n * @cssprop --wcs-tabs-transition-duration - Transition duration of the tabs\n /\n@Component({\n tag: 'wcs-tabs',\n styleUrl: 'tabs.scss',\n shadow: true,\n})\nexport class Tabs implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLWcsTabsElement;\n private nativeTablist!: HTMLElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n /\n Tab headers alignment.\n /\n @Prop({reflect: true}) align: WcsTabsAlignment = 'start';\n\n /\n Current selected tab index.\n * Starts at 0.\n /\n @Prop() selectedIndex: number = 0;\n\n @Prop() selectedKey: any;\n\n /\n Whether to skip rendering the tabpanel with the content of the selected tab. Use this prop if you plan to\n * separately render the tab content.\n /\n @Prop() headersOnly: boolean = false;\n /* Determines if tabs header should have a border at the bottom /\n @Prop({ reflect: true }) gutter: boolean;\n\n /\n Description is used to provide aria-label for the tabs container which has `role=\"tablist\"`.\n /\n @Prop() description: string;\n\n /\n \n * Emitted when the selected tab change.\n /\n @Event() tabChange!: EventEmitter<WcsTabChangeEvent>;\n\n @State() private headers: string[] = [];\n\n @State() private currentActiveTabIndex = 0;\n\n private tabsId: number = tabsId++;\n\n @Watch('selectedIndex')\n selectedIndexChanged(newValue: number) {\n this.currentActiveTabIndex = newValue;\n }\n\n @Watch('selectedKey')\n selectedTabkeyChanged(newValue: any) {\n this.updateCurrentActiveIndexByTabKey(newValue);\n }\n\n private emitActiveTabChange() {\n this.tabChange.emit({\n tabName: this.headers[this.currentActiveTabIndex],\n tabIndex: this.currentActiveTabIndex,\n selectedKey: this.tabs[this.currentActiveTabIndex].itemKey\n });\n }\n\n private updateCurrentActiveIndexByTabKey(newValue: any) {\n for (let i = 0; i < this.tabs.length; i++) {\n const tab = this.tabs[i];\n if (tab.itemKey === newValue) {\n this.currentActiveTabIndex = i;\n }\n }\n }\n\n @Listen('tabLoaded')\n onTabLoaded() {\n this.refreshHeaders();\n }\n\n componentDidLoad() {\n this.putTabsInCorrectDivIfTheyAreNot();\n this.refreshHeaders();\n if (this.selectedIndex) {\n this.currentActiveTabIndex = this.selectedIndex;\n }\n if (this.selectedKey) {\n this.updateCurrentActiveIndexByTabKey(this.selectedKey);\n }\n }\n\n // XXX: Firefox < 63\n private putTabsInCorrectDivIfTheyAreNot() {\n const tabDiv = this.el.shadowRoot.querySelector('.wcs-tabs');\n if (tabDiv.querySelector('slot') === null) {\n Array.from(this.el.querySelectorAll('wcs-tab'))\n .filter(node => node.parentNode !== tabDiv)\n .forEach(tab => {\n if (tab.parentElement.isEqualNode(this.el)) {\n this.el.removeChild(tab);\n tabDiv.appendChild(tab);\n }\n });\n }\n }\n\n handleKeyDown(ev: KeyboardEvent, tabIndex: number) {\n const target = ev.target as HTMLDivElement;\n switch (ev.key) {\n case ' ':\n case 'Enter': {\n this.currentActiveTabIndex = tabIndex;\n this.emitActiveTabChange();\n ev.preventDefault();\n break;\n }\n case 'ArrowLeft': {\n if (target.previousElementSibling?.classList.contains('wcs-tab-header')) {\n (target.previousElementSibling as HTMLDivElement).focus();\n ev.preventDefault();\n }\n break;\n }\n case 'ArrowRight': {\n if (target.nextElementSibling?.classList.contains('wcs-tab-header')) {\n (target.nextElementSibling as HTMLDivElement).focus();\n ev.preventDefault();\n }\n break;\n }\n case 'Home': {\n const firstTab = this.el.shadowRoot.querySelector('.wcs-tab-header:first-child');\n if (firstTab) {\n (firstTab as HTMLDivElement).focus();\n ev.preventDefault();\n }\n break;\n }\n case 'End': {\n const lastTab = this.el.shadowRoot.querySelector('.wcs-tab-header:last-child');\n if (lastTab) {\n (lastTab as HTMLDivElement).focus();\n ev.preventDefault();\n }\n break;\n }\n }\n }\n\n private refreshHeaders() {\n this.headers = [];\n this.tabs\n .forEach(x => {\n this.headers.push(x.getAttribute('header'));\n });\n }\n\n private get tabs() {\n const tabsEl = this.el.shadowRoot.querySelector('.wcs-tabs');\n // FIXME: problem with this selector being too greedy in ff < 63\n const tabs = this.el.shadowRoot.querySelectorAll('.wcs-tabs > wcs-tab');\n\n return tabs.length !== 0\n ? tabs\n : tabsEl?.querySelector('slot')\n ? tabsEl?.querySelector('slot')?.assignedElements() as unknown as NodeListOf<HTMLWcsTabElement>\n : [];\n }\n\n private selectTabAndEmitChangeEvent(index: number) {\n this.currentActiveTabIndex = index;\n this.emitActiveTabChange()\n }\n\n componentWillUpdate() {\n if (!this.headersOnly) {\n this.updateTabVisibility();\n } else {\n this.hideAllTabsContent();\n }\n }\n\n componentWillLoad(): Promise<void> \| void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, TABS_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeTablist, attr, value);\n }\n\n private updateTabVisibility() {\n this.tabs.forEach((el: HTMLWcsTabElement, idx: number) => {\n if (idx !== this.currentActiveTabIndex) {\n el.hidden = true;\n } else {\n el.hidden = false;\n }\n });\n }\n\n private hideAllTabsContent() {\n this.tabs.forEach((el: HTMLWcsTabElement) => el.hidden = true);\n }\n\n render() {\n return (\n <Host>\n <div class=\"wcs-tabs-headers\"\n role=\"tablist\"\n ref={(el) => (this.nativeTablist = el)}\n aria-label={this.description}\n {...this.inheritedAttributes}>\n {this.headers.map((header, idx) =>\n <div class={'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : '')}\n onClick={() => this.selectTabAndEmitChangeEvent(idx)}\n onKeyDown={evt => this.handleKeyDown(evt, idx)}\n tabIndex={this.currentActiveTabIndex === idx ? 0 : -1}\n role=\"tab\"\n id={`tabs-id-${this.tabsId}-tab-id-${idx}`}\n // aria-controls refers to ID of the tab panel related to the header\n aria-controls={`tabs-id-${this.tabsId}-tab-panel-${idx}`}\n aria-label={header}\n aria-selected={this.currentActiveTabIndex === idx ? 'true' : 'false'}\n >\n <span>{header}</span>\n </div>\n )}\n </div>\n <div class=\"wcs-tabs\">\n <slot onSlotchange={() => this.onTabsSlotChange()} name=\"wcs-tab\"/>\n </div>\n </Host>\n );\n }\n\n /\n Observe when a new tab panel is added to the slot to let's handle accessibility properties for tabs panel:\n * - id: to let header tab refers it proper panel\n * - aria-label: take the same name as it's referenced header name\n * \n * @private\n */\n private onTabsSlotChange() {\n let tabId = 0;\n this.tabs.forEach(tab => {\n tab.setAttribute(\"aria-label\", this.headers.at(tabId));\n // set an ID to set aria-controls on header tab \n // (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/#:~:text=Refers%20to%20the%20element)\n tab.setAttribute(\"id\", `tabs-id-${this.tabsId}-tab-panel-${tabId}`);\n tabId++;\n });\n }\n}\n\nlet tabsId = 0;\n"]}

package/dist/collection/components/textarea/textarea.js CHANGED Viewed

@@ -170,7 +170,7 @@ export class Textarea {
     render() {
         const value = this.getValue();
         const style = Object.assign({}, (this.resize && { 'resize': this.resize }));
-        return (h(Host, { key: '1d7fc40452ef3499c548ead8966d565f69464c7e', "aria-disabled": this.disabled ? 'true' : null }, this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, h("textarea", Object.assign({ key: '5d1ee380bf9e0ddd60864210b337de4bb4ec1e80', class: "native-textarea", ref: el => this.nativeInput = el, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, style: style }, this.inheritedAttributes), value)));
+        return (h(Host, { key: 'd2f0cea260f9745f49f4aa259004b704af492c33', "aria-disabled": this.disabled ? 'true' : null }, this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, h("textarea", Object.assign({ key: 'a5c87bbb2888132fd62f26df0f36e5d4e003ad84', class: "native-textarea", ref: el => this.nativeInput = el, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, style: style }, this.inheritedAttributes), value)));
     }
     static get is() { return "wcs-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -277,7 +277,7 @@ export class Textarea {
                     "text": "If `true`, the user cannot interact with the textarea."
                 },
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "icon": {
@@ -427,7 +427,7 @@ export class Textarea {
                     "text": "If `true`, the user cannot modify the value."
                 },
                 "attribute": "readonly",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "required": {

package/dist/collection/components/textarea/textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Method,\n Prop,\n Watch,\n h,\n Host,\n EventEmitter,\n Element,\n Event,\n Build,\n readTask\n} from '@stencil/core';\nimport {\n debounceEvent,\n inheritAriaAttributes,\n inheritAttributes,\n raf,\n setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { \n TextareaChangeEventDetail,\n WcsTextareaInputMode, \n WcsTextareaEnterKeyHint, \n WcsTextareaResize, \n WcsTextareaInputState,\n WcsTextareaWrap\n} from './textarea-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst TEXTAREA_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/*\n Mainly inspired from Ionic Textarea Component.\n * \n * ## Accessibility guidelines 💡\n * > - If you use wcs-textarea outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n \n @cssprop --wcs-textarea-icon-color-default - Default icon color whe the textarea is not focused\n * @cssprop --wcs-textarea-icon-color-focus - Icon color when the textarea is focused \n * @cssprop --wcs-textarea-icon-color-disabled - Icon color when the textarea is disabled\n * \n * @cssprop --wcs-textarea-background-color - Background color of the textarea\n \n @cssprop --wcs-textarea-border-radius-left - Border radius of the left side of the textarea\n * @cssprop --wcs-textarea-border-radius-right - Border radius of the right side of the textarea\n * \n * @cssprop --wcs-textarea-border-width - Border width of the textarea when not focused\n * @cssprop --wcs-textarea-border-width-focus - Border width of the textarea when focused\n * \n * @cssprop --wcs-textarea-border-color-default - Default border color of the textarea when not focused\n * @cssprop --wcs-textarea-border-color-disabled - Border color of the textarea when disabled\n * @cssprop --wcs-textarea-border-color-error - Border color of the textarea when in error state\n * @cssprop --wcs-textarea-border-color-focus - Border color of the textarea when focused\n * \n * @cssprop --wcs-textarea-value-color - Color of the value when the textarea is not focused\n * @cssprop --wcs-textarea-value-font-weight - Font weight of the textarea value\n * \n * @cssprop --wcs-textarea-placeholder-color - Color of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-weight - Font weight of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-style - Font style of the textarea placeholder\n * \n * @cssprop --wcs-textarea-text-color-disabled - Color of the value when the textarea is disabled\n * \n * @cssprop --wcs-textarea-border-style-default - Border style default of the textarea when not focused\n * @cssprop --wcs-textarea-border-style-error - Border style default of the textarea in error state\n * @cssprop --wcs-textarea-border-style-focus - Border style default of the textarea when focused\n * \n * @cssprop --wcs-textarea-min-height - Min height of the textarea component\n * @cssprop --wcs-textarea-max-height - Max height of the textarea component\n * \n * @cssprop --wcs-textarea-padding-top - Padding top of the textarea\n * @cssprop --wcs-textarea-padding-bottom - Padding bottom of the textarea\n * @cssprop --wcs-textarea-padding-left - Padding left of the textarea\n * @cssprop --wcs-textarea-padding-right - Padding right of the textarea\n * \n * @cssprop --wcs-textarea-gap - Gap between textarea and icon (prefix/suffix)\n /\n@Component({\n tag: 'wcs-textarea',\n styleUrl: 'textarea.scss',\n shadow: {\n delegatesFocus: true\n },\n})\nexport class Textarea implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeInput?: HTMLTextAreaElement;\n private inputId = `wcs-textarea-${textareaIds++}`;\n private inheritedAttributes: { [k: string]: any } = {};\n\n /\n This is required for a WebKit bug which requires us to\n * blur and focus an input to properly focus the input in\n * an item with delegatesFocus. It will no longer be needed\n * with iOS 14.\n \n @internal\n /\n @Prop() fireFocusEvents = true;\n\n /\n Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n /\n @Prop() autocapitalize = 'none';\n\n /\n This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n /\n @Prop() autofocus = false;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n * This also impacts form bindings such as `ngModel` or `v-model`.\n /\n @Prop() debounce = 0;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n }\n\n /\n If `true`, the user cannot interact with the textarea.\n /\n @Prop() disabled = false;\n\n /\n Name of the material icon to add to the input\n /\n @Prop() icon: string;\n\n /\n A hint to the browser for which keyboard to display.\n /\n @Prop() inputmode?: WcsTextareaInputMode;\n\n /\n A hint to the browser for which enter key to display.\n /\n @Prop() enterkeyhint?: WcsTextareaEnterKeyHint;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n /\n @Prop() maxlength?: number;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n /\n @Prop() minlength?: number;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n Instructional text that shows before the input has a value.\n /\n @Prop() placeholder?: string \| null;\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop() readonly = false;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n If `true`, the element will have its spelling and grammar checked.\n /\n @Prop() spellcheck = false;\n\n /\n Specifies the state of the input. By default the input is in an initial state but you can set it to 'error' state if the data given by the user is not valid.\n /\n @Prop({reflect: true}) state: WcsTextareaInputState = 'initial';\n\n /\n The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. \n * Note : at the moment, modifying the width is only possible if you add some custom CSS to the component,\n * for example by overriding the `width` CSS property. See the Resize section for an example on how to do it.\n /\n @Prop() cols?: number;\n\n /\n The number of visible text lines for the control.\n /\n @Prop() rows?: number;\n\n /\n Indicates how the control wraps text.\n /\n @Prop() wrap?: WcsTextareaWrap;\n\n /\n If `true`, the element height will increase based on the value.\n /\n @Prop() autoGrow = false;\n\n /\n The value of the textarea.\n /\n @Prop({mutable: true}) value?: string \| null = '';\n\n /\n Indicates how the textarea should be resizable. \n * Note : at the moment horizontal resizing is only possible if you add custom CSS to the component,\n * see the Resize section for an example.\n /\n @Prop({reflect: true}) resize?: WcsTextareaResize;\n\n /\n Update the native input element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.runAutoGrow();\n }\n\n /\n Emitted when the input value has changed.- See https://developer.mozilla.org/en-US/docs/Web/Events/change\n /\n @Event() wcsChange!: EventEmitter<TextareaChangeEventDetail>;\n\n /\n Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n /\n @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input has focus.\n /\n @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n connectedCallback() {\n this.debounceChanged();\n if (Build.isBrowser) {\n document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n detail: this.el\n }));\n }\n }\n\n disconnectedCallback() {\n if (Build.isBrowser) {\n document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n detail: this.el\n }));\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, TEXTAREA_INHERITED_ATTRS)\n };\n }\n\n componentDidLoad() {\n raf(() => this.runAutoGrow());\n }\n\n private runAutoGrow() {\n const nativeInput = this.nativeInput;\n if (nativeInput && this.autoGrow) {\n readTask(() => {\n nativeInput.style.height = 'auto';\n nativeInput.style.height = nativeInput.scrollHeight + 'px';\n });\n }\n }\n \n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeInput, attr, value);\n }\n\n /\n This method make the textarea automatically adopt the size of the content without a scroll bar\n /\n @Method()\n async fitContent() {\n raf(() => this.runAutoGrow());\n }\n\n /\n Sets blur on the native `textarea` in `wcs-textarea`. Use this method instead of the global\n * `textarea.blur()`.\n * @internal\n /\n @Method()\n async setBlur() {\n if (this.nativeInput) {\n this.nativeInput.blur();\n }\n }\n\n /\n Returns the native `<textarea>` element used under the hood.\n */\n @Method()\n getInputElement(): Promise<HTMLTextAreaElement> {\n // tslint:disable-next-line:no-non-null-assertion\n return Promise.resolve(this.nativeInput!);\n }\n\n private getValue(): string {\n return this.value \|\| '';\n }\n\n private onInput = (ev: Event) => {\n if (this.nativeInput) {\n this.value = this.nativeInput.value;\n }\n this.wcsInput.emit(ev as KeyboardEvent);\n }\n \n private onChange = (_: Event) => {\n this.wcsChange.emit({value: this.nativeInput.value});\n }\n\n private onFocus = (ev: FocusEvent) => {\n if (this.fireFocusEvents) {\n this.wcsFocus.emit(ev);\n }\n }\n\n private onBlur = (ev: FocusEvent) => {\n if (this.fireFocusEvents) {\n this.wcsBlur.emit(ev);\n }\n }\n\n render() {\n const value = this.getValue();\n const style = {\n ...(this.resize && {'resize': this.resize})\n }\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n >\n {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n <textarea\n class=\"native-textarea\"\n ref={el => this.nativeInput = el}\n autoCapitalize={this.autocapitalize}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n disabled={this.disabled}\n maxLength={this.maxlength}\n minLength={this.minlength}\n name={this.name}\n placeholder={this.placeholder \|\| ''}\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n cols={this.cols}\n rows={this.rows}\n wrap={this.wrap}\n onInput={this.onInput}\n onChange={this.onChange}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n style={style}\n {...this.inheritedAttributes}\n >\n {value}\n </textarea>\n </Host>\n );\n }\n}\n\nlet textareaIds = 0;\n"]}
1	+ {"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Method,\n Prop,\n Watch,\n h,\n Host,\n EventEmitter,\n Element,\n Event,\n Build,\n readTask\n} from '@stencil/core';\nimport {\n debounceEvent,\n inheritAriaAttributes,\n inheritAttributes,\n raf,\n setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { \n TextareaChangeEventDetail,\n WcsTextareaInputMode, \n WcsTextareaEnterKeyHint, \n WcsTextareaResize, \n WcsTextareaInputState,\n WcsTextareaWrap\n} from './textarea-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst TEXTAREA_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/*\n Mainly inspired from Ionic Textarea Component.\n * \n * ## Accessibility guidelines 💡\n * > - If you use wcs-textarea outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n \n @cssprop --wcs-textarea-icon-color-default - Default icon color whe the textarea is not focused\n * @cssprop --wcs-textarea-icon-color-focus - Icon color when the textarea is focused \n * @cssprop --wcs-textarea-icon-color-disabled - Icon color when the textarea is disabled\n * \n * @cssprop --wcs-textarea-background-color - Background color of the textarea\n \n @cssprop --wcs-textarea-border-radius-left - Border radius of the left side of the textarea\n * @cssprop --wcs-textarea-border-radius-right - Border radius of the right side of the textarea\n * \n * @cssprop --wcs-textarea-border-width - Border width of the textarea when not focused\n * @cssprop --wcs-textarea-border-width-focus - Border width of the textarea when focused\n * \n * @cssprop --wcs-textarea-border-color-default - Default border color of the textarea when not focused\n * @cssprop --wcs-textarea-border-color-disabled - Border color of the textarea when disabled\n * @cssprop --wcs-textarea-border-color-error - Border color of the textarea when in error state\n * @cssprop --wcs-textarea-border-color-focus - Border color of the textarea when focused\n * \n * @cssprop --wcs-textarea-value-color - Color of the value when the textarea is not focused\n * @cssprop --wcs-textarea-value-font-weight - Font weight of the textarea value\n * \n * @cssprop --wcs-textarea-placeholder-color - Color of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-weight - Font weight of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-style - Font style of the textarea placeholder\n * \n * @cssprop --wcs-textarea-text-color-disabled - Color of the value when the textarea is disabled\n * \n * @cssprop --wcs-textarea-border-style-default - Border style default of the textarea when not focused\n * @cssprop --wcs-textarea-border-style-error - Border style default of the textarea in error state\n * @cssprop --wcs-textarea-border-style-focus - Border style default of the textarea when focused\n * \n * @cssprop --wcs-textarea-min-height - Min height of the textarea component\n * @cssprop --wcs-textarea-max-height - Max height of the textarea component\n * \n * @cssprop --wcs-textarea-padding-top - Padding top of the textarea\n * @cssprop --wcs-textarea-padding-bottom - Padding bottom of the textarea\n * @cssprop --wcs-textarea-padding-left - Padding left of the textarea\n * @cssprop --wcs-textarea-padding-right - Padding right of the textarea\n * \n * @cssprop --wcs-textarea-gap - Gap between textarea and icon (prefix/suffix)\n /\n@Component({\n tag: 'wcs-textarea',\n styleUrl: 'textarea.scss',\n shadow: {\n delegatesFocus: true\n },\n})\nexport class Textarea implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeInput?: HTMLTextAreaElement;\n private inputId = `wcs-textarea-${textareaIds++}`;\n private inheritedAttributes: { [k: string]: any } = {};\n\n /\n This is required for a WebKit bug which requires us to\n * blur and focus an input to properly focus the input in\n * an item with delegatesFocus. It will no longer be needed\n * with iOS 14.\n \n @internal\n /\n @Prop() fireFocusEvents = true;\n\n /\n Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n /\n @Prop() autocapitalize = 'none';\n\n /\n This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n /\n @Prop() autofocus = false;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n * This also impacts form bindings such as `ngModel` or `v-model`.\n /\n @Prop() debounce = 0;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n }\n\n /\n If `true`, the user cannot interact with the textarea.\n /\n @Prop({ reflect: true }) disabled = false;\n\n /\n Name of the material icon to add to the input\n /\n @Prop() icon: string;\n\n /\n A hint to the browser for which keyboard to display.\n /\n @Prop() inputmode?: WcsTextareaInputMode;\n\n /\n A hint to the browser for which enter key to display.\n /\n @Prop() enterkeyhint?: WcsTextareaEnterKeyHint;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n /\n @Prop() maxlength?: number;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n /\n @Prop() minlength?: number;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n Instructional text that shows before the input has a value.\n /\n @Prop() placeholder?: string \| null;\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop({ reflect: true }) readonly = false;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n If `true`, the element will have its spelling and grammar checked.\n /\n @Prop() spellcheck = false;\n\n /\n Specifies the state of the input. By default the input is in an initial state but you can set it to 'error' state if the data given by the user is not valid.\n /\n @Prop({reflect: true}) state: WcsTextareaInputState = 'initial';\n\n /\n The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. \n * Note : at the moment, modifying the width is only possible if you add some custom CSS to the component,\n * for example by overriding the `width` CSS property. See the Resize section for an example on how to do it.\n /\n @Prop() cols?: number;\n\n /\n The number of visible text lines for the control.\n /\n @Prop() rows?: number;\n\n /\n Indicates how the control wraps text.\n /\n @Prop() wrap?: WcsTextareaWrap;\n\n /\n If `true`, the element height will increase based on the value.\n /\n @Prop() autoGrow = false;\n\n /\n The value of the textarea.\n /\n @Prop({mutable: true}) value?: string \| null = '';\n\n /\n Indicates how the textarea should be resizable. \n * Note : at the moment horizontal resizing is only possible if you add custom CSS to the component,\n * see the Resize section for an example.\n /\n @Prop({reflect: true}) resize?: WcsTextareaResize;\n\n /\n Update the native input element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.runAutoGrow();\n }\n\n /\n Emitted when the input value has changed.- See https://developer.mozilla.org/en-US/docs/Web/Events/change\n /\n @Event() wcsChange!: EventEmitter<TextareaChangeEventDetail>;\n\n /\n Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n /\n @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input has focus.\n /\n @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n connectedCallback() {\n this.debounceChanged();\n if (Build.isBrowser) {\n document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n detail: this.el\n }));\n }\n }\n\n disconnectedCallback() {\n if (Build.isBrowser) {\n document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n detail: this.el\n }));\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, TEXTAREA_INHERITED_ATTRS)\n };\n }\n\n componentDidLoad() {\n raf(() => this.runAutoGrow());\n }\n\n private runAutoGrow() {\n const nativeInput = this.nativeInput;\n if (nativeInput && this.autoGrow) {\n readTask(() => {\n nativeInput.style.height = 'auto';\n nativeInput.style.height = nativeInput.scrollHeight + 'px';\n });\n }\n }\n \n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeInput, attr, value);\n }\n\n /\n This method make the textarea automatically adopt the size of the content without a scroll bar\n /\n @Method()\n async fitContent() {\n raf(() => this.runAutoGrow());\n }\n\n /\n Sets blur on the native `textarea` in `wcs-textarea`. Use this method instead of the global\n * `textarea.blur()`.\n * @internal\n /\n @Method()\n async setBlur() {\n if (this.nativeInput) {\n this.nativeInput.blur();\n }\n }\n\n /\n Returns the native `<textarea>` element used under the hood.\n */\n @Method()\n getInputElement(): Promise<HTMLTextAreaElement> {\n // tslint:disable-next-line:no-non-null-assertion\n return Promise.resolve(this.nativeInput!);\n }\n\n private getValue(): string {\n return this.value \|\| '';\n }\n\n private onInput = (ev: Event) => {\n if (this.nativeInput) {\n this.value = this.nativeInput.value;\n }\n this.wcsInput.emit(ev as KeyboardEvent);\n }\n \n private onChange = (_: Event) => {\n this.wcsChange.emit({value: this.nativeInput.value});\n }\n\n private onFocus = (ev: FocusEvent) => {\n if (this.fireFocusEvents) {\n this.wcsFocus.emit(ev);\n }\n }\n\n private onBlur = (ev: FocusEvent) => {\n if (this.fireFocusEvents) {\n this.wcsBlur.emit(ev);\n }\n }\n\n render() {\n const value = this.getValue();\n const style = {\n ...(this.resize && {'resize': this.resize})\n }\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n >\n {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n <textarea\n class=\"native-textarea\"\n ref={el => this.nativeInput = el}\n autoCapitalize={this.autocapitalize}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n disabled={this.disabled}\n maxLength={this.maxlength}\n minLength={this.minlength}\n name={this.name}\n placeholder={this.placeholder \|\| ''}\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n cols={this.cols}\n rows={this.rows}\n wrap={this.wrap}\n onInput={this.onInput}\n onChange={this.onChange}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n style={style}\n {...this.inheritedAttributes}\n >\n {value}\n </textarea>\n </Host>\n );\n }\n}\n\nlet textareaIds = 0;\n"]}

package/dist/collection/components/tooltip/tooltip.js CHANGED Viewed

@@ -26,16 +26,14 @@ const DELEGATED_ARIA_COMPONENTS = ['WCS-BUTTON'];
  *
  * ## Accessibility guidelines 💡
  *
- * The component places necessary aria attribute on your target element (like the `wcs-button`) :
- * - `aria-expanded`: set to true when popover is open, false when it is closed
- *
  * The problem is that impaired users may not be able to see what is the information provided by the tooltip. To solve
  * this problem, the tooltip should be served with some aria attributes to make it accessible.
  *
  * Aria-features `wcs-tooltip` respect:
  * - dismiss when the user presses the `Escape` key
  * - has a `role=tooltip`
- * - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
+ * - when set to `interactive` mode
+ *  - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
  *
  * Aria-features `wcs-tooltip` **does not respect with `wcs-button`**:
  * - aria-controls => we cannot do it yet, we need to wait for Cross root ARIA - export ID (https://github.com/WICG/aom/blob/gh-pages/exportid-explainer.md)
@@ -103,7 +101,9 @@ export class Tooltip {
         }
         if (this.forElement.tagName && DELEGATED_ARIA_COMPONENTS.indexOf(this.forElement.tagName) !== -1) {
             if (isMutableAriaAttribute(this.forElement)) {
-                this.forElement.setAriaAttribute('aria-expanded', 'true');
+                if (this.interactive) {
+                    this.forElement.setAriaAttribute('aria-expanded', 'true');
+                }
             }
         }
     }
@@ -113,7 +113,9 @@ export class Tooltip {
         }
         if (this.forElement.tagName && DELEGATED_ARIA_COMPONENTS.indexOf(this.forElement.tagName) !== -1) {
             if (isMutableAriaAttribute(this.forElement)) {
-                this.forElement.setAriaAttribute('aria-expanded', 'false');
+                if (this.interactive) {
+                    this.forElement.setAriaAttribute('aria-expanded', 'false');
+                }
             }
         }
     }
@@ -178,7 +180,7 @@ export class Tooltip {
         (_a = this.tippyInstance) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     render() {
-        return (h(Host, { key: '06de58e5ee996c471588dd36a2556f9c13b9aaa3', role: "tooltip" }, h("slot", { key: 'f1b6df619dbf24fc37216252a92e39b54f5874cb', onSlotchange: _ => this.updateTippyContent() })));
+        return (h(Host, { key: 'c64153818029a55af719bc87fa5ce413d310e8b7', role: "tooltip" }, h("slot", { key: '2f24f867892089d93b41783977b470ab908063cd', onSlotchange: _ => this.updateTippyContent() })));
     }
     static get is() { return "wcs-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -340,7 +342,7 @@ export class Tooltip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Allows you to change the theme used by tippy.\n\nThe WCS theme is used by default and uses the WCS CSS variables.\n\nYou can create a theme by following this documentation and choosing a custom name :\nhttps://atomiks.github.io/tippyjs/v6/themes/"
+                    "text": "Allows you to change the theme used by tippy.\n\nThe WCS theme 'dark' is used by default and uses the WCS CSS variables.\n\nYou can create a theme by following this documentation and choosing a custom name :\nhttps://atomiks.github.io/tippyjs/v6/themes/"
                 },
                 "attribute": "theme",
                 "reflect": false,

package/dist/collection/components/tooltip/tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, h, Host, Prop, Element, Watch, Method, Listen } from '@stencil/core';\nimport { WcsTooltipAppendTo, WcsTooltipPosition } from './tooltip-interface';\n\n// We use the Tippy.js library for the tooltip. At first by using directly the styles of tippy because\n// the design system does not specify any spec for the tooltips.\n//\n// In a second time, if a need of customization is felt, it will be possible to use the lib in a\n// \"Headless\" mode where the rendering of the tooltip will be entirely in our charge, without\n// modifications in the API : https://atomiks.github.io/tippyjs/v6/headless-tippy/\nimport tippy, { Instance, Props } from 'tippy.js';\nimport { isEscapeKey } from \"../../utils/helpers\";\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/*\n List of components that require special ARIA attribute delegation handling.\n * These components have their own internal elements (like native button inside wcs-button)\n * that need to receive ARIA attributes for proper accessibility.\n * \n * Another solution we take into account is to @Watch the ARIA attributes on the component and set them on the internal element.\n * But this solution was not centralized and can be forgotten.\n /\nconst DELEGATED_ARIA_COMPONENTS = ['WCS-BUTTON'];\n\n/\n Tooltips are used to provide additional information for features available on the website. These can improve the user\n * experience or simply show additional information. Tooltips appear when the user rolls over or clicks on them\n * (for longer content).\n \n Note that this component is based on the Tippy.js library : https://atomiks.github.io/tippyjs/\n * \n * ## Accessibility guidelines 💡\n * \n * The component places necessary aria attribute on your target element (like the `wcs-button`) :\n * - `aria-expanded`: set to true when popover is open, false when it is closed\n * \n * The problem is that impaired users may not be able to see what is the information provided by the tooltip. To solve\n * this problem, the tooltip should be served with some aria attributes to make it accessible.\n \n Aria-features `wcs-tooltip` respect:\n * - dismiss when the user presses the `Escape` key\n * - has a `role=tooltip`\n * - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed\n \n Aria-features `wcs-tooltip` does not respect with `wcs-button`:\n * - aria-controls => we cannot do it yet, we need to wait for Cross root ARIA - export ID (https://github.com/WICG/aom/blob/gh-pages/exportid-explainer.md)\n * \n * But you have to provide the \"link\" between the element you want to describe and the tooltip. To do this, you have to\n * provide the \"visual description\" you add on the `wcs-tooltip` to the `aria-label` attribute or the `aria-description` as soon as the attribute will be available \n * of the element you want to describe .\n * \n * Example:\n * \n * ```html\n * <wcs-tooltip for=\"my-button\">Trashed items</wcs-tooltip>\n * <wcs-button id=\"my-button\" aria-label=\"Trashed items\">Trash</wcs-button>\n * ```\n * \n * @cssprop --wcs-tooltip-background-color - Background color of the tooltip\n * @cssprop --wcs-tooltip-text-color - Text color of the tooltip\n * @cssprop --wcs-tooltip-padding - Padding of the tooltip\n /\n@Component({\n tag: 'wcs-tooltip',\n shadow: true,\n // Tippy stylesheet and specific styles are imported in the global tooltip.scss file\n styleUrl: 'tooltip.scss'\n})\nexport class Tooltip implements ComponentInterface {\n /\n The id of the element the tooltip's going to describe.\n \n This property cannot be modified after initialization.\n \n @example\n * ```html\n * <span id=\"tooltiped\">Some content</span>\n * <wcs-tooltip for=\"tooltiped\">A tooltip!</wcs-tooltip>\n * ```\n /\n @Prop({mutable: false})\n for: string;\n\n /\n Where the tooltip is going to show relative to the element it's describing.\n /\n @Prop({reflect: true})\n position: WcsTooltipPosition = 'bottom';\n\n /\n Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside\n * without hiding.\n /\n @Prop()\n interactive: boolean = false;\n\n /\n Specifies the maximum width of the tooltip. Useful to prevent it from being too horizontally wide to read.\n \n If the viewport's width is smaller than maxWidth, core CSS ensures the tippy remains smaller than the screen.\n * \n * To test it on WCS documentation page, add 'px' to the control value (string type in this case).\n /\n @Prop()\n maxWidth: string \| number = 350;\n\n /\n Delay in ms once a trigger event is fired before the tooltip shows or hides.\n \n You can provide an array with two values to define a different duration for show and hide.\n \n `[showDelay, hideDelay]`\n \n Use null to use default value.\n /\n @Prop()\n delay: number \| [number, number] = 0;\n\n /\n Duration in ms of the transition animation.\n /\n @Prop()\n duration: number \| [number, number] = [300, 250];\n\n /\n Determines the events that cause the tooltip to show. Multiple event names are separated by spaces.\n \n See: https://atomiks.github.io/tippyjs/v6/all-props/#trigger\n /\n @Prop()\n trigger: string = 'mouseenter focus';\n\n /\n Allows you to change the theme used by tippy.\n \n The WCS theme is used by default and uses the WCS CSS variables.\n \n You can create a theme by following this documentation and choosing a custom name :\n * https://atomiks.github.io/tippyjs/v6/themes/\n /\n @Prop()\n theme: 'dark' \| 'light' = 'dark';\n\n /\n You can use this property instead of the slot API to affect content in the tooltip.\n \n This makes it easier to manage the update if the tooltip contains elements that are not mutated when their\n * content changes. Indeed, if the slot is used, the tooltip is updated only if the structure of the slotted DOM\n * changes (the DOM must be mutated).\n \n The two APIs are not mutually exclusive, if both are filled in (the prop + the slot) the rendering will first\n * display the content of this property and then the slotted elements.\n /\n @Prop()\n content: string;\n\n /\n The element to append the tooltip to. Default behaviour is `() => document.body`. If interactive: true,\n * the default behavior is appendTo: \"parent\"\n \n See: https://atomiks.github.io/tippyjs/v6/all-props/#appendto\n /\n @Prop()\n appendTo: WcsTooltipAppendTo;\n\n @Element()\n private el: HTMLWcsTooltipElement;\n\n private tippyInstance: Instance<Props>;\n private forElement?: HTMLElement;\n\n componentWillLoad(): Promise<void> \| void {\n this.forElement = document.getElementById(this.for);\n \n if(!this.forElement) {\n console.error('[wcs-tooltip]: The element with the id provided in the \"for\" property does not exist');\n return\n }\n \n this.tippyInstance = tippy(this.forElement, {\n appendTo: this.appendTo \|\| (() => document.body),\n theme: this.theme,\n allowHTML: true,\n content: this.getTooltipContentFromPropAndSlot(),\n maxWidth: this.maxWidth,\n placement: this.position,\n delay: this.delay,\n duration: this.duration,\n interactive: this.interactive,\n trigger: this.trigger,\n onShow: () => this.onShow(),\n onHide: () => this.onHide()\n });\n }\n\n // region Tippy.js events\n \n // ARIA attributes management 🔍\n //\n // While tippy.js automatically handles aria-expanded on the target element, we manage it ourselves for two main reasons:\n // 1. Some of our components (like wcs-button) have an internal structure where the accessible/focusable element\n // is not the root element. We need to ensure the aria-expanded is set on the correct internal element.\n // 2. We want to maintain consistent control over our ARIA attributes across all components and ensure\n // they work with our custom MutableAriaAttribute interface.\n \n private onShow() {\n if (!this.forElement) {\n return;\n }\n\n if (this.forElement.tagName && DELEGATED_ARIA_COMPONENTS.indexOf(this.forElement.tagName) !== -1) {\n if(isMutableAriaAttribute(this.forElement)) {\n this.forElement.setAriaAttribute('aria-expanded', 'true');\n }\n }\n }\n \n private onHide() {\n if (!this.forElement) {\n return;\n }\n \n if (this.forElement.tagName && DELEGATED_ARIA_COMPONENTS.indexOf(this.forElement.tagName) !== -1) {\n if(isMutableAriaAttribute(this.forElement)) {\n this.forElement.setAriaAttribute('aria-expanded', 'false');\n }\n }\n }\n \n // endregion\n \n @Listen('keydown', { target: 'window' })\n async handleKeyDown(ev: KeyboardEvent) {\n if (isEscapeKey(ev)) {\n if(this.tippyInstance.state.isShown) {\n await this.hide();\n }\n }\n }\n\n private getTooltipContentFromPropAndSlot() {\n if (this.content) {\n return this.content + this.el.innerHTML;\n }\n return this.el.innerHTML;\n }\n\n @Watch('interactive')\n @Watch('position')\n @Watch('maxWidth')\n @Watch('theme')\n @Watch('delay')\n @Watch('duration')\n @Watch('trigger')\n // @ts-ignore\n private updateProps() {\n this.tippyInstance?.setProps({\n interactive: this.interactive,\n placement: this.position,\n maxWidth: this.maxWidth,\n theme: this.theme,\n delay: this.delay,\n duration: this.duration,\n trigger: this.trigger\n })\n }\n\n @Watch('content')\n private updateTippyContent() {\n this.tippyInstance?.setProps({\n content: this.getTooltipContentFromPropAndSlot()\n })\n }\n\n /\n Programmatically hide the tooltip\n /\n @Method()\n async hide() {\n this.tippyInstance.hide();\n }\n\n /\n Programmatically show the tooltip\n /\n @Method()\n async show() {\n this.tippyInstance.show();\n }\n\n /\n Temporarily prevent the tooltip from showing or hiding\n /\n @Method()\n async disable() {\n this.tippyInstance.disable();\n }\n\n /\n Re-enable a disabled tooltip\n */\n @Method()\n async enable() {\n this.tippyInstance.enable();\n }\n\n disconnectedCallback() {\n this.tippyInstance?.destroy();\n }\n\n render() {\n return (\n <Host role=\"tooltip\">\n <slot onSlotchange={_ => this.updateTippyContent()}/>\n </Host>\n );\n }\n\n\n}\n"]}
1	+ {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, h, Host, Prop, Element, Watch, Method, Listen } from '@stencil/core';\nimport { WcsTooltipAppendTo, WcsTooltipPosition } from './tooltip-interface';\n\n// We use the Tippy.js library for the tooltip. At first by using directly the styles of tippy because\n// the design system does not specify any spec for the tooltips.\n//\n// In a second time, if a need of customization is felt, it will be possible to use the lib in a\n// \"Headless\" mode where the rendering of the tooltip will be entirely in our charge, without\n// modifications in the API : https://atomiks.github.io/tippyjs/v6/headless-tippy/\nimport tippy, { Instance, Props } from 'tippy.js';\nimport { isEscapeKey } from \"../../utils/helpers\";\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/*\n List of components that require special ARIA attribute delegation handling.\n * These components have their own internal elements (like native button inside wcs-button)\n * that need to receive ARIA attributes for proper accessibility.\n * \n * Another solution we take into account is to @Watch the ARIA attributes on the component and set them on the internal element.\n * But this solution was not centralized and can be forgotten.\n /\nconst DELEGATED_ARIA_COMPONENTS = ['WCS-BUTTON'];\n\n/\n Tooltips are used to provide additional information for features available on the website. These can improve the user\n * experience or simply show additional information. Tooltips appear when the user rolls over or clicks on them\n * (for longer content).\n \n Note that this component is based on the Tippy.js library : https://atomiks.github.io/tippyjs/\n * \n * ## Accessibility guidelines 💡\n * \n * The problem is that impaired users may not be able to see what is the information provided by the tooltip. To solve\n * this problem, the tooltip should be served with some aria attributes to make it accessible.\n \n Aria-features `wcs-tooltip` respect:\n * - dismiss when the user presses the `Escape` key\n * - has a `role=tooltip`\n * - when set to `interactive` mode\n * - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed\n \n Aria-features `wcs-tooltip` does not respect with `wcs-button`:\n * - aria-controls => we cannot do it yet, we need to wait for Cross root ARIA - export ID (https://github.com/WICG/aom/blob/gh-pages/exportid-explainer.md)\n * \n * But you have to provide the \"link\" between the element you want to describe and the tooltip. To do this, you have to\n * provide the \"visual description\" you add on the `wcs-tooltip` to the `aria-label` attribute or the `aria-description` as soon as the attribute will be available \n * of the element you want to describe .\n * \n * Example:\n * \n * ```html\n * <wcs-tooltip for=\"my-button\">Trashed items</wcs-tooltip>\n * <wcs-button id=\"my-button\" aria-label=\"Trashed items\">Trash</wcs-button>\n * ```\n * \n * @cssprop --wcs-tooltip-background-color - Background color of the tooltip\n * @cssprop --wcs-tooltip-text-color - Text color of the tooltip\n * @cssprop --wcs-tooltip-padding - Padding of the tooltip\n /\n@Component({\n tag: 'wcs-tooltip',\n shadow: true,\n // Tippy stylesheet and specific styles are imported in the global tooltip.scss file\n styleUrl: 'tooltip.scss'\n})\nexport class Tooltip implements ComponentInterface {\n /\n The id of the element the tooltip's going to describe.\n \n This property cannot be modified after initialization.\n \n @example\n * ```html\n * <span id=\"tooltiped\">Some content</span>\n * <wcs-tooltip for=\"tooltiped\">A tooltip!</wcs-tooltip>\n * ```\n /\n @Prop({mutable: false})\n for: string;\n\n /\n Where the tooltip is going to show relative to the element it's describing.\n /\n @Prop({reflect: true})\n position: WcsTooltipPosition = 'bottom';\n\n /\n Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside\n * without hiding.\n /\n @Prop()\n interactive: boolean = false;\n\n /\n Specifies the maximum width of the tooltip. Useful to prevent it from being too horizontally wide to read.\n \n If the viewport's width is smaller than maxWidth, core CSS ensures the tippy remains smaller than the screen.\n * \n * To test it on WCS documentation page, add 'px' to the control value (string type in this case).\n /\n @Prop()\n maxWidth: string \| number = 350;\n\n /\n Delay in ms once a trigger event is fired before the tooltip shows or hides.\n \n You can provide an array with two values to define a different duration for show and hide.\n \n `[showDelay, hideDelay]`\n \n Use null to use default value.\n /\n @Prop()\n delay: number \| [number, number] = 0;\n\n /\n Duration in ms of the transition animation.\n /\n @Prop()\n duration: number \| [number, number] = [300, 250];\n\n /\n Determines the events that cause the tooltip to show. Multiple event names are separated by spaces.\n \n See: https://atomiks.github.io/tippyjs/v6/all-props/#trigger\n /\n @Prop()\n trigger: string = 'mouseenter focus';\n\n /\n Allows you to change the theme used by tippy.\n \n The WCS theme 'dark' is used by default and uses the WCS CSS variables.\n \n You can create a theme by following this documentation and choosing a custom name :\n * https://atomiks.github.io/tippyjs/v6/themes/\n /\n @Prop()\n theme: 'dark' \| 'light' = 'dark';\n\n /\n You can use this property instead of the slot API to affect content in the tooltip.\n \n This makes it easier to manage the update if the tooltip contains elements that are not mutated when their\n * content changes. Indeed, if the slot is used, the tooltip is updated only if the structure of the slotted DOM\n * changes (the DOM must be mutated).\n \n The two APIs are not mutually exclusive, if both are filled in (the prop + the slot) the rendering will first\n * display the content of this property and then the slotted elements.\n /\n @Prop()\n content: string;\n\n /\n The element to append the tooltip to. Default behaviour is `() => document.body`. If interactive: true,\n * the default behavior is appendTo: \"parent\"\n \n See: https://atomiks.github.io/tippyjs/v6/all-props/#appendto\n /\n @Prop()\n appendTo: WcsTooltipAppendTo;\n\n @Element()\n private el: HTMLWcsTooltipElement;\n\n private tippyInstance: Instance<Props>;\n private forElement?: HTMLElement;\n\n componentWillLoad(): Promise<void> \| void {\n this.forElement = document.getElementById(this.for);\n \n if(!this.forElement) {\n console.error('[wcs-tooltip]: The element with the id provided in the \"for\" property does not exist');\n return\n }\n \n this.tippyInstance = tippy(this.forElement, {\n appendTo: this.appendTo \|\| (() => document.body),\n theme: this.theme,\n allowHTML: true,\n content: this.getTooltipContentFromPropAndSlot(),\n maxWidth: this.maxWidth,\n placement: this.position,\n delay: this.delay,\n duration: this.duration,\n interactive: this.interactive,\n trigger: this.trigger,\n onShow: () => this.onShow(),\n onHide: () => this.onHide()\n });\n }\n\n // region Tippy.js events\n \n // ARIA attributes management 🔍\n //\n // While tippy.js automatically handles aria-expanded on the target element, we manage it ourselves for two main reasons:\n // 1. Some of our components (like wcs-button) have an internal structure where the accessible/focusable element\n // is not the root element. We need to ensure the aria-expanded is set on the correct internal element.\n // 2. We want to maintain consistent control over our ARIA attributes across all components and ensure\n // they work with our custom MutableAriaAttribute interface.\n \n private onShow() {\n if (!this.forElement) {\n return;\n }\n\n if (this.forElement.tagName && DELEGATED_ARIA_COMPONENTS.indexOf(this.forElement.tagName) !== -1) {\n if(isMutableAriaAttribute(this.forElement)) {\n if(this.interactive) {\n this.forElement.setAriaAttribute('aria-expanded', 'true');\n }\n }\n }\n }\n \n private onHide() {\n if (!this.forElement) {\n return;\n }\n\n if (this.forElement.tagName && DELEGATED_ARIA_COMPONENTS.indexOf(this.forElement.tagName) !== -1) {\n if(isMutableAriaAttribute(this.forElement)) {\n if(this.interactive) {\n this.forElement.setAriaAttribute('aria-expanded', 'false');\n }\n }\n }\n }\n \n // endregion\n \n @Listen('keydown', { target: 'window' })\n async handleKeyDown(ev: KeyboardEvent) {\n if (isEscapeKey(ev)) {\n if(this.tippyInstance.state.isShown) {\n await this.hide();\n }\n }\n }\n\n private getTooltipContentFromPropAndSlot() {\n if (this.content) {\n return this.content + this.el.innerHTML;\n }\n return this.el.innerHTML;\n }\n\n @Watch('interactive')\n @Watch('position')\n @Watch('maxWidth')\n @Watch('theme')\n @Watch('delay')\n @Watch('duration')\n @Watch('trigger')\n // @ts-ignore\n private updateProps() {\n this.tippyInstance?.setProps({\n interactive: this.interactive,\n placement: this.position,\n maxWidth: this.maxWidth,\n theme: this.theme,\n delay: this.delay,\n duration: this.duration,\n trigger: this.trigger\n })\n }\n\n @Watch('content')\n private updateTippyContent() {\n this.tippyInstance?.setProps({\n content: this.getTooltipContentFromPropAndSlot()\n })\n }\n\n /\n Programmatically hide the tooltip\n /\n @Method()\n async hide() {\n this.tippyInstance.hide();\n }\n\n /\n Programmatically show the tooltip\n /\n @Method()\n async show() {\n this.tippyInstance.show();\n }\n\n /\n Temporarily prevent the tooltip from showing or hiding\n /\n @Method()\n async disable() {\n this.tippyInstance.disable();\n }\n\n /\n Re-enable a disabled tooltip\n */\n @Method()\n async enable() {\n this.tippyInstance.enable();\n }\n\n disconnectedCallback() {\n this.tippyInstance?.destroy();\n }\n\n render() {\n return (\n <Host role=\"tooltip\">\n <slot onSlotchange={_ => this.updateTippyContent()}/>\n </Host>\n );\n }\n\n\n}\n"]}

package/dist/collection/utils/control-component-interface.js ADDED Viewed

@@ -0,0 +1,37 @@
+export function isControlComponentWithLabel(el) {
+    if (typeof el !== 'object' || el === null || el === undefined)
+        return false;
+    return 'getLabel' in el;
+}
+/**
+ * Extracts the text content from nodes assigned to a slot in a Web Component's Shadow DOM.
+ *
+ * @param element - The Web Component HTMLElement containing a Shadow DOM with slots
+ * @param slotName - Optional name of the slot to target (if not provided, targets the default slot)
+ * @returns The combined text content of all nodes assigned to the specified slot, with normalized whitespace
+ *
+ * @throws Will not throw errors, but returns empty string if the element has no Shadow DOM,
+ *         no matching slot, or no assigned nodes
+ */
+export function getSlottedContentText(element, slotName) {
+    if (!element.shadowRoot) {
+        return '';
+    }
+    const slotSelector = typeof slotName === 'string' ? `slot[name="${slotName}"]` : 'slot:not([name])';
+    const slotElement = element.shadowRoot.querySelector(slotSelector);
+    if (!slotElement) {
+        return '';
+    }
+    const assignedNodes = slotElement.assignedNodes({ flatten: true });
+    if (!assignedNodes.length) {
+        return '';
+    }
+    return assignedNodes
+        .map(node => node.textContent || '')
+        .filter(text => text.trim() !== '') // we skip empty text nodes
+        .join(' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+//# sourceMappingURL=control-component-interface.js.map

package/dist/collection/utils/control-component-interface.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"control-component-interface.js","sourceRoot":"","sources":["../../src/utils/control-component-interface.ts"],"names":[],"mappings":"AAUA,MAAM,UAAU,2BAA2B,CAAC,EAAO;IAC/C,IAAI,OAAO,EAAE,KAAK,QAAQ,IAAI,EAAE,KAAK,IAAI,IAAI,EAAE,KAAK,SAAS;QAAE,OAAO,KAAK,CAAC;IAC5E,OAAO,UAAU,IAAI,EAAE,CAAC;AAC5B,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,qBAAqB,CAAC,OAAoB,EAAE,QAAiB;IACzE,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QACtB,OAAO,EAAE,CAAC;IACd,CAAC;IAED,MAAM,YAAY,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,cAAc,QAAQ,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC;IAEpG,MAAM,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACnE,IAAI,CAAC,WAAW,EAAE,CAAC;QACf,OAAO,EAAE,CAAC;IACd,CAAC;IAED,MAAM,aAAa,GAAI,WAA+B,CAAC,aAAa,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;IACtF,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;QACxB,OAAO,EAAE,CAAC;IACd,CAAC;IAED,OAAO,aAAa;SACf,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;SACnC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,2BAA2B;SAC9D,IAAI,CAAC,GAAG,CAAC;SACT,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC;SACpB,IAAI,EAAE,CAAC;AAChB,CAAC","sourcesContent":["/**\n * For form controls components which have a label within like a wcs-switch or wcs-checkbox\n */\nexport interface ControlComponentWithLabel {\n /**\n * Get the label text\n */\n getLabel(): Promise<string>;\n}\n\nexport function isControlComponentWithLabel(el: any): el is ControlComponentWithLabel {\n if (typeof el !== 'object' || el === null || el === undefined) return false;\n return 'getLabel' in el;\n}\n\n/**\n\n * Extracts the text content from nodes assigned to a slot in a Web Component's Shadow DOM.\n *\n * @param element - The Web Component HTMLElement containing a Shadow DOM with slots\n * @param slotName - Optional name of the slot to target (if not provided, targets the default slot)\n * @returns The combined text content of all nodes assigned to the specified slot, with normalized whitespace\n *\n * @throws Will not throw errors, but returns empty string if the element has no Shadow DOM,\n * no matching slot, or no assigned nodes\n */\nexport function getSlottedContentText(element: HTMLElement, slotName?: string): string {\n if (!element.shadowRoot) {\n return '';\n }\n\n const slotSelector = typeof slotName === 'string' ? `slot[name=\"${slotName}\"]` : 'slot:not([name])';\n\n const slotElement = element.shadowRoot.querySelector(slotSelector);\n if (!slotElement) {\n return '';\n }\n\n const assignedNodes = (slotElement as HTMLSlotElement).assignedNodes({flatten: true});\n if (!assignedNodes.length) {\n return '';\n }\n\n return assignedNodes\n .map(node => node.textContent || '')\n .filter(text => text.trim() !== '') // we skip empty text nodes\n .join(' ')\n .replace(/\\s+/g, ' ')\n .trim();\n}\n"]}

package/dist/collection/utils/helpers.js CHANGED Viewed

@@ -151,6 +151,20 @@ export const compareLists = (sourceList, newList, compareFn) => {
     const added = newList.filter(val => !sourceList.some(sourceVal => compareFn(val, sourceVal)));
     return { removed, kept, added };
 };
+/**
+ * Normalizes whitespace by replacing multiple consecutive whitespace characters
+ * with a single space and removes leading and trailing whitespace.
+ *
+ * @param content - String potentially containing multiple whitespace characters to normalize, if the content is null or undefined, it will return an empty string.
+ * @returns Normalized string where sequences of whitespace are replaced by a single space.
+ *
+ * @example
+ * normalizeWhitespace("  Text   with    spaces  ") // Returns "Text with spaces"
+ */
+export function normalizeWhitespace(content) {
+    var _a, _b;
+    return (_b = (_a = content === null || content === void 0 ? void 0 : content.replace(/\s+/g, ' ')) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+}
 /**
  * Patched version of requestAnimationFrame that avoids ngzone
  * Use only when you know ngzone should not run
@@ -178,6 +192,12 @@ export const clickTargetIsElementOrChildren = (mouseEvent, element) => {
 export function generateUniqueId(componentName) {
     return componentName + "-" + Math.random().toString(36);
 }
+/**
+ * `clientX` property doesn't exist on KeyboardEvent, we therefore deduce it's a MouseEvent.
+ */
+export function isMouseEvent(event) {
+    return 'clientX' in event;
+}
 export function isKeyup(evt) {
     return evt.code === 'ArrowUp';
 }
@@ -226,4 +246,24 @@ export function isCtrlA(evt) {
 export function getCssRootPropertyValue(name) {
     return window.getComputedStyle(document.body).getPropertyValue(name) || null;
 }
+/**
+ * Converts a CSS time value string (e.g., '150ms', '1.5s') into milliseconds
+ * @param {string} timeValue - The CSS time value string
+ * @returns {number} Time in milliseconds
+ */
+export function parseCssTimeValueToMilliseconds(timeValue) {
+    if (!timeValue)
+        return 0;
+    const TIME_REGEX = /^([\d.]+)(?:(ms|s))?$/;
+    const trimmedValue = timeValue.trim();
+    if (!/^\d/.test(trimmedValue))
+        return 0;
+    const match = TIME_REGEX.exec(trimmedValue);
+    if (!match)
+        return 0;
+    const value = Number(match[1]);
+    if (!Number.isFinite(value))
+        return 0;
+    return match[2] === 's' ? value * 1000 : value;
+}
 //# sourceMappingURL=helpers.js.map

package/dist/collection/utils/helpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/utils/helpers.ts"],"names":[],"mappings":"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","sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport function isElement(element: any): element is Element {\n return 'clientWidth' in element\n && 'clientHeight' in element;\n}\n\nexport function hasShadowDom(el: HTMLElement) {\n return !!el.shadowRoot && !!(el as any).attachShadow;\n}\n\nexport const debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n const original = (event as any)._original \|\| event;\n return {\n _original: event,\n emit: debounce(original.emit.bind(original), wait)\n } as EventEmitter;\n};\n\nexport const debounce = (func: (...args: any[]) => void, wait = 0) => {\n let timer: any;\n return (...args: any[]): any => {\n clearTimeout(timer);\n timer = setTimeout(func, wait, ...args);\n };\n};\n\n/*\n Elements inside of web components sometimes need to inherit global attributes\n * set on the host. For example, the inner input in `wcs-input` should inherit\n * the `title` attribute that developers set directly on `wcs-input`. This\n * helper function should be called in componentWillLoad and assigned to a variable\n * that is later used in the render function.\n \n This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n /\nexport const inheritAttributes = (el: HTMLElement, attributes: string[] = []) => {\n const attributeObject: { [k: string]: any } = {};\n\n attributes.forEach(attr => {\n if (el.hasAttribute(attr)) {\n const value = el.getAttribute(attr);\n if (value !== null) {\n attributeObject[attr] = el.getAttribute(attr);\n }\n el.removeAttribute(attr);\n }\n });\n\n return attributeObject;\n}\n\n/\n List of available ARIA attributes + `role`.\n * Removed deprecated attributes.\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes\n /\nconst ariaAttributes = [\n 'role',\n 'aria-activedescendant',\n 'aria-atomic',\n 'aria-autocomplete',\n 'aria-braillelabel',\n 'aria-brailleroledescription',\n 'aria-busy',\n 'aria-checked',\n 'aria-colcount',\n 'aria-colindex',\n 'aria-colindextext',\n 'aria-colspan',\n 'aria-controls',\n 'aria-current',\n 'aria-describedby',\n 'aria-description',\n 'aria-details',\n 'aria-disabled',\n 'aria-errormessage',\n 'aria-expanded',\n 'aria-flowto',\n 'aria-haspopup',\n 'aria-hidden',\n 'aria-invalid',\n 'aria-keyshortcuts',\n 'aria-label',\n 'aria-labelledby',\n 'aria-level',\n 'aria-live',\n 'aria-multiline',\n 'aria-multiselectable',\n 'aria-orientation',\n 'aria-owns',\n 'aria-placeholder',\n 'aria-posinset',\n 'aria-pressed',\n 'aria-readonly',\n 'aria-relevant',\n 'aria-required',\n 'aria-roledescription',\n 'aria-rowcount',\n 'aria-rowindex',\n 'aria-rowindextext',\n 'aria-rowspan',\n 'aria-selected',\n 'aria-setsize',\n 'aria-sort',\n 'aria-valuemax',\n 'aria-valuemin',\n 'aria-valuenow',\n 'aria-valuetext',\n];\n\n/\n Returns an array of aria attributes that should be copied from\n * the shadow host element to a target within the light DOM.\n * @param el The element that the attributes should be copied from.\n * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.\n * Use this in instances where we manually specify aria attributes on the `<Host>` element.\n /\nexport const inheritAriaAttributes = (el: HTMLElement, ignoreList?: string[]) => {\n let attributesToInherit = ariaAttributes;\n if (ignoreList && ignoreList.length > 0) {\n attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));\n }\n return inheritAttributes(el, attributesToInherit);\n};\n\n/\n Dynamically add or remove an attribute on the element.\n * If the value of the attribute is null or undefined, the attribute is removed.\n \n @param el - The HTMLElement\n * @param attr - The attribute to be added or removed\n * @param value - The value of the attribute\n /\nexport function setOrRemoveAttribute(el: HTMLElement, attr: string, value: string \| null \| undefined) {\n if (el) {\n if (value === undefined \|\| value === null) {\n el.removeAttribute(attr);\n } else {\n el.setAttribute(attr, value);\n }\n }\n}\n\nexport const findItemLabel = (componentEl: HTMLElement): HTMLWcsLabelElement \| null => {\n const itemEl = componentEl.closest('wcs-form-field');\n if (itemEl) {\n return itemEl.querySelector('wcs-label');\n }\n return null;\n};\n\n/\n Given two lists of items, this function will return the items that were removed, kept, and added compared to the source list.\n * @param sourceList - The source list of items\n * @param newList - The target list of items\n * @param compareFn - The function to compare the items\n /\nexport const compareLists: <T>(sourceList: T[], newList: T[], compareFn: (v1: T, v2: T) => boolean) => {\n removed: T[];\n kept: T[];\n added: T[]\n} = <T>(sourceList: T[], newList: T[], compareFn: (v1: T, v2: T) => boolean) => {\n const removed = sourceList.filter(val => !newList.some(newVal => compareFn(val, newVal)));\n const kept = sourceList.filter(val => newList.some(newVal => compareFn(val, newVal)));\n const added = newList.filter(val => !sourceList.some(sourceVal => compareFn(val, sourceVal)));\n\n return { removed, kept, added };\n};\n\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/\n Patched version of requestAnimationFrame that avoids ngzone\n * Use only when you know ngzone should not run\n /\nexport const raf = (h: any) => {\n if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n return __zone_symbol__requestAnimationFrame(h);\n }\n if (typeof requestAnimationFrame === 'function') {\n return requestAnimationFrame(h);\n }\n return setTimeout(h);\n};\n\n/\n Return true if the mouseEvent click is inside the given HTML element\n */\nexport const clickInsideElement = (event: MouseEvent, element: HTMLElement): boolean => {\n return event.x >= element.getBoundingClientRect().x && event.x <= element.getBoundingClientRect().x + element.getBoundingClientRect().width\n && event.y >= element.getBoundingClientRect().y && event.y <= element.getBoundingClientRect().y + element.getBoundingClientRect().height;\n}\n\n\nexport const clickTargetIsElementOrChildren = (mouseEvent: MouseEvent, element: HTMLElement) => {\n return mouseEvent.target instanceof Node\n && element.contains(mouseEvent.target);\n}\n\nexport function generateUniqueId(componentName: string): string {\n return componentName + \"-\" + Math.random().toString(36);\n}\n\nexport function isKeyup(evt: KeyboardEvent) {\n return evt.code === 'ArrowUp';\n}\n\nexport function isKeydown(evt: KeyboardEvent) {\n return evt.code === 'ArrowDown';\n}\n\nexport function isEscapeKey(evt: KeyboardEvent) {\n return evt.code === 'Escape';\n}\n\nexport function isSpaceKey(evt: KeyboardEvent) {\n return evt.code === 'Space';\n}\n\nexport function isEnterKey(evt: KeyboardEvent) {\n return evt.key === 'Enter';\n}\n\nexport function isHomeKey(evt: KeyboardEvent) {\n return evt.code === 'Home';\n}\n\nexport function isEndKey(evt: KeyboardEvent) {\n return evt.code === 'End';\n}\n\nexport function isUpArrowKey(evt: KeyboardEvent) {\n return evt.key === 'ArrowUp';\n}\n\nexport function isDownArrowKey(evt: KeyboardEvent) {\n return evt.key === 'ArrowDown';\n}\n\nexport function isLeftArrowKey(evt: KeyboardEvent) {\n return evt.key === 'ArrowLeft';\n}\n\nexport function isRightArrowKey(evt: KeyboardEvent) {\n return evt.key === 'ArrowRight';\n}\n\nexport function isPageDownKey(evt: KeyboardEvent) {\n return evt.key === 'PageDown';\n}\n\nexport function isPageUpKey(evt: KeyboardEvent) {\n return evt.key === 'PageUp';\n}\n\nexport function isTabKey(evt: KeyboardEvent) {\n return evt.key === 'Tab';\n}\n\nexport function isCtrlA(evt: KeyboardEvent) {\n return evt.key === 'a' && evt.ctrlKey;\n}\n\nexport function getCssRootPropertyValue(name: string): string \| null {\n return window.getComputedStyle(document.body).getPropertyValue(name) \|\| null;\n}\n"]}
1	+ {"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/utils/helpers.ts"],"names":[],"mappings":"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","sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport function isElement(element: any): element is Element {\n return 'clientWidth' in element\n && 'clientHeight' in element;\n}\n\nexport function hasShadowDom(el: HTMLElement) {\n return !!el.shadowRoot && !!(el as any).attachShadow;\n}\n\nexport const debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n const original = (event as any)._original \|\| event;\n return {\n _original: event,\n emit: debounce(original.emit.bind(original), wait)\n } as EventEmitter;\n};\n\nexport const debounce = (func: (...args: any[]) => void, wait = 0) => {\n let timer: any;\n return (...args: any[]): any => {\n clearTimeout(timer);\n timer = setTimeout(func, wait, ...args);\n };\n};\n\n/*\n Elements inside of web components sometimes need to inherit global attributes\n * set on the host. For example, the inner input in `wcs-input` should inherit\n * the `title` attribute that developers set directly on `wcs-input`. This\n * helper function should be called in componentWillLoad and assigned to a variable\n * that is later used in the render function.\n \n This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n /\nexport const inheritAttributes = (el: HTMLElement, attributes: string[] = []) => {\n const attributeObject: { [k: string]: any } = {};\n\n attributes.forEach(attr => {\n if (el.hasAttribute(attr)) {\n const value = el.getAttribute(attr);\n if (value !== null) {\n attributeObject[attr] = el.getAttribute(attr);\n }\n el.removeAttribute(attr);\n }\n });\n\n return attributeObject;\n}\n\n/\n List of available ARIA attributes + `role`.\n * Removed deprecated attributes.\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes\n /\nconst ariaAttributes = [\n 'role',\n 'aria-activedescendant',\n 'aria-atomic',\n 'aria-autocomplete',\n 'aria-braillelabel',\n 'aria-brailleroledescription',\n 'aria-busy',\n 'aria-checked',\n 'aria-colcount',\n 'aria-colindex',\n 'aria-colindextext',\n 'aria-colspan',\n 'aria-controls',\n 'aria-current',\n 'aria-describedby',\n 'aria-description',\n 'aria-details',\n 'aria-disabled',\n 'aria-errormessage',\n 'aria-expanded',\n 'aria-flowto',\n 'aria-haspopup',\n 'aria-hidden',\n 'aria-invalid',\n 'aria-keyshortcuts',\n 'aria-label',\n 'aria-labelledby',\n 'aria-level',\n 'aria-live',\n 'aria-multiline',\n 'aria-multiselectable',\n 'aria-orientation',\n 'aria-owns',\n 'aria-placeholder',\n 'aria-posinset',\n 'aria-pressed',\n 'aria-readonly',\n 'aria-relevant',\n 'aria-required',\n 'aria-roledescription',\n 'aria-rowcount',\n 'aria-rowindex',\n 'aria-rowindextext',\n 'aria-rowspan',\n 'aria-selected',\n 'aria-setsize',\n 'aria-sort',\n 'aria-valuemax',\n 'aria-valuemin',\n 'aria-valuenow',\n 'aria-valuetext',\n];\n\n/\n Returns an array of aria attributes that should be copied from\n * the shadow host element to a target within the light DOM.\n * @param el The element that the attributes should be copied from.\n * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.\n * Use this in instances where we manually specify aria attributes on the `<Host>` element.\n /\nexport const inheritAriaAttributes = (el: HTMLElement, ignoreList?: string[]) => {\n let attributesToInherit = ariaAttributes;\n if (ignoreList && ignoreList.length > 0) {\n attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));\n }\n return inheritAttributes(el, attributesToInherit);\n};\n\n/\n Dynamically add or remove an attribute on the element.\n * If the value of the attribute is null or undefined, the attribute is removed.\n \n @param el - The HTMLElement\n * @param attr - The attribute to be added or removed\n * @param value - The value of the attribute\n /\nexport function setOrRemoveAttribute(el: HTMLElement, attr: string, value: string \| null \| undefined) {\n if (el) {\n if (value === undefined \|\| value === null) {\n el.removeAttribute(attr);\n } else {\n el.setAttribute(attr, value);\n }\n }\n}\n\nexport const findItemLabel = (componentEl: HTMLElement): HTMLWcsLabelElement \| null => {\n const itemEl = componentEl.closest('wcs-form-field');\n if (itemEl) {\n return itemEl.querySelector('wcs-label');\n }\n return null;\n};\n\n/\n Given two lists of items, this function will return the items that were removed, kept, and added compared to the source list.\n * @param sourceList - The source list of items\n * @param newList - The target list of items\n * @param compareFn - The function to compare the items\n /\nexport const compareLists: <T>(sourceList: T[], newList: T[], compareFn: (v1: T, v2: T) => boolean) => {\n removed: T[];\n kept: T[];\n added: T[]\n} = <T>(sourceList: T[], newList: T[], compareFn: (v1: T, v2: T) => boolean) => {\n const removed = sourceList.filter(val => !newList.some(newVal => compareFn(val, newVal)));\n const kept = sourceList.filter(val => newList.some(newVal => compareFn(val, newVal)));\n const added = newList.filter(val => !sourceList.some(sourceVal => compareFn(val, sourceVal)));\n\n return { removed, kept, added };\n};\n\n/\n Normalizes whitespace by replacing multiple consecutive whitespace characters \n * with a single space and removes leading and trailing whitespace.\n * \n * @param content - String potentially containing multiple whitespace characters to normalize, if the content is null or undefined, it will return an empty string.\n * @returns Normalized string where sequences of whitespace are replaced by a single space.\n * \n * @example\n * normalizeWhitespace(\" Text with spaces \") // Returns \"Text with spaces\"\n /\nexport function normalizeWhitespace(content: string): string {\n return content?.replace(/\\s+/g, ' ')?.trim() ?? '';\n}\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/\n Patched version of requestAnimationFrame that avoids ngzone\n * Use only when you know ngzone should not run\n /\nexport const raf = (h: any) => {\n if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n return __zone_symbol__requestAnimationFrame(h);\n }\n if (typeof requestAnimationFrame === 'function') {\n return requestAnimationFrame(h);\n }\n return setTimeout(h);\n};\n\n/\n Return true if the mouseEvent click is inside the given HTML element\n /\nexport const clickInsideElement = (event: MouseEvent, element: HTMLElement): boolean => {\n return event.x >= element.getBoundingClientRect().x && event.x <= element.getBoundingClientRect().x + element.getBoundingClientRect().width\n && event.y >= element.getBoundingClientRect().y && event.y <= element.getBoundingClientRect().y + element.getBoundingClientRect().height;\n}\n\nexport const clickTargetIsElementOrChildren = (mouseEvent: MouseEvent, element: HTMLElement) => {\n return mouseEvent.target instanceof Node\n && element.contains(mouseEvent.target);\n}\n\nexport function generateUniqueId(componentName: string): string {\n return componentName + \"-\" + Math.random().toString(36);\n}\n\n/\n `clientX` property doesn't exist on KeyboardEvent, we therefore deduce it's a MouseEvent.\n /\nexport function isMouseEvent(event: MouseEvent \| KeyboardEvent): event is MouseEvent {\n return 'clientX' in event;\n}\n\nexport function isKeyup(evt: KeyboardEvent) {\n return evt.code === 'ArrowUp';\n}\n\nexport function isKeydown(evt: KeyboardEvent) {\n return evt.code === 'ArrowDown';\n}\n\nexport function isEscapeKey(evt: KeyboardEvent) {\n return evt.code === 'Escape';\n}\n\nexport function isSpaceKey(evt: KeyboardEvent) {\n return evt.code === 'Space';\n}\n\nexport function isEnterKey(evt: KeyboardEvent) {\n return evt.key === 'Enter';\n}\n\nexport function isHomeKey(evt: KeyboardEvent) {\n return evt.code === 'Home';\n}\n\nexport function isEndKey(evt: KeyboardEvent) {\n return evt.code === 'End';\n}\n\nexport function isUpArrowKey(evt: KeyboardEvent) {\n return evt.key === 'ArrowUp';\n}\n\nexport function isDownArrowKey(evt: KeyboardEvent) {\n return evt.key === 'ArrowDown';\n}\n\nexport function isLeftArrowKey(evt: KeyboardEvent) {\n return evt.key === 'ArrowLeft';\n}\n\nexport function isRightArrowKey(evt: KeyboardEvent) {\n return evt.key === 'ArrowRight';\n}\n\nexport function isPageDownKey(evt: KeyboardEvent) {\n return evt.key === 'PageDown';\n}\n\nexport function isPageUpKey(evt: KeyboardEvent) {\n return evt.key === 'PageUp';\n}\n\nexport function isTabKey(evt: KeyboardEvent) {\n return evt.key === 'Tab';\n}\n\nexport function isCtrlA(evt: KeyboardEvent) {\n return evt.key === 'a' && evt.ctrlKey;\n}\n\nexport function getCssRootPropertyValue(name: string): string \| null {\n return window.getComputedStyle(document.body).getPropertyValue(name) \|\| null;\n}\n\n/\n Converts a CSS time value string (e.g., '150ms', '1.5s') into milliseconds\n * @param {string} timeValue - The CSS time value string\n * @returns {number} Time in milliseconds\n /\nexport function parseCssTimeValueToMilliseconds(timeValue: string): number {\n if (!timeValue) return 0;\n\n const TIME_REGEX = /^([\\d.]+)(?:(ms\|s))?$/;\n\n const trimmedValue = timeValue.trim();\n if (!/^\\d/.test(trimmedValue)) return 0;\n\n const match = TIME_REGEX.exec(trimmedValue);\n if (!match) return 0;\n\n const value = Number(match[1]);\n if (!Number.isFinite(value)) return 0;\n\n return match[2] === 's' ? value 1000 : value;\n}\n"]}

package/dist/esm/{com-nav-utils-1366c701.js → com-nav-utils-ee7bf77c.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { g as getCssRootPropertyValue } from './helpers-f137ec8d.js';
+import { g as getCssRootPropertyValue } from './helpers-ece6a2d3.js';
 /**
  * This function add event handlers on the navigableItems list. The handlers call the function close() on the nodeName.
@@ -48,4 +48,4 @@ function comNavDidLoadWithResizeObserver(comNavElement) {
 export { comNavDidLoadWithResizeObserver as c, registerCloseHandlerForFocusOutEventOn as r };
-//# sourceMappingURL=com-nav-utils-1366c701.js.map
+//# sourceMappingURL=com-nav-utils-ee7bf77c.js.map

package/dist/esm/{com-nav-utils-1366c701.js.map → com-nav-utils-ee7bf77c.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"com-nav-utils-~~1366c701~~.js","mappings":";;AAKA;;;;;;;;SAQgB,sCAAsC,CAA+B,cAAmC,EAAE,eAAuB;IAC7I,cAAc,CAAC,OAAO,CAAC,aAAa;QAChC,aAAa,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC,GAAe;YACvD,MAAM,oBAAoB,GAAG,GAAG,CAAC,aAA4B,CAAC;YAC9D,IAAI,CAAC,6BAA6B,CAAC,aAAa,EAAE,oBAAoB,CAAC,EAAE;gBACrE,MAAM,iBAAiB,GAAI,GAAa,CAAC,YAAY,EAAE,CAAC;gBACxD,IAAI,uCAAuC,CAAC,iBAAiB,EAAE,eAAe,CAAC,EAAE;oBAC5E,iBAAiB,CAAC,MAAM,CAAC,yBAAyB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAkB,CAAC,KAAK,EAAE,CAAC;iBACrG;aACJ;SACJ,CAAC,CAAA;KACL,CAAC,CAAC;AACP,CAAC;AAED,SAAS,6BAA6B,CAAC,aAAsB,EAAE,OAAgB;IAC3E,OAAO,aAAa,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC3C,CAAC;AAED,SAAS,yBAAyB,CAAC,QAAgB;IAC/C,OAAO,CAAC,IAAK,CAAiB,CAAC,QAAQ,KAAK,QAAQ,CAAC;AACzD,CAAC;AAED,SAAS,uCAAuC,CAAC,iBAAgC,EAAE,QAAgB;IAC/F,OAAO,iBAAiB,CAAC,GAAG,CAAC,CAAC,IAAK,CAAiB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5F,CAAC;SAEe,+BAA+B,CAAC,aAAsD;IAClG,MAAM,eAAe,GAAG,uBAAuB,CAAC,kCAAkC,CAAC,IAAI,OAAO,CAAC;IAC/F,MAAM,oBAAoB,GAAG,QAAQ,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;IAE3D,OAAO,IAAI,cAAc,CAAC,KAAK;QAC3B,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QAChC,MAAM,YAAY,GAAG,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC;QACzC,MAAM,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC;QAC5B,IAAI,EAAE,CAAC,KAAK,IAAI,oBAAoB,IAAI,WAAW,GAAG,YAAY,CAAC,EAAE;YACjE,aAAa,CAAC,mBAAmB,GAAG,QAAQ,CAAC;SAChD;aAAM;YACH,aAAa,CAAC,mBAAmB,GAAG,SAAS,CAAC;SACjD;KACJ,CAAC,CAAC;AACP;;;;","names":[],"sources":["src/components/com-nav/com-nav-utils.ts"],"sourcesContent":["import { getCssRootPropertyValue } from \"../../utils/helpers\";\nimport { ComNav } from \"./com-nav\";\nimport { ComNavSubmenu } from \"../com-nav-submenu/com-nav-submenu\";\nimport { ComNavCategory } from \"../com-nav-category/com-nav-category\";\n\n/*\n This function add event handlers on the navigableItems list. The handlers call the function close() on the nodeName.\n \n T: type class of the nodeNameToClose param (must have a close function)\n \n @param navigableItems items on which focusout event listeners must be added\n * @param nodeNameToClose nodeName of the element we want to close in the event path\n */\nexport function registerCloseHandlerForFocusOutEventOn<T extends {close: () => any}>(navigableItems: NodeListOf<Element>, nodeNameToClose: string): void {\n navigableItems.forEach(navigableItem => {\n navigableItem.addEventListener(\"focusout\", (evt: FocusEvent) => {\n const relatedTargetElement = evt.relatedTarget as HTMLElement;\n if (!isElementChildOfNavigableItem(navigableItem, relatedTargetElement)) {\n const eventComposedPath = (evt as Event).composedPath();\n if (isEventThrownFromChildOfNodeNameToClose(eventComposedPath, nodeNameToClose)) {\n (eventComposedPath.filter(eventTargetNodeNameEquals(nodeNameToClose))[0] as unknown as T).close();\n }\n }\n })\n });\n}\n\nfunction isElementChildOfNavigableItem(navigableItem: Element, element: Element) {\n return navigableItem.contains(element);\n}\n\nfunction eventTargetNodeNameEquals(nodeName: string) {\n return x => (x as HTMLElement).nodeName === nodeName;\n}\n\nfunction isEventThrownFromChildOfNodeNameToClose(eventComposedPath: EventTarget[], nodeName: string) {\n return eventComposedPath.map(x => (x as HTMLElement).nodeName).indexOf(nodeName) !== -1;\n}\n\nexport function comNavDidLoadWithResizeObserver(comNavElement: ComNav \| ComNavSubmenu \| ComNavCategory): ResizeObserver {\n const smallBreakpoint = getCssRootPropertyValue('--wcs-phone-breakpoint-max-width') \|\| '575px';\n const smallBreakpointValue = parseInt(smallBreakpoint, 10);\n\n return new ResizeObserver(entry => {\n const cr = entry[0].contentRect;\n const paddingRight = cr.right - cr.width;\n const paddingLeft = cr.left;\n if (cr.width <= smallBreakpointValue - (paddingLeft + paddingRight)) {\n comNavElement.currentActiveSizing = 'mobile';\n } else {\n comNavElement.currentActiveSizing = 'desktop';\n }\n });\n}\n"],"version":3}
1	+ {"file":"com-nav-utils-ee7bf77c.js","mappings":";;AAKA;;;;;;;;SAQgB,sCAAsC,CAA+B,cAAmC,EAAE,eAAuB;IAC7I,cAAc,CAAC,OAAO,CAAC,aAAa;QAChC,aAAa,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC,GAAe;YACvD,MAAM,oBAAoB,GAAG,GAAG,CAAC,aAA4B,CAAC;YAC9D,IAAI,CAAC,6BAA6B,CAAC,aAAa,EAAE,oBAAoB,CAAC,EAAE;gBACrE,MAAM,iBAAiB,GAAI,GAAa,CAAC,YAAY,EAAE,CAAC;gBACxD,IAAI,uCAAuC,CAAC,iBAAiB,EAAE,eAAe,CAAC,EAAE;oBAC5E,iBAAiB,CAAC,MAAM,CAAC,yBAAyB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAkB,CAAC,KAAK,EAAE,CAAC;iBACrG;aACJ;SACJ,CAAC,CAAA;KACL,CAAC,CAAC;AACP,CAAC;AAED,SAAS,6BAA6B,CAAC,aAAsB,EAAE,OAAgB;IAC3E,OAAO,aAAa,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC3C,CAAC;AAED,SAAS,yBAAyB,CAAC,QAAgB;IAC/C,OAAO,CAAC,IAAK,CAAiB,CAAC,QAAQ,KAAK,QAAQ,CAAC;AACzD,CAAC;AAED,SAAS,uCAAuC,CAAC,iBAAgC,EAAE,QAAgB;IAC/F,OAAO,iBAAiB,CAAC,GAAG,CAAC,CAAC,IAAK,CAAiB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5F,CAAC;SAEe,+BAA+B,CAAC,aAAsD;IAClG,MAAM,eAAe,GAAG,uBAAuB,CAAC,kCAAkC,CAAC,IAAI,OAAO,CAAC;IAC/F,MAAM,oBAAoB,GAAG,QAAQ,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;IAE3D,OAAO,IAAI,cAAc,CAAC,KAAK;QAC3B,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QAChC,MAAM,YAAY,GAAG,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC;QACzC,MAAM,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC;QAC5B,IAAI,EAAE,CAAC,KAAK,IAAI,oBAAoB,IAAI,WAAW,GAAG,YAAY,CAAC,EAAE;YACjE,aAAa,CAAC,mBAAmB,GAAG,QAAQ,CAAC;SAChD;aAAM;YACH,aAAa,CAAC,mBAAmB,GAAG,SAAS,CAAC;SACjD;KACJ,CAAC,CAAC;AACP;;;;","names":[],"sources":["src/components/com-nav/com-nav-utils.ts"],"sourcesContent":["import { getCssRootPropertyValue } from \"../../utils/helpers\";\nimport { ComNav } from \"./com-nav\";\nimport { ComNavSubmenu } from \"../com-nav-submenu/com-nav-submenu\";\nimport { ComNavCategory } from \"../com-nav-category/com-nav-category\";\n\n/*\n This function add event handlers on the navigableItems list. The handlers call the function close() on the nodeName.\n \n T: type class of the nodeNameToClose param (must have a close function)\n \n @param navigableItems items on which focusout event listeners must be added\n * @param nodeNameToClose nodeName of the element we want to close in the event path\n */\nexport function registerCloseHandlerForFocusOutEventOn<T extends {close: () => any}>(navigableItems: NodeListOf<Element>, nodeNameToClose: string): void {\n navigableItems.forEach(navigableItem => {\n navigableItem.addEventListener(\"focusout\", (evt: FocusEvent) => {\n const relatedTargetElement = evt.relatedTarget as HTMLElement;\n if (!isElementChildOfNavigableItem(navigableItem, relatedTargetElement)) {\n const eventComposedPath = (evt as Event).composedPath();\n if (isEventThrownFromChildOfNodeNameToClose(eventComposedPath, nodeNameToClose)) {\n (eventComposedPath.filter(eventTargetNodeNameEquals(nodeNameToClose))[0] as unknown as T).close();\n }\n }\n })\n });\n}\n\nfunction isElementChildOfNavigableItem(navigableItem: Element, element: Element) {\n return navigableItem.contains(element);\n}\n\nfunction eventTargetNodeNameEquals(nodeName: string) {\n return x => (x as HTMLElement).nodeName === nodeName;\n}\n\nfunction isEventThrownFromChildOfNodeNameToClose(eventComposedPath: EventTarget[], nodeName: string) {\n return eventComposedPath.map(x => (x as HTMLElement).nodeName).indexOf(nodeName) !== -1;\n}\n\nexport function comNavDidLoadWithResizeObserver(comNavElement: ComNav \| ComNavSubmenu \| ComNavCategory): ResizeObserver {\n const smallBreakpoint = getCssRootPropertyValue('--wcs-phone-breakpoint-max-width') \|\| '575px';\n const smallBreakpointValue = parseInt(smallBreakpoint, 10);\n\n return new ResizeObserver(entry => {\n const cr = entry[0].contentRect;\n const paddingRight = cr.right - cr.width;\n const paddingLeft = cr.left;\n if (cr.width <= smallBreakpointValue - (paddingLeft + paddingRight)) {\n comNavElement.currentActiveSizing = 'mobile';\n } else {\n comNavElement.currentActiveSizing = 'desktop';\n }\n });\n}\n"],"version":3}

package/dist/esm/control-component-interface-9f09e520.js ADDED Viewed

@@ -0,0 +1,40 @@
+function isControlComponentWithLabel(el) {
+    if (typeof el !== 'object' || el === null || el === undefined)
+        return false;
+    return 'getLabel' in el;
+}
+/**
+ * Extracts the text content from nodes assigned to a slot in a Web Component's Shadow DOM.
+ *
+ * @param element - The Web Component HTMLElement containing a Shadow DOM with slots
+ * @param slotName - Optional name of the slot to target (if not provided, targets the default slot)
+ * @returns The combined text content of all nodes assigned to the specified slot, with normalized whitespace
+ *
+ * @throws Will not throw errors, but returns empty string if the element has no Shadow DOM,
+ *         no matching slot, or no assigned nodes
+ */
+function getSlottedContentText(element, slotName) {
+    if (!element.shadowRoot) {
+        return '';
+    }
+    const slotSelector = typeof slotName === 'string' ? `slot[name="${slotName}"]` : 'slot:not([name])';
+    const slotElement = element.shadowRoot.querySelector(slotSelector);
+    if (!slotElement) {
+        return '';
+    }
+    const assignedNodes = slotElement.assignedNodes({ flatten: true });
+    if (!assignedNodes.length) {
+        return '';
+    }
+    return assignedNodes
+        .map(node => node.textContent || '')
+        .filter(text => text.trim() !== '') // we skip empty text nodes
+        .join(' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+export { getSlottedContentText as g, isControlComponentWithLabel as i };
+//# sourceMappingURL=control-component-interface-9f09e520.js.map