npm - @rededor/cura - Versions diffs - 1.6.1-alpha.8 → 1.7.0 - Mend

@rededor/cura 1.6.1-alpha.8 → 1.7.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 (206) hide show

package/dist/collection/components/forms/cura-select/cura-select.js CHANGED Viewed

@@ -82,6 +82,7 @@ export class CuraSelect {
         this.required = false;
         this.searchBehavior = false;
         this.caseSensitive = true;
+        this.maxHeight = '285px';
         this.isHovered = false;
         this.isFocused = false;
         this.isOpen = false;
@@ -304,13 +305,13 @@ export class CuraSelect {
         document.removeEventListener('click', this.handleClickOutside);
     }
     render() {
-        return (h(Host, { key: '1757de6c21410c258aa495d9ed484fbf6d4e07fa', style: this.styles, role: "combobox", "aria-label": this.label, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error') }, h("div", { key: 'beaa6e3ae5a41efe8055b271ab0505b83bb25e03', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '249e2a4343abacdd445f6fd350008312fe5577fe', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '910c7089a86b7f4a539e10a37aa771027aa035bd', class: "required" }, "* "))), h("div", { key: 'd352865d850a8bbbe186189538f370d38bce5062', class: {
+        return (h(Host, { key: 'e9217707e382cf64c4a1d93ed0b07b06fe75cf5b', style: this.styles, role: "combobox", "aria-label": this.label, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error') }, h("div", { key: 'cd4017145d95d80e0f2df6daaeb96d699d21028e', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: 'b004e05ae6b7998e01ce335323e434a0e4cc5b10', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: 'c8dc7ee9960208f7fd63803e3894d5c5ee225f84', class: "required" }, "* "))), h("div", { key: '6a4da3e7b43e297f58ccfaaa03dd8ae847bb40fe', class: {
                 'cura-input-field': true,
                 'open': this.isOpen,
-            } }, this.renderIcon(), h("input", { key: 'bf14408d2d134530198ec108a2c885fc7c0283f5', type: "text", autocomplete: "off", onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("button", { key: '7ffaf78d35c784e4dddbe67a3a52bacd5a7c8525', class: "up-down-button" }, h("cura-icon", { key: '436612e326a50aa6b6d5fe27246b1e10b5b4c14c', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), h("cura-label", { key: '34f20c65e37fe40cc708bab29054cdb436fb233a', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'fd4ab76af19470d7c82b2bd7931a6b329f5db8ba' })), this.isOpen && (h("div", { key: '2a831c778efbbb4ad989bfb1ccc207741890285d', class: {
+            } }, this.renderIcon(), h("input", { key: 'af593857db2f30b9cc58b4d3218a8f86d20b8431', type: "text", autocomplete: "off", onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("button", { key: 'e87bafd632d2c91cb1ef5cc9380d8cd6040f39f4', class: "up-down-button" }, h("cura-icon", { key: 'fa20c2690f5b37d9d9ad636389b0f774b4fa24c7', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), h("cura-label", { key: '8755ec21f14adefa9e4cbc24a49057b6199b1ff8', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: '78e4f029a3d191450c7b3bd8f1a32565bae3ee23' })), this.isOpen && (h("div", { key: '2ba5af7297dd23d088a7fca7f166522769293301', class: {
                 menu: true,
                 open: this.isOpen,
-            } }, h("slot", { key: '4acd7b45bf96420a9cb9db294c67b8173245b452', name: "option" }))))));
+            }, style: { '--max-height': this.maxHeight } }, h("slot", { key: '08e5cbbdd57b42e15d854e4c335f22833075d941', name: "option" }))))));
     }
     static get is() { return "cura-select"; }
     static get encapsulation() { return "shadow"; }
@@ -523,6 +524,24 @@ export class CuraSelect {
                 "attribute": "case-sensitive",
                 "reflect": true,
                 "defaultValue": "true"
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS max-height property for dropdown item.\nCan also be used by css property --max-height.\nDefault: 285px"
+                },
+                "attribute": "max-height",
+                "reflect": true,
+                "defaultValue": "'285px'"
             }
         };
     }

