npm - @rededor/cura - Versions diffs - 1.0.0-alpha.5 → 1.0.0-alpha.6 - Mend

@rededor/cura 1.0.0-alpha.5 → 1.0.0-alpha.6

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 (50) hide show

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

@@ -18,8 +18,6 @@ export class CuraSelect {
                 if (mutation.type === 'attributes') {
                     if (mutation.attributeName === 'selected')
                         this.updateSelectedOption();
-                    if (mutation.attributeName === 'value')
-                        this.filterOptions();
                 }
             });
         };
@@ -31,27 +29,33 @@ export class CuraSelect {
             this.clearSelectedAttributes();
             selectedOption.setAttribute('selected', 'true');
         };
-        this.handleKeyDown = (event) => {
+        this.handleKeyNavigation = (event) => {
             var _a;
-            if (!this.isOpen)
+            const { code: keyCode } = event;
+            if (!this.isOpen && keyCode === 'ArrowDown') {
+                this.isOpen = true;
+                this.activeIndex = 0;
                 return;
-            const { key } = event;
-            if (key === 'ArrowDown') {
+            }
+            if (keyCode === 'ArrowDown') {
                 event.preventDefault();
                 this.updateActiveIndex(1);
             }
-            if (key === 'ArrowUp') {
+            if (keyCode === 'ArrowUp') {
                 event.preventDefault();
                 this.updateActiveIndex(-1);
             }
-            if (key === 'Enter') {
+            if (keyCode === 'Enter' || keyCode === 'Space') {
                 (_a = this.options[this.activeIndex]) === null || _a === void 0 ? void 0 : _a.click();
             }
+            if (keyCode === 'Escape') {
+                this.isOpen = false;
+            }
         };
         this.handleInputChange = (e) => {
-            this.value = e.target.value;
-            this.isOpen = !!this.value.length;
-            this.internals.setFormValue(this.value);
+            this.textInput = e.target.value;
+            this.isOpen = this.textInput.length > 0;
+            this.internals.setFormValue(this.textInput);
         };
         this.handleClick = (event) => {
             if (this.disabled)
@@ -74,6 +78,24 @@ export class CuraSelect {
         this.isOpen = false;
         this.options = undefined;
         this.activeIndex = -1;
+        this.textInput = '';
+    }
+    updateOptionHighlights(newActiveINdex) {
+        this.options.forEach((option, index) => option.active = index === newActiveINdex);
+    }
+    /**
+     * Filters the options based on the current input value.
+     */
+    filterOptions(newText) {
+        if (!this.isOpen) {
+            return;
+        }
+        this.options.forEach(option => {
+            var _a;
+            const optionValue = ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+            const isVisible = optionValue.includes(newText.toLocaleLowerCase());
+            option.style.display = isVisible ? 'block' : 'none';
+        });
     }
     /**
    * Callback for form association.
@@ -85,16 +107,16 @@ export class CuraSelect {
    * Callback to restore the switch state from the form.
    */
     formStateRestoreCallback(state) {
-        this.value = state.value;
+        this.textInput = state.value;
         this.updateSelectedOption();
     }
     /**
    * Callback to reset the switch state when the form is reset.
    */
     formResetCallback() {
-        this.value = '';
+        this.textInput = '';
         this.clearSelectedAttributes();
-        this.internals.setFormValue(this.value);
+        this.internals.setFormValue('');
         this.internals.setValidity({});
     }
     /**
@@ -133,11 +155,18 @@ export class CuraSelect {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     initializeOptions() {
+        var _a;
         this.options = this.host.querySelectorAll('cura-select-option');
         this.options.forEach(option => {
             option.setAttribute('size', this.size);
-            option.setAttribute('selected', 'false');
+            const isSelected = this.value === option.value;
+            option.setAttribute('selected', JSON.stringify(isSelected));
+            if (isSelected) {
+                this.value = option.value;
+                this.internals.setFormValue(option.value);
+            }
         });
+        this.textInput = ((_a = Array.from(this.options).find(option => option.value === this.value)) === null || _a === void 0 ? void 0 : _a.textContent) || this.textInput;
     }
     /**
      * Applies styles to the component based on the theme.
@@ -163,15 +192,16 @@ export class CuraSelect {
         this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });
     }
     updateSelectedOption() {
-        const selectedOption = this.host.querySelector('cura-select-option[selected]');
-        if (selectedOption) {
-            const selectedValue = selectedOption.textContent;
-            if (this.value !== selectedValue) {
-                this.value = selectedValue;
-                this.isOpen = false;
-                this.internals.setFormValue(this.value);
-                this.selected.emit({ value: this.value, selected: true });
-            }
+        const selectedOptionElement = this.host.querySelector('cura-select-option[selected]');
+        if (!selectedOptionElement) {
+            return;
+        }
+        this.value = selectedOptionElement.value;
+        this.internals.setFormValue(this.value);
+        if (this.textInput !== selectedOptionElement.textContent) {
+            this.textInput = selectedOptionElement.textContent;
+            this.isOpen = false;
+            this.selected.emit(selectedOptionElement.value);
         }
     }
     /**
@@ -180,26 +210,10 @@ export class CuraSelect {
     clearSelectedAttributes() {
         this.options.forEach(option => option.removeAttribute('selected'));
     }
-    /**
-     * Filters the options based on the current input value.
-     */
-    filterOptions() {
-        const inputValue = this.value.toLowerCase();
-        this.options.forEach(option => {
-            var _a;
-            const optionValue = ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
-            const isVisible = this.isOpen ? optionValue.includes(inputValue) : true;
-            option.style.display = isVisible ? 'block' : 'none';
-        });
-    }
     updateActiveIndex(direction) {
         if (this.options.length === 0)
             return;
         this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;
-        this.updateOptionHighlights();
-    }
-    updateOptionHighlights() {
-        this.options.forEach((option, index) => option.active = index === this.activeIndex);
     }
     getClasses() {
         return {
@@ -242,13 +256,13 @@ export class CuraSelect {
         return (h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
     }
     render() {
-        return (h(Host, { key: '35fd5d99705c940578485552a50bcec54efe036e', style: this.styles }, h("div", { key: '1903a7b03e32215678670a2d7d8b49643cc2086b', class: this.getClasses(), tabIndex: 0, ref: (el) => (this.selectRef = el), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onKeyDown: this.handleKeyDown, onClick: this.handleClick }, this.label && (h("cura-label", { key: '99aeba22f4b6204d936b6a9dcf6affa29e9411a8', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '7e335f6fdb0ee6d9e987fba8ec245006f02761b5', class: 'required' }, "* "))), h("div", { key: 'c9ba61c15951f6689724025778fe8a933ab5b9bd', class: {
+        return (h(Host, { key: '89fbc4dc9c103b21c7e2edcc03042ba8cf5f75c4', style: this.styles }, h("div", { key: 'ba79e3a4a5f2cdc7521ad3b9169e119b71512a9a', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '74ec4de79d5b748e0f8022f7b3386eee135bee6e', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '3a5fb5b5254049cebec618beb76a86406e04d051', class: 'required' }, "* "))), h("div", { key: '3f44d54e3e7d668a12b73778122764399af308ce', class: {
                 'cura-input-field': true,
                 'open': this.isOpen
-            } }, this.renderIcon(), h("input", { key: '0c1369e661fc6e34c8bf75f5ef4b977e749dc0b5', tabIndex: 0, type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), "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.value }), h("cura-icon", { key: '95b5105660bcfc0c1562955449a1fc737048e8c2', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'b5565e686989fe0c1e62f6c01fef52b2829bf4f5', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: '4a265609d8742b7e736920d54525cb2405785ea6' })), this.isOpen && (h("div", { key: '8f0609c7c2e709506ea4bdeeebdb1aae8abde1df', class: {
+            } }, this.renderIcon(), h("input", { key: '2c91a02d849fd7cb8605b33ec127303e486ae26d', 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 }), h("cura-icon", { key: '417f006c299b2dc7676c614f12edb2091f0eadf5', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: '40a14f36e8e51cf2a90d2ce38741600f14c5683e', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'c504704e9021e866d2bc1b9cb7bb45a81607c32f' })), this.isOpen && (h("div", { key: '3b00ec669c428952bdf143be92673e2e5de0568b', class: {
                 'menu': true,
                 'open': this.isOpen
-            } }, h("slot", { key: 'b6f84b885909ea1a9213cb3d590a02d736320228', name: 'option' }))))));
+            } }, h("slot", { key: '478b633209673c9ae4f5b690725abcfa537a357b', name: 'option' }))))));
     }
     static get is() { return "cura-select"; }
     static get encapsulation() { return "shadow"; }
@@ -417,7 +431,8 @@ export class CuraSelect {
             "isFocused": {},
             "isOpen": {},
             "options": {},
-            "activeIndex": {}
+            "activeIndex": {},
+            "textInput": {}
         };
     }
     static get events() {
@@ -439,6 +454,15 @@ export class CuraSelect {
             }];
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "activeIndex",
+                "methodName": "updateOptionHighlights"
+            }, {
+                "propName": "textInput",
+                "methodName": "filterOptions"
+            }];
+    }
     static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=cura-select.js.map

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 } 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 /\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 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<HTMLElement>;\n\n\n @State() activeIndex: number = -1\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 Reference to the select component element.\n /\n selectRef: HTMLElement;\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.value = 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.value = '';\n this.clearSelectedAttributes()\n this.internals.setFormValue(this.value);\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 }\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 }\n\n initializeOptions() {\n this.options = this.host.querySelectorAll('cura-select-option');\n this.options.forEach(option => {\n option.setAttribute('size', this.size);\n option.setAttribute('selected', 'false');\n });\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', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',\n 'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',\n 'error-lighter', 'error-dark', 'error-darker', 'error-base', '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 if (mutation.attributeName === 'value') this.filterOptions();\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 updateSelectedOption() {\n const selectedOption = this.host.querySelector('cura-select-option[selected]');\n\n if (selectedOption) {\n const selectedValue = selectedOption.textContent;\n if (this.value !== selectedValue) {\n this.value = selectedValue ;\n this.isOpen = false;\n this.internals.setFormValue(this.value);\n this.selected.emit({ value: this.value, selected: true });\n }\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 /\n Filters the options based on the current input value.\n /\n filterOptions() {\n const inputValue = this.value.toLowerCase();\n\n this.options.forEach(option => {\n const optionValue = option.textContent?.toLowerCase() \|\| '';\n const isVisible = this.isOpen ? optionValue.includes(inputValue) : true;\n option.style.display = isVisible ? 'block' : 'none';\n });\n }\n\n handleKeyDown = (event: KeyboardEvent) => {\n if (!this.isOpen) return;\n const { key } = event\n\n if (key === 'ArrowDown') {\n event.preventDefault();\n this.updateActiveIndex(1);\n }\n\n if (key === 'ArrowUp') {\n event.preventDefault();\n this.updateActiveIndex(-1);\n }\n\n if (key === 'Enter') {\n this.options[this.activeIndex]?.click();\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 this.updateOptionHighlights()\n }\n\n updateOptionHighlights() {\n this.options.forEach((option, index) => (option as any).active = index === this.activeIndex);\n }\n\n\n handleInputChange = (e: Event) => {\n this.value = (e.target as HTMLInputElement).value;\n this.isOpen = !!this.value.length;\n this.internals.setFormValue(this.value);\n };\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') return null;\n const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];\n return (\n <cura-icon\n class='feedback-icon'\n name={icon}\n iconset='default'\n size={this.size === 'large' ? 20 : 16}\n color={this.getColor('icon')}\n style={this.styles}\n />\n );\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\n render() {\n return (\n <Host style={this.styles}>\n <div\n class={this.getClasses()}\n tabIndex={0}\n ref={(el) => (this.selectRef = el as HTMLElement)}\n onMouseEnter={() => (this.isHovered = true)}\n onMouseLeave={() => (this.isHovered = false)}\n onKeyDown={this.handleKeyDown}\n onClick={this.handleClick}\n >\n {this.label && (\n <cura-label\n class='label'\n weight='bold'\n size={this.size === 'large' ? 'small' : 'xsmall'}\n color={this.getColor('label')}\n >\n {this.label} {this.required && <span class='required'> </span>}\n </cura-label>\n )}\n\n <div class={{\n 'cura-input-field': true,\n 'open': this.isOpen\n }}>\n {this.renderIcon()}\n <input\n tabIndex={0}\n type=\"text\"\n autocomplete='off'\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\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.value}\n />\n <cura-icon\n name={this.isOpen ? 'up' : 'down'}\n class=\"up-down-icon\"\n color={this.disabled ? 'neutral-dark' : 'primary-base'}\n size={16}\n iconset='default'\n />\n </div>\n <cura-label\n class=\"helper-text\"\n size='xsmall'\n color={this.getColor('text')}\n weight={this.mode === 'transparent' ? 'bold' : 'regular'} >\n <slot></slot>\n </cura-label>\n {this.isOpen && (\n <div class={{\n 'menu': true,\n 'open': this.isOpen\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 /\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 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\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 if (!this.isOpen) {\n return\n }\n \n this.options.forEach(option => {\n const optionValue = option.textContent?.toLowerCase() \|\| '';\n const isVisible = optionValue.includes(newText.toLocaleLowerCase())\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 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 }\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 }\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', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',\n 'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',\n 'error-lighter', 'error-dark', 'error-darker', 'error-base', '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 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\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') return null;\n const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];\n return (\n <cura-icon\n class='feedback-icon'\n name={icon}\n iconset='default'\n size={this.size === 'large' ? 20 : 16}\n color={this.getColor('icon')}\n style={this.styles}\n />\n );\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\n render() {\n return (\n <Host style={this.styles}>\n <div\n class={this.getClasses()}\n onMouseEnter={() => (this.isHovered = true)}\n onMouseLeave={() => (this.isHovered = false)}\n onClick={this.handleClick}\n >\n {this.label && (\n <cura-label\n class='label'\n weight='bold'\n size={this.size === 'large' ? 'small' : 'xsmall'}\n color={this.getColor('label')}\n >\n {this.label} {this.required && <span class='required'> </span>}\n </cura-label>\n )}\n\n <div class={{\n 'cura-input-field': true,\n 'open': this.isOpen\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 />\n <cura-icon\n name={this.isOpen ? 'up' : 'down'}\n class=\"up-down-icon\"\n color={this.disabled ? 'neutral-dark' : 'primary-base'}\n size={16}\n iconset='default'\n />\n </div>\n <cura-label\n class=\"helper-text\"\n size='xsmall'\n color={this.getColor('text')}\n weight={this.mode === 'transparent' ? 'bold' : 'regular'} >\n <slot></slot>\n </cura-label>\n {this.isOpen && (\n <div class={{\n 'menu': true,\n 'open': this.isOpen\n }}>\n <slot name='option'></slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/components/cura-input-text2.js CHANGED Viewed

@@ -3639,11 +3639,7 @@ const maskOptions = {
         placeholderChar: '_',
     },
     date: {
-        mask: Date,
-        min: new Date(1900, 0, 1),
-        max: new Date(2099, 11, 31),
-        lazy: false,
-        placeholderChar: '_',
+        mask: '00/00/0000'
     },
 };
@@ -3897,6 +3893,7 @@ const CuraInputText = /*@__PURE__*/ proxyCustomElement(class CuraInputText exten
     }
     handleInputChange(event) {
         const inputValue = event.target.value;
+        this.valueChange.emit(inputValue);
         if (this.type === 'number') {
             this.handleNumberInputChange(inputValue);
         }
@@ -3936,7 +3933,7 @@ const CuraInputText = /*@__PURE__*/ proxyCustomElement(class CuraInputText exten
             e.preventDefault();
     }
     render() {
-        return (h(Host, { key: '958e9c9ce207852a9a89bcbf6b2300a020e57e21' }, h("div", { key: 'a0b0a2dc0cef39d82f922f19a68adc2fea19ada4', style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-input-group': true }, this.getClasses()) }, h("div", { key: '600ac418f5e11b145546efd999e46f6dc439dbe2', class: "input-wrapper" }, this.label && (h("cura-label", { key: 'b7d8c89801d73f6b304b15cb3a1fb053be6c10a3', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && h("span", { key: 'fbfc7e95fae3d2f695af8e966d50c36eaddf83ff', class: "required" }, "* "))), h("div", { key: '50b2e6a4edb17507bcbed66ddb262b5816eeea98', class: "cura-input-field", part: "cura-input-field", style: this.styles }, this.renderIcon(), h("input", { key: 'e0fb2fe18ca4555b15396bc794dc553273f06921', name: this.name ? this.name : '', type: this.type, onKeyDown: event => this.handleKeyDown(event), onBlur: this.handleInputBlur.bind(this), onFocus: this.handleInputFocus.bind(this), onInput: event => this.handleInputChange(event), class: this.getClasses(), style: this.styles, placeholder: this.placeholder, disabled: this.disabled || this.isLoading, required: this.required, readonly: this.readOnly, maxlength: this.maxlength, value: this.value !== undefined && this.value !== null ? this.value : '', inputmode: this.maskPreset ? 'tel' : this.inputMode, ref: ref => (this.inputRef = ref) }), !!this.clearIcon && !this.readOnly && !this.isLoading && !this.disabled && this.value && this.isFocused && (h("cura-icon", { key: 'dde6d704a5fa3aac4bfa2428b636fc7e19301ace', size: this.size === 'large' || this.mode === 'transparent' ? 20 : 16, color: "primary-base", name: "closeCircle", iconset: "default", class: "clear-button", onClick: () => this.handleClearInput() })), this.isLoading && h("cura-loader-circle", { key: '9322c8e784058c1e0880b3d248c5f1272a1518c4', size: this.size === 'large' ? 'medium' : 'small', color: "primary-base" })), this.renderHelperText()))));
+        return (h(Host, { key: '2f2f783ecef425e66a87f01ee01da880de719a39' }, h("div", { key: '1d9045829f1c0d651c72b79d76e02e2c46061dac', style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-input-group': true }, this.getClasses()) }, h("div", { key: '812f545947d26244ef7bef0dfbbdf4ddc48b1553', class: "input-wrapper" }, this.label && (h("cura-label", { key: '620aa3fb370e1cc80462c55f1b39418030cbed7d', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && h("span", { key: 'fc0dc595d953c8360acc2277d8744dcf868a59b3', class: "required" }, "* "))), h("div", { key: 'fcb2acfb37815c5beb2c1b96ae22a3854b370e15', class: "cura-input-field", part: "cura-input-field", style: this.styles }, this.renderIcon(), h("input", { key: '4cd76e5b8cf323f43de0169631cbb168a0eaa954', name: this.name ? this.name : '', type: this.type, onKeyDown: event => this.handleKeyDown(event), onBlur: this.handleInputBlur.bind(this), onFocus: this.handleInputFocus.bind(this), onInput: event => this.handleInputChange(event), class: this.getClasses(), style: this.styles, placeholder: this.placeholder, disabled: this.disabled || this.isLoading, required: this.required, readonly: this.readOnly, maxlength: this.maxlength, value: this.value !== undefined && this.value !== null ? this.value : '', inputmode: this.maskPreset ? 'tel' : this.inputMode, ref: ref => (this.inputRef = ref) }), !!this.clearIcon && !this.readOnly && !this.isLoading && !this.disabled && this.value && this.isFocused && (h("cura-icon", { key: '0832143a6aea10d7a07cf281e66e48762c9df30d', size: this.size === 'large' || this.mode === 'transparent' ? 20 : 16, color: "primary-base", name: "closeCircle", iconset: "default", class: "clear-button", onClick: () => this.handleClearInput() })), this.isLoading && h("cura-loader-circle", { key: 'a2eebd7fdeb47ca19b3a3be6f379bd27a77292ca', size: this.size === 'large' ? 'medium' : 'small', color: "primary-base" })), this.renderHelperText()))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {