npm - @haiilo/catalyst - Versions diffs - 10.30.2 → 10.31.1 - Mend

@haiilo/catalyst 10.30.2 → 10.31.1

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

Files changed (60) hide show

package/dist/collection/components/cat-dropdown/cat-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport type { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n/*\n A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n /\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private anchorSlot!: HTMLSlotElement;\n private anchor?: Element;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private isOpen: boolean \| null = false;\n\n /\n The placement of the dropdown.\n /\n @Prop() placement: Placement = 'bottom-start';\n\n /\n Do not close the dropdown on outside clicks.\n /\n @Prop() noAutoClose = false;\n\n /\n Do not navigate focus inside the dropdown via vertical arrow keys.\n /\n @Prop() arrowNavigation: 'horizontal' \| 'vertical' \| 'none' = 'vertical';\n\n /\n Do not change the size of the dropdown to ensure it isn’t too big to fit\n * in the viewport (or more specifically, its clipping context).\n /\n @Prop() noResize = false;\n\n /\n Allow overflow when dropdown is open.\n /\n @Prop() overflow = false;\n\n /\n No element in dropdown will receive focus when dropdown is open.\n * By default, the first element in tab order will receive a focus.\n /\n @Prop() noInitialFocus = false;\n\n /\n Trigger element will not receive focus when dropdown is closed.\n /\n @Prop() noReturnFocus = false;\n\n /\n Emitted when the dropdown is opened.\n /\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the dropdown is closed.\n /\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n // we need to delay the initialization of the trigger until first\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button clicks inside the dropdown content\n const path = event.composedPath();\n if (\n !this.noAutoClose &&\n // check if click was inside of the dropdown content\n path.includes(this.content) &&\n // check if click was not on a trigger for a sub-dropdown\n (event.target as Element)?.slot !== 'trigger' &&\n // check if click was not an element marked with data-dropdown-no-close\n !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n ) {\n this.close();\n }\n }\n\n /\n Toggles the dropdown.\n /\n @Method()\n async toggle(): Promise<void> {\n this.isOpen ? this.close() : this.open();\n }\n\n /\n Opens the dropdown.\n /\n @Method()\n async open(): Promise<void> {\n // we need to delay the initialization of the trigger until first\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n }\n\n if (this.isOpen === null \|\| this.isOpen) {\n return; // busy or open\n }\n\n this.isOpen = null;\n this.content.style.display = 'block';\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: {\n getShadowRoot: true\n },\n allowOutsideClick: true,\n clickOutsideDeactivates: event =>\n !this.noAutoClose &&\n // check if click was outside of the dropdown content\n !event.composedPath().includes(this.content) &&\n // check if click was not on an element marked with data-dropdown-no-close\n !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),\n onPostDeactivate: () => this.close(),\n onPostActivate: () => this.catOpen.emit(),\n setReturnFocus: elem => (this.noReturnFocus ? false : this.trigger \|\| elem),\n isKeyForward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') \|\|\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab';\n },\n isKeyBackward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') \|\|\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab' && event.shiftKey;\n },\n initialFocus: () => (this.noInitialFocus ? false : undefined)\n });\n this.trap.activate();\n });\n }\n\n /\n Closes the dropdown.\n */\n @Method()\n async close(): Promise<void> {\n if (!this.isOpen) {\n return; // busy or closed\n }\n\n this.isOpen = null;\n this.trap?.deactivate();\n this.content.classList.remove('show');\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n render() {\n return (\n <Host>\n <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n componentDidLoad() {\n this.initAnchor();\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n const ariaHaspopup = this.trigger.getAttribute('aria-haspopup');\n this.trigger.setAttribute('aria-haspopup', ariaHaspopup ?? 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', () => this.toggle());\n if (!this.anchor) {\n autoUpdate(this.trigger, this.content, () => this.update(this.trigger));\n }\n }\n\n private initAnchor() {\n this.anchor = (this.anchorSlot?.assignedElements?.() \|\| [])[0];\n if (this.anchor) {\n autoUpdate(this.anchor, this.content, () => this.update(this.anchor));\n }\n }\n\n private findTrigger() {\n let trigger: FocusableElement \| undefined;\n const elems = this.triggerSlot?.assignedElements?.() \|\| [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : (elem?.querySelector('[data-trigger]') ?? undefined);\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update(anchorElement: ReferenceElement \| undefined) {\n if (anchorElement) {\n const resize = this.noResize\n ? []\n : [\n size({\n padding: CatDropdown.OFFSET,\n apply({ availableWidth, availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`\n });\n }\n })\n ];\n computePosition(anchorElement, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [offset(CatDropdown.OFFSET), flip(), ...resize]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n\n private hasAttribute(elem: EventTarget, attr: string) {\n return elem instanceof HTMLElement && elem.hasAttribute(attr);\n }\n}\n"]}
1	+ {"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport type { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n/*\n A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n /\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private anchorSlot!: HTMLSlotElement;\n private anchor?: Element;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private isOpen: boolean \| null = false;\n /\n Tracking the origin of opening the dropdown and specify if initial focus should be set.\n * Currently we set it only when the origin is keyboard.\n * We might not need to track this in future when focus-visible support is improved across browsers\n /\n private hasInitialFocus = false;\n\n /\n The placement of the dropdown.\n /\n @Prop() placement: Placement = 'bottom-start';\n\n /\n Do not close the dropdown on outside clicks.\n /\n @Prop() noAutoClose = false;\n\n /\n Do not navigate focus inside the dropdown via vertical arrow keys.\n /\n @Prop() arrowNavigation: 'horizontal' \| 'vertical' \| 'none' = 'vertical';\n\n /\n Do not change the size of the dropdown to ensure it isn’t too big to fit\n * in the viewport (or more specifically, its clipping context).\n /\n @Prop() noResize = false;\n\n /\n Allow overflow when dropdown is open.\n /\n @Prop() overflow = false;\n\n /\n No element in dropdown will receive focus when dropdown is open.\n * By default, the first element in tab order will receive a focus.\n * @deprecated\n * Using noInitialFocus property would be a bad practice from a11y perspective.\n * We always want visible focus to jump inside the dropdown when user uses keyboard and noInitialFocus allows to turn it off which might introduce a bug.\n * hasInitialFocus should resolve the cause of the original problem instead.\n /\n @Prop() noInitialFocus = false;\n\n /\n Trigger element will not receive focus when dropdown is closed.\n /\n @Prop() noReturnFocus = false;\n\n /\n Emitted when the dropdown is opened.\n /\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the dropdown is closed.\n /\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n // we need to delay the initialization of the trigger until first\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.hasInitialFocus = this.isEventOriginFromKeyboard(event.detail);\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button clicks inside the dropdown content\n const path = event.composedPath();\n if (\n !this.noAutoClose &&\n // check if click was inside of the dropdown content\n path.includes(this.content) &&\n // check if click was not on a trigger for a sub-dropdown\n (event.target as Element)?.slot !== 'trigger' &&\n // check if click was not an element marked with data-dropdown-no-close\n !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n ) {\n this.close();\n }\n }\n\n /\n Toggles the dropdown.\n /\n @Method()\n async toggle(): Promise<void> {\n this.isOpen ? this.close() : this.open();\n }\n\n /\n Opens the dropdown.\n * @param isFocusVisible is dropdown should receive visible focus when it's opened.\n /\n @Method()\n async open(isFocusVisible?: boolean): Promise<void> {\n // we need to delay the initialization of the trigger until first\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n }\n\n if (this.isOpen === null \|\| this.isOpen) {\n return; // busy or open\n }\n\n this.isOpen = null;\n this.content.style.display = 'block';\n this.hasInitialFocus = isFocusVisible ?? this.hasInitialFocus;\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: {\n getShadowRoot: true\n },\n allowOutsideClick: true,\n clickOutsideDeactivates: event =>\n !this.noAutoClose &&\n // check if click was outside of the dropdown content\n !event.composedPath().includes(this.content) &&\n // check if click was not on an element marked with data-dropdown-no-close\n !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),\n onPostDeactivate: () => this.close(),\n onPostActivate: () => this.catOpen.emit(),\n setReturnFocus: elem => (this.noReturnFocus ? false : this.trigger \|\| elem),\n isKeyForward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') \|\|\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab';\n },\n isKeyBackward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') \|\|\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab' && event.shiftKey;\n },\n initialFocus: () => {\n return this.hasInitialFocus && !this.noInitialFocus ? undefined : false;\n }\n });\n this.trap.activate();\n });\n }\n\n /\n Closes the dropdown.\n */\n @Method()\n async close(): Promise<void> {\n if (!this.isOpen) {\n return; // busy or closed\n }\n\n this.isOpen = null;\n this.trap?.deactivate();\n this.content.classList.remove('show');\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n render() {\n return (\n <Host>\n <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n componentDidLoad() {\n this.initAnchor();\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n const ariaHaspopup = this.trigger.getAttribute('aria-haspopup');\n this.trigger.setAttribute('aria-haspopup', ariaHaspopup ?? 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', (event: Event) => {\n this.hasInitialFocus = this.isEventOriginFromKeyboard(event as UIEvent);\n this.toggle();\n });\n if (!this.anchor) {\n autoUpdate(this.trigger, this.content, () => this.update(this.trigger));\n }\n }\n\n private isEventOriginFromKeyboard(event: UIEvent): boolean {\n return event.detail === 0;\n }\n\n private initAnchor() {\n this.anchor = (this.anchorSlot?.assignedElements?.() \|\| [])[0];\n if (this.anchor) {\n autoUpdate(this.anchor, this.content, () => this.update(this.anchor));\n }\n }\n\n private findTrigger() {\n let trigger: FocusableElement \| undefined;\n const elems = this.triggerSlot?.assignedElements?.() \|\| [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : (elem?.querySelector('[data-trigger]') ?? undefined);\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update(anchorElement: ReferenceElement \| undefined) {\n if (anchorElement) {\n const resize = this.noResize\n ? []\n : [\n size({\n padding: CatDropdown.OFFSET,\n apply({ availableWidth, availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`\n });\n }\n })\n ];\n computePosition(anchorElement, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [offset(CatDropdown.OFFSET), flip(), ...resize]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n\n private hasAttribute(elem: EventTarget, attr: string) {\n return elem instanceof HTMLElement && elem.hasAttribute(attr);\n }\n}\n"]}

package/dist/collection/components/cat-input/cat-input.js CHANGED Viewed

@@ -54,6 +54,7 @@ export class CatInput {
         this.errors = undefined;
         this.errorUpdate = 0;
         this.nativeAttributes = undefined;
+        this.testId = undefined;
     }
     get id() {
         return this.identifier || this._id;
@@ -117,19 +118,19 @@ export class CatInput {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h("div", { key: '3d28dff29d5ced59f609ce9fcf6c2b2a14cfdda7', class: {
+        return (h("div", { key: '65536a5d26ff0ebe45920b352cdfa4e28719efeb', class: {
                 'input-field': true,
                 'input-horizontal': this.horizontal
-            } }, h("div", { key: '41399390b76c6a2e96dc3df48eede8ea2bcc4698', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '68bb767790072eb2728d680d448e1ee80e641013', htmlFor: this.id, part: "label" }, h("span", { key: '04c217ff1f227a1fb82b9a52b284bbd67f8d89dd', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '0c462827456af3b83935e569fac4fb45459c2edc', name: "label" })) || this.label, h("div", { key: '9415db27af950dc50efac0c60bdc47aa5efc8c97', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'fc45ea569ef7c9eec048bae75a8b5127beafcc09', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '20f36a7a3e2c042fa4f802ea3f71cb20f60188b3', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: '58338cb0be0db04c6030e9f295428079ba2c7316', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: '5ed2b9c0c812c65d2e7d77d02f61cb88f33567e1', class: "input-container" }, h("div", { key: '9b73f259436d1f7d75f2efcaec3959759631f579', class: "input-outer-wrapper" }, h("div", { key: '04ba158193111283c31ea6e8d3d4e34e0dafe995', class: {
+            } }, h("div", { key: '1492e4f53056086c1b01d9314b368a301d36667b', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '6ced806dcfcbe1eb0f2a6ebcd31f4ff4a3280e58', htmlFor: this.id, part: "label" }, h("span", { key: '23bbe79e6af8b0869510bc43533e02b60fd345ac', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'd1ccafcf2d7f49eedf400d78b678fbafabb2c158', name: "label" })) || this.label, h("div", { key: '7ee3879f60ec33a414406e040da4f93c24ccd5ea', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '58f31ad7dc3a108f6dde1ec88c482a5a3c74fcbd', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '63d78c225748e457899f55d964bcb1d2a0da851c', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: 'b36623a31118624beca4d4005dbf0480e476cb53', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: '75d9b67e7cf19f2526e1e036de0efce6b02d2fa5', class: "input-container" }, h("div", { key: '33b2d24c18c7e4b78bcaf569787f4153237f0686', class: "input-outer-wrapper" }, h("div", { key: '50f66d6a718bc66162ce93d3f3ce75b53afd193a', class: {
                 'input-wrapper': true,
                 'input-round': this.round,
                 'input-readonly': this.readonly,
                 'input-disabled': this.disabled,
                 'input-invalid': this.invalid
-            }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { key: '6e834d91bca7660e24f7f917034db92a530d3901', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { key: '606625d78126b10f1efbdeec78d2339d9a66cf04', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: '28776786dd55f04d60c985ed7891d85c0e4c1f7b', class: "input-inner-wrapper" }, h("input", { key: '7ee17b1603ed56cd4b98561c9a7f5426edfcb9e8', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
+            }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { key: '9549568c8b7d088babf19125a063270863d545a3', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { key: 'fbd58b96277fc28e9de49ffd355471811fb16257', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: '9ea5b2502d1364de65b656c064124329ace8a074', class: "input-inner-wrapper" }, h("input", { key: '80f00d9abc53fbc3cd6fa261663f6c9e940ec213', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
                 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
                 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value
-            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: '5195866111feaf77f8ae6b9272443c7f2e6f6c9b', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: 'ffbd5c49957d02e672d1da2710fb5a2698fe34a5', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && h("cat-spinner", { key: '19e83c45128e1110c4404fb266b97d9a0b23ea75', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { key: '2363be86adba00d3748a2b4e72d968027e3cbc03', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { key: '158ae6c58f520b87023e534239550cd963c6c3f2', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { key: '8d0148452fe5b0184ed04fbaa7e84d805ef8648f', class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: 'cc46bb14d556c4144c28b8901e0aac7ff2c6908e', name: "addon" })), this.hasHint && (h(CatFormHint, { key: '0de0feb24f62246485c054bb83237d5610c89a21', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
+            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: 'f301a2b57d36d2005e8705e07ea59dd32e54691a', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: '8a9e442e985f5654ae1a2dc4ad7e24939e2275c4', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && h("cat-spinner", { key: '50ef079a4d7a193d367817a0afa3db8be839b4a6', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { key: '8ceedd341d85faebb2ebbb1d60b137f9e866aa05', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { key: '3be8071c0d5d25d6607fd40547d2405c4cd1b7bb', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { key: '7019774d260c7c59c33a2dc1d82c6f4fa1f45b45', class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: 'd3882acee81f3456c1d7ab86469b12deed42debe', name: "addon" })), this.hasHint && (h(CatFormHint, { key: '3dce699be6ee391d0aee55735959ed69501e52ff', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -712,6 +713,23 @@ export class CatInput {
                     "tags": [],
                     "text": "Attributes that will be added to the native HTML input element."
                 }
+            },
+            "testId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier for the underlying native element that is used for\ntesting purposes. The attribute is added as `data-test` attribute and acts\nas a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`."
+                },
+                "attribute": "test-id",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/cat-input/cat-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-input.js","sourceRoot":"","sources":["../../../src/components/cat-input/cat-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport Cleave from 'cleave.js';\nimport type { CleaveOptions } from 'cleave.js/options';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/*\n Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n \n @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @slot counter - Custom counter element to be displayed in the top right corner of the label.\n * @part label - The native label element.\n * @part input - The native input element.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n /\n@Component({\n tag: 'cat-input',\n styleUrl: 'cat-input.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatInput {\n private readonly _id = `cat-input-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n private errorMapSrc?: ErrorMap \| true;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() hasSlottedCounter = false;\n\n @State() isPasswordShown = false;\n\n @State() errorMap?: ErrorMap \| true;\n\n /\n Whether the label need a marker to shown if the input is required or optional.\n /\n @Prop() requiredMarker?: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n Whether the label is on top or left.\n /\n @Prop() horizontal = false;\n\n /\n Hint for form autofill feature.\n /\n @Prop() autoComplete?: string;\n\n /\n Whether the input should show a clear button.\n /\n @Prop() clearable = false;\n\n /\n Whether the input should show a password toggle button for password inputs.\n /\n @Prop() togglePassword = false;\n\n /\n Whether the input is disabled.\n /\n @Prop() disabled = false;\n\n /\n Displays the input in a loading state with a spinner.\n /\n @Prop() loading = false;\n\n /\n Optional hint text(s) to be displayed with the input.\n /\n @Prop() hint?: string \| string[];\n\n /\n The name of an icon to be displayed in the input.\n /\n @Prop() icon?: string;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label for the input.\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n A maximum value for numeric values.\n /\n @Prop() max?: number \| string;\n\n /\n A maximum length (number of characters) for textual values.\n /\n @Prop() maxLength?: number;\n\n /\n A minimum value for numeric values.\n /\n @Prop() min?: number \| string;\n\n /\n A minimum length (number of characters) for textual values.\n /\n @Prop() minLength?: number;\n\n /\n The name of the form control. Submitted with the form as part of a name/value pair.\n /\n @Prop() name?: string;\n\n /\n The placeholder text to display within the input.\n /\n @Prop() placeholder?: string;\n\n /\n A textual prefix to be displayed in the input.\n /\n @Prop() textPrefix?: string;\n\n /\n A textual suffix to be displayed in the input.\n /\n @Prop() textSuffix?: string;\n\n /\n The value is not editable.\n /\n @Prop() readonly = false;\n\n /\n A value is required or must be check for the form to be submittable.\n /\n @Prop() required = false;\n\n /\n Use round input edges.\n /\n @Prop() round = false;\n\n /\n Type of form control.\n /\n @Prop() type: InputType = 'text';\n\n /\n The value of the control.\n /\n @Prop({ mutable: true }) value?: string;\n\n /\n The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n /\n @Prop() errors?: boolean \| string[] \| ErrorMap;\n\n /\n Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors change with the given delay in milliseconds or immediately on blur.\n /\n @Prop() errorUpdate: boolean \| number = 0;\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter<string>;\n\n /\n Emitted when the input received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): void {\n this.onErrorsChanged(this.errors, undefined, false);\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n this.hasSlottedCounter = !!this.hostElement.querySelector('[slot=\"counter\"]');\n }\n\n /\n Programmatically move focus to the input. Use this method instead of\n * `input.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n // hack to make datepicker inputs focusable. The datepicker hides the input\n // element and dynamically creates a sibling. We need to find the new input\n // element and focus it instead.\n const input = this.input.type === 'hidden' ? this.findSiblingInput(this.input.nextSibling) : this.input;\n input?.focus(options);\n }\n\n /\n Programmatically remove focus from the input. Use this method instead of\n * `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Clear the input.\n /\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n this.catChange.emit(this.value);\n }\n\n /\n Adds a Cleave.js mask to the input.\n \n @param options The Cleave.js options.\n */\n @Method()\n async mask(options: CleaveOptions): Promise<void> {\n new Cleave(this.input, options);\n }\n\n @Watch('errors')\n onErrorsChanged(newValue?: boolean \| string[] \| ErrorMap, _oldValue?: unknown, update: boolean = true) {\n if (!coerceBoolean(this.errorUpdate)) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(newValue)\n ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : newValue \|\| undefined;\n if (update) {\n this.showErrorsIfTimeout() \|\| this.showErrorsIfNoFocus();\n }\n }\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) \|\| 0;\n return (\n <div\n class={{\n 'input-field': true,\n 'input-horizontal': this.horizontal\n }}\n >\n <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id} part=\"label\">\n <span class=\"label-wrapper\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n <div class=\"label-metadata\">\n {!this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker?.startsWith('required') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n {(this.maxLength \|\| this.hasSlottedCounter) && (\n <div class=\"label-character-count\" aria-hidden=\"true\">\n {this.hasSlottedCounter ? (\n <slot name=\"counter\"></slot>\n ) : (\n `${this.value?.length ?? 0}/${this.maxLength}`\n )}\n </div>\n )}\n </div>\n </span>\n </label>\n )}\n </div>\n <div class=\"input-container\">\n <div class=\"input-outer-wrapper\">\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-readonly': this.readonly,\n 'input-disabled': this.disabled,\n 'input-invalid': this.invalid\n }}\n onClick={() => this.input.focus()}\n >\n {this.textPrefix && (\n <span class=\"text-prefix\" part=\"prefix\">\n {this.textPrefix}\n </span>\n )}\n {this.icon && !this.iconRight && (\n <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n )}\n <div class=\"input-inner-wrapper\">\n <input\n {...this.nativeAttributes}\n part=\"input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n class={{\n 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,\n 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value\n }}\n autocomplete={this.autoComplete}\n disabled={this.disabled}\n max={this.max}\n maxlength={this.maxLength}\n min={this.min}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n type={this.isPasswordShown ? 'text' : this.type}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n ></input>\n {this.clearable && !this.disabled && !this.readonly && this.value && (\n <cat-button\n class=\"clearable\"\n icon=\"$cat:input-close\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n data-dropdown-no-close\n ></cat-button>\n )}\n {this.togglePassword && !this.disabled && !this.readonly && this.value && (\n <cat-button\n class=\"toggle-password\"\n icon={this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show'}\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword')}\n onClick={this.doTogglePassword.bind(this)}\n ></cat-button>\n )}\n </div>\n {this.loading && <cat-spinner size=\"m\" class=\"icon-loading\"></cat-spinner>}\n {!this.invalid && this.icon && this.iconRight && (\n <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n )}\n {this.invalid && (\n <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>\n )}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n <slot name=\"addon\"></slot>\n </div>\n {this.hasHint && (\n <CatFormHint\n id={this.id}\n hint={this.hint}\n slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n errorMap={this.errorMap}\n />\n )}\n </div>\n </div>\n );\n }\n\n private get hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint \|\| this.invalid;\n }\n\n private get invalid() {\n return this.errorMap === true \|\| !!Object.keys(this.errorMap \|\| {}).length;\n }\n\n private onInput() {\n this.value = this.input.value;\n this.catChange.emit(this.value);\n this.showErrorsIfTimeout();\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n if (coerceBoolean(this.errorUpdate)) {\n this.showErrors();\n }\n }\n\n private doTogglePassword() {\n this.isPasswordShown = !this.isPasswordShown;\n }\n\n private showErrors() {\n this.errorMap = this.errorMapSrc;\n }\n\n private errorUpdateTimeoutId?: number;\n private showErrorsIfTimeout() {\n const errorUpdate = coerceNumber(this.errorUpdate, null);\n if (errorUpdate !== null) {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n return true;\n }\n return false;\n }\n\n private showErrorsIfNoFocus() {\n const hasFocus = document.activeElement === this.hostElement \|\| document.activeElement === this.input;\n if (!hasFocus) {\n this.showErrors();\n }\n }\n\n private findSiblingInput(node: Node \| null): HTMLInputElement \| undefined {\n if (node instanceof HTMLInputElement) {\n return node;\n } else if (node?.nextSibling) {\n return this.findSiblingInput(node.nextSibling);\n }\n return undefined;\n }\n}\n"]}
1	+ {"version":3,"file":"cat-input.js","sourceRoot":"","sources":["../../../src/components/cat-input/cat-input.tsx"],"names":[],"mappings":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport Cleave from 'cleave.js';\nimport type { CleaveOptions } from 'cleave.js/options';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/*\n Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n \n @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @slot counter - Custom counter element to be displayed in the top right corner of the label.\n * @part label - The native label element.\n * @part input - The native input element.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n /\n@Component({\n tag: 'cat-input',\n styleUrl: 'cat-input.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatInput {\n private readonly _id = `cat-input-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n private errorMapSrc?: ErrorMap \| true;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() hasSlottedCounter = false;\n\n @State() isPasswordShown = false;\n\n @State() errorMap?: ErrorMap \| true;\n\n /\n Whether the label need a marker to shown if the input is required or optional.\n /\n @Prop() requiredMarker?: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n Whether the label is on top or left.\n /\n @Prop() horizontal = false;\n\n /\n Hint for form autofill feature.\n /\n @Prop() autoComplete?: string;\n\n /\n Whether the input should show a clear button.\n /\n @Prop() clearable = false;\n\n /\n Whether the input should show a password toggle button for password inputs.\n /\n @Prop() togglePassword = false;\n\n /\n Whether the input is disabled.\n /\n @Prop() disabled = false;\n\n /\n Displays the input in a loading state with a spinner.\n /\n @Prop() loading = false;\n\n /\n Optional hint text(s) to be displayed with the input.\n /\n @Prop() hint?: string \| string[];\n\n /\n The name of an icon to be displayed in the input.\n /\n @Prop() icon?: string;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label for the input.\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n A maximum value for numeric values.\n /\n @Prop() max?: number \| string;\n\n /\n A maximum length (number of characters) for textual values.\n /\n @Prop() maxLength?: number;\n\n /\n A minimum value for numeric values.\n /\n @Prop() min?: number \| string;\n\n /\n A minimum length (number of characters) for textual values.\n /\n @Prop() minLength?: number;\n\n /\n The name of the form control. Submitted with the form as part of a name/value pair.\n /\n @Prop() name?: string;\n\n /\n The placeholder text to display within the input.\n /\n @Prop() placeholder?: string;\n\n /\n A textual prefix to be displayed in the input.\n /\n @Prop() textPrefix?: string;\n\n /\n A textual suffix to be displayed in the input.\n /\n @Prop() textSuffix?: string;\n\n /\n The value is not editable.\n /\n @Prop() readonly = false;\n\n /\n A value is required or must be check for the form to be submittable.\n /\n @Prop() required = false;\n\n /\n Use round input edges.\n /\n @Prop() round = false;\n\n /\n Type of form control.\n /\n @Prop() type: InputType = 'text';\n\n /\n The value of the control.\n /\n @Prop({ mutable: true }) value?: string;\n\n /\n The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n /\n @Prop() errors?: boolean \| string[] \| ErrorMap;\n\n /\n Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors change with the given delay in milliseconds or immediately on blur.\n /\n @Prop() errorUpdate: boolean \| number = 0;\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n /\n @Prop() testId?: string;\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter<string>;\n\n /\n Emitted when the input received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): void {\n this.onErrorsChanged(this.errors, undefined, false);\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n this.hasSlottedCounter = !!this.hostElement.querySelector('[slot=\"counter\"]');\n }\n\n /\n Programmatically move focus to the input. Use this method instead of\n * `input.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n // hack to make datepicker inputs focusable. The datepicker hides the input\n // element and dynamically creates a sibling. We need to find the new input\n // element and focus it instead.\n const input = this.input.type === 'hidden' ? this.findSiblingInput(this.input.nextSibling) : this.input;\n input?.focus(options);\n }\n\n /\n Programmatically remove focus from the input. Use this method instead of\n * `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Clear the input.\n /\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n this.catChange.emit(this.value);\n }\n\n /\n Adds a Cleave.js mask to the input.\n \n @param options The Cleave.js options.\n */\n @Method()\n async mask(options: CleaveOptions): Promise<void> {\n new Cleave(this.input, options);\n }\n\n @Watch('errors')\n onErrorsChanged(newValue?: boolean \| string[] \| ErrorMap, _oldValue?: unknown, update: boolean = true) {\n if (!coerceBoolean(this.errorUpdate)) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(newValue)\n ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : newValue \|\| undefined;\n if (update) {\n this.showErrorsIfTimeout() \|\| this.showErrorsIfNoFocus();\n }\n }\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) \|\| 0;\n return (\n <div\n class={{\n 'input-field': true,\n 'input-horizontal': this.horizontal\n }}\n >\n <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id} part=\"label\">\n <span class=\"label-wrapper\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n <div class=\"label-metadata\">\n {!this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker?.startsWith('required') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n {(this.maxLength \|\| this.hasSlottedCounter) && (\n <div class=\"label-character-count\" aria-hidden=\"true\">\n {this.hasSlottedCounter ? (\n <slot name=\"counter\"></slot>\n ) : (\n `${this.value?.length ?? 0}/${this.maxLength}`\n )}\n </div>\n )}\n </div>\n </span>\n </label>\n )}\n </div>\n <div class=\"input-container\">\n <div class=\"input-outer-wrapper\">\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-readonly': this.readonly,\n 'input-disabled': this.disabled,\n 'input-invalid': this.invalid\n }}\n onClick={() => this.input.focus()}\n >\n {this.textPrefix && (\n <span class=\"text-prefix\" part=\"prefix\">\n {this.textPrefix}\n </span>\n )}\n {this.icon && !this.iconRight && (\n <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n )}\n <div class=\"input-inner-wrapper\">\n <input\n data-test={this.testId}\n {...this.nativeAttributes}\n part=\"input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n class={{\n 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,\n 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value\n }}\n autocomplete={this.autoComplete}\n disabled={this.disabled}\n max={this.max}\n maxlength={this.maxLength}\n min={this.min}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n type={this.isPasswordShown ? 'text' : this.type}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n ></input>\n {this.clearable && !this.disabled && !this.readonly && this.value && (\n <cat-button\n class=\"clearable\"\n icon=\"$cat:input-close\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n data-dropdown-no-close\n ></cat-button>\n )}\n {this.togglePassword && !this.disabled && !this.readonly && this.value && (\n <cat-button\n class=\"toggle-password\"\n icon={this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show'}\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword')}\n onClick={this.doTogglePassword.bind(this)}\n ></cat-button>\n )}\n </div>\n {this.loading && <cat-spinner size=\"m\" class=\"icon-loading\"></cat-spinner>}\n {!this.invalid && this.icon && this.iconRight && (\n <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n )}\n {this.invalid && (\n <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>\n )}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n <slot name=\"addon\"></slot>\n </div>\n {this.hasHint && (\n <CatFormHint\n id={this.id}\n hint={this.hint}\n slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n errorMap={this.errorMap}\n />\n )}\n </div>\n </div>\n );\n }\n\n private get hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint \|\| this.invalid;\n }\n\n private get invalid() {\n return this.errorMap === true \|\| !!Object.keys(this.errorMap \|\| {}).length;\n }\n\n private onInput() {\n this.value = this.input.value;\n this.catChange.emit(this.value);\n this.showErrorsIfTimeout();\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n if (coerceBoolean(this.errorUpdate)) {\n this.showErrors();\n }\n }\n\n private doTogglePassword() {\n this.isPasswordShown = !this.isPasswordShown;\n }\n\n private showErrors() {\n this.errorMap = this.errorMapSrc;\n }\n\n private errorUpdateTimeoutId?: number;\n private showErrorsIfTimeout() {\n const errorUpdate = coerceNumber(this.errorUpdate, null);\n if (errorUpdate !== null) {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n return true;\n }\n return false;\n }\n\n private showErrorsIfNoFocus() {\n const hasFocus = document.activeElement === this.hostElement \|\| document.activeElement === this.input;\n if (!hasFocus) {\n this.showErrors();\n }\n }\n\n private findSiblingInput(node: Node \| null): HTMLInputElement \| undefined {\n if (node instanceof HTMLInputElement) {\n return node;\n } else if (node?.nextSibling) {\n return this.findSiblingInput(node.nextSibling);\n }\n return undefined;\n }\n}\n"]}

package/dist/collection/components/cat-radio/cat-radio.js CHANGED Viewed

@@ -27,6 +27,7 @@ export class CatRadio {
         this.labelLeft = false;
         this.alignment = 'top';
         this.nativeAttributes = undefined;
+        this.testId = undefined;
     }
     get id() {
         return this.identifier || this._id;
@@ -54,13 +55,13 @@ export class CatRadio {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: '875be66c1a340d478bb55b15822415df919591ad' }, h("label", { key: 'dc4577b45f79f373d621b83a83c09d214cd01251', htmlFor: this.id, class: {
+        return (h(Host, { key: 'ca329dab3b08cf59911216e6d1d89e931d4c6836' }, h("label", { key: '0fae08dcf9b6017f1052342f22989a9218437a82', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: '5c9bc1aa0f3746f29a4dbf219e241b6c1779a5c7', class: "radio" }, h("input", { key: 'bb633c685be46657acae7a7376069b7a95de7401', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'd6863f415ce0999c31276e8dc6e05b3ed7298193', class: "circle" })), h("span", { key: 'c82183168cd245b781f2a4273c38ef20247d10c1', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'd5a556eff95f4471371c6162a0b101c1fb82e0cc', name: "label" })) || this.label)), this.hasHint && (h("div", { key: 'a236fefd50ea65e63643e5747a72a1f0b0dfbbb2', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '77ae0d9af2ff86becdb0b3a487c37689fe63af66', class: "circle-placeholder" }), h(CatFormHint, { key: '5e90f290fe70136ee19fe287db749abc8e7ec024', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: 'eed2cf5a6e64d64770466bbfcd5fd0f6e7e329d9', class: "radio" }, h("input", { key: '02a288466717c319419f94e2f9607ab63575e9d5', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'f75aa8f50e723b8aa90b60001190638d3d56234a', class: "circle" })), h("span", { key: '52de52cc932bb531440862a04ede38cdf2b29a3a', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '3c66d88d6517721590a342001258b5375f274714', name: "label" })) || this.label)), this.hasHint && (h("div", { key: 'b86904829302d22f22ce51f42bd147504b6e387f', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: 'dcca2f05ea10d9cbf731c7b59f82e33916014327', class: "circle-placeholder" }), h(CatFormHint, { key: 'e7b29ec3c4675b1e077fc783fe90780b5794f78a', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -299,6 +300,23 @@ export class CatRadio {
                     "tags": [],
                     "text": "Attributes that will be added to the native HTML input element."
                 }
+            },
+            "testId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier for the underlying native element that is used for\ntesting purposes. The attribute is added as `data-test` attribute and acts\nas a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`."
+                },
+                "attribute": "test-id",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/cat-radio/cat-radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-radio.js","sourceRoot":"","sources":["../../../src/components/cat-radio/cat-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;;;;;;GAQG;AAQH,MAAM,OAAO,QAAQ;;QACF,QAAG,GAAG,aAAa,EAAE,YAAY,EAAE,CAAC;+BAS1B,KAAK;8BAEN,KAAK;uBAKI,KAAK;wBAKrB,KAAK;;qBAUR,EAAE;2BAKI,KAAK;;wBAUR,KAAK;qBAMH,EAAE;;yBAUH,KAAK;yBAKwB,KAAK~~;;;~~IAlEtD,IAAY,EAAE;QACZ,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC;IACrC,CAAC;~~IAsFD~~,mBAAmB;QACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC1E,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAC1E,CAAC;IAED;;;;;;OAMG;IAEH,KAAK,CAAC,OAAO,CAAC,OAAsB;QAClC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;QACnF,OAAO,CACL,EAAC,IAAI;YACH,8DACE,OAAO,EAAE,IAAI,CAAC,EAAE,EAChB,KAAK,EAAE;oBACL,WAAW,EAAE,IAAI,CAAC,WAAW;oBAC7B,aAAa,EAAE,IAAI,CAAC,QAAQ;oBAC5B,YAAY,EAAE,IAAI,CAAC,SAAS;oBAC5B,cAAc,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ;oBAC3C,WAAW,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ;iBACzC,EACD,IAAI,EAAC,OAAO,kBACE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gBAE7C,6DAAM,KAAK,EAAC,OAAO;oBACjB,~~iEACM~~,IAAI,CAAC,gBAAgB,EACzB,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,EAAE,EAC9B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,sBACZ,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,GAC9D;oBACF,6DAAM,KAAK,EAAC,QAAQ,GAAQ,CACvB;gBACP,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,CAAC,IAAI,CAAC,eAAe,IAAI,6DAAM,IAAI,EAAC,OAAO,GAAQ,CAAC,IAAI,IAAI,CAAC,KAAK,CAC9D,CACD;YACP,IAAI,CAAC,OAAO,IAAI,CACf,4DAAK,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;gBAChE,4DAAK,KAAK,EAAC,oBAAoB,GAAO;gBACtC,EAAC,WAAW,qDAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,cAAc,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,GAAI,CACxG,CACP,CACI,CACR,CAAC;IACJ,CAAC;IAED,IAAY,OAAO;QACjB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;IAC9C,CAAC;IAEO,OAAO;QACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;IAEO,OAAO,CAAC,KAAiB;QAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,MAAM,CAAC,KAAiB;QAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/*\n Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n \n @slot hint - Optional hint element to be displayed with the radio.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part input - The native input element.\n /\n@Component({\n tag: 'cat-radio',\n styleUrl: 'cat-radio.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatRadio {\n private readonly _id = `cat-radio-${++nextUniqueId}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n /\n Whether this radio is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Whether this radio is disabled.\n /\n @Prop() disabled = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label of the radio that is visible.\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n The name of the radio component.\n /\n @Prop() name?: string;\n\n /\n Whether the radio is required.\n /\n @Prop() required = false;\n\n /\n The value of the radio component.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop() value: any = '';\n\n /\n Optional hint text(s) to be displayed with the radio.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the radio component.\n /\n @Prop() labelLeft = false;\n\n /\n The alignment of the checkbox.\n /\n @Prop() alignment: 'center' \| 'top' \| 'bottom' = 'top';\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Emitted when the radio is changed.\n /\n @Event() catChange!: EventEmitter<boolean \| string>;\n\n /\n Emitted when the radio received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the radio loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n }\n\n /\n Programmatically move focus to the radio button. Use this method instead of\n * `input.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n /\n Programmatically remove focus from the radio button. Use this method\n * instead of `input.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) \|\| 0;\n return (\n <Host>\n <label\n htmlFor={this.id}\n class={{\n 'is-hidden': this.labelHidden,\n 'is-disabled': this.disabled,\n 'label-left': this.labelLeft,\n 'align-center': this.alignment === 'center',\n 'align-end': this.alignment === 'bottom'\n }}\n role=\"radio\"\n aria-checked={this.checked ? 'true' : 'false'}\n >\n <span class=\"radio\">\n <input\n {...this.nativeAttributes}\n part=\"input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.identifier \|\| this.id}\n type=\"radio\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n />\n <span class=\"circle\"></span>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {this.hasHint && (\n <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n <div class=\"circle-placeholder\"></div>\n <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n </div>\n )}\n </Host>\n );\n }\n\n private get hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint;\n }\n\n private onInput() {\n this.checked = true;\n this.catChange.emit(this.value);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"]}
1	+ {"version":3,"file":"cat-radio.js","sourceRoot":"","sources":["../../../src/components/cat-radio/cat-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/*\n Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n \n @slot hint - Optional hint element to be displayed with the radio.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part input - The native input element.\n /\n@Component({\n tag: 'cat-radio',\n styleUrl: 'cat-radio.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatRadio {\n private readonly _id = `cat-radio-${++nextUniqueId}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n /\n Whether this radio is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Whether this radio is disabled.\n /\n @Prop() disabled = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label of the radio that is visible.\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n The name of the radio component.\n /\n @Prop() name?: string;\n\n /\n Whether the radio is required.\n /\n @Prop() required = false;\n\n /\n The value of the radio component.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop() value: any = '';\n\n /\n Optional hint text(s) to be displayed with the radio.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the radio component.\n /\n @Prop() labelLeft = false;\n\n /\n The alignment of the checkbox.\n /\n @Prop() alignment: 'center' \| 'top' \| 'bottom' = 'top';\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n /\n @Prop() testId?: string;\n\n /\n Emitted when the radio is changed.\n /\n @Event() catChange!: EventEmitter<boolean \| string>;\n\n /\n Emitted when the radio received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the radio loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n }\n\n /\n Programmatically move focus to the radio button. Use this method instead of\n * `input.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n /\n Programmatically remove focus from the radio button. Use this method\n * instead of `input.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) \|\| 0;\n return (\n <Host>\n <label\n htmlFor={this.id}\n class={{\n 'is-hidden': this.labelHidden,\n 'is-disabled': this.disabled,\n 'label-left': this.labelLeft,\n 'align-center': this.alignment === 'center',\n 'align-end': this.alignment === 'bottom'\n }}\n role=\"radio\"\n aria-checked={this.checked ? 'true' : 'false'}\n >\n <span class=\"radio\">\n <input\n data-test={this.testId}\n {...this.nativeAttributes}\n part=\"input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.identifier \|\| this.id}\n type=\"radio\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n />\n <span class=\"circle\"></span>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {this.hasHint && (\n <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n <div class=\"circle-placeholder\"></div>\n <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n </div>\n )}\n </Host>\n );\n }\n\n private get hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint;\n }\n\n private onInput() {\n this.checked = true;\n this.catChange.emit(this.value);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"]}

package/dist/collection/components/cat-select/cat-select.js CHANGED Viewed

@@ -61,6 +61,7 @@ export class CatSelect {
         this.errors = undefined;
         this.errorUpdate = 0;
         this.nativeAttributes = undefined;
+        this.testId = undefined;
     }
     get id() {
         return this.identifier || this._id;
@@ -326,18 +327,18 @@ export class CatSelect {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: '1ecf402adc273d133bfe829aea9fc28c6f63bc79' }, h("div", { key: '5c209d893e31472fabda8dc0aab1294693ba4b0b', class: {
+        return (h(Host, { key: '4ffaec1ec7c59635d3e923912e5bb5b554661973' }, h("div", { key: 'ad9ad59ff47ab4fe9c9485da344b0be8f030f824', class: {
                 'select-field': true,
                 'select-horizontal': this.horizontal,
                 'select-multiple': this.multiple
-            } }, h("div", { key: '51755c54effe1bd8216e656bc95f6bf57814219a', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'e4835aa21b0bde58f40e9130122826e6ade1e739', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: '8bdbd5c021b0c4fd864cc7b8d84e0230707cd016', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '6e7ad3025b1cee315cf10c85e907cca128ec3922', name: "label" })) || this.label, h("div", { key: '1536c12184aec8b8825d24a0635bb08baa976b6d', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'f90e3b62becfab3e586718ef201f9596e78c820b', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'db0bfd7582529e57fb18266f5014a73c92584c84', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { key: 'ce84b362fe92abcd2e65388b457a5ed25def1e3e', class: "select-container" }, h("div", { key: '1a0d2031a1f71d77b371e96d27ad608da1f3d1a4', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: '5b92f786919140fe0f4329a3b846e24007b980e7', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
+            } }, h("div", { key: 'd87e3451ded9630ef471c6a0d0230f73bf2001f0', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '0eb6bd92232da327fd11a5b8fa5108064216b98d', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: '29b3bc2a6300cf116e85b598c43bc3d590bfca40', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '105d69c1c4ebce966d207248d0919713402775fc', name: "label" })) || this.label, h("div", { key: '60d737d4bc621e64c4d60a4454c81d5cd2f14036', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '3ff4fc174c6769300fecde9b4f3785e7f510b3c5', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '44beff5fb235a6ecfe4d3bde6173309ab9374b7d', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { key: 'ca853307f93adc14b4ebe5de1f0b5cd255d438d7', class: "select-container" }, h("div", { key: 'fc56c44f4d6b27ca4d7d1c3f344bef6c5495ae84', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: '77d3a48ea7ad111136fb1513aaeb6c3b15533436', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
                 pill: true,
                 'select-no-open': true,
                 'select-option-active': this.state.activeSelectionIndex === i
-            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: '61d9e8ae5063a517ca57dc796273284ae15cad31', ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: 'e4d0a6073a1af4480c116bd1525c56716976da24' }), this.invalid && (h("cat-icon", { key: 'bb894fea7607b7b6b3dc950dde171faac3627a07', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: 'a4e438192ecee41d5acf77de45a1526876409a0f', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: '04d53d0d39bc429a6ac9a479c46f42c6b03a9283' }), this.invalid && (h("cat-icon", { key: 'd21136d141632914fc176ea1939164a4d40dc446', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
             !this.disabled &&
             !this.state.isResolving &&
-            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: '6179bb7c28759db151265a35be142e1e89749d61', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? i18n.t('select.close') : i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: '5d449c11b58c01c1f6760448bc46474d8bb889cb', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: 'e50a9fa50cc46fc444fd3ec1b52c409fcfb0278f', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: 'dd07d6ef4fbd6352b88cb2d15802a4b382c3409f', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: 'bac0e34fa3603ed07a3f9cc2d9346349c2b31201', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
+            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: 'cd5c84bbc7b04b28acda86d656b2ea9835cbb439', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? i18n.t('select.close') : i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: 'd0f3f4f080abf2136e681161802f0b332591a30a', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: '1fb0555801f6793b6351dbc19f2eba12c7292593', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: '8eea85eea2b000f29d690aafc7fbae106bf275e5', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: 'fa0415a3459967bc8a8591c94e3227c8fb99443d', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
             ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
             : !this.state.options.length &&
                 !this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : i18n.t('select.empty')))))))));
@@ -1079,6 +1080,23 @@ export class CatSelect {
                     "tags": [],
                     "text": "Attributes that will be added to the native HTML input element."
                 }
+            },
+            "testId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier for the underlying native element that is used for\ntesting purposes. The attribute is added as `data-test` attribute and acts\nas a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`."
+                },
+                "attribute": "test-id",
+                "reflect": false
             }
         };
     }