npm - @rededor/cura - Versions diffs - 1.0.0 → 1.2.0-alpha.0 - Mend

@rededor/cura 1.0.0 → 1.2.0-alpha.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 (332) hide show

package/dist/esm/cura-card.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-1ad98520.js';
+import { r as registerInstance, h, H as Host } from './index-747aad85.js';
 const curaCardCss = ":host{display:block;box-sizing:border-box;font-size:var(--font-size);font-family:var(--font-family)}:host ::slotted(*){display:flex;align-items:center;justify-content:center;font-size:var(--font-size);font-family:var(--font-family)}a{display:block;text-decoration:none !important;color:inherit}.solid{background-color:var(--neutral-purewhite);border:2px solid var(--neutral-base);border-radius:12px;overflow:hidden;padding:0px;box-shadow:none}.solid ::slotted(*){border-radius:0}.solid.hasPadding{padding:20px}.solid.hasPadding ::slotted(*){border-radius:4px !important}.solid.hasShadow{border:2px solid var(--neutral-base);box-shadow:0px 1px 4px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16))}.solid.cardLink{background-color:var(--neutral-purewhite);border:2px solid var(--primary-base);border-radius:12px;padding:0px;box-shadow:none;cursor:pointer}.solid.cardLink ::slotted(*){border-radius:0px}.solid.cardLink:hover{border:2px solid var(--primary-lighter) !important}.solid.cardLink.hasPadding{padding:20px}.solid.cardLink.hasPadding ::slotted(*){border-radius:4px !important}.solid.cardLink.hasPadding:hover{border:2px solid var(--primary-lighter) !important}.solid.cardLink.hasShadow{border:2px solid var(--primary-base);box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16))}.solid.cardLink:not(.hasPadding).hasShadow ::slotted(*){border-radius:12px !important}.solid.cardLink.dark{background-color:var(--neutral-purewhite);border:2px solid var(--neutral-purewhite)}.solid.cardLink.dark:hover{border:2px solid var(--primary-lighter)}.transparent{background-color:transparent;border:0;border-radius:12px;padding:0px;overflow:hidden}.transparent ::slotted(*){border-radius:12px}.transparent.hasPadding{padding:20px}.transparent.hasPadding ::slotted(*){border-radius:4px}.transparent.cardLink{background-color:transparent;border:2px solid var(--primary-base);overflow:hidden;border-radius:12px;padding:0px;box-shadow:none}.transparent.cardLink ::slotted(*){border-radius:0px !important}.transparent.cardLink:hover{border:2px solid var(--primary-lighter) !important}.transparent.cardLink.light{background-color:var(--neutral-purewhite);border:2px solid var(--primary-base)}.transparent.cardLink.light ::slotted(*){border-radius:12px !important}.transparent.cardLink.light:hover{border-color:var(--primary-lighter) !important}.transparent.cardLink.dark{background-color:transparent;border:2px solid var(--neutral-purewhite)}.transparent.cardLink.dark:hover{border:0}.transparent.cardLink.hasPadding{padding:20px}.transparent.cardLink.hasPadding ::slotted(*){border-radius:4px !important}";
 const CuraCardStyle0 = curaCardCss;
@@ -39,7 +39,7 @@ const CuraCard = class {
         return classes;
     }
     render() {
-        return (h(Host, { key: '24318e0e70d7a9cb1cbdfa3503b2fa5bce791c00', role: this.href ? 'link' : 'div' }, this.href ? (h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, h("slot", null))) : (h("div", { class: this.getClasses(), style: this.styles }, h("slot", null)))));
+        return (h(Host, { key: 'db1a13cfe3bb925300e65641e1d45fade5a03f52', role: this.href ? 'link' : 'div' }, this.href ? (h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, h("slot", null))) : (h("div", { class: this.getClasses(), style: this.styles }, h("slot", null)))));
     }
 };
 CuraCard.style = CuraCardStyle0;

package/dist/esm/cura-checkbox.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1ad98520.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-747aad85.js';
 import { f as formsSizes } from './cura-forms.definitions-2f963167.js';