package/dist/collection/components/forms/cura-select/cura-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-select.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-select',\n styleUrl: 'cura-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraSelect {\n /*\n The label text for the select component.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) label: string = '';\n\n /\n Placeholder text for the input field.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) placeholder: string = '';\n\n /\n Current value of the select component.\n * Reflects as an attribute in the DOM and is mutable.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n Display mode of the select component.\n * Can be 'default' or 'transparent'.\n /\n @Prop({ reflect: true }) mode: 'default' \| 'transparent' = 'default';\n\n /\n Size of the select component.\n * Can be 'small', 'medium', or 'large'.\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n @Prop() iconName?: string;\n\n /\n Status of the select component.\n * Can be 'success', 'error', or 'default'.\n /\n @Prop({ reflect: true, mutable: true }) status: 'success' \| 'error' \| 'default' = 'default';\n\n /\n Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Whether the select component is required.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Enable / Disable search at options by term.\n * Default: false\n /\n @Prop({ reflect: true }) searchBehavior: boolean = false;\n\n /\n The search will be sensitive to accents.\n * Default: true\n /\n @Prop({ reflect: true }) caseSensitive: boolean = true;\n\n /\n Internal state: Whether the input is hovered.\n * Default: false\n /\n @State() isHovered: boolean = false;\n\n /\n Internal state: Whether the input is focused.\n * Default: false\n /\n @State() isFocused: boolean = false;\n\n /\n Internal state: Whether the dropdown menu is open.\n * Default: false\n /\n @State() isOpen: boolean = false;\n\n /\n Internal state: Collection of options for the select component.\n /\n @State() options: NodeListOf<HTMLCuraSelectOptionElement>;\n\n @State() activeIndex = -1;\n\n @Watch('activeIndex')\n updateOptionHighlights(newActiveINdex: number) {\n this.options.forEach((option, index) => ((option as any).active = index === newActiveINdex));\n }\n\n @State() textInput = '';\n\n @Watch('textInput')\n /\n Filters the options based on the current input value.\n /\n filterOptions(newText) {\n this.searchTermInput.emit(newText);\n\n if (!this.isOpen \|\| !this.searchBehavior) {\n return;\n }\n\n const removeAccents = (str: string) => {\n return str.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '');\n };\n\n let searchTerm = newText;\n if (!this.caseSensitive) {\n searchTerm = removeAccents(searchTerm).toLocaleLowerCase();\n }\n\n this.options.forEach(option => {\n let optionValue = option.textContent \|\| '';\n if (!this.caseSensitive) {\n optionValue = removeAccents(optionValue?.toLowerCase());\n }\n const isVisible = optionValue.includes(searchTerm);\n option.style.display = isVisible ? 'block' : 'none';\n });\n }\n\n /\n Reference to the host element of the component.\n /\n @Element() host: HTMLElement;\n\n /\n Event emitted when an option is selected.\n /\n @Event() selected: EventEmitter;\n\n /\n Event emitted when an option is searched.\n /\n @Event() searchTermInput: EventEmitter;\n\n /\n MutationObserver to watch changes in the component.\n /\n mutationObserver: MutationObserver;\n\n /\n Styles to be applied to the component.\n /\n styles = {};\n\n /\n Theme object containing font and color information.\n /\n theme = window.CuraAPI.theme;\n\n @AttachInternals() internals: ElementInternals;\n\n /\n Callback for form association.\n /\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n /\n Callback to restore the switch state from the form.\n /\n formStateRestoreCallback(state: { value: string }) {\n this.textInput = state.value;\n this.updateSelectedOption();\n }\n\n /\n Callback to reset the switch state when the form is reset.\n /\n formResetCallback() {\n this.textInput = '';\n this.clearSelectedAttributes();\n this.internals.setFormValue('');\n this.internals.setValidity({});\n }\n\n /\n Callback to update the switch's disabled state when the form's disabled state changes.\n /\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /\n Lifecycle method called before the component is rendered.\n * Initializes the options for the select component.\n /\n componentWillLoad() {\n this.initializeOptions();\n }\n /\n Lifecycle method called after the component is rendered.\n * Initializes select-related functionality.\n /\n componentDidLoad() {\n this.setupMutationObserver();\n this.addOutsideClickListener();\n }\n /\n Lifecycle method called when the component is connected to the DOM.\n * Applies styles based on the theme.\n /\n connectedCallback() {\n this.applyStyles();\n }\n /\n Lifecycle method called when the component is disconnected from the DOM.\n * Disconnects the MutationObserver if it exists.\n /\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.removeOutsideClickListener();\n }\n\n initializeOptions() {\n this.options = this.host.querySelectorAll<HTMLCuraSelectOptionElement>('cura-select-option');\n this.options.forEach(option => {\n option.setAttribute('size', this.size);\n\n const isSelected = this.value === option.value;\n option.setAttribute('selected', JSON.stringify(isSelected));\n\n if (isSelected) {\n this.value = option.value;\n this.internals.setFormValue(option.value);\n }\n });\n\n this.textInput = Array.from(this.options).find(option => option.value === this.value)?.textContent \|\| this.textInput;\n }\n /\n Applies styles to the component based on the theme.\n /\n applyStyles() {\n const { fonts, colors } = this.theme;\n const fontWeights = fonts.getWeights();\n\n this.styles = {\n ...this.styles,\n '--font-weight-medium': fontWeights.medium,\n '--font-weight-bold': fontWeights.bold,\n '--font-weight-regular': fontWeights.regular,\n '--font-color': fonts.getColor(),\n '--font-family': fonts.getFamily(),\n '--font-size': fonts.getSize(),\n };\n\n const colorKeys = [\n 'primary-base',\n 'neutral-purewhite',\n 'neutral-white',\n 'neutral-black',\n 'neutral-medium',\n 'neutral-light',\n 'neutral-base',\n 'neutral-dark',\n 'success-dark',\n 'success-darker',\n 'success-lighter',\n 'error-lighter',\n 'error-dark',\n 'error-darker',\n 'error-base',\n 'info-base',\n ];\n\n colorKeys.forEach(key => {\n this.styles[`--${key}`] = colors.getColor(key);\n });\n }\n /\n Sets up a MutationObserver to watch for changes in the component.\n /\n setupMutationObserver() {\n this.mutationObserver = new MutationObserver(this.handleMutations);\n this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });\n }\n /\n Handles mutations observed by the MutationObserver.\n * Updates the selected option or filters options based on the mutation type.\n /\n handleMutations = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type === 'attributes') {\n if (mutation.attributeName === 'selected') this.updateSelectedOption();\n }\n });\n };\n /\n Handles the selection of an option.\n /\n onOptiselected = (event: Event) => {\n const selectedOption = event.target as HTMLElement;\n this.clearSelectedAttributes();\n selectedOption.setAttribute('selected', 'true');\n };\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.clearSelectedAttributes();\n\n const selectedOption = this.host.querySelector(`cura-select-option[value=\"${newValue}\"]`);\n\n if (!selectedOption) {\n return;\n }\n\n selectedOption.setAttribute('selected', 'true');\n }\n\n updateSelectedOption() {\n const selectedOptionElement = this.host.querySelector<HTMLCuraSelectOptionElement>('cura-select-option[selected]');\n\n if (!selectedOptionElement) {\n return;\n }\n\n this.value = selectedOptionElement.value;\n this.internals.setFormValue(this.value);\n\n if (this.textInput !== selectedOptionElement.textContent) {\n this.textInput = selectedOptionElement.textContent;\n this.isOpen = false;\n this.selected.emit(selectedOptionElement.value);\n }\n }\n\n /\n Clears the 'selected' attribute from all options.\n /\n clearSelectedAttributes() {\n this.options.forEach(option => option.removeAttribute('selected'));\n }\n\n handleKeyNavigation = (event: KeyboardEvent) => {\n const { code: keyCode } = event;\n\n if (!this.isOpen && keyCode === 'ArrowDown') {\n this.isOpen = true;\n this.activeIndex = 0;\n\n return;\n }\n\n if (keyCode === 'ArrowDown') {\n event.preventDefault();\n this.updateActiveIndex(1);\n }\n\n if (keyCode === 'ArrowUp') {\n event.preventDefault();\n this.updateActiveIndex(-1);\n }\n\n if (keyCode === 'Enter' \|\| keyCode === 'Space') {\n this.options[this.activeIndex]?.click();\n }\n\n if (keyCode === 'Escape') {\n this.isOpen = false;\n }\n };\n\n updateActiveIndex(direction: number) {\n if (this.options.length === 0) return;\n this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;\n }\n\n handleInputChange = (e: Event) => {\n this.textInput = (e.target as HTMLInputElement).value;\n this.isOpen = this.textInput.length > 0;\n this.internals.setFormValue(this.textInput);\n };\n\n getClasses() {\n return {\n wrapper: true,\n label: !!this.label,\n disabled: this.disabled,\n transparent: this.mode === 'transparent',\n [this.size.toLowerCase()]: true,\n [this.status.toLowerCase()]: true,\n };\n }\n\n /\n Determines the color based on the item type and component state.\n /\n getColor(item: 'label' \| 'text' \| 'icon') {\n if (this.disabled) return 'neutral-medium';\n\n const isStatusDefault = this.status === 'default';\n const isHoveredOrFocused = this.isFocused \|\| this.isHovered;\n\n if (item === 'label') {\n if (!isStatusDefault \|\| isHoveredOrFocused) return 'neutral-black';\n return 'neutral-dark';\n }\n\n if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';\n if (this.status === 'success') return 'success-dark';\n if (this.status === 'error') return 'error-dark';\n\n return 'neutral-dark';\n }\n\n /\n Renders the icon based on the component's status.\n /\n renderIcon() {\n if (this.status === 'default' && !this.iconName) return null;\n const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];\n return <cura-icon class=\"feedback-icon\" name={icon} iconset=\"default\" size={this.size === 'large' ? 20 : 16} color={this.getColor('icon')} style={this.styles} />;\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.disabled) return event.preventDefault();\n const target = event.target as HTMLElement;\n\n if (target.tagName === 'CURA-SELECT-OPTION') return this.onOptiselected(event);\n this.isOpen = !this.isOpen;\n };\n\n handleClickOutside = (event: MouseEvent) => {\n const clickedOutside = !this.host.contains(event.target as Node);\n if (clickedOutside) {\n this.isOpen = false;\n }\n };\n\n private addOutsideClickListener() {\n document.addEventListener('click', this.handleClickOutside);\n }\n\n private removeOutsideClickListener() {\n document.removeEventListener('click', this.handleClickOutside);\n }\n\n render() {\n return (\n <Host style={this.styles}\n role=\"combobox\"\n aria-label={this.label}\n aria-required={String(this.required)}\n aria-disabled={String(this.disabled)}\n aria-invalid={String(this.status === 'error')}>\n <div class={this.getClasses()} onMouseEnter={() => (this.isHovered = true)} onMouseLeave={() => (this.isHovered = false)} onClick={this.handleClick}>\n {this.label && (\n <cura-label class=\"label\" weight=\"bold\" size={this.size === 'large' ? 'small' : 'xsmall'} color={this.getColor('label')}>\n {this.label} {this.required && <span class=\"required\"> </span>}\n </cura-label>\n )}\n\n <div\n class={{\n 'cura-input-field': true,\n 'open': this.isOpen,\n }}\n >\n {this.renderIcon()}\n <input\n type=\"text\"\n autocomplete=\"off\"\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n onKeyDown={this.handleKeyNavigation}\n aria-required={String(this.required)}\n aria-disabled={String(this.disabled)}\n aria-invalid={String(this.status === 'error')}\n onInput={this.handleInputChange}\n style={this.styles}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n value={this.textInput}\n readonly={this.searchBehavior ? null : true}\n />\n <button class=\"up-down-button\">\n <cura-icon name={this.isOpen ? 'up' : 'down'} class=\"up-down-icon\" color={this.disabled ? 'neutral-dark' : 'primary-base'} size={16} iconset=\"default\" />\n </button>\n </div>\n <cura-label class=\"helper-text\" size=\"xsmall\" color={this.getColor('text')} weight={this.mode === 'transparent' ? 'bold' : 'regular'}>\n <slot></slot>\n </cura-label>\n {this.isOpen && (\n <div\n class={{\n menu: true,\n open: this.isOpen,\n }}\n >\n <slot name=\"option\"></slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cura-select.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-select',\n styleUrl: 'cura-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraSelect {\n /*\n The label text for the select component.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) label: string = '';\n\n /\n Placeholder text for the input field.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) placeholder: string = '';\n\n /\n Current value of the select component.\n * Reflects as an attribute in the DOM and is mutable.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n Display mode of the select component.\n * Can be 'default' or 'transparent'.\n /\n @Prop({ reflect: true }) mode: 'default' \| 'transparent' = 'default';\n\n /\n Size of the select component.\n * Can be 'small', 'medium', or 'large'.\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n @Prop() iconName?: string;\n\n /\n Status of the select component.\n * Can be 'success', 'error', or 'default'.\n /\n @Prop({ reflect: true, mutable: true }) status: 'success' \| 'error' \| 'default' = 'default';\n\n /\n Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Whether the select component is required.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Enable / Disable search at options by term.\n * Default: false\n /\n @Prop({ reflect: true }) searchBehavior: boolean = false;\n\n /\n The search will be sensitive to accents.\n * Default: true\n /\n @Prop({ reflect: true }) caseSensitive: boolean = true;\n\n /\n CSS max-height property for dropdown item.\n * Can also be used by css property --max-height.\n * Default: 285px\n /\n @Prop({ reflect: true }) maxHeight: string = '285px';\n\n /\n Internal state: Whether the input is hovered.\n * Default: false\n /\n @State() isHovered: boolean = false;\n\n /\n Internal state: Whether the input is focused.\n * Default: false\n /\n @State() isFocused: boolean = false;\n\n /\n Internal state: Whether the dropdown menu is open.\n * Default: false\n /\n @State() isOpen: boolean = false;\n\n /\n Internal state: Collection of options for the select component.\n /\n @State() options: NodeListOf<HTMLCuraSelectOptionElement>;\n\n @State() activeIndex = -1;\n\n @Watch('activeIndex')\n updateOptionHighlights(newActiveINdex: number) {\n this.options.forEach((option, index) => ((option as any).active = index === newActiveINdex));\n }\n\n @State() textInput = '';\n\n @Watch('textInput')\n /\n Filters the options based on the current input value.\n /\n filterOptions(newText) {\n this.searchTermInput.emit(newText);\n\n if (!this.isOpen \|\| !this.searchBehavior) {\n return;\n }\n\n const removeAccents = (str: string) => {\n return str.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '');\n };\n\n let searchTerm = newText;\n if (!this.caseSensitive) {\n searchTerm = removeAccents(searchTerm).toLocaleLowerCase();\n }\n\n this.options.forEach(option => {\n let optionValue = option.textContent \|\| '';\n if (!this.caseSensitive) {\n optionValue = removeAccents(optionValue?.toLowerCase());\n }\n const isVisible = optionValue.includes(searchTerm);\n option.style.display = isVisible ? 'block' : 'none';\n });\n }\n\n /\n Reference to the host element of the component.\n /\n @Element() host: HTMLElement;\n\n /\n Event emitted when an option is selected.\n /\n @Event() selected: EventEmitter;\n\n /\n Event emitted when an option is searched.\n /\n @Event() searchTermInput: EventEmitter;\n\n /\n MutationObserver to watch changes in the component.\n /\n mutationObserver: MutationObserver;\n\n /\n Styles to be applied to the component.\n /\n styles = {};\n\n /\n Theme object containing font and color information.\n /\n theme = window.CuraAPI.theme;\n\n @AttachInternals() internals: ElementInternals;\n\n /\n Callback for form association.\n /\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n /\n Callback to restore the switch state from the form.\n /\n formStateRestoreCallback(state: { value: string }) {\n this.textInput = state.value;\n this.updateSelectedOption();\n }\n\n /\n Callback to reset the switch state when the form is reset.\n /\n formResetCallback() {\n this.textInput = '';\n this.clearSelectedAttributes();\n this.internals.setFormValue('');\n this.internals.setValidity({});\n }\n\n /\n Callback to update the switch's disabled state when the form's disabled state changes.\n /\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /\n Lifecycle method called before the component is rendered.\n * Initializes the options for the select component.\n /\n componentWillLoad() {\n this.initializeOptions();\n }\n /\n Lifecycle method called after the component is rendered.\n * Initializes select-related functionality.\n /\n componentDidLoad() {\n this.setupMutationObserver();\n this.addOutsideClickListener();\n }\n /\n Lifecycle method called when the component is connected to the DOM.\n * Applies styles based on the theme.\n /\n connectedCallback() {\n this.applyStyles();\n }\n /\n Lifecycle method called when the component is disconnected from the DOM.\n * Disconnects the MutationObserver if it exists.\n /\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.removeOutsideClickListener();\n }\n\n initializeOptions() {\n this.options = this.host.querySelectorAll<HTMLCuraSelectOptionElement>('cura-select-option');\n this.options.forEach(option => {\n option.setAttribute('size', this.size);\n\n const isSelected = this.value === option.value;\n option.setAttribute('selected', JSON.stringify(isSelected));\n\n if (isSelected) {\n this.value = option.value;\n this.internals.setFormValue(option.value);\n }\n });\n\n this.textInput = Array.from(this.options).find(option => option.value === this.value)?.textContent \|\| this.textInput;\n }\n /\n Applies styles to the component based on the theme.\n /\n applyStyles() {\n const { fonts, colors } = this.theme;\n const fontWeights = fonts.getWeights();\n\n this.styles = {\n ...this.styles,\n '--font-weight-medium': fontWeights.medium,\n '--font-weight-bold': fontWeights.bold,\n '--font-weight-regular': fontWeights.regular,\n '--font-color': fonts.getColor(),\n '--font-family': fonts.getFamily(),\n '--font-size': fonts.getSize(),\n };\n\n const colorKeys = [\n 'primary-base',\n 'neutral-purewhite',\n 'neutral-white',\n 'neutral-black',\n 'neutral-medium',\n 'neutral-light',\n 'neutral-base',\n 'neutral-dark',\n 'success-dark',\n 'success-darker',\n 'success-lighter',\n 'error-lighter',\n 'error-dark',\n 'error-darker',\n 'error-base',\n 'info-base',\n ];\n\n colorKeys.forEach(key => {\n this.styles[`--${key}`] = colors.getColor(key);\n });\n }\n /\n Sets up a MutationObserver to watch for changes in the component.\n /\n setupMutationObserver() {\n this.mutationObserver = new MutationObserver(this.handleMutations);\n this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });\n }\n /\n Handles mutations observed by the MutationObserver.\n * Updates the selected option or filters options based on the mutation type.\n /\n handleMutations = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type === 'attributes') {\n if (mutation.attributeName === 'selected') this.updateSelectedOption();\n }\n });\n };\n /\n Handles the selection of an option.\n /\n onOptiselected = (event: Event) => {\n const selectedOption = event.target as HTMLElement;\n this.clearSelectedAttributes();\n selectedOption.setAttribute('selected', 'true');\n };\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.clearSelectedAttributes();\n\n const selectedOption = this.host.querySelector(`cura-select-option[value=\"${newValue}\"]`);\n\n if (!selectedOption) {\n return;\n }\n\n selectedOption.setAttribute('selected', 'true');\n }\n\n updateSelectedOption() {\n const selectedOptionElement = this.host.querySelector<HTMLCuraSelectOptionElement>('cura-select-option[selected]');\n\n if (!selectedOptionElement) {\n return;\n }\n\n this.value = selectedOptionElement.value;\n this.internals.setFormValue(this.value);\n\n if (this.textInput !== selectedOptionElement.textContent) {\n this.textInput = selectedOptionElement.textContent;\n this.isOpen = false;\n this.selected.emit(selectedOptionElement.value);\n }\n }\n\n /\n Clears the 'selected' attribute from all options.\n /\n clearSelectedAttributes() {\n this.options.forEach(option => option.removeAttribute('selected'));\n }\n\n handleKeyNavigation = (event: KeyboardEvent) => {\n const { code: keyCode } = event;\n\n if (!this.isOpen && keyCode === 'ArrowDown') {\n this.isOpen = true;\n this.activeIndex = 0;\n\n return;\n }\n\n if (keyCode === 'ArrowDown') {\n event.preventDefault();\n this.updateActiveIndex(1);\n }\n\n if (keyCode === 'ArrowUp') {\n event.preventDefault();\n this.updateActiveIndex(-1);\n }\n\n if (keyCode === 'Enter' \|\| keyCode === 'Space') {\n this.options[this.activeIndex]?.click();\n }\n\n if (keyCode === 'Escape') {\n this.isOpen = false;\n }\n };\n\n updateActiveIndex(direction: number) {\n if (this.options.length === 0) return;\n this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;\n }\n\n handleInputChange = (e: Event) => {\n this.textInput = (e.target as HTMLInputElement).value;\n this.isOpen = this.textInput.length > 0;\n this.internals.setFormValue(this.textInput);\n };\n\n getClasses() {\n return {\n wrapper: true,\n label: !!this.label,\n disabled: this.disabled,\n transparent: this.mode === 'transparent',\n [this.size.toLowerCase()]: true,\n [this.status.toLowerCase()]: true,\n };\n }\n\n /\n Determines the color based on the item type and component state.\n /\n getColor(item: 'label' \| 'text' \| 'icon') {\n if (this.disabled) return 'neutral-medium';\n\n const isStatusDefault = this.status === 'default';\n const isHoveredOrFocused = this.isFocused \|\| this.isHovered;\n\n if (item === 'label') {\n if (!isStatusDefault \|\| isHoveredOrFocused) return 'neutral-black';\n return 'neutral-dark';\n }\n\n if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';\n if (this.status === 'success') return 'success-dark';\n if (this.status === 'error') return 'error-dark';\n\n return 'neutral-dark';\n }\n\n /\n Renders the icon based on the component's status.\n /\n renderIcon() {\n if (this.status === 'default' && !this.iconName) return null;\n const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];\n return <cura-icon class=\"feedback-icon\" name={icon} iconset=\"default\" size={this.size === 'large' ? 20 : 16} color={this.getColor('icon')} style={this.styles} />;\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.disabled) return event.preventDefault();\n const target = event.target as HTMLElement;\n\n if (target.tagName === 'CURA-SELECT-OPTION') return this.onOptiselected(event);\n this.isOpen = !this.isOpen;\n };\n\n handleClickOutside = (event: MouseEvent) => {\n const clickedOutside = !this.host.contains(event.target as Node);\n if (clickedOutside) {\n this.isOpen = false;\n }\n };\n\n private addOutsideClickListener() {\n document.addEventListener('click', this.handleClickOutside);\n }\n\n private removeOutsideClickListener() {\n document.removeEventListener('click', this.handleClickOutside);\n }\n\n render() {\n return (\n <Host style={this.styles}\n role=\"combobox\"\n aria-label={this.label}\n aria-required={String(this.required)}\n aria-disabled={String(this.disabled)}\n aria-invalid={String(this.status === 'error')}>\n <div class={this.getClasses()} onMouseEnter={() => (this.isHovered = true)} onMouseLeave={() => (this.isHovered = false)} onClick={this.handleClick}>\n {this.label && (\n <cura-label class=\"label\" weight=\"bold\" size={this.size === 'large' ? 'small' : 'xsmall'} color={this.getColor('label')}>\n {this.label} {this.required && <span class=\"required\"> </span>}\n </cura-label>\n )}\n\n <div\n class={{\n 'cura-input-field': true,\n 'open': this.isOpen,\n }}\n >\n {this.renderIcon()}\n <input\n type=\"text\"\n autocomplete=\"off\"\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n onKeyDown={this.handleKeyNavigation}\n aria-required={String(this.required)}\n aria-disabled={String(this.disabled)}\n aria-invalid={String(this.status === 'error')}\n onInput={this.handleInputChange}\n style={this.styles}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n value={this.textInput}\n readonly={this.searchBehavior ? null : true}\n />\n <button class=\"up-down-button\">\n <cura-icon name={this.isOpen ? 'up' : 'down'} class=\"up-down-icon\" color={this.disabled ? 'neutral-dark' : 'primary-base'} size={16} iconset=\"default\" />\n </button>\n </div>\n <cura-label class=\"helper-text\" size=\"xsmall\" color={this.getColor('text')} weight={this.mode === 'transparent' ? 'bold' : 'regular'}>\n <slot></slot>\n </cura-label>\n {this.isOpen && (\n <div\n class={{\n menu: true,\n open: this.isOpen,\n }}\n style={{ '--max-height': this.maxHeight }}\n >\n <slot name=\"option\"></slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/forms/cura-select/cura-select.stories.js CHANGED Viewed

@@ -34,6 +34,9 @@ const renderCuraSelect = args => {
         : ''}${args.searchBehavior
         ? `
   search-behavior="${args.searchBehavior}"`
+        : ''}${args.maxHeight
+        ? `
+  max-height="${args.maxHeight}"`
         : ''}${`
   accent-sensitive="${args.caseSensitive}"`}>
   ${args.helperText}
@@ -172,6 +175,14 @@ export default {
                 defaultValue: { summary: '[]' },
             },
         },
+        maxHeight: {
+            control: 'text',
+            description: 'Altura máxima para o menu.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: '285px' },
+            }
+        },
     },
 };
 export const CuraSelect = {
@@ -195,6 +206,7 @@ export const CuraSelect = {
         searchBehavior: false,
         helperText: 'Texto de ajuda',
         caseSensitive: true,
+        maxHeight: "285px",
     },
 };
 //# sourceMappingURL=cura-select.stories.js.map

package/dist/collection/components/forms/cura-select/cura-select.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-select.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst renderCuraSelect = args => {\n const optionsMarkup = args.options.map(option => `<cura-select-option value=\"${option.value}\">${option.label}</cura-select-option>`).join('');\n\n const block = `<cura-select${\n args.label\n ? `\n label=\"${args.label}\"`\n : ''\n }${\n args.placeholder\n ? `\n placeholder=\"${args.placeholder}\"`\n : ''\n }${\n args.defaultValue\n ? `\n default-value=\"${args.defaultValue}\"`\n : ''\n }${\n args.value\n ? `\n value=\"${args.value}\"`\n : ''\n }${\n args.mode\n ? `\n mode=\"${args.mode}\"`\n : ''\n }${\n args.size\n ? `\n size=\"${args.size}\"`\n : ''\n }${\n args.status\n ? `\n status=\"${args.status}\"`\n : ''\n }${\n args.iconName\n ? `\n icon-name=\"${args.iconName}\"`\n : ''\n }${\n args.disabled\n ? `\n disabled`\n : ''\n }${\n args.required\n ? `\n required`\n : ''\n }${\n args.searchBehavior\n ? `\n search-behavior=\"${args.searchBehavior}\"`\n : ''\n }${`\n accent-sensitive=\"${args.caseSensitive}\"`}>\n ${args.helperText}\n ${optionsMarkup}\n</cura-select>`;\n\n return `<div style=\"height: 200px; padding: 20px;\">${block}</div>`;\n};\n\nexport default {\n title: 'Componentes/Forms/Select',\n component: 'cura-select',\n tags: ['autodocs'],\n render: args => renderCuraSelect(args),\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto do rótulo para o componente select.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n placeholder: {\n control: 'text',\n description: 'Texto de espaço reservado para o campo de entrada.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n defaultValue: {\n control: 'text',\n description: 'Valor padrão para o componente select.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n value: {\n control: 'text',\n description: 'Valor atual do componente select. Ao inicar a busca o mesmo se refere ao option relacionado',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n iconName: {\n control: { type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone de feedback. Usado em conjunto com a prop <strong>mode=default</strong>',\n required: false,\n table: {\n category: 'Icons',\n defaultValue: { summary: '' },\n },\n },\n mode: {\n control: { type: 'inline-radio' },\n options: ['default', 'transparent'],\n description: \"Modo de exibição do componente select. Pode ser 'default' ou 'transparent'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'default' },\n },\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: \"Tamanho do componente select. Pode ser 'small', 'medium' ou 'large'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'medium' },\n },\n },\n status: {\n control: { type: 'inline-radio' },\n options: ['default', 'success', 'error'],\n description: \"Status do componente select. Pode ser 'success', 'error' ou 'default'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'default' },\n },\n },\n caseSensitive: {\n control: 'boolean',\n description: 'Indica se deve considerar acentos e careacteres especiais na busca',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'true' },\n },\n },\n disabled: {\n control: 'boolean',\n description: 'Indica se o componente select está desabilitado.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n },\n },\n required: {\n control: 'boolean',\n description: 'Indica se o componente select é obrigatório.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n },\n },\n searchBehavior: {\n control: 'boolean',\n description: 'Habilita o modo de digitação e busca nas opções a partir do termo.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n },\n },\n helperText: {\n name: 'content',\n control: 'text',\n description: 'Define o texto de ajuda do input, renderizado dentro do slot num elemento <cura-label>. Aceita tags HTML.',\n table: {\n category: 'Slots',\n defaultValue: { summary: '' },\n },\n },\n selected: {\n description: 'Emite um evento via Listener quando um valor é selecionado. { value: string , selected: boolean }',\n table: {\n category: 'Evento',\n defaultValue: { summary: '' },\n },\n },\n options: {\n control: 'array',\n description: 'Lista de opções definido pela aplicação para cura-select-option.',\n table: {\n category: 'aplication',\n defaultValue: { summary: '[]' },\n },\n },\n },\n};\n\nexport const CuraSelect = {\n args: {\n options: [\n { value: '1', label: 'Opção 1' },\n { value: '2', label: 'Escolha 2' },\n { value: '3', label: 'Exemplo 3' },\n { value: '4', label: 'Opcão 4' },\n { value: '5', label: 'Opcao 5' },\n ],\n label: 'Escolha uma opção',\n placeholder: 'Selecione...',\n defaultValue: '',\n value: '',\n mode: 'default',\n size: 'medium',\n status: 'default',\n disabled: false,\n required: false,\n searchBehavior: false,\n helperText: 'Texto de ajuda',\n caseSensitive: true,\n },\n};\n"]}
1	+ {"version":3,"file":"cura-select.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst renderCuraSelect = args => {\n const optionsMarkup = args.options.map(option => `<cura-select-option value=\"${option.value}\">${option.label}</cura-select-option>`).join('');\n\n const block = `<cura-select${\n args.label\n ? `\n label=\"${args.label}\"`\n : ''\n }${\n args.placeholder\n ? `\n placeholder=\"${args.placeholder}\"`\n : ''\n }${\n args.defaultValue\n ? `\n default-value=\"${args.defaultValue}\"`\n : ''\n }${\n args.value\n ? `\n value=\"${args.value}\"`\n : ''\n }${\n args.mode\n ? `\n mode=\"${args.mode}\"`\n : ''\n }${\n args.size\n ? `\n size=\"${args.size}\"`\n : ''\n }${\n args.status\n ? `\n status=\"${args.status}\"`\n : ''\n }${\n args.iconName\n ? `\n icon-name=\"${args.iconName}\"`\n : ''\n }${\n args.disabled\n ? `\n disabled`\n : ''\n }${\n args.required\n ? `\n required`\n : ''\n }${\n args.searchBehavior\n ? `\n search-behavior=\"${args.searchBehavior}\"`\n : ''\n }${\n args.maxHeight\n ? `\n max-height=\"${args.maxHeight}\"`\n : ''\n }${`\n accent-sensitive=\"${args.caseSensitive}\"`}>\n ${args.helperText}\n ${optionsMarkup}\n</cura-select>`;\n\n return `<div style=\"height: 200px; padding: 20px;\">${block}</div>`;\n};\n\nexport default {\n title: 'Componentes/Forms/Select',\n component: 'cura-select',\n tags: ['autodocs'],\n render: args => renderCuraSelect(args),\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto do rótulo para o componente select.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n placeholder: {\n control: 'text',\n description: 'Texto de espaço reservado para o campo de entrada.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n defaultValue: {\n control: 'text',\n description: 'Valor padrão para o componente select.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n value: {\n control: 'text',\n description: 'Valor atual do componente select. Ao inicar a busca o mesmo se refere ao option relacionado',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n iconName: {\n control: { type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone de feedback. Usado em conjunto com a prop <strong>mode=default</strong>',\n required: false,\n table: {\n category: 'Icons',\n defaultValue: { summary: '' },\n },\n },\n mode: {\n control: { type: 'inline-radio' },\n options: ['default', 'transparent'],\n description: \"Modo de exibição do componente select. Pode ser 'default' ou 'transparent'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'default' },\n },\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: \"Tamanho do componente select. Pode ser 'small', 'medium' ou 'large'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'medium' },\n },\n },\n status: {\n control: { type: 'inline-radio' },\n options: ['default', 'success', 'error'],\n description: \"Status do componente select. Pode ser 'success', 'error' ou 'default'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'default' },\n },\n },\n caseSensitive: {\n control: 'boolean',\n description: 'Indica se deve considerar acentos e careacteres especiais na busca',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'true' },\n },\n },\n disabled: {\n control: 'boolean',\n description: 'Indica se o componente select está desabilitado.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n },\n },\n required: {\n control: 'boolean',\n description: 'Indica se o componente select é obrigatório.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n },\n },\n searchBehavior: {\n control: 'boolean',\n description: 'Habilita o modo de digitação e busca nas opções a partir do termo.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n },\n },\n helperText: {\n name: 'content',\n control: 'text',\n description: 'Define o texto de ajuda do input, renderizado dentro do slot num elemento <cura-label>. Aceita tags HTML.',\n table: {\n category: 'Slots',\n defaultValue: { summary: '' },\n },\n },\n selected: {\n description: 'Emite um evento via Listener quando um valor é selecionado. { value: string , selected: boolean }',\n table: {\n category: 'Evento',\n defaultValue: { summary: '' },\n },\n },\n options: {\n control: 'array',\n description: 'Lista de opções definido pela aplicação para cura-select-option.',\n table: {\n category: 'aplication',\n defaultValue: { summary: '[]' },\n },\n },\n maxHeight: {\n control: 'text',\n description: 'Altura máxima para o menu.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '285px' },\n }\n },\n },\n};\n\nexport const CuraSelect = {\n args: {\n options: [\n { value: '1', label: 'Opção 1' },\n { value: '2', label: 'Escolha 2' },\n { value: '3', label: 'Exemplo 3' },\n { value: '4', label: 'Opcão 4' },\n { value: '5', label: 'Opcao 5' },\n ],\n label: 'Escolha uma opção',\n placeholder: 'Selecione...',\n defaultValue: '',\n value: '',\n mode: 'default',\n size: 'medium',\n status: 'default',\n disabled: false,\n required: false,\n searchBehavior: false,\n helperText: 'Texto de ajuda',\n caseSensitive: true,\n maxHeight: \"285px\",\n },\n};\n"]}

package/dist/collection/components/forms/cura-switch/cura-switch.css CHANGED Viewed

@@ -66,11 +66,8 @@
   flex-direction: row;
 }
-.info.textoverflow-single {
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.info {
   overflow: hidden;
-  display: block;
 }
 .label,

package/dist/collection/components/forms/cura-switch/cura-switch.js CHANGED Viewed

@@ -23,7 +23,8 @@ export class CuraSwitch {
         this.size = 'medium';
         this.background = 'light';
         this.color = 'accent';
-        this.textOverflow = 'none';
+        this.overflowLabel = 'none';
+        this.overflowHelper = 'none';
         this.styles = {};
     }
     sizeHandler() {
@@ -90,11 +91,10 @@ export class CuraSwitch {
         classes['checked'] = this.checked;
         classes['disabled'] = this.disabled;
         classes['position'] = this.position === 'right';
-        classes['textoverflow-single'] = this.textOverflow === 'single';
         return classes;
     }
     render() {
-        return (h(Host, { key: '774e59c0c00a11d231e30d032d7872d99eb3b8d1', role: "switch", "aria-checked": this.checked, "aria-disabled": this.disabled }, h("div", { key: 'e2bd25d79535f61b586fbf8a43915b5fccc308a2', class: this.getClasses(), style: this.styles, onClick: this.toggleSwitch }, h("div", { key: 'e68b9fac16600090db42037c507c2af81c1be0f3', class: `info ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}` }, h("cura-label", { key: '70a99aa8a108b00d46bb0354785b601e393d6cc1', textOverflow: this.textOverflow, style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: '09b1ae5f5a3b4062b473dec49bd68583d24ce2c0', textOverflow: this.textOverflow, style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '380a487d0387fc5934413f558e5f6f2558cb19de' }))), h("div", { key: '3a1ebdc9faf0c34e5b2e1b1e55b1a57161e14cb5', class: "control" }, h("div", { key: 'bd027689060ae72fce3e77ef739822ccb4f16b49', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '918744f9117e5f7ddcc0e9c9cdbf7735b396dc87', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+        return (h(Host, { key: '39e910a3c68672eb23a123529a77f8ee0d1093aa', role: "switch", "aria-checked": this.checked, "aria-disabled": this.disabled }, h("div", { key: '649b89d2709b8afa30cfc1ba549d45ac3c9c04a1', class: this.getClasses(), style: this.styles, onClick: this.toggleSwitch }, h("div", { key: '4b1c7d704f0db997a4738abbd248c3a0bbcfdfcd', class: "info" }, h("cura-label", { key: 'b225b06ed00144348d08bb95c8a5bf2f1f48e610', textOverflow: this.overflowLabel, style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: '22f5e79e0b2e98867663a9a60436d11bc2ce236e', textOverflow: this.overflowHelper, style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: 'd9ed12c05133baeec10aa149f26d6dc01b2e3cd8' }))), h("div", { key: 'd51364956de2b53735285109dd457cbff9500eb7', class: "control" }, h("div", { key: '5f1ce68eba5430eac69d670a72c4abd48a79a90d', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '5077af32559bc7eb183745544844d01a6078ee1d', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
     }
     static get is() { return "cura-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -255,7 +255,7 @@ export class CuraSwitch {
                 "reflect": false,
                 "defaultValue": "'accent'"
             },
-            "textOverflow": {
+            "overflowLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -266,10 +266,34 @@ export class CuraSwitch {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Apply text-overflow ellipsis definitions.\nDefault to none"
+                    "tags": [{
+                            "name": "default",
+                            "text": "'none'"
+                        }],
+                    "text": "Controls how the label text should handle overflow.\n- `'none'`: No overflow handling; the label displays normally.\n- `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n- `string`: Custom overflow handling mode."
+                },
+                "attribute": "overflow-label",
+                "reflect": true,
+                "defaultValue": "'none'"
+            },
+            "overflowHelper": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'single' | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'none'"
+                        }],
+                    "text": "Controls how the helper text should handle overflow.\n- `'none'`: No overflow handling; the label displays normally.\n- `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n- `string`: Custom overflow handling mode."
                 },
-                "attribute": "text-overflow",
+                "attribute": "overflow-helper",
                 "reflect": true,
                 "defaultValue": "'none'"
             }

package/dist/collection/components/forms/cura-switch/cura-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-switch.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-switch',\n styleUrl: 'cura-switch.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraSwitch {\n /*\n Indicates whether the switch is checked or not.\n /\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /\n Indicates whether the switch is disabled or not.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n /\n The label text to display next to the switch.\n /\n @Prop({ reflect: true }) label: string = '';\n /\n Tab index for the switch element.\n * Reflects as an HTML attribute.\n /\n @Prop({ reflect: true }) ontabindex: number = 0;\n /\n Position of the label relative to the switch.\n * Can be 'left' or 'right'.\n /\n @Prop({ reflect: true }) position: 'left' \| 'right' = 'left';\n /\n Size of the switch.\n * Can be 'small', 'medium', or 'large'.\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n /\n Background style of the switch.\n * Can be 'dark' or 'light'.\n /\n @Prop() background: 'dark' \| 'light' = 'light';\n /\n Accent color of the switch.\n /\n @Prop() color = 'accent';\n\n /\n Apply text-overflow ellipsis definitions.\n * Default to none\n /\n @Prop({ reflect: true }) textOverflow: 'none' \| 'single' \| string = 'none';\n\n @State() styles = {};\n\n @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n @AttachInternals() internals: ElementInternals;\n\n sizes = {\n large: { size: 64 },\n medium: { size: 48 },\n small: { size: 40 },\n };\n\n isDarkbackground = () => this.background === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size-track': `${this.sizes[this.size].size}px`,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`,\n };\n }\n\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--neutral-black-shadow', background: 'neutral-black', opacity: 0.16 },\n { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n { name: '--neutral-medium', background: 'neutral-medium' },\n { name: '--neutral-pale', background: 'neutral-pale' },\n { name: '--neutral-dark-base', background: `neutral-${this.isDarkbackground() ? 'dark' : 'base'}` },\n { name: '--neutral-darker-medium', background: `neutral-${this.isDarkbackground() ? 'darker' : 'medium'}` },\n { name: '--neutral-black-neutral-pale', background: `${this.isDarkbackground() ? 'neutral-black' : 'neutral-pale'}` },\n { name: '--neutral-black-neutral-base', background: `${this.isDarkbackground() ? 'neutral-dark' : 'neutral-base'}` },\n { name: '--color-base-light', background: `${this.color}-light` },\n { name: '--color-dark', background: `${this.color}-dark` },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity);\n });\n this.styles = { ...this.styles };\n }\n\n connectedCallback() {\n this.sizeHandler();\n this.setColors();\n }\n\n /\n Callback for form association.\n /\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n /\n Callback to restore the switch state from the form.\n /\n formStateRestoreCallback(state: { value: string }) {\n this.checked = state.value === 'true';\n this.internals.setFormValue(this.checked.toString());\n }\n\n /\n Callback to reset the switch state when the form is reset.\n /\n formResetCallback() {\n this.checked = false;\n this.internals.setValidity({});\n this.internals.setFormValue(this.checked.toString());\n }\n\n /\n Callback to update the switch's disabled state when the form's disabled state changes.\n */\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n toggleSwitch = () => {\n if (this.disabled) return null;\n\n this.checked = !this.checked;\n this.internals.setFormValue(this.checked.toString());\n this.onchange.emit({ checked: this.checked });\n };\n\n assignColor(colorDark: string, colorLight: string) {\n if (this.disabled) return this.isDarkbackground() ? 'neutral-dark' : 'neutral-dark';\n return this.isDarkbackground() ? colorDark : colorLight;\n }\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n classes['textoverflow-single'] = this.textOverflow === 'single';\n\n return classes;\n }\n\n render() {\n return (\n <Host role=\"switch\" aria-checked={this.checked} aria-disabled={this.disabled}>\n <div class={this.getClasses()} style={this.styles} onClick={this.toggleSwitch}>\n <div class={`info ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}`}>\n <cura-label\n textOverflow={this.textOverflow}\n style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n class=\"label\"\n weight=\"bold\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n lineHeight=\"125%\"\n color={this.assignColor('neutral-white', 'neutral-black')}\n >\n {this.label}\n </cura-label>\n <cura-label\n textOverflow={this.textOverflow}\n style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n color={this.assignColor('primary-lighter', 'neutral-dark')}\n size=\"xsmall\"\n class=\"message\"\n >\n <slot></slot>\n </cura-label>\n </div>\n\n <div class=\"control\">\n <div class={`track ${this.size.toLowerCase()}`}>\n <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cura-switch.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-switch',\n styleUrl: 'cura-switch.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraSwitch {\n /*\n Indicates whether the switch is checked or not.\n /\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /\n Indicates whether the switch is disabled or not.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n /\n The label text to display next to the switch.\n /\n @Prop({ reflect: true }) label: string = '';\n /\n Tab index for the switch element.\n * Reflects as an HTML attribute.\n /\n @Prop({ reflect: true }) ontabindex: number = 0;\n /\n Position of the label relative to the switch.\n * Can be 'left' or 'right'.\n /\n @Prop({ reflect: true }) position: 'left' \| 'right' = 'left';\n /\n Size of the switch.\n * Can be 'small', 'medium', or 'large'.\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n /\n Background style of the switch.\n * Can be 'dark' or 'light'.\n /\n @Prop() background: 'dark' \| 'light' = 'light';\n /\n Accent color of the switch.\n /\n @Prop() color = 'accent';\n\n /\n Controls how the label text should handle overflow.\n * - `'none'`: No overflow handling; the label displays normally.\n * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n * - `string`: Custom overflow handling mode.\n \n @default 'none'\n /\n @Prop({ reflect: true }) overflowLabel: 'none' \| 'single' \| string = 'none';\n\n /\n Controls how the helper text should handle overflow.\n * - `'none'`: No overflow handling; the label displays normally.\n * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n * - `string`: Custom overflow handling mode.\n \n @default 'none'\n /\n @Prop({ reflect: true }) overflowHelper: 'none' \| 'single' \| string = 'none';\n\n @State() styles = {};\n\n @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n @AttachInternals() internals: ElementInternals;\n\n sizes = {\n large: { size: 64 },\n medium: { size: 48 },\n small: { size: 40 },\n };\n\n isDarkbackground = () => this.background === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size-track': `${this.sizes[this.size].size}px`,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`,\n };\n }\n\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--neutral-black-shadow', background: 'neutral-black', opacity: 0.16 },\n { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n { name: '--neutral-medium', background: 'neutral-medium' },\n { name: '--neutral-pale', background: 'neutral-pale' },\n { name: '--neutral-dark-base', background: `neutral-${this.isDarkbackground() ? 'dark' : 'base'}` },\n { name: '--neutral-darker-medium', background: `neutral-${this.isDarkbackground() ? 'darker' : 'medium'}` },\n { name: '--neutral-black-neutral-pale', background: `${this.isDarkbackground() ? 'neutral-black' : 'neutral-pale'}` },\n { name: '--neutral-black-neutral-base', background: `${this.isDarkbackground() ? 'neutral-dark' : 'neutral-base'}` },\n { name: '--color-base-light', background: `${this.color}-light` },\n { name: '--color-dark', background: `${this.color}-dark` },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity);\n });\n this.styles = { ...this.styles };\n }\n\n connectedCallback() {\n this.sizeHandler();\n this.setColors();\n }\n\n /\n Callback for form association.\n /\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n /\n Callback to restore the switch state from the form.\n /\n formStateRestoreCallback(state: { value: string }) {\n this.checked = state.value === 'true';\n this.internals.setFormValue(this.checked.toString());\n }\n\n /\n Callback to reset the switch state when the form is reset.\n /\n formResetCallback() {\n this.checked = false;\n this.internals.setValidity({});\n this.internals.setFormValue(this.checked.toString());\n }\n\n /\n Callback to update the switch's disabled state when the form's disabled state changes.\n */\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n toggleSwitch = () => {\n if (this.disabled) return null;\n\n this.checked = !this.checked;\n this.internals.setFormValue(this.checked.toString());\n this.onchange.emit({ checked: this.checked });\n };\n\n assignColor(colorDark: string, colorLight: string) {\n if (this.disabled) return this.isDarkbackground() ? 'neutral-dark' : 'neutral-dark';\n return this.isDarkbackground() ? colorDark : colorLight;\n }\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n\n return classes;\n }\n\n render() {\n return (\n <Host role=\"switch\" aria-checked={this.checked} aria-disabled={this.disabled}>\n <div class={this.getClasses()} style={this.styles} onClick={this.toggleSwitch}>\n <div class=\"info\">\n <cura-label\n textOverflow={this.overflowLabel}\n style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n class=\"label\"\n weight=\"bold\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n lineHeight=\"125%\"\n color={this.assignColor('neutral-white', 'neutral-black')}\n >\n {this.label}\n </cura-label>\n <cura-label\n textOverflow={this.overflowHelper}\n style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n color={this.assignColor('primary-lighter', 'neutral-dark')}\n size=\"xsmall\"\n class=\"message\"\n >\n <slot></slot>\n </cura-label>\n </div>\n\n <div class=\"control\">\n <div class={`track ${this.size.toLowerCase()}`}>\n <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/tabs/cura-tabs/cura-tabs.css ADDED Viewed

@@ -0,0 +1,170 @@
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
+/**
+ * Global Button Definitions.
+ * Required CSS Properties:
+ * --font-size
+ * --base-spacing
+ * --font-family
+ * --font-weight-medium
+ * --text-align
+ */
+/**
+ * Spacing sass vars
+ */
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
+/**
+ * Buttons Host element definitions.
+ * Use: @include button-host() { ... }
+ */
+/**
+ * Buttons base definitions.
+ * Use: @include button-element() { ... }
+ */
+/**
+ * Button sizes definitions.
+ * Use: @include button-sizes() { ... }
+ */
+/**
+ * Button container definitions.
+ * Use: @include button-container() { ... }
+ */
+/**
+ * Button label definitions.
+ * Use: @include button-label() { ... }
+ */
+/**
+ * Button shadow definitions.
+ * Use: @include button-label() { ... }
+ */
+/**
+ * Button disabled state definitions
+ * Use: @include button-disabled() { ... }
+ */
+/**
+ * Button selected state definitions
+ * Use: @include button-selected() { ... }
+ */
+/**
+ * Button loading state definitions
+ * Use: @include button-loading() { ... }
+ */
+/**
+ * Button icon definitions
+ * Use: @include button-icon() { ... }
+ */
+/**
+ * Button icon only behavior definitions
+ * Use: @include button-icon-only-behavior() { ... }
+ */
+:host button,
+:host a {
+  outline: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none !important;
+  font-size: var(--font-size);
+  cursor: pointer;
+  transition: background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;
+  border-radius: var(--border-radius);
+  position: relative;
+  background-color: transparent;
+  box-sizing: border-box;
+  border: none;
+  min-width: 120px;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px 4px 0 0;
+}
+:host button:focus,
+:host a:focus {
+  outline: 2px solid #6EA8FF;
+}
+:host button.border-bottom,
+:host a.border-bottom {
+  border-bottom: 1px solid var(--border-bottom-color);
+}
+:host button:not(.disabled, .selected):hover,
+:host a:not(.disabled, .selected):hover {
+  background-color: var(--background-color-hover);
+}
+:host button:not(.disabled, .selected):hover.light,
+:host a:not(.disabled, .selected):hover.light {
+  border-bottom-color: var(--primary-dark);
+}
+:host button:not(.disabled, .selected):hover.dark,
+:host a:not(.disabled, .selected):hover.dark {
+  border-bottom-color: var(--neutral-purewhite);
+}
+:host button.small,
+:host a.small {
+  padding: calc(var(--cura-spacing-base) * 2px) calc(var(--cura-spacing-base) * 2px);
+}
+:host button.medium,
+:host a.medium {
+  padding: calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px);
+}
+:host button.large,
+:host a.large {
+  padding: calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 4px);
+}
+:host button:focus,
+:host a:focus {
+  border: 2px solid var(--primary-light);
+}
+:host button cura-icon,
+:host a cura-icon {
+  margin-right: calc(var(--cura-spacing-base) * 2px);
+}
+:host button.selected,
+:host a.selected {
+  cursor: pointer;
+  background-color: var(--background-color-selected);
+}
+:host button.selected.disabled,
+:host a.selected.disabled {
+  background-color: var(--background-disabled-selected);
+}
+:host button.disabled,
+:host a.disabled {
+  cursor: not-allowed;
+}