@rededor/cura 1.5.0-alpha.1 → 1.5.0

package/dist/cjs/{cura-accordion_13.cjs.entry.js → cura-accordion_12.cjs.entry.js}

@@ -230,7 +230,7 @@ const CuraButton = class {
     render() {
         const symbolColor = this.getSymbolColor();
         const labelSize = curaButton_definitions.labelSizes[this.size] || curaButton_definitions.labelSizes["default"];
-        return (index.h(index.Host, { key: '07b87d98fb398bc2897e666dc8cd54734f20734d' }, this.href ? (index.h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("span", { class: "button-container" }, this.getIcon(), index.h("cura-label", { class: "label", size: labelSize, lineHeight: '105%', color: symbolColor }, index.h("slot", null))), index.h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (index.h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, index.h("span", { class: "button-container" }, this.getIcon(), index.h("cura-label", { class: "label", size: labelSize, lineHeight: '105%', color: symbolColor }, index.h("slot", null))), index.h("cura-loader-circle", { size: this.size, color: symbolColor })))));
+        return (index.h(index.Host, { key: '07b87d98fb398bc2897e666dc8cd54734f20734d' }, this.href ? (index.h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("span", { class: "button-container" }, this.getIcon(), index.h("cura-label", { class: "label", size: labelSize, lineHeight: 'normal', color: symbolColor }, index.h("slot", null))), index.h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (index.h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, index.h("span", { class: "button-container" }, this.getIcon(), index.h("cura-label", { class: "label", size: labelSize, lineHeight: 'normal', color: symbolColor }, index.h("slot", null))), index.h("cura-loader-circle", { size: this.size, color: symbolColor })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -4229,6 +4229,8 @@ const CuraInputText = class {
         }
     }
     initializeAdvancedMask() {
+        if (!this.inputRef)
+            return;
         try {
             const config = typeof this.maskAdvanced === 'string' ? JSON.parse(this.maskAdvanced) : this.maskAdvanced;
             this.maskedInput = IMask(this.inputRef, config);
@@ -4299,7 +4301,7 @@ const CuraInputText = class {
             e.preventDefault();
     }
     render() {
-        return (index.h(index.Host, { key: '7e2ba6e0ecae174b2ecc2592264d2d836b4ec63f' }, index.h("div", { key: '0ed1e0e943b1b9b14c09f4b5a3f7bbe7211205c4', style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-input-group': true }, this.getClasses()) }, index.h("div", { key: '5eb22b6c40ada7afb122d49fc997c661848edd7d', class: "input-wrapper" }, this.label && (index.h("cura-label", { key: '3d1b76bae46fe021dcd4b8ccd6dba663b0d97f91', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && index.h("span", { key: 'debbb27cc068069717077a2437ca239e700d688d', class: "required" }, "* "))), index.h("div", { key: '5a4884cfefd1218a625f77e640a5b372c5b453ad', class: "cura-input-field", part: "cura-input-field", style: this.styles }, this.renderIcon(), index.h("input", { key: '8ee9aa8d28c522a22b1b10701569bfe1029ad64a', 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), autocomplete: this.autocomplete }), !!this.clearIcon && !this.readOnly && !this.isLoading && !this.disabled && this.value && this.isFocused && (index.h("cura-icon", { key: 'f4839d9819657d2599c9d68b947624fd543fef36', size: this.size === 'large' || this.mode === 'transparent' ? 20 : 16, color: "primary-base", name: "closeCircle", iconset: "default", class: "clear-button", onClick: () => this.handleClearInput() })), this.isLoading && index.h("cura-loader-circle", { key: '017c815c741c8113d9992ba3eefdda740f2a885d', size: this.size === 'large' ? 'medium' : 'small', color: "primary-base" })), this.renderHelperText()))));
+        return (index.h(index.Host, { key: '0aebf7d545af0e2eec1f542e5545ef34d0356e33' }, index.h("div", { key: '22e428a2706273d1613e39f860a721a73cab6d03', style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-input-group': true }, this.getClasses()) }, index.h("div", { key: '8ef0bc3f5bf3427abdbd247a8c78b722eaaca541', class: "input-wrapper" }, this.label && (index.h("cura-label", { key: '4aef20d0c2880ed38c1821e2690829a31fe7fea8', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && index.h("span", { key: 'a3bb15165ae1ffedae59a32a1e299c9a36ad9b2c', class: "required" }, "* "))), index.h("div", { key: '0b12a41f21a4c26273390dd15f362a5baccb0f2d', class: "cura-input-field", part: "cura-input-field", style: this.styles }, this.renderIcon(), index.h("input", { key: 'da03ef422267592fa3c732cb553e16fd1209bdf0', 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), autocomplete: this.autocomplete }), !!this.clearIcon && !this.readOnly && !this.isLoading && !this.disabled && this.value && this.isFocused && (index.h("cura-icon", { key: '7d46e420487a37b6fa90d93b25ba8d84d9197e43', size: this.size === 'large' || this.mode === 'transparent' ? 20 : 16, color: "primary-base", name: "closeCircle", iconset: "default", class: "clear-button", onClick: () => this.handleClearInput() })), this.isLoading && index.h("cura-loader-circle", { key: '2ecef2f802b1807f214a9ca72099b690189898fd', size: this.size === 'large' ? 'medium' : 'small', color: "primary-base" })), this.renderHelperText()))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -4404,70 +4406,6 @@ const CuraLoaderCircle = class {
 };
 CuraLoaderCircle.style = CuraLoaderCircleStyle0;
 
-const curaModalCss = ":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn 0.3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}.backdrop{background-color:var(--background-color);z-index:calc(var(--zIndex) - 10);animation:fadeIn 0.3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-white);border:2px solid var(--neutral-light);border-radius:calc(var(--base-spacing) * 3px);width:700px;max-width:600px;min-width:200px;padding:0px calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px);z-index:var(--zIndex);box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));transform:scale(0.95);transition:transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease}.wrapper ::slotted(*){max-height:80vh;overflow:auto;padding-right:calc(var(--base-spacing) * 5px)}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:calc(var(--base-spacing) * 4px);background:none;border:none;cursor:pointer}.close.mobile{display:none}.close.desktop{display:flex}@media (max-width: 768px){.wrapper{position:fixed;bottom:0px;width:80%;padding-top:calc(var(--base-spacing) * 4px);padding-bottom:0px;border-radius:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0px 0px;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:calc(var(--base-spacing) * 4px);padding:calc(var(--base-spacing) * 4px) 0px;justify-content:center;width:100%}.close.mobile{display:flex;gap:calc(var(--base-spacing) * 2px)}.close.desktop{display:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}";
-const CuraModalStyle0 = curaModalCss;
-
-const CuraModal = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.modalClose = index.createEvent(this, "modalClose", 7);
-        this.handleClose = () => {
-            this.modalClose.emit();
-            this.open = false;
-        };
-        this.open = false;
-        this.background = 'light';
-        this.top = 0;
-        this.bottom = 0;
-        this.left = 0;
-        this.right = 0;
-        this.mobileCloseLabel = 'Fechar';
-        this.zindex = '100';
-        this.styles = {};
-    }
-    setColors() {
-        const backgroundTheme = {
-            dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),
-            light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),
-        };
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--background-color': backgroundTheme[this.background] });
-    }
-    setOffset(name, value) {
-        this.styles = Object.assign(Object.assign({}, this.styles), { [`--${name}-offset`]: `${value}px` });
-    }
-    setTop() {
-        this.setOffset('top', this.top);
-    }
-    setBottom() {
-        this.setOffset('bottom', this.bottom);
-    }
-    setLeft() {
-        this.setOffset('left', this.left);
-    }
-    setRight() {
-        this.setOffset('right', this.right);
-    }
-    connectedCallback() {
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'), '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'), '--base-spacing': window.CuraAPI.theme.spacing.getSpacing() });
-        this.setColors();
-        this.setTop();
-        this.setBottom();
-        this.setLeft();
-        this.setRight();
-    }
-    render() {
-        return (index.h(index.Host, { key: '50f4146aed5392ae16803fb060d4921a5e8a3271', role: "dialog", "aria-modal": "true", style: { '--zIndex': this.zindex } }, index.h("div", { key: '149e99a4b8b479515ed3d67c5c8aea08d4d96d1c', class: this.open ? 'modal container open' : 'modal container', style: this.styles }, index.h("div", { key: 'f32f7f7e16475c51babf95e1ca5f4fea449c1bb0', class: this.open ? 'modal backdrop open' : 'modal backdrop', onClick: this.handleClose }), index.h("div", { key: '183f7ab8f2cee8106795f6104c38a2c93272387f', class: "wrapper" }, index.h("button", { key: '28778c8120c92dfcae0443dccd21f55a204bd82e', class: "close desktop", onClick: this.handleClose }, index.h("cura-icon", { key: 'a847de5c1314ea1460673870334f3f98e98f1cf9', name: "close", color: "error-dark", size: "small" })), index.h("slot", { key: 'e08b556b7232425c2b83a21dac75d30fb4361a83' }), index.h("button", { key: 'e736a95f878ff5a2ad6897d9140fd74b26939445', class: "close mobile", onClick: this.handleClose }, index.h("cura-icon", { key: '9eaeaca6f4ea9d3cde5fd44e108de389c727f991', name: "close", color: "error-dark", size: "16" }), index.h("cura-paragraph", { key: '2476b85e5dd7d6092d3d1d1714ee4a79b73b12d0', color: "error-dark", size: "small", marginBlock: "0" }, this.mobileCloseLabel))))));
-    }
-    static get watchers() { return {
-        "background": ["setColors"],
-        "top": ["setTop"],
-        "bottom": ["setBottom"],
-        "left": ["setLeft"],
-        "right": ["setRight"]
-    }; }
-};
-CuraModal.style = CuraModalStyle0;
-
 const curaPageTemplateCss = ":host{display:block}:host .grid-template{display:grid;grid-template-rows:auto;grid-template-columns:auto;grid-template-areas:\"sub-header\" \"header\" \"pre-content\" \"content-container\" \"post-body\" \"footer\" \"sub-footer\"}:host .grid-template #sub-header{grid-area:sub-header}:host .grid-template #header{grid-area:header}:host .grid-template #pre-content{grid-area:pre-content}:host .grid-template #content-container{grid-area:content-container}:host .grid-template #post-body{grid-area:post-body}:host .grid-template #footer{grid-area:footer}:host .grid-template #sub-footer{grid-area:sub-footer}@media (max-width: 768px){:host .grid-template{padding:0px}}@media (min-width: 769px) and (max-width: 992px){:host .grid-template{padding:0px}}@media (min-width: 993px) and (max-width: 1920px){:host .grid-template{padding:0px}:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 5px)}:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 5px)}:host .grid-template #content-container{display:flex}:host .grid-template #content-container #content{flex-grow:1}:host .grid-template #content-container #sidebar-left,:host .grid-template #content-container #sidebar-right{max-width:20%}}@media (min-width: 1921px){:host .grid-template{padding:0px}:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 7px)}:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 7px)}:host .grid-template #content-container{display:flex}:host .grid-template #content-container #content{flex-grow:1}:host .grid-template #content-container #sidebar-left,:host .grid-template #content-container #sidebar-right{max-width:20%}:host .grid-template #content-container.centered{max-width:1921px;justify-self:center}}";
 const CuraPageTemplateStyle0 = curaPageTemplateCss;
 
@@ -4560,6 +4498,7 @@ const CuraSelect = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.selected = index.createEvent(this, "selected", 7);
+        this.searchTermInput = index.createEvent(this, "searchTermInput", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -4636,10 +4575,12 @@ const CuraSelect = class {
         this.value = '';
         this.mode = 'default';
         this.size = 'medium';
+        this.iconName = undefined;
         this.status = 'default';
         this.disabled = false;
         this.required = false;
         this.searchBehavior = false;
+        this.caseSensitive = true;
         this.isHovered = false;
         this.isFocused = false;
         this.isOpen = false;
@@ -4654,13 +4595,23 @@ const CuraSelect = class {
      * Filters the options based on the current input value.
      */
     filterOptions(newText) {
+        this.searchTermInput.emit(newText);
         if (!this.isOpen || !this.searchBehavior) {
             return;
         }
+        const removeAccents = (str) => {
+            return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+        };
+        let searchTerm = newText;
+        if (!this.caseSensitive) {
+            searchTerm = removeAccents(searchTerm).toLocaleLowerCase();
+        }
         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());
+            let optionValue = option.textContent || '';
+            if (!this.caseSensitive) {
+                optionValue = removeAccents(optionValue === null || optionValue === void 0 ? void 0 : optionValue.toLowerCase());
+            }
+            const isVisible = optionValue.includes(searchTerm);
             option.style.display = isVisible ? 'block' : 'none';
         });
     }
@@ -4838,19 +4789,19 @@ const CuraSelect = class {
      * Renders the icon based on the component's status.
      */
     renderIcon() {
-        if (this.status === 'default')
+        if (this.status === 'default' && !this.iconName)
             return null;
-        const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];
+        const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];
         return index.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 (index.h(index.Host, { key: 'd0433e214411ca390ff69ffbfdc2d8d3f6364b9c', style: this.styles }, index.h("div", { key: 'e644f2ff6f37867ab5d6737f99d772c72fdf17b9', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (index.h("cura-label", { key: '7f382f95d58b6e90b9e7f82ade4d55a4ae74a952', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && index.h("span", { key: 'e782b69050063221f9f8c011c753f03bff1b2fed', class: "required" }, "* "))), index.h("div", { key: 'b9b1c4a4ad3b19bbec7640bbbe7921fc2e2dc2a9', class: {
+        return (index.h(index.Host, { key: 'c4d3b518ddf6b9498e3a038b42d96cc36ea5b9af', style: this.styles }, index.h("div", { key: 'b469ec6460df4faa9dbf33ae46efd25b16e8dede', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (index.h("cura-label", { key: 'b1e96f454e136f74a34d3fe2ad915a76b8892383', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && index.h("span", { key: 'f6df4c9fd66179b157545354c9d7bce3a1965383', class: "required" }, "* "))), index.h("div", { key: '3c99013ba59cbc7520fcd9e54e4911be88e257e8', class: {
                 'cura-input-field': true,
                 'open': this.isOpen,
-            } }, this.renderIcon(), index.h("input", { key: 'f107ce1837c7eb5e2be8e21073bc514861e36de5', 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 }), index.h("button", { key: '2d535a37f67c28eee7a868de1d5fe5297aa91a1d', class: "up-down-button" }, index.h("cura-icon", { key: '9292fb9f72d3c4f67b0cffaafdc3c0cceefb5b07', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), index.h("cura-label", { key: '344572553d1920a66cab43912cae5f24200789c5', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, index.h("slot", { key: 'a2dd9204ad33c6fb2518dca1bfaa18cc51c19d2a' })), this.isOpen && (index.h("div", { key: '73fd79fd3073b0a9a4537e104e9e1721129da480', class: {
+            } }, this.renderIcon(), index.h("input", { key: '5c4cca3aa11ca5a43679551ef0db5d3b4a2672c1', 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 }), index.h("button", { key: '0e4ae1fc33090cb1c2a5f6616302262093c709f3', class: "up-down-button" }, index.h("cura-icon", { key: '7aa46c48d670725d6010e00ff74772dd76f04358', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), index.h("cura-label", { key: 'b37bbce2d092b368509778cb39e830fbfba40107', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, index.h("slot", { key: 'b8090f03acc7d34e75088cdd8b7f375b2be21aaf' })), this.isOpen && (index.h("div", { key: '4d279e833a3c4311972b11c259d616b7480fc5b5', class: {
                 menu: true,
                 open: this.isOpen,
-            } }, index.h("slot", { key: 'dfd5a1f698dddeab8efec68beb5ff038024571dd', name: "option" }))))));
+            } }, index.h("slot", { key: '0c20c0bbfb9ed727825bb6cc7e06ab671350d37b', name: "option" }))))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }
@@ -4917,10 +4868,9 @@ exports.cura_icon = CuraIcon;
 exports.cura_input_text = CuraInputText;
 exports.cura_label = CuraLabel;
 exports.cura_loader_circle = CuraLoaderCircle;
-exports.cura_modal = CuraModal;
 exports.cura_page_template = CuraPageTemplate;
 exports.cura_paragraph = CuraParagraph;
 exports.cura_select = CuraSelect;
 exports.cura_select_option = CuraSelectOption;
 
-//# sourceMappingURL=cura-accordion_13.cjs.entry.js.map
+//# sourceMappingURL=cura-accordion_12.cjs.entry.js.map