-const curaCheckboxCss = "@charset \"UTF-8\";:host{display:block;width:fit-content;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap)}.position.container{flex-direction:row}.position .label-wrapper{justify-content:end}.position .message{text-align:right}.position .label{order:1}.info{display:flex;flex-direction:column}.label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}.control{width:fit-content;cursor:pointer;position:relative}.checkbox{appearance:none;border:2px solid var(--neutral-base-neutral-medium);border-radius:4px;background:var(--neutral-black-neutral-purewhite);flex:1 0;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-sizing:border-box;width:var(--size);height:var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:flex;opacity:0;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--neutral-darker-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--neutral-base-neutral-white);background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--neutral-darker-neutral-base) !important}.checked .checkbox,.indeterminate .checkbox{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover,.indeterminate .checkbox:hover{border-color:var(--color-light) !important;background:var(--color-lighter)}.checked .icon,.indeterminate .icon{opacity:1}:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover{border-color:var(--neutral-purewhite-neutral-dark)}.success.dark .checkbox{background:var(--neutral-black)}.success .checkbox{border-color:var(--success-base);background:var(--success-lighter)}.success .checkbox:hover{border-color:var(--success-base) !important}.success.checked .checkbox{border-color:var(--success-dark-base);background:var(--success-base-lighter)}.success.checked .checkbox:hover{border-color:var(--success-dark-base)}.error.dark .checkbox{background:var(--neutral-black)}.error .checkbox{border-color:var(--error-base);background:var(--error-lighter)}.error .checkbox:hover{border-color:var(--error-base) !important}.error.checked .checkbox{border-color:var(--error-dark-base);background:var(--error-base-lighter)}.error.checked .checkbox:hover{border-color:var(--error-dark-base)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}";
+const curaCheckboxCss = "@charset \"UTF-8\";:host{display:block;width:fit-content;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap)}.position.container{flex-direction:row}.position .label-wrapper{justify-content:end}.position .message{text-align:right}.position .label{order:1}.info{display:flex;flex-direction:column}.label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}.control{width:fit-content;cursor:pointer;position:relative}.checkbox{appearance:none;border:2px solid var(--neutral-base-neutral-medium);border-radius:4px;background:var(--neutral-black-neutral-purewhite);flex:1 0;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-sizing:border-box;width:var(--size);height:var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:flex;opacity:0;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--neutral-darker-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--neutral-base-neutral-white);background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--neutral-darker-neutral-base) !important}.checked .checkbox{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover{border-color:var(--color-base) !important;background:var(--color-light)}.indeterminate .checkbox{border-color:var(--color-base);background:var(--color-light)}.indeterminate .checkbox:hover{border-color:var(--color-dark) !important;background:var(--color-base)}.checked .icon,.indeterminate .icon{opacity:1}:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover{border-color:var(--neutral-purewhite-neutral-dark)}.success.dark .checkbox{background:var(--neutral-black)}.success .checkbox{border-color:var(--success-base);background:var(--success-lighter)}.success .checkbox:hover{border-color:var(--success-base) !important}.success.checked .checkbox{border-color:var(--success-dark-base);background:var(--success-base-lighter)}.success.checked .checkbox:hover{border-color:var(--success-dark-base)}.error.dark .checkbox{background:var(--neutral-black)}.error .checkbox{border-color:var(--error-base);background:var(--error-lighter)}.error .checkbox:hover{border-color:var(--error-base) !important}.error.checked .checkbox{border-color:var(--error-dark-base);background:var(--error-base-lighter)}.error.checked .checkbox:hover{border-color:var(--error-dark-base)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}";
 const CuraCheckboxStyle0 = curaCheckboxCss;
 const CuraCheckbox = class {
@@ -160,7 +160,7 @@ const CuraCheckbox = class {
         return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (h(Host, { key: 'd24019856ac701df4acbe1f7e104df67eae93945' }, h("div", { key: '413093861acf19223c65aae30bd5cd62053eec43', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '5ba8881480f1ef8692cde13258246175ac52f3c8', class: "info" }, h("div", { key: 'e3473b617a9261dfacea2c2b8bd826b87a739c6b', class: "label-wrapper" }, h("cura-label", { key: '2a4b7c973795a23b123c250259d95df63796f53c', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '093a39a051be67644f6206095686cda606a3c9f5', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '8fe9215b5a56a1cf7f10871e721c1b04cd88d37f', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '5633213ce05d2f554a2acc9804d5306436eaac45' }))), h("div", { key: '5ff152af172d4a8cb0e83e2e50ec8fa6449ef9e4', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: 'f62a404773c19fedfd236aa82ecd8582fdfd4c36', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (h(Host, { key: 'a346ec6f3d5a982471ac922982af7f9dbee14865' }, h("div", { key: '5786471ce3a9c1e116411f14b22d8bc5d7d39dce', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '18d6646e969d7f78acba9deab9eb644de2df7011', class: "info" }, h("div", { key: 'fa29dbdfcd215a83aff824cb5d23d15b8f93313f', class: "label-wrapper" }, h("cura-label", { key: 'db7c96cc88553166b78e70f0c773fde12d54fc40', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '408383422b9cdf45fe7cbfb51f7ea06ae3d1a260', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '4af49958c61ddc4e79b719ff03179e6003eee93c', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '649bbc456157e103eb55c199857158d37c8b7b16' }))), h("div", { key: 'b0abfc17ee08f13ad82e4c22ea8f90d980893274', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: 'fba5fbe2853e340cc30ffe8d663f62b874cd1877', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }

package/dist/esm/cura-checkbox.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cura-checkbox.entry.js","mappings":"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","names":[],"sources":["src/components/forms/cura-checkbox/cura-checkbox.scss?tag=cura-checkbox&encapsulation=shadow","src/components/forms/cura-checkbox/cura-checkbox.tsx"],"sourcesContent":[":host {\n display: block;\n width: fit-content;\n box-sizing: border-box;\n}\n\n/* Container e Layout /\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--gap);\n}\n\n.position {\n &.container {\n flex-direction: row;\n }\n\n .label-wrapper {\n justify-content: end;\n }\n\n .message {\n text-align: right;\n }\n\n .label {\n order: 1;\n }\n}\n\n.info {\n display: flex;\n flex-direction: column;\n}\n\n.label-wrapper {\n display: flex;\n justify-content: start;\n align-items: center;\n gap: 5px;\n}\n\n/ Control e Checkbox /\n.control {\n width: fit-content;\n cursor: pointer;\n position: relative;\n}\n\n.checkbox {\n appearance: none;\n border: 2px solid var(--neutral-base-neutral-medium);\n border-radius: 4px;\n background: var(--neutral-black-neutral-purewhite);\n flex: 1 0;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n cursor: pointer;\n box-sizing: border-box;\n width: var(--size);\n height: var(--size);\n flex: 0 0 var(--size);\n}\n\n.icon {\n position: absolute;\n display: flex;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n/ Estados de Foco /\n.checkbox:focus {\n border-color: var(--info-base) !important;\n}\n\n/ Estado Disabled /\n.disabled .checkbox {\n background: var(--neutral-black-neutral-white);\n border-color: var(--neutral-darker-neutral-base);\n cursor: not-allowed;\n\n &:hover {\n border-color: var(--neutral-darker-neutral-base) !important;\n }\n}\n\n.disabled.checked .checkbox,\n.disabled.indeterminate .checkbox {\n background: var(--neutral-black-neutral-white);\n border-color: var(--neutral-darker-neutral-base);\n\n &:hover {\n border-color: var(--neutral-base-neutral-white);\n background: var(--primary-base-neutral-white);\n }\n}\n\n.disabled .checkbox:focus {\n border-color: var(--neutral-darker-neutral-base) !important;\n}\n\n/ Estado Checked /\n.checked .checkbox,\n.indeterminate .checkbox {\n border-color: var(--color-dark);\n background: var(--color-base);\n\n &:hover {\n border-color: var(--color-light) !important;\n background: var(--color-lighter);\n }\n}\n\n.checked .icon,\n.indeterminate .icon {\n opacity: 1;\n}\n\n/ Hover para não disabled, default, checked, indeterminate /\n:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {\n border-color: var(--neutral-purewhite-neutral-dark);\n}\n\n/ Estado Success /\n\n.success.dark .checkbox {\n background: var(--neutral-black) ;\n}\n\n.success .checkbox {\n border-color: var(--success-base);\n background: var(--success-lighter);\n\n &:hover {\n border-color: var(--success-base) !important;\n }\n}\n\n.success.checked .checkbox {\n border-color: var(--success-dark-base);\n background: var(--success-base-lighter);\n\n &:hover {\n border-color: var(--success-dark-base);\n }\n}\n\n/ Estado Error /\n\n.error.dark .checkbox {\n background: var(--neutral-black) ;\n}\n\n.error .checkbox {\n border-color: var(--error-base);\n background: var(--error-lighter);\n\n &:hover {\n border-color: var(--error-base) !important;\n }\n}\n\n.error.checked .checkbox {\n border-color: var(--error-dark-base);\n background: var(--error-base-lighter);\n\n &:hover {\n border-color: var(--error-dark-base);\n }\n}\n\n/ Input /\ninput {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n","import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-checkbox',\n styleUrl: 'cura-checkbox.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraCheckbox {\n /\n Reflects the checked state of the checkbox.\n * Mutable property allowing state change.\n /\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /\n Reflects the indeterminate state of the checkbox.\n * Mutable property allowing state change.\n /\n @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n /\n Status of the checkbox.\n * Can be 'error', 'success', or 'default'.\n /\n @Prop({ reflect: true, mutable: true }) status: 'error' \| 'success' \| 'default' = 'default';\n /\n Reflects the disabled state of the checkbox.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n /\n Reflects the required state of the checkbox.\n /\n @Prop({ reflect: true }) required: boolean = false;\n /\n Text label associated with the checkbox.\n /\n @Prop({ reflect: true }) label: string;\n /\n Specifies the tabindex of the checkbox.\n /\n @Prop({ reflect: true }) ontabindex: number = 0;\n /\n Position of the label relative to the checkbox.\n * Can be 'left' or 'right'.\n /\n @Prop({ reflect: true }) position: 'left' \| 'right' = 'left';\n /\n Value associated with the checkbox.\n /\n @Prop({ reflect: true }) value: string;\n /\n Name attribute of the checkbox.\n /\n @Prop({ reflect: true }) name: string;\n /\n Size of the checkbox.\n * Can be 'small', 'medium', or 'large'.\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n /\n Background theme of the checkbox.\n * Can be 'dark' or 'light'.\n /\n @Prop() background: 'dark' \| 'light' = 'light';\n /\n iconColor theme of the checkbox.\n * Can be 'dark' or 'light'.\n /\n @Prop() iconColor: 'dark' \| 'light' = 'dark';\n /\n Color theme of the checkbox.\n /\n @Prop() color = 'accent';\n\n @State() styles = {};\n\n @Element() host: HTMLElement;\n\n @Event() onchange: EventEmitter<{ value: string; checked: boolean; indeterminate: boolean }>;\n\n @AttachInternals() internals: ElementInternals;\n\n isDarkBackground = () => this.background === 'dark';\n\n isDarkIconColor = () => this.iconColor === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`,\n };\n }\n\n /\n Watches changes in color and background properties to update styles.\n /\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--color-base', background: `${this.color}-base` },\n { name: '--color-lighter', background: `${this.color}-lighter` },\n { name: '--color-light', background: `${this.color}-light` },\n { name: '--color-dark', background: `${this.color}-dark` },\n { name: '--info-base', background: 'info-base' },\n { name: '--error-base', background: 'error-base' },\n { name: '--success-lighter', background: 'success-lighter' },\n { name: '--success-base', background: 'success-base' },\n { name: '--success-dark', background: 'success-dark' },\n { name: '--error-lighter', background: 'error-lighter' },\n { name: '--neutral-black', background: 'neutral-black' },\n { name: '--primary-base-neutral-white', background: this.isDarkBackground() ? 'primary-base' : 'neutral-white' },\n { name: '--neutral-base-neutral-medium', background: this.isDarkBackground() ? 'neutral-base' : 'neutral-medium' },\n { name: '--neutral-black-neutral-purewhite', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-purewhite' },\n { name: '--neutral-black-neutral-white', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-white' },\n { name: '--neutral-darker-neutral-base', background: this.isDarkBackground() ? 'neutral-darker' : 'neutral-base' },\n { name: '--neutral-base-neutral-base', background: this.isDarkBackground() ? 'primary-base' : 'neutral-base' },\n { name: '--neutral-purewhite-neutral-dark', background: this.isDarkBackground() ? 'neutral-purewhite' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkBackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--success-base-lighter', background: this.isDarkBackground() ? 'success-base' : 'success-lighter' },\n { name: '--success-dark-base', background: this.isDarkBackground() ? 'success-dark' : 'success-base' },\n { name: '--error-base-lighter', background: this.isDarkBackground() ? 'error-base' : 'error-lighter' },\n { name: '--error-dark-base', background: this.isDarkBackground() ? 'error-dark' : 'error-base' },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\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; checked: boolean; indeterminate: boolean }) {\n this.value = state.value;\n this.checked = state.checked;\n this.indeterminate = state.indeterminate;\n this.internals.setFormValue(this.value);\n }\n\n /\n Callback to reset the switch state when the form is reset.\n /\n formResetCallback() {\n this.value = '';\n this.checked = false;\n this.indeterminate = false;\n this.internals.setValidity({});\n this.internals.setFormValue(this.value);\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 handleClick = () => {\n if (this.disabled) return;\n\n this.indeterminate = false;\n this.checked = !this.checked;\n this.internals.setFormValue(this.value);\n this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });\n };\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes[this.background] = true;\n classes['indeterminate'] = this.indeterminate;\n classes['position'] = this.position === 'right';\n classes[this.status] = true;\n\n return classes;\n }\n\n /\n Assigns color based on status and background theme.\n * @param defaultColor Default color.\n /\n @Watch('background')\n @Watch('iconColor')\n assignColor(type: 'icon' \| 'label' \| 'message') {\n if (this.disabled) return this.isDarkBackground() ? 'neutral-dark' : 'neutral-dark';\n\n const statusColors = {\n success: {\n icon: 'success-dark',\n label: this.isDarkBackground() ? 'success-lighter' : 'success-darker',\n message: this.isDarkBackground() ? 'success-base' : 'success-dark',\n },\n error: {\n icon: 'error-dark',\n label: this.isDarkBackground() ? 'error-lighter' : 'neutral-darker',\n message: this.isDarkBackground() ? 'error-base' : 'error-dark',\n },\n default: {\n icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',\n label: this.isDarkBackground() ? 'neutral-white' : 'neutral-black',\n message: this.isDarkBackground() ? 'primary-lighter' : 'neutral-dark',\n },\n };\n\n return statusColors[this.status][type];\n }\n\n /\n Retrieves icon element based on checkbox state.\n /\n getIcon() {\n const iconName = this.indeterminate ? 'minus' : 'check';\n const iconColor = this.assignColor('icon');\n const iconSize = this.size === 'large' ? 20 : 'micro';\n\n return <cura-icon class=\"icon\" name={iconName} size={iconSize} color={iconColor}></cura-icon>;\n }\n\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles} onClick={this.handleClick}>\n <div class=\"info\">\n <div class=\"label-wrapper\">\n <cura-label class=\"label\" weight='bold' size={this.size === 'large' ? 'medium' : 'xsmall'} color={this.assignColor('label')}>\n {this.label}\n </cura-label>\n {this.required && <cura-paragraph lineHeight='0%' marginBlock='0' color=\"error-base\" > </cura-paragraph>}\n </div>\n <cura-label color={this.assignColor('message')} size=\"xsmall\" class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n <div class={'checkbox'} tabIndex={this.ontabindex}>\n <input\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n required={this.required}\n checked={this.checked}\n indeterminate={this.indeterminate}\n />\n {this.getIcon()}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"cura-checkbox.entry.js","mappings":"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","names":[],"sources":["src/components/forms/cura-checkbox/cura-checkbox.scss?tag=cura-checkbox&encapsulation=shadow","src/components/forms/cura-checkbox/cura-checkbox.tsx"],"sourcesContent":[":host {\n display: block;\n width: fit-content;\n box-sizing: border-box;\n}\n\n/* Container e Layout /\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--gap);\n}\n\n.position {\n &.container {\n flex-direction: row;\n }\n\n .label-wrapper {\n justify-content: end;\n }\n\n .message {\n text-align: right;\n }\n\n .label {\n order: 1;\n }\n}\n\n.info {\n display: flex;\n flex-direction: column;\n}\n\n.label-wrapper {\n display: flex;\n justify-content: start;\n align-items: center;\n gap: 5px;\n}\n\n/ Control e Checkbox /\n.control {\n width: fit-content;\n cursor: pointer;\n position: relative;\n}\n\n.checkbox {\n appearance: none;\n border: 2px solid var(--neutral-base-neutral-medium);\n border-radius: 4px;\n background: var(--neutral-black-neutral-purewhite);\n flex: 1 0;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n cursor: pointer;\n box-sizing: border-box;\n width: var(--size);\n height: var(--size);\n flex: 0 0 var(--size);\n}\n\n.icon {\n position: absolute;\n display: flex;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n/ Estados de Foco /\n.checkbox:focus {\n border-color: var(--info-base) !important;\n}\n\n/ Estado Disabled /\n.disabled .checkbox {\n background: var(--neutral-black-neutral-white);\n border-color: var(--neutral-darker-neutral-base);\n cursor: not-allowed;\n\n &:hover {\n border-color: var(--neutral-darker-neutral-base) !important;\n }\n}\n\n.disabled.checked .checkbox,\n.disabled.indeterminate .checkbox {\n background: var(--neutral-black-neutral-white);\n border-color: var(--neutral-darker-neutral-base);\n\n &:hover {\n border-color: var(--neutral-base-neutral-white);\n background: var(--primary-base-neutral-white);\n }\n}\n\n.disabled .checkbox:focus {\n border-color: var(--neutral-darker-neutral-base) !important;\n}\n\n/ Estado Checked /\n.checked .checkbox {\n border-color: var(--color-dark);\n background: var(--color-base);\n\n &:hover {\n border-color: var(--color-base) !important;\n background: var(--color-light);\n }\n}\n\n/ Estado Indeterminate /\n.indeterminate .checkbox {\n border-color: var(--color-base);\n background: var(--color-light);\n\n &:hover {\n border-color: var(--color-dark) !important;\n background: var(--color-base);\n }\n}\n\n.checked .icon,\n.indeterminate .icon {\n opacity: 1;\n}\n\n/ Hover para não disabled, default, checked, indeterminate /\n:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {\n border-color: var(--neutral-purewhite-neutral-dark);\n}\n\n/ Estado Success /\n\n.success.dark .checkbox {\n background: var(--neutral-black) ;\n}\n\n.success .checkbox {\n border-color: var(--success-base);\n background: var(--success-lighter);\n\n &:hover {\n border-color: var(--success-base) !important;\n }\n}\n\n.success.checked .checkbox {\n border-color: var(--success-dark-base);\n background: var(--success-base-lighter);\n\n &:hover {\n border-color: var(--success-dark-base);\n }\n}\n\n/ Estado Error /\n\n.error.dark .checkbox {\n background: var(--neutral-black) ;\n}\n\n.error .checkbox {\n border-color: var(--error-base);\n background: var(--error-lighter);\n\n &:hover {\n border-color: var(--error-base) !important;\n }\n}\n\n.error.checked .checkbox {\n border-color: var(--error-dark-base);\n background: var(--error-base-lighter);\n\n &:hover {\n border-color: var(--error-dark-base);\n }\n}\n\n/ Input /\ninput {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n","import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-checkbox',\n styleUrl: 'cura-checkbox.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraCheckbox {\n /\n Reflects the checked state of the checkbox.\n * Mutable property allowing state change.\n /\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /\n Reflects the indeterminate state of the checkbox.\n * Mutable property allowing state change.\n /\n @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n /\n Status of the checkbox.\n * Can be 'error', 'success', or 'default'.\n /\n @Prop({ reflect: true, mutable: true }) status: 'error' \| 'success' \| 'default' = 'default';\n /\n Reflects the disabled state of the checkbox.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n /\n Reflects the required state of the checkbox.\n /\n @Prop({ reflect: true }) required: boolean = false;\n /\n Text label associated with the checkbox.\n /\n @Prop({ reflect: true }) label: string;\n /\n Specifies the tabindex of the checkbox.\n /\n @Prop({ reflect: true }) ontabindex: number = 0;\n /\n Position of the label relative to the checkbox.\n * Can be 'left' or 'right'.\n /\n @Prop({ reflect: true }) position: 'left' \| 'right' = 'left';\n /\n Value associated with the checkbox.\n /\n @Prop({ reflect: true }) value: string;\n /\n Name attribute of the checkbox.\n /\n @Prop({ reflect: true }) name: string;\n /\n Size of the checkbox.\n * Can be 'small', 'medium', or 'large'.\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n /\n Background theme of the checkbox.\n * Can be 'dark' or 'light'.\n /\n @Prop() background: 'dark' \| 'light' = 'light';\n /\n iconColor theme of the checkbox.\n * Can be 'dark' or 'light'.\n /\n @Prop() iconColor: 'dark' \| 'light' = 'dark';\n /\n Color theme of the checkbox.\n /\n @Prop() color = 'accent';\n\n @State() styles = {};\n\n @Element() host: HTMLElement;\n\n @Event() onchange: EventEmitter<{ value: string; checked: boolean; indeterminate: boolean }>;\n\n @AttachInternals() internals: ElementInternals;\n\n isDarkBackground = () => this.background === 'dark';\n\n isDarkIconColor = () => this.iconColor === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`,\n };\n }\n\n /\n Watches changes in color and background properties to update styles.\n /\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--color-base', background: `${this.color}-base` },\n { name: '--color-lighter', background: `${this.color}-lighter` },\n { name: '--color-light', background: `${this.color}-light` },\n { name: '--color-dark', background: `${this.color}-dark` },\n { name: '--info-base', background: 'info-base' },\n { name: '--error-base', background: 'error-base' },\n { name: '--success-lighter', background: 'success-lighter' },\n { name: '--success-base', background: 'success-base' },\n { name: '--success-dark', background: 'success-dark' },\n { name: '--error-lighter', background: 'error-lighter' },\n { name: '--neutral-black', background: 'neutral-black' },\n { name: '--primary-base-neutral-white', background: this.isDarkBackground() ? 'primary-base' : 'neutral-white' },\n { name: '--neutral-base-neutral-medium', background: this.isDarkBackground() ? 'neutral-base' : 'neutral-medium' },\n { name: '--neutral-black-neutral-purewhite', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-purewhite' },\n { name: '--neutral-black-neutral-white', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-white' },\n { name: '--neutral-darker-neutral-base', background: this.isDarkBackground() ? 'neutral-darker' : 'neutral-base' },\n { name: '--neutral-base-neutral-base', background: this.isDarkBackground() ? 'primary-base' : 'neutral-base' },\n { name: '--neutral-purewhite-neutral-dark', background: this.isDarkBackground() ? 'neutral-purewhite' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkBackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--success-base-lighter', background: this.isDarkBackground() ? 'success-base' : 'success-lighter' },\n { name: '--success-dark-base', background: this.isDarkBackground() ? 'success-dark' : 'success-base' },\n { name: '--error-base-lighter', background: this.isDarkBackground() ? 'error-base' : 'error-lighter' },\n { name: '--error-dark-base', background: this.isDarkBackground() ? 'error-dark' : 'error-base' },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\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; checked: boolean; indeterminate: boolean }) {\n this.value = state.value;\n this.checked = state.checked;\n this.indeterminate = state.indeterminate;\n this.internals.setFormValue(this.value);\n }\n\n /\n Callback to reset the switch state when the form is reset.\n /\n formResetCallback() {\n this.value = '';\n this.checked = false;\n this.indeterminate = false;\n this.internals.setValidity({});\n this.internals.setFormValue(this.value);\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 handleClick = () => {\n if (this.disabled) return;\n\n this.indeterminate = false;\n this.checked = !this.checked;\n this.internals.setFormValue(this.value);\n this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });\n };\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes[this.background] = true;\n classes['indeterminate'] = this.indeterminate;\n classes['position'] = this.position === 'right';\n classes[this.status] = true;\n\n return classes;\n }\n\n /\n Assigns color based on status and background theme.\n * @param defaultColor Default color.\n /\n @Watch('background')\n @Watch('iconColor')\n assignColor(type: 'icon' \| 'label' \| 'message') {\n if (this.disabled) return this.isDarkBackground() ? 'neutral-dark' : 'neutral-dark';\n\n const statusColors = {\n success: {\n icon: 'success-dark',\n label: this.isDarkBackground() ? 'success-lighter' : 'success-darker',\n message: this.isDarkBackground() ? 'success-base' : 'success-dark',\n },\n error: {\n icon: 'error-dark',\n label: this.isDarkBackground() ? 'error-lighter' : 'neutral-darker',\n message: this.isDarkBackground() ? 'error-base' : 'error-dark',\n },\n default: {\n icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',\n label: this.isDarkBackground() ? 'neutral-white' : 'neutral-black',\n message: this.isDarkBackground() ? 'primary-lighter' : 'neutral-dark',\n },\n };\n\n return statusColors[this.status][type];\n }\n\n /\n Retrieves icon element based on checkbox state.\n /\n getIcon() {\n const iconName = this.indeterminate ? 'minus' : 'check';\n const iconColor = this.assignColor('icon');\n const iconSize = this.size === 'large' ? 20 : 'micro';\n\n return <cura-icon class=\"icon\" name={iconName} size={iconSize} color={iconColor}></cura-icon>;\n }\n\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles} onClick={this.handleClick}>\n <div class=\"info\">\n <div class=\"label-wrapper\">\n <cura-label class=\"label\" weight='bold' size={this.size === 'large' ? 'medium' : 'xsmall'} color={this.assignColor('label')}>\n {this.label}\n </cura-label>\n {this.required && <cura-paragraph lineHeight='0%' marginBlock='0' color=\"error-base\" > </cura-paragraph>}\n </div>\n <cura-label color={this.assignColor('message')} size=\"xsmall\" class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n <div class={'checkbox'} tabIndex={this.ontabindex}>\n <input\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n required={this.required}\n checked={this.checked}\n indeterminate={this.indeterminate}\n />\n {this.getIcon()}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/cura-display.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-1ad98520.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-747aad85.js';
 const curaDisplayCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:3em;font-weight:var(--font-weight-bold);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:2.2857142857em;letter-spacing:-1.68px}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:3.429em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:2.8571428571em;letter-spacing:-1.92px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:4.286em;line-height:calc(var(--line-height) + 5%)}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3.5714285714em;letter-spacing:-1.2px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(i),:host ::slotted(em){font-style:italic;font-weight:var(--font-weight-medium)}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
 const CuraDisplayStyle0 = curaDisplayCss;
@@ -65,7 +65,7 @@ const CuraDisplay = class {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: 'ffd8e58f9bf50038554591ec2b191e0488ae0500', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: 'b7f2ed980b7cedd3c9fbd60f14bf8785bb5c26cb', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/cura-dropdown-search-option-title.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-1ad98520.js';
+import { r as registerInstance, h, H as Host } from './index-747aad85.js';
 const curaDropdownSearchOptionTitleCss = ":host{display:block;box-sizing:border-box;width:100%}cura-label{padding:12px 0px;border-bottom:1px solid var(--neutral-light)}";
 const CuraDropdownSearchOptionTitleStyle0 = curaDropdownSearchOptionTitleCss;
@@ -8,7 +8,7 @@ const CuraDropdownSearchOptionTitle = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'b9fbb0edaea7457fad9244d5c032961bd913f170', slot: "dropdown-search-option" }, h("cura-label", { key: 'dbefa340f1001a532c7f2152907b87e5e2e1f0ec', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: '1d03c41d153dc707db82943c77dd96547c98c78a' }))));
+        return (h(Host, { key: '5a6afd8afb971845aeef19cd4ea6fe7586a1fb4e', slot: "dropdown-search-option" }, h("cura-label", { key: '00f5bc78178b6b549eaee21f28dcdb28b539099b', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: '0d858d26544542c8c05686a879a44366318e86ce' }))));
     }
 };
 CuraDropdownSearchOptionTitle.style = CuraDropdownSearchOptionTitleStyle0;

package/dist/esm/cura-dropdown-search-option.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1ad98520.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-747aad85.js';
 const curaDropdownSearchOptionCss = ":host{display:block;box-sizing:border-box;width:100%}:host(:last-of-type) .content-container{border-bottom:none}.option-container{width:100%;display:flex}.option-container:hover:not(.disabled):not(.selected) .content-container{background-color:var(--neutral-white)}.option-container.selected .content-container{background-color:var(--primary-lighter)}.option-container.disabled{cursor:default}.content-container{display:flex;width:100%;box-sizing:border-box;padding:calc(var(--base-spacing) * 2px) calc(var(--base-spacing) * 1px);background-color:var(--neutral-purewhite);border-bottom:1px solid var(--neutral-light)}.content-container ::slotted(div[slot=action]){display:flex;justify-content:end}.option-info{width:100%;display:flex;align-items:center;align-content:center;justify-content:center;gap:calc(var(--base-spacing) * 2px);flex-direction:row;box-sizing:border-box;cursor:pointer}.option-info cura-heading{width:100%;margin-block:0px}.option-info ::slotted(div[slot=image]){min-width:calc(var(--base-spacing) * 8px);display:flex;justify-content:center;align-items:center}";
 const CuraDropdownSearchOptionStyle0 = curaDropdownSearchOptionCss;
@@ -42,12 +42,12 @@ const CuraDropdownSearchOption = class {
         }
     }
     render() {
-        return (h(Host, { key: '957218946adc6611a384d8e86860eb4f8ae50db3', slot: "dropdown-search-option" }, h("div", { key: 'a9b41feb6d72ae97cdeedd9a9aed36e2d6df40fe', style: this.styles, class: {
+        return (h(Host, { key: '3f02c7eb0d499c858c2145a7f63b0d935debaa2e', slot: "dropdown-search-option" }, h("div", { key: '5f9bfdaa8687e3784b7615b05fca16661847df62', style: this.styles, class: {
                 "option-container": true,
                 hovered: this.selectable ? this.hovered : false,
                 selected: this.selected,
                 disabled: !this.selectable
-            } }, h("div", { key: '18994a7e0ad6e2b4ab37ae65edc796e4cdedce43', class: "content-container" }, h("div", { key: '2505977c08bea5d92b3cc33af5c117709120b82b', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: 'bc5ac8b88938f29693b6f9d68ec933e7abc513e4', name: "image" }), h("cura-heading", { key: '81d2b1d1e8b60f26a6e444d18dac0ddfc95b44ea', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'e91fb72dc20136d0a6b56da0d03eaba02327d80d' }))), h("slot", { key: 'f0e24b8548bec4ff52f3fcccd77562ef5548d5f6', name: "action" })))));
+            } }, h("div", { key: '4786ae6abd65c3232f854e2322d8b7b9093d332b', class: "content-container" }, h("div", { key: '5a29f12c98477cb970af13706b95b2f76a45c938', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: '199564385ab97d313235891c55eeff808de24857', name: "image" }), h("cura-heading", { key: 'bfdf99dae80d99bafa1bd30808986ce315cafd5f', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: '711d9843b8196400071b50a50d395d4775bec1f0' }))), h("slot", { key: '1487aac2527eba3511f9653a0d2986aac95e2bad', name: "action" })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/cura-dropdown-search.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1ad98520.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-747aad85.js';
-const curaDropdownSearchCss = ":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown .dropdown-search-list{z-index:1000}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:var(--dropdown-max-height);padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:fixed;top:0;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;gap:4px;padding:12px 8px;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:100%;max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";
+const curaDropdownSearchCss = ":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown .dropdown-search-list{z-index:1000}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:var(--dropdown-max-height);padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:fixed;top:1%;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;gap:4px;padding:12px 8px;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:100%;max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";
 const CuraDropdownSearchStyle0 = curaDropdownSearchCss;
 const CuraDropdownSearch = class {
@@ -9,6 +9,26 @@ const CuraDropdownSearch = class {
         this.valueChanged = createEvent(this, "valueChanged", 7);
         this.onselect = createEvent(this, "onselect", 7);
         this.overlayElement = null;
+        this.adjustInputPosition = () => {
+            window.visualViewport.addEventListener('resize', () => {
+                var _a;
+                const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;
+                const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
+                if (isKeyboardOpen) {
+                    dropdown.style.position = 'absolute';
+                    dropdown.style.bottom = `${window.screen.height - window.innerHeight}px`;
+                }
+                else {
+                    dropdown.style.position = 'fixed';
+                    dropdown.style.bottom = '0';
+                }
+                window.scroll({
+                    top: 0,
+                    left: 0,
+                    behavior: "smooth",
+                });
+            });
+        };
         this.handleSlotChange = () => {
             this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));
             this.addClickListenersToOptions();
@@ -48,6 +68,7 @@ const CuraDropdownSearch = class {
                 }
             }
         };
+        this.size = 'large';
         this.status = 'default';
         this.disabled = false;
         this.name = undefined;
@@ -99,9 +120,11 @@ const CuraDropdownSearch = class {
     }
     componentDidLoad() {
         window.addEventListener('resize', this.handleResize);
+        window.addEventListener('resize', this.adjustInputPosition);
     }
     disconnectedCallback() {
         window.removeEventListener('resize', this.handleResize);
+        window.removeEventListener('resize', this.adjustInputPosition);
     }
     showOverlay() {
         if (!this.overlayElement) {
@@ -134,6 +157,7 @@ const CuraDropdownSearch = class {
         this.updateOptionAttribute('hovered', this.hoveredIndex);
         this.updateOptionAttribute('selected', this.hoveredIndex);
         this.scrollIntoView();
+        this.adjustInputPosition();
     }
     onSelectedOption(index) {
         const selectedOption = this.options[index];
@@ -190,14 +214,14 @@ const CuraDropdownSearch = class {
         return {
             'dropdown-input-search': true,
             'dropdown-open': this.isDropdownOpen,
-            disabled: this.disabled,
+            'disabled': this.disabled,
             [this.status]: true,
         };
     }
     getDropdownClasses() {
         return {
             'dropdown-search-list': true,
-            'visible': this.options.length && this.isDropdownOpen ? true : false
+            'visible': this.options.length && this.isDropdownOpen ? true : false,
         };
     }
     hostCSSProperties() {
@@ -205,11 +229,14 @@ const CuraDropdownSearch = class {
             '--dropdown-max-height': this.dropdownMaxHeight,
         };
     }
+    handleOnFocus() {
+        this.isDropdownOpen = true;
+    }
     render() {
         const isMobileDropdown = this.isMobile && this.isDropdownOpen;
-        return (h(Host, { key: '0332c943d5c4240283d9672d021e611a982fe52e', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: '2f65822008f3f7fae7c55033e3a6d75efa3e8466', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: '28bfa930d8f66007716f586a35c78ebf9086974e', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: '1e1c18de7fca61e6420b175c602865fc5aec5e36', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: '5fc1a11e5491ae15d0cc9f1d9aab32cd69a2d2ba', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => (this.isDropdownOpen = true), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
+        return (h(Host, { key: 'a4defbdfabd6cff5db81d35b43580009256abfa8', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: '0c8db33b0fb93ef7ccb234ea6b61bd63851d4460', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: '47430e63175189b9969f83254b1e92c40f7e0063', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: '932450ba13c8b47ea20fb83e963073243a7f71b7', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: 'af9b7356b90d30a16b142a9249072867b4b79182', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
                 this.handleOnBlur();
-            }, placeholder: this.placeholder, size: "large", onKeyDown: this.handleKeyDown }, h("slot", { key: 'f6ae0aea0d15fded19af9152e68a8de56995497f', name: "helperText" }))), h("div", { key: '1ec396eafe90f062aea392faca54473ba3cc475b', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: 'afc41aa7166145912e163086f6df603dc3e39d51', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
+            }, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, h("slot", { key: '87db405a858148aee63f7338ebcde28afc64c768', name: "helperText" }))), h("div", { key: '90f39c78512853a0c430f5947705b494093ba8e3', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: 'decb45f75adfd4af1f1102778c39d8f4e4a94bfa', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/cura-dropdown-search.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cura-dropdown-search.entry.js","mappings":"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","names":[],"sources":["src/components/forms/cura-dropdown-search/cura-dropdown-search.scss?tag=cura-dropdown-search&encapsulation=shadow","src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"sourcesContent":["@import '../../../scss/mixins/shadows.scss';\n\n:host {\n display: block;\n width: 100%;\n box-sizing: border-box;\n}\n\n.dropdown {\n display: flex;\n position: relative;\n\n flex-direction: column;\n width: inherit;\n\n .dropdown-search-list {\n z-index: 1000;\n }\n\n &-input-search {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: transparent;\n\n\n &.dropdown-open {\n ::part(cura-input-field) {\n border-radius: 4px 4px 0px 0px;\n }\n ::slotted([slot='helperText']) {\n display: none;\n }\n\n cura-input-text {\n ::slotted([slot='helperText']) {\n display: none;\n }\n }\n }\n }\n\n &-search-list {\n position: absolute;\n top: calc(100% - 8px);\n width: 100%;\n max-height: var(--dropdown-max-height);\n padding: 12px 12px;\n margin: 0;\n box-sizing: border-box;\n @include shadow-level3(--neutral-black-shadow);\n border-radius: 0px 0px 4px 4px;\n border-top: 0 var(--neutral-light);\n border-right: 2px solid var(--neutral-light);\n border-bottom: 2px solid var(--neutral-light);\n border-left: 2px solid var(--neutral-light);\n background-color: var(--neutral-purewhite);\n list-style: none;\n overflow-y: auto;\n display: none;\n\n &.visible {\n display: block;\n }\n\n &-input-search {\n width: inherit;\n\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 16px 8px;\n border-bottom: 2px solid var(--info-base);\n background-color: var(--neutral-purewhite);\n\n cura-input-text {\n width: inherit;\n }\n\n &.error {\n background-color: var(--error-lighter);\n border-bottom: 2px solid var(--error-dark);\n }\n }\n }\n\n &-mobile {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n\n z-index: 10000;\n .dropdown-input-search {\n display: flex;\n gap: 4px;\n padding: 12px 8px;\n background-color: var(--neutral-purewhite);\n border-bottom: 2px solid var(--info-base);\n z-index: 10000;\n cura-button-transparent {\n display: flex;\n }\n &.error {\n background-color: var(--error-lighter);\n border-bottom: 2px solid var(--error-dark);\n }\n &.dropdown-open {\n display: flex;\n\n ::slotted([slot='helperText']) {\n display: block;\n }\n }\n }\n .dropdown-search-list {\n position: static;\n width: 100%;\n height: 100%;\n max-height: none;\n padding: 12px 12px;\n margin: 0;\n box-sizing: border-box;\n box-shadow: none;\n border: none;\n background-color: var(--neutral-purewhite);\n list-style: none;\n overflow-y: auto;\n z-index: 10000;\n }\n }\n}\n","import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search',\n styleUrl: 'cura-dropdown-search.scss',\n shadow: true,\n})\nexport class CuraDropdownSearch {\n /*\n Define the status of the dropdown search.\n /\n @Prop({ reflect: true }) status: '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 The name of the dropdown search component.\n /\n @Prop({ reflect: true }) name: string;\n\n /\n Indicates if the dropdown search is required.\n /\n @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n /\n Indicates if the dropdown search is selected.\n /\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /\n The value of the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n The placeholder text for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n /\n The label for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) label: string = '';\n\n /\n Custom icon name. Default: search.\n /\n @Prop({reflect: true}) iconName = 'search';\n\n /\n CSS max-height property for dropdown item.\n * Default to 630px\n /\n @Prop({reflect: true}) dropdownMaxHeight = '630px';\n\n /\n Reference to the host element.\n /\n @Element() host: HTMLElement;\n\n /\n Indicates if the overlay is visible.\n /\n @State() overlayVisible: boolean = false;\n\n /\n Event emitted when the value changes.\n /\n @Event() valueChanged: EventEmitter<string>;\n\n /\n Indicates if the dropdown is open.\n /\n @State() isDropdownOpen: boolean = false;\n\n /\n Styles for the component.\n\n /\n @State() styles = {};\n\n /\n Indicates if the component is being viewed on a mobile device.\n /\n @State() isMobile: boolean = window.innerWidth < 768;\n\n /\n The mode of the dropdown search.\n /\n @State() mode: 'default' \| 'transparent' = 'default';\n\n @Event() onselect: EventEmitter;\n\n @State() inputTextRef!: HTMLCuraInputTextElement;\n\n /\n Indicates if the input is on blur.\n /\n @State() isOnBlurInput: boolean = true;\n\n /\n The index of the currently hovered option.\n /\n @State() hoveredIndex: number = -1;\n\n /\n The options for the dropdown search.\n * @type {HTMLCuraDropdownSearchOptionElement[]}\n */\n\n weights;\n\n private overlayElement: HTMLDivElement \| null = null;\n\n @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n }\n\n @Watch('value')\n onValueChange(newValue: string) {\n this.updateSelectedOption(newValue);\n this.valueChanged.emit(newValue);\n }\n\n componentWillLoad() {\n this.updateSelectedOption(this.value);\n }\n\n componentDidRender() {\n if (this.isDropdownOpen && this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\n }\n\n private showOverlay() {\n if (!this.overlayElement) {\n this.overlayElement = document.createElement('div');\n this.overlayElement.className = 'dropdown-overlay';\n this.overlayElement.style.position = 'fixed';\n this.overlayElement.style.top = '0';\n this.overlayElement.style.left = '0';\n this.overlayElement.style.width = '100%';\n this.overlayElement.style.height = '100%';\n this.overlayElement.style.zIndex = '9999';\n this.overlayElement.style.backgroundColor = 'white';\n document.body.appendChild(this.overlayElement);\n }\n }\n\n private removeOverlay() {\n if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n document.body.removeChild(this.overlayElement);\n this.overlayElement = null;\n }\n }\n\n private handleSlotChange = () => {\n this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n this.addClickListenersToOptions();\n this.updateHoveredIndex();\n };\n\n private addClickListenersToOptions() {\n this.options.forEach((option, index) => {\n option.addEventListener('optionSelected', () => this.onSelectedOption(index));\n });\n }\n\n private updateSelectedOption(value: string) {\n const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n this.hoveredIndex = selectedOptionIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.updateOptionAttribute('selected', this.hoveredIndex);\n\n this.scrollIntoView();\n }\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.onValueChange(this.value);\n // this.valueChanged.emit(this.value);\n };\n\n private onSelectedOption(index: number) {\n const selectedOption = this.options[index];\n if(selectedOption.selectable) {\n const selectedValue = selectedOption.getAttribute('value') \|\| selectedOption.textContent;\n\n this.value = selectedValue \|\| '';\n this.updateSelectedOption(this.value);\n\n this.isDropdownOpen = false;\n this.isOnBlurInput = true;\n this.removeOverlay();\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.moveHighlight(1);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.moveHighlight(-1);\n } else if (event.key === 'Enter') {\n event.preventDefault();\n if (this.hoveredIndex > -1) {\n this.handleOnBlur();\n this.onSelectedOption(this.hoveredIndex);\n }\n }\n };\n\n private moveHighlight(direction: number) {\n const visibleOptions = this.options;\n const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n this.hoveredIndex = newIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.scrollIntoView();\n }\n\n private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n this.options.forEach((option, index) => {\n (option as any)[attribute] = index === indexToUpdate;\n });\n }\n\n private updateHoveredIndex() {\n const visibleOptions = this.options;\n const currentValue = this.value;\n this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n }\n\n private scrollIntoView() {\n const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n const hoveredOption = this.options[this.hoveredIndex];\n\n if (container && hoveredOption) {\n const optionRect = hoveredOption.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n if (optionRect.bottom > containerRect.bottom) {\n container.scrollTop += optionRect.bottom - containerRect.bottom;\n }\n\n if (optionRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - optionRect.top;\n }\n }\n }\n\n private handleResize = () => {\n this.isMobile = window.innerWidth < 768;\n if (this.isDropdownOpen) {\n if (this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n };\n\n handleOnBlur() {\n if (this.isOnBlurInput === true) {\n setTimeout(() => {\n this.isDropdownOpen = false;\n this.removeOverlay();\n }, 200);\n }\n }\n getClasses() {\n return {\n 'dropdown-input-search': true,\n 'dropdown-open': this.isDropdownOpen,\n disabled: this.disabled,\n [this.status]: true,\n };\n }\n\n getDropdownClasses() {\n return {\n 'dropdown-search-list': true,\n 'visible': this.options.length && this.isDropdownOpen ? true : false\n };\n }\n\n hostCSSProperties() {\n return {\n '--dropdown-max-height': this.dropdownMaxHeight,\n };\n }\n\n render() {\n const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n return (\n <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n <div class={this.getClasses()}>\n {this.isMobile && this.isDropdownOpen && (\n <cura-button-transparent\n fontColor=\"dark\"\n onClick={() => (this.isMobile = false)}\n iconName=\"arrowLeft\"\n size=\"medium\"\n iconOnly\n color=\"primary\"\n ></cura-button-transparent>\n )}\n <cura-input-text\n disabled={this.disabled}\n label={this.label}\n part=\"cura-input-field\"\n mode={isMobileDropdown ? 'transparent' : 'default'}\n required={this.required}\n hideErrorIcon={this.status === 'error'}\n iconName={this.iconName \|\| 'search'}\n value={this.value}\n status={this.status}\n onValueChange={e => this.onValueChange(e.target.value as string)}\n onInput={e => this.handleInputChange(e)}\n onFocus={() => (this.isDropdownOpen = true)}\n onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n onBlur={() => {\n this.handleOnBlur();\n }}\n placeholder={this.placeholder}\n size=\"large\"\n onKeyDown={this.handleKeyDown}\n >\n <slot name=\"helperText\"></slot>\n </cura-input-text>\n </div>\n <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"cura-dropdown-search.entry.js","mappings":"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","names":[],"sources":["src/components/forms/cura-dropdown-search/cura-dropdown-search.scss?tag=cura-dropdown-search&encapsulation=shadow","src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"sourcesContent":["@import '../../../scss/mixins/shadows.scss';\n\n:host {\n display: block;\n width: 100%;\n box-sizing: border-box;\n}\n\n.dropdown {\n display: flex;\n position: relative;\n\n flex-direction: column;\n width: inherit;\n\n .dropdown-search-list {\n z-index: 1000;\n }\n\n &-input-search {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: transparent;\n\n\n &.dropdown-open {\n ::part(cura-input-field) {\n border-radius: 4px 4px 0px 0px;\n }\n ::slotted([slot='helperText']) {\n display: none;\n }\n\n cura-input-text {\n ::slotted([slot='helperText']) {\n display: none;\n }\n }\n }\n }\n\n &-search-list {\n position: absolute;\n top: calc(100% - 8px);\n width: 100%;\n max-height: var(--dropdown-max-height);\n padding: 12px 12px;\n margin: 0;\n box-sizing: border-box;\n @include shadow-level3(--neutral-black-shadow);\n border-radius: 0px 0px 4px 4px;\n border-top: 0 var(--neutral-light);\n border-right: 2px solid var(--neutral-light);\n border-bottom: 2px solid var(--neutral-light);\n border-left: 2px solid var(--neutral-light);\n background-color: var(--neutral-purewhite);\n list-style: none;\n overflow-y: auto;\n display: none;\n\n &.visible {\n display: block;\n }\n\n &-input-search {\n width: inherit;\n\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 16px 8px;\n border-bottom: 2px solid var(--info-base);\n background-color: var(--neutral-purewhite);\n\n cura-input-text {\n width: inherit;\n }\n\n &.error {\n background-color: var(--error-lighter);\n border-bottom: 2px solid var(--error-dark);\n }\n }\n }\n\n &-mobile {\n position: fixed;\n top: 1%;\n left: 0;\n right: 0;\n width: 100%;\n\n z-index: 10000;\n .dropdown-input-search {\n display: flex;\n gap: 4px;\n padding: 12px 8px;\n background-color: var(--neutral-purewhite);\n border-bottom: 2px solid var(--info-base);\n z-index: 10000;\n cura-button-transparent {\n display: flex;\n }\n &.error {\n background-color: var(--error-lighter);\n border-bottom: 2px solid var(--error-dark);\n }\n &.dropdown-open {\n display: flex;\n\n ::slotted([slot='helperText']) {\n display: block;\n }\n }\n }\n .dropdown-search-list {\n position: static;\n width: 100%;\n height: 100%;\n max-height: none;\n padding: 12px 12px;\n margin: 0;\n box-sizing: border-box;\n box-shadow: none;\n border: none;\n background-color: var(--neutral-purewhite);\n list-style: none;\n overflow-y: auto;\n z-index: 10000;\n }\n }\n}\n","import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search',\n styleUrl: 'cura-dropdown-search.scss',\n shadow: true,\n})\nexport class CuraDropdownSearch {\n /*\n Size of the dropdown search mode default: 'small', 'medium', or 'large' (default: 'large')\n /\n @Prop({ reflect: true, mutable: true }) size: 'small' \| 'medium' \| 'large' = 'large';\n\n /\n Define the status of the dropdown search.\n /\n @Prop({ reflect: true }) status: '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 The name of the dropdown search component.\n /\n @Prop({ reflect: true }) name: string;\n\n /\n Indicates if the dropdown search is required.\n /\n @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n /\n Indicates if the dropdown search is selected.\n /\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /\n The value of the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n The placeholder text for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n /\n The label for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) label: string = '';\n\n /\n Custom icon name. Default: search.\n /\n @Prop({ reflect: true }) iconName = 'search';\n\n /\n CSS max-height property for dropdown item.\n * Default to 630px\n /\n @Prop({ reflect: true }) dropdownMaxHeight = '630px';\n\n /\n Reference to the host element.\n /\n @Element() host: HTMLElement;\n\n /\n Indicates if the overlay is visible.\n /\n @State() overlayVisible: boolean = false;\n\n /\n Event emitted when the value changes.\n /\n @Event() valueChanged: EventEmitter<string>;\n\n /\n Indicates if the dropdown is open.\n /\n @State() isDropdownOpen: boolean = false;\n\n /\n Styles for the component.\n\n /\n @State() styles = {};\n\n /\n Indicates if the component is being viewed on a mobile device.\n /\n @State() isMobile: boolean = window.innerWidth < 768;\n\n /\n The mode of the dropdown search.\n /\n @State() mode: 'default' \| 'transparent' = 'default';\n\n @Event() onselect: EventEmitter;\n\n @State() inputTextRef!: HTMLCuraInputTextElement;\n\n /\n Indicates if the input is on blur.\n /\n @State() isOnBlurInput: boolean = true;\n\n /\n The index of the currently hovered option.\n /\n @State() hoveredIndex: number = -1;\n\n /\n The options for the dropdown search.\n * @type {HTMLCuraDropdownSearchOptionElement[]}\n /\n\n weights;\n\n private overlayElement: HTMLDivElement \| null = null;\n\n @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n\n private adjustInputPosition = () => {\n window.visualViewport.addEventListener('resize', () => {\n\n const isKeyboardOpen = window.innerHeight < window.screen.height 0.8;\n const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n\n if (isKeyboardOpen) {\n dropdown.style.position = 'absolute';\n dropdown.style.bottom = `${window.screen.height - window.innerHeight}px`;\n } else {\n dropdown.style.position = 'fixed';\n dropdown.style.bottom = '0';\n }\n\n window.scroll({\n top: 0,\n left: 0,\n behavior: \"smooth\",\n });\n });\n };\n\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n\n\n }\n\n @Watch('value')\n onValueChange(newValue: string) {\n this.updateSelectedOption(newValue);\n this.valueChanged.emit(newValue);\n }\n\n componentWillLoad() {\n this.updateSelectedOption(this.value);\n }\n\n componentDidRender() {\n if (this.isDropdownOpen && this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n window.addEventListener('resize', this.adjustInputPosition);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\n window.removeEventListener('resize', this.adjustInputPosition);\n\n }\n\n private showOverlay() {\n if (!this.overlayElement) {\n this.overlayElement = document.createElement('div');\n this.overlayElement.className = 'dropdown-overlay';\n this.overlayElement.style.position = 'fixed';\n this.overlayElement.style.top = '0';\n this.overlayElement.style.left = '0';\n this.overlayElement.style.width = '100%';\n this.overlayElement.style.height = '100%';\n this.overlayElement.style.zIndex = '9999';\n this.overlayElement.style.backgroundColor = 'white';\n document.body.appendChild(this.overlayElement);\n }\n }\n\n private removeOverlay() {\n if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n document.body.removeChild(this.overlayElement);\n this.overlayElement = null;\n }\n }\n\n private handleSlotChange = () => {\n this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n this.addClickListenersToOptions();\n this.updateHoveredIndex();\n };\n\n private addClickListenersToOptions() {\n this.options.forEach((option, index) => {\n option.addEventListener('optionSelected', () => this.onSelectedOption(index));\n });\n }\n\n private updateSelectedOption(value: string) {\n const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n this.hoveredIndex = selectedOptionIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.updateOptionAttribute('selected', this.hoveredIndex);\n\n this.scrollIntoView();\n this.adjustInputPosition();\n\n }\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.onValueChange(this.value);\n // this.valueChanged.emit(this.value);\n };\n\n private onSelectedOption(index: number) {\n const selectedOption = this.options[index];\n if (selectedOption.selectable) {\n const selectedValue = selectedOption.getAttribute('value') \|\| selectedOption.textContent;\n\n this.value = selectedValue \|\| '';\n this.updateSelectedOption(this.value);\n\n this.isDropdownOpen = false;\n this.isOnBlurInput = true;\n this.removeOverlay();\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.moveHighlight(1);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.moveHighlight(-1);\n } else if (event.key === 'Enter') {\n event.preventDefault();\n if (this.hoveredIndex > -1) {\n this.handleOnBlur();\n this.onSelectedOption(this.hoveredIndex);\n }\n }\n };\n\n private moveHighlight(direction: number) {\n const visibleOptions = this.options;\n const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n this.hoveredIndex = newIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.scrollIntoView();\n }\n\n private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n this.options.forEach((option, index) => {\n (option as any)[attribute] = index === indexToUpdate;\n });\n }\n\n private updateHoveredIndex() {\n const visibleOptions = this.options;\n const currentValue = this.value;\n this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n }\n\n private scrollIntoView() {\n const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n const hoveredOption = this.options[this.hoveredIndex];\n\n if (container && hoveredOption) {\n const optionRect = hoveredOption.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n if (optionRect.bottom > containerRect.bottom) {\n container.scrollTop += optionRect.bottom - containerRect.bottom;\n }\n\n if (optionRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - optionRect.top;\n }\n }\n }\n\n private handleResize = () => {\n this.isMobile = window.innerWidth < 768;\n if (this.isDropdownOpen) {\n if (this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n };\n\n handleOnBlur() {\n if (this.isOnBlurInput === true) {\n setTimeout(() => {\n this.isDropdownOpen = false;\n this.removeOverlay();\n }, 200);\n }\n }\n getClasses() {\n return {\n 'dropdown-input-search': true,\n 'dropdown-open': this.isDropdownOpen,\n 'disabled': this.disabled,\n [this.status]: true,\n };\n }\n\n getDropdownClasses() {\n return {\n 'dropdown-search-list': true,\n 'visible': this.options.length && this.isDropdownOpen ? true : false,\n };\n }\n\n hostCSSProperties() {\n return {\n '--dropdown-max-height': this.dropdownMaxHeight,\n };\n }\n\n handleOnFocus() {\n this.isDropdownOpen = true;\n }\n\n\n render() {\n const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n return (\n <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n <div class={this.getClasses()}>\n {this.isMobile && this.isDropdownOpen && (\n <cura-button-transparent\n fontColor=\"dark\"\n onClick={() => (this.isMobile = false)}\n iconName=\"arrowLeft\"\n size=\"medium\"\n iconOnly\n color=\"primary\"\n ></cura-button-transparent>\n )}\n <cura-input-text\n disabled={this.disabled}\n label={this.label}\n part=\"cura-input-field\"\n mode={isMobileDropdown ? 'transparent' : 'default'}\n required={this.required}\n hideErrorIcon={this.status === 'error'}\n iconName={this.iconName \|\| 'search'}\n value={this.value}\n status={this.status}\n onValueChange={e => this.onValueChange(e.target.value as string)}\n onInput={e => this.handleInputChange(e)}\n onFocus={() => this.handleOnFocus()}\n onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n onBlur={() => {\n this.handleOnBlur();\n }}\n placeholder={this.placeholder}\n size={this.size}\n onKeyDown={this.handleKeyDown}\n >\n <slot name=\"helperText\"></slot>\n </cura-input-text>\n </div>\n <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/cura-icons-view.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-1ad98520.js';
+import { r as registerInstance, h, H as Host } from './index-747aad85.js';
 import { i as iconSizes, m as microIcons } from './cura-icon.definitions-aaa4e80f.js';
 const iconsetdefaulticons = ["360", "accessibility", "addUser", "airdrop", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "contacts", "currency", "delete", "desktop", "doc", "down", "download", "drug", "duplicate", "edit", "exam", "examDoc", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "geotagUnity", "geotagUnityGroup", "google", "graph", "healthPlan", "heart", "height", "height2", "home", "horizontalList", "imageUp", "infoCircle", "instagram", "key", "lamp", "language", "language2", "languageEN", "languagePT", "lattes", "left", "like", "link", "linkExternal", "linkedin", "list", "login", "logout", "mail", "maintenance", "medDoc", "medEspec", "medImg", "medUser", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "news", "notification", "npsDeslike", "npsHate", "npsLike", "npsLove", "npsNeutral", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profileCircle", "questionCircle", "questionSquare", "range", "reload", "ribbon", "right", "schedule", "scheduleCancel", "scheduleCheck", "scheduleHistorico", "search", "secure", "share", "siren", "sound", "soundOff", "subItem", "swap", "target", "team", "telegram", "twitter", "unLink", "unSecure", "unity", "unlike", "up", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "wifiOff", "youtube", "zoomIn", "zoomOut"];
@@ -20,9 +20,9 @@ const CuraIconsView = class {
         this.sizes.unshift(this.sizes.pop());
     }
     render() {
-        return (h(Host, { key: 'a6617c95d8f812380ad9a6471b2d3308f230d985' }, h("div", { key: 'fd3d146d453f37b1e1f8968113271bd59c870821', class: "iconDetail" }, h("cura-heading", { key: '6f8ba0f48fe6a3fd7d237bf8606f0e789bb9a24e', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: '9a90cfdc2df40488ece88e4af4ddf7af4c8b7413' }, this.selected)), h("div", { key: '0b0978997491adc4bf5c9629c3ca93302d352a57', class: "iconSizes" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
-            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: '0d8666083a28088fbb036920c0130770fadb9fe8', class: "iconSizes invert" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
-            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: 'fcc2275ca60d1c36dbcc5a7a5b10e1a35d2445e2', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon), !microIcons.includes(icon) ? '' :
+        return (h(Host, { key: '578795eda26d68314425907d7d4b0716eae31677' }, h("div", { key: '1cabf7e4ad314bbcb93d86c4ad22e5d8d69e2f81', class: "iconDetail" }, h("cura-heading", { key: '154ada215d4a13b674870c7b3ac85cb2b2c96873', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: '84b323f4f81831142ccb51109a2bcbbe8748c8e9' }, this.selected)), h("div", { key: '71ee5a42938cc43014e4b306460ab03ed03a8d2d', class: "iconSizes" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
+            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: 'f0ce668720e9897ea8abcd4c105fed555d0537dc', class: "iconSizes invert" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
+            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: '2c2a0f8f18eff3da6b4379e9549683f4daf2755d', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon), !microIcons.includes(icon) ? '' :
             h("cura-paragraph", { color: 'success-dark', size: "xsmall", "margin-block": "0px", "line-height": '100%' }, "MICRO"))))));
     }
 };