npm - @rededor/cura - Versions diffs - 0.5.3 → 0.5.4 - Mend

@rededor/cura 0.5.3 → 0.5.4

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

package/dist/components/cura-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cura-checkbox.js","mappings":"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","names":["CuraCheckbox"],"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\n.position {\n\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\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(--primary-base-neutral-medium);\n border-radius: 4px;\n background: var(--neutral-lighter-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(--primary-darker-neutral-white);\n border-color: var(--primary-base-neutral-base);\n cursor: not-allowed;\n\n &:hover {\n border-color: var(--primary-base-neutral-base) !important;\n }\n}\n\n.disabled.checked .checkbox,\n.disabled.indeterminate .checkbox {\n background: var(--primary-base-neutral-white);\n border-color: var(--primary-base-neutral-base);\n\n &:hover {\n border-color: var(--primary-base-neutral-base) !important;\n background: var(--primary-base-neutral-white);\n\n }\n}\n\n.disabled .checkbox:focus {\n border-color: var(--primary-base-neutral-base);\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, checked, indeterminate /\n:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {\n border-color: var(--primary-base-neutral-dark);\n}\n\n/ Estado Success /\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.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 } 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})\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 isDarkbackground = () => this.background === 'dark';\n\n isDarkIconColor = () => this.iconColor === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles['--size'] = `${formsSizes[this.size].size}px`\n this.styles['--gap'] = `${formsSizes[this.size].gap}px`\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: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--neutral-lighter-neutral-purewhite', background: this.isDarkbackground() ? 'neutral-lighter' : 'neutral-purewhite' },\n { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },\n { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : '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 => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background));\n this.styles = { ...this.styles };\n }\n\n connectedCallback() {\n this.sizeHandler()\n this.setColors();\n }\n\n /\n Handles click event on the checkbox.\n * Emits onchange event with value, checked, and indeterminate states.\n /\n handleClick = () => {\n if (this.disabled) return;\n\n this.indeterminate = false;\n this.checked = !this.checked;\n this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });\n };\n\n /\n Retrieves classes based on component state for conditional styling.\n /\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\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\n @Watch('background')\n @Watch('iconColor')\n assignColor(type: 'icon' \| 'label' \| 'message',) {\n if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\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\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <div class=\"label-wrapper\">\n <cura-label\n class=\"label\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n 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\n color={this.assignColor('message')}\n size=\"xsmall\"\n class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n <div class={\"checkbox\"} onClick={this.handleClick} 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.js","mappings":"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","names":["CuraCheckbox"],"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\n.position {\n\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\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(--primary-base-neutral-medium);\n border-radius: 4px;\n background: var(--neutral-lighter-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(--primary-darker-neutral-white);\n border-color: var(--primary-base-neutral-base);\n cursor: not-allowed;\n\n &:hover {\n border-color: var(--primary-base-neutral-base) !important;\n }\n}\n\n.disabled.checked .checkbox,\n.disabled.indeterminate .checkbox {\n background: var(--primary-base-neutral-white);\n border-color: var(--primary-base-neutral-base);\n\n &:hover {\n border-color: var(--primary-base-neutral-base) !important;\n background: var(--primary-base-neutral-white);\n\n }\n}\n\n.disabled .checkbox:focus {\n border-color: var(--primary-base-neutral-base);\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, checked, indeterminate /\n:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {\n border-color: var(--primary-base-neutral-dark);\n}\n\n/ Estado Success /\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.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 } 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})\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 isDarkbackground = () => this.background === 'dark';\n\n isDarkIconColor = () => this.iconColor === 'dark';\n\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 /\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: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--neutral-lighter-neutral-purewhite', background: this.isDarkbackground() ? 'neutral-lighter' : 'neutral-purewhite' },\n { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },\n { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : '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\n connectedCallback() {\n this.sizeHandler()\n this.setColors();\n }\n\n /\n Handles click event on the checkbox.\n * Emits onchange event with value, checked, and indeterminate states.\n /\n handleClick = () => {\n if (this.disabled) return;\n\n this.indeterminate = false;\n this.checked = !this.checked;\n this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });\n };\n\n /\n Retrieves classes based on component state for conditional styling.\n /\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\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\n @Watch('background')\n @Watch('iconColor')\n assignColor(type: 'icon' \| 'label' \| 'message',) {\n if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\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\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <div class=\"label-wrapper\">\n <cura-label\n class=\"label\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n 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\n color={this.assignColor('message')}\n size=\"xsmall\"\n class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n <div class={\"checkbox\"} onClick={this.handleClick} 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/components/cura-radio.js CHANGED Viewed

@@ -38,9 +38,7 @@ const CuraRadio$1 = /*@__PURE__*/ proxyCustomElement(class CuraRadio extends HTM
     this.styles = {};
   }
   sizeHandler() {
-    this.styles['--size-after'] = `${this.sizes[this.size].size}px`;
-    this.styles['--size'] = `${formsSizes[this.size].size}px`;
-    this.styles['--gap'] = `${formsSizes[this.size].gap}px`;
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--size-after': `${this.sizes[this.size].size}px`, '--size': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
   }
   setColors() {
     const colors = [
@@ -63,7 +61,10 @@ const CuraRadio$1 = /*@__PURE__*/ proxyCustomElement(class CuraRadio extends HTM
       { name: '--success-base-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },
       { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },
     ];
-    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background));
+    colors.forEach(color => {
+      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);
+    });
+    this.styles = Object.assign({}, this.styles);
   }
   connectedCallback() {
     this.sizeHandler();

package/dist/components/cura-radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cura-radio.js","mappings":"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","names":["CuraRadio"],"sources":["./src/components/forms/cura-radio/cura-radio.scss?tag=cura-radio&encapsulation=shadow","./src/components/forms/cura-radio/cura-radio.tsx"],"sourcesContent":["\n\n:host {\n display: block;\n width: fit-content;\n box-sizing: border-box;\n\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--gap);\n}\n\n.position {\n\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\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\n.control {\n width: fit-content;\n cursor: pointer;\n position: relative;\n}\n\n\n.radio {\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n border-radius: 50%;\n border: 2px solid var(--primary-base-neutral-medium);\n background: var(--neutral-purewhite);\n box-sizing: border-box;\n transition: border-color 0.3s;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: var(--size);\n height: var(--size);\n flex: 0 0 var(--size);\n\n &::after {\n content: '';\n background: var(--color-base-light);\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.3s;\n width: var(--size-after);\n height: var(--size-after);\n }\n\n &:focus {\n border-color: var(--info-base) !important;\n }\n\n}\n\n\n/* Estado Success /\n.success .radio {\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 .radio {\n border-color: var(--success-base);\n\n &::after {\n background: var(--success-base);\n }\n\n &:hover {\n background: var(--success-lighter) !important;\n border-color: var(--success-base) !important;\n\n &::after {\n background: var(--success-base) !important;\n }\n }\n}\n\n\n/ Estado Error /\n.error .radio {\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 .radio {\n border-color: var(--error-base);\n\n &::after {\n background: var(--error-base);\n }\n\n &:hover {\n background: var(--error-lighter) !important;\n border-color: var(--error-base) !important;\n\n &::after {\n background: var(--error-base) !important;\n }\n }\n}\n\n\n/ Estado checked /\n.checked .radio::after {\n opacity: 1;\n background: var(--color-base);\n}\n\n.checked .radio {\n border-color: var(--color-dark) ;\n}\n\n.checked .radio:hover {\n border-color: var(--color-light) !important;\n}\n\n.checked .radio:hover::after {\n background: var(--color-light);\n}\n\n/ Estado disabled /\n.disabled .radio {\n background: var(--primary-base-neutral-white);\n border-color: var(--primary-darker-neutral-base) ;\n cursor: not-allowed;\n}\n\n.disabled .radio::after {\n background: var(--neutral-lighter);\n}\n\n.disabled.checked .radio {\n border-color: var(--primary-base-neutral-base) !important;\n background: var(--primary-darker-neutral-white) !important;\n}\n\n.disabled.checked .radio::after {\n background: var(--primary-base-neutral-base) !important;\n}\n\n\n/ Estado hover para não disabled e não checked /\n:not(.disabled):not(.checked) .radio:hover {\n border-color: var(--primary-base-neutral-dark);\n}\n\n\n}\n","import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-radio',\n styleUrl: 'cura-radio.scss',\n shadow: true,\n})\nexport class CuraRadio {\n /\n Reflects the checked state of the radio button.\n * Mutable property allowing state change.\n /\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /\n Status of the radio button.\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 radio button.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n /\n Reflects the required state of the radio button.\n /\n @Prop({ reflect: true }) required: boolean = false;\n /\n Text label associated with the radio button.\n /\n @Prop({ reflect: true }) label: string = '';\n /\n Specifies the tabindex of the radio button.\n /\n @Prop({ reflect: true }) ontabindex: number;\n /\n Position of the label relative to the radio button.\n * Can be 'left' or 'right'.\n /\n @Prop({ reflect: true }) position: \"left\" \| \"right\" = 'left';\n /\n Value associated with the radio button.\n /\n @Prop({ reflect: true }) value: string = '';\n /\n Name attribute of the radio button.\n /\n @Prop({ reflect: true }) name: string = '';\n /\n Background theme of the radio button.\n * Can be 'dark' or 'light'.\n /\n @Prop() background: 'dark' \| 'light' = 'light';\n /\n Size of the radio button.\n * Can be 'small', 'medium', or 'large'.\n /\n @Prop() size: 'small' \| 'medium' \| 'large' = 'medium';\n /\n Color theme of the radio button.\n /\n @Prop() color = 'accent';\n\n @State() styles = {}\n\n @Element() host: HTMLElement;\n\n @Event() onchange: EventEmitter<{ value: string, checked: boolean }>;\n\n sizes = {\n \"large\": { size: 20 },\n \"medium\": { size: 14 },\n \"small\": { size: 10 },\n };\n\n\n isDarkbackground = () => this.background === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles['--size-after'] = `${this.sizes[this.size].size}px`\n this.styles['--size'] = `${formsSizes[this.size].size}px`\n this.styles['--gap'] = `${formsSizes[this.size].gap}px`\n }\n\n\n @Watch('color')\n @Watch('background')\n setColors() {\n\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--color-light', background: `${this.color}-light` },\n { name: '--color-base', background: `${this.color}-base` },\n { name: '--color-dark', background: `${this.color}-dark` },\n { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n { name: '--success-lighter', background: 'success-lighter' },\n { name: '--success-base', background: 'success-base' },\n { name: '--error-lighter', background: 'error-lighter' },\n { name: '--error-base', background: 'error-base' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },\n { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },\n { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--success-base-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },\n { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },\n ];\n\n colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background))\n }\n\n connectedCallback() {\n this.sizeHandler()\n this.setColors();\n }\n\n handleClick = () => {\n if (this.disabled) return;\n\n this.checked = !this.checked;\n this.onchange.emit({ value: this.value, checked: this.checked });\n };\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n classes[this.status] = true;\n\n return classes;\n }\n\n @Watch('background')\n assignColor(type: 'label' \| 'message',) {\n if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n const statusColors = {\n success: {\n label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n message: this.isDarkbackground() ? 'success-base' : 'success-dark'\n },\n error: {\n label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n message: this.isDarkbackground() ? 'error-base' : 'error-dark'\n },\n default: {\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 render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <div class=\"label-wrapper\">\n <cura-label\n class=\"label\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n 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\n color={this.assignColor('message')}\n size=\"xsmall\"\n class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n <input\n type=\"radio\"\n class={`radio ${this.size.toLocaleLowerCase()}`}\n name={this.name}\n value={this.value}\n required={this.required}\n tabIndex={this.ontabindex}\n disabled={this.disabled}\n checked={this.checked}\n onClick={this.handleClick}\n />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"cura-radio.js","mappings":"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","names":["CuraRadio"],"sources":["./src/components/forms/cura-radio/cura-radio.scss?tag=cura-radio&encapsulation=shadow","./src/components/forms/cura-radio/cura-radio.tsx"],"sourcesContent":["\n\n:host {\n display: block;\n width: fit-content;\n box-sizing: border-box;\n\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--gap);\n}\n\n.position {\n\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\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\n.control {\n width: fit-content;\n cursor: pointer;\n position: relative;\n}\n\n\n.radio {\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n border-radius: 50%;\n border: 2px solid var(--primary-base-neutral-medium);\n background: var(--neutral-purewhite);\n box-sizing: border-box;\n transition: border-color 0.3s;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: var(--size);\n height: var(--size);\n flex: 0 0 var(--size);\n\n &::after {\n content: '';\n background: var(--color-base-light);\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.3s;\n width: var(--size-after);\n height: var(--size-after);\n }\n\n &:focus {\n border-color: var(--info-base) !important;\n }\n\n}\n\n\n/* Estado Success /\n.success .radio {\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 .radio {\n border-color: var(--success-base);\n\n &::after {\n background: var(--success-base);\n }\n\n &:hover {\n background: var(--success-lighter) !important;\n border-color: var(--success-base) !important;\n\n &::after {\n background: var(--success-base) !important;\n }\n }\n}\n\n\n/ Estado Error /\n.error .radio {\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 .radio {\n border-color: var(--error-base);\n\n &::after {\n background: var(--error-base);\n }\n\n &:hover {\n background: var(--error-lighter) !important;\n border-color: var(--error-base) !important;\n\n &::after {\n background: var(--error-base) !important;\n }\n }\n}\n\n\n/ Estado checked /\n.checked .radio::after {\n opacity: 1;\n background: var(--color-base);\n}\n\n.checked .radio {\n border-color: var(--color-dark) ;\n}\n\n.checked .radio:hover {\n border-color: var(--color-light) !important;\n}\n\n.checked .radio:hover::after {\n background: var(--color-light);\n}\n\n/ Estado disabled /\n.disabled .radio {\n background: var(--primary-base-neutral-white);\n border-color: var(--primary-darker-neutral-base) ;\n cursor: not-allowed;\n}\n\n.disabled .radio::after {\n background: var(--neutral-lighter);\n}\n\n.disabled.checked .radio {\n border-color: var(--primary-base-neutral-base) !important;\n background: var(--primary-darker-neutral-white) !important;\n}\n\n.disabled.checked .radio::after {\n background: var(--primary-base-neutral-base) !important;\n}\n\n\n/ Estado hover para não disabled e não checked /\n:not(.disabled):not(.checked) .radio:hover {\n border-color: var(--primary-base-neutral-dark);\n}\n\n\n}\n","import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-radio',\n styleUrl: 'cura-radio.scss',\n shadow: true,\n})\nexport class CuraRadio {\n /\n Reflects the checked state of the radio button.\n * Mutable property allowing state change.\n /\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /\n Status of the radio button.\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 radio button.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n /\n Reflects the required state of the radio button.\n /\n @Prop({ reflect: true }) required: boolean = false;\n /\n Text label associated with the radio button.\n /\n @Prop({ reflect: true }) label: string = '';\n /\n Specifies the tabindex of the radio button.\n /\n @Prop({ reflect: true }) ontabindex: number;\n /\n Position of the label relative to the radio button.\n * Can be 'left' or 'right'.\n /\n @Prop({ reflect: true }) position: \"left\" \| \"right\" = 'left';\n /\n Value associated with the radio button.\n /\n @Prop({ reflect: true }) value: string = '';\n /\n Name attribute of the radio button.\n /\n @Prop({ reflect: true }) name: string = '';\n /\n Background theme of the radio button.\n * Can be 'dark' or 'light'.\n /\n @Prop() background: 'dark' \| 'light' = 'light';\n /\n Size of the radio button.\n * Can be 'small', 'medium', or 'large'.\n /\n @Prop() size: 'small' \| 'medium' \| 'large' = 'medium';\n /\n Color theme of the radio button.\n /\n @Prop() color = 'accent';\n\n @State() styles = {}\n\n @Element() host: HTMLElement;\n\n @Event() onchange: EventEmitter<{ value: string, checked: boolean }>;\n\n sizes = {\n \"large\": { size: 20 },\n \"medium\": { size: 14 },\n \"small\": { size: 10 },\n };\n\n\n isDarkbackground = () => this.background === 'dark';\n\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size-after': `${this.sizes[this.size].size}px`,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`\n };\n }\n\n\n @Watch('color')\n @Watch('background')\n setColors() {\n\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--color-light', background: `${this.color}-light` },\n { name: '--color-base', background: `${this.color}-base` },\n { name: '--color-dark', background: `${this.color}-dark` },\n { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n { name: '--success-lighter', background: 'success-lighter' },\n { name: '--success-base', background: 'success-base' },\n { name: '--error-lighter', background: 'error-lighter' },\n { name: '--error-base', background: 'error-base' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },\n { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },\n { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--success-base-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },\n { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },\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\n connectedCallback() {\n this.sizeHandler()\n this.setColors();\n }\n\n handleClick = () => {\n if (this.disabled) return;\n\n this.checked = !this.checked;\n this.onchange.emit({ value: this.value, checked: this.checked });\n };\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n classes[this.status] = true;\n\n return classes;\n }\n\n @Watch('background')\n assignColor(type: 'label' \| 'message',) {\n if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n const statusColors = {\n success: {\n label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n message: this.isDarkbackground() ? 'success-base' : 'success-dark'\n },\n error: {\n label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n message: this.isDarkbackground() ? 'error-base' : 'error-dark'\n },\n default: {\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 render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <div class=\"label-wrapper\">\n <cura-label\n class=\"label\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n 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\n color={this.assignColor('message')}\n size=\"xsmall\"\n class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n <input\n type=\"radio\"\n class={`radio ${this.size.toLocaleLowerCase()}`}\n name={this.name}\n value={this.value}\n required={this.required}\n tabIndex={this.ontabindex}\n disabled={this.disabled}\n checked={this.checked}\n onClick={this.handleClick}\n />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -33,9 +33,7 @@ const CuraSwitch$1 = /*@__PURE__*/ proxyCustomElement(class CuraSwitch extends H
     this.styles = {};
   }
   sizeHandler() {
-    this.styles['--size-track'] = `${this.sizes[this.size].size}px`;
-    this.styles['--size'] = `${formsSizes[this.size].size}px`;
-    this.styles['--gap'] = `${formsSizes[this.size].gap}px`;
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--size-track': `${this.sizes[this.size].size}px`, '--size': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
   }
   setColors() {
     const colors = [
@@ -53,7 +51,10 @@ const CuraSwitch$1 = /*@__PURE__*/ proxyCustomElement(class CuraSwitch extends H
       { name: '--primary-dark-neutral-base', background: `${this.isDarkbackground() ? 'primary-dark' : 'neutral-base'}` },
       { name: '--neutral-lighter', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-lighter'}` },
     ];
-    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color === null || color === void 0 ? void 0 : color.opacity));
+    colors.forEach(color => {
+      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color === null || color === void 0 ? void 0 : color.opacity);
+    });
+    this.styles = Object.assign({}, this.styles);
   }
   connectedCallback() {
     this.sizeHandler();

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

	@@ -1 +1 @@
1	- {"file":"cura-switch.js","mappings":"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","names":["CuraSwitch"],"sources":["./src/components/forms/cura-switch/cura-switch.scss?tag=cura-switch&encapsulation=shadow","./src/components/forms/cura-switch/cura-switch.tsx"],"sourcesContent":[":host {\n display: block;\n width: fit-content;\n box-sizing: border-box;\n}\n\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--gap);\n}\n\n.position {\n\n &.container {\n flex-direction: row;\n }\n\n .label {\n text-align: right;\n }\n\n .message {\n text-align: right;\n }\n}\n\n.control {\n width: fit-content;\n}\n\n/* Estilos para o controle de switch /\n.track {\n background: var(--neutral-base-black-40);\n border-radius: 16px;\n transition: background-color 0.3s;\n align-items: flex-start;\n flex-shrink: 0;\n box-sizing: border-box;\n width: var(--size-track);\n height: var(--size);\n}\n\n.thumb {\n background-color: var(--neutral-white-purewhite);\n border: 2px solid var(--neutral-medium);\n border-radius: 50%;\n position: absolute;\n transition: transform 0.3s, outline 0.3s;\n display: inline-block;\n cursor: pointer;\n user-select: none;\n box-sizing: border-box;\n width: var(--size);\n height: var(--size);\n}\n\n/ Estado \"checked\" /\n.checked .thumb {\n border-color: var(--color-dark-light);\n background: var(--color-lighter);\n transform: translateX(var(--size));\n}\n\n.checked .thumb:hover {\n background: var(--neutral-white-purewhite) !important;\n}\n\n.checked .track {\n background: var(--color-base-lighter-50);\n}\n\n/ Estado \"disabled\" /\n\n.disabled .track {\n background: var(--primary-base-neutral-black-20);\n\n}\n\n.disabled .thumb {\n background: var(--neutral-lighter) !important;\n border-color: var(--primary-dark-neutral-base);\n cursor: not-allowed;\n\n}\n\n.disabled.checked .track {\n background: var(--primary-base-neutral-black-20);\n}\n\n.disabled .thumb:hover {\n background: var(--neutral-lighter) !important;\n border-color: var(--primary-dark-neutral-base) !important;\n}\n\n/ Estado hover para não disabled e não checked /\n:not(.disabled):not(.checked) .thumb:hover {\n border-color: var(--color-dark-light);\n background: var(--color-lighter);\n}\n\n/ Estado hover para não disabled /\n:not(.disabled) .thumb:focus {\n border-color: var(--info-base) !important;\n z-index: 1;\n}\n","import { Component, Prop, Event, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-switch',\n styleUrl: 'cura-switch.scss',\n shadow: true,\n})\n\nexport class CuraSwitch {\n /\n Indicates whether the switch is checked or not.\n /\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /\n Indicates whether the switch is disabled or not.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n /\n The label text to display next to the switch.\n /\n @Prop({ reflect: true }) label: string = '';\n /\n Tab index for the switch element.\n * Reflects as an HTML attribute.\n /\n @Prop({ reflect: true }) ontabindex: number = 0;\n /\n Position of the label relative to the switch.\n * Can be 'left' or 'right'.\n /\n @Prop({ reflect: true }) position: \"left\" \| \"right\" = 'left';\n /\n Size of the switch.\n * Can be 'small', 'medium', or 'large'.\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n /\n Background style of the switch.\n * Can be 'dark' or 'light'.\n /\n @Prop() background: 'dark' \| 'light' = 'light';\n /\n Accent color of the switch.\n */\n @Prop() color = 'accent';\n\n @State() styles = {};\n\n @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n sizes = {\n \"large\": { size: 64 },\n \"medium\": { size: 48 },\n \"small\": { size: 40 },\n };\n\n\n isDarkbackground = () => this.background === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles['--size-track'] = `${this.sizes[this.size].size}px`\n this.styles['--size'] = `${formsSizes[this.size].size}px`\n this.styles['--gap'] = `${formsSizes[this.size].gap}px`\n }\n\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--neutral-medium', background: 'neutral-medium' },\n { name: '--color-lighter', background: `${this.color}-lighter` },\n { name: '--color-base-lighter-50', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'lighter'}`, opacity: 0.5 },\n { name: '--color-base-light', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'light'}` },\n { name: '--color-dark-light', background: `${this.color}-${this.isDarkbackground() ? 'dark' : 'light'}` },\n { name: '--primary-lighter-neutral-dark', background: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--neutral-white-purewhite', background: `neutral-${this.isDarkbackground() ? 'white' : 'purewhite'}` },\n { name: '--primary-base-neutral-black-20', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-black'}`, opacity: 0.2 },\n { name: '--neutral-base-black-40', background: `neutral-${this.isDarkbackground() ? 'base' : 'black'}`, opacity: 0.4 },\n { name: '--primary-dark-neutral-base', background: `${this.isDarkbackground() ? 'primary-dark' : 'neutral-base'}` },\n { name: '--neutral-lighter', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-lighter'}` },\n ];\n\n colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity));\n }\n\n connectedCallback() {\n this.sizeHandler()\n this.setColors();\n }\n\n toggleSwitch = () => {\n if (this.disabled) return null;\n\n this.checked = !this.checked;\n this.onchange.emit({ checked: this.checked })\n };\n\n assignColor(colorDark: string, colorLight: string) {\n if (this.disabled) return this.isDarkbackground() ? 'primary-base' : 'neutral-medium';\n return this.isDarkbackground() ? colorDark : colorLight\n }\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n\n return classes;\n }\n\n\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <cura-label class=\"label\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n lineHeight=\"125%\"\n color={this.assignColor('neutral-white', 'neutral-black')}>\n {this.label}\n </cura-label>\n <cura-label\n color={this.assignColor('primary-lighter', 'neutral-dark')}\n size=\"xsmall\"\n class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n\n <div onClick={this.toggleSwitch} class=\"control\">\n <div class={`track ${this.size.toLowerCase()}`}>\n <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"cura-switch.js","mappings":"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","names":["CuraSwitch"],"sources":["./src/components/forms/cura-switch/cura-switch.scss?tag=cura-switch&encapsulation=shadow","./src/components/forms/cura-switch/cura-switch.tsx"],"sourcesContent":[":host {\n display: block;\n width: fit-content;\n box-sizing: border-box;\n}\n\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--gap);\n}\n\n.position {\n\n &.container {\n flex-direction: row;\n }\n\n .label {\n text-align: right;\n }\n\n .message {\n text-align: right;\n }\n}\n\n.control {\n width: fit-content;\n}\n\n/* Estilos para o controle de switch /\n.track {\n background: var(--neutral-base-black-40);\n border-radius: 16px;\n transition: background-color 0.3s;\n align-items: flex-start;\n flex-shrink: 0;\n box-sizing: border-box;\n width: var(--size-track);\n height: var(--size);\n}\n\n.thumb {\n background-color: var(--neutral-white-purewhite);\n border: 2px solid var(--neutral-medium);\n border-radius: 50%;\n position: absolute;\n transition: transform 0.3s, outline 0.3s;\n display: inline-block;\n cursor: pointer;\n user-select: none;\n box-sizing: border-box;\n width: var(--size);\n height: var(--size);\n}\n\n/ Estado \"checked\" /\n.checked .thumb {\n border-color: var(--color-dark-light);\n background: var(--color-lighter);\n transform: translateX(var(--size));\n}\n\n.checked .thumb:hover {\n background: var(--neutral-white-purewhite) !important;\n}\n\n.checked .track {\n background: var(--color-base-lighter-50);\n}\n\n/ Estado \"disabled\" /\n\n.disabled .track {\n background: var(--primary-base-neutral-black-20);\n\n}\n\n.disabled .thumb {\n background: var(--neutral-lighter) !important;\n border-color: var(--primary-dark-neutral-base);\n cursor: not-allowed;\n\n}\n\n.disabled.checked .track {\n background: var(--primary-base-neutral-black-20);\n}\n\n.disabled .thumb:hover {\n background: var(--neutral-lighter) !important;\n border-color: var(--primary-dark-neutral-base) !important;\n}\n\n/ Estado hover para não disabled e não checked /\n:not(.disabled):not(.checked) .thumb:hover {\n border-color: var(--color-dark-light);\n background: var(--color-lighter);\n}\n\n/ Estado hover para não disabled /\n:not(.disabled) .thumb:focus {\n border-color: var(--info-base) !important;\n z-index: 1;\n}\n","import { Component, Prop, Event, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-switch',\n styleUrl: 'cura-switch.scss',\n shadow: true,\n})\n\nexport class CuraSwitch {\n /\n Indicates whether the switch is checked or not.\n /\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /\n Indicates whether the switch is disabled or not.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n /\n The label text to display next to the switch.\n /\n @Prop({ reflect: true }) label: string = '';\n /\n Tab index for the switch element.\n * Reflects as an HTML attribute.\n /\n @Prop({ reflect: true }) ontabindex: number = 0;\n /\n Position of the label relative to the switch.\n * Can be 'left' or 'right'.\n /\n @Prop({ reflect: true }) position: \"left\" \| \"right\" = 'left';\n /\n Size of the switch.\n * Can be 'small', 'medium', or 'large'.\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n /\n Background style of the switch.\n * Can be 'dark' or 'light'.\n /\n @Prop() background: 'dark' \| 'light' = 'light';\n /\n Accent color of the switch.\n */\n @Prop() color = 'accent';\n\n @State() styles = {};\n\n @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n sizes = {\n \"large\": { size: 64 },\n \"medium\": { size: 48 },\n \"small\": { size: 40 },\n };\n\n\n isDarkbackground = () => this.background === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size-track': `${this.sizes[this.size].size}px`,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`\n };\n }\n\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--neutral-medium', background: 'neutral-medium' },\n { name: '--color-lighter', background: `${this.color}-lighter` },\n { name: '--color-base-lighter-50', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'lighter'}`, opacity: 0.5 },\n { name: '--color-base-light', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'light'}` },\n { name: '--color-dark-light', background: `${this.color}-${this.isDarkbackground() ? 'dark' : 'light'}` },\n { name: '--primary-lighter-neutral-dark', background: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--neutral-white-purewhite', background: `neutral-${this.isDarkbackground() ? 'white' : 'purewhite'}` },\n { name: '--primary-base-neutral-black-20', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-black'}`, opacity: 0.2 },\n { name: '--neutral-base-black-40', background: `neutral-${this.isDarkbackground() ? 'base' : 'black'}`, opacity: 0.4 },\n { name: '--primary-dark-neutral-base', background: `${this.isDarkbackground() ? 'primary-dark' : 'neutral-base'}` },\n { name: '--neutral-lighter', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-lighter'}` },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity);\n });\n this.styles = { ...this.styles };\n\n }\n\n connectedCallback() {\n this.sizeHandler()\n this.setColors();\n }\n\n toggleSwitch = () => {\n if (this.disabled) return null;\n\n this.checked = !this.checked;\n this.onchange.emit({ checked: this.checked })\n };\n\n assignColor(colorDark: string, colorLight: string) {\n if (this.disabled) return this.isDarkbackground() ? 'primary-base' : 'neutral-medium';\n return this.isDarkbackground() ? colorDark : colorLight\n }\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n\n return classes;\n }\n\n\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <cura-label class=\"label\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n lineHeight=\"125%\"\n color={this.assignColor('neutral-white', 'neutral-black')}>\n {this.label}\n </cura-label>\n <cura-label\n color={this.assignColor('primary-lighter', 'neutral-dark')}\n size=\"xsmall\"\n class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n\n <div onClick={this.toggleSwitch} class=\"control\">\n <div class={`track ${this.size.toLowerCase()}`}>\n <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cura/cura.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as o,w as e,a as i,b as c}from"./p-ba66d7be.js";export{s as setNonce}from"./p-ba66d7be.js";import{g as n}from"./p-f8fffdc1.js";const l=()=>{{o.o=e.__cssshim}const c=import.meta.url;const n={};if(c!==""){n.resourcesUrl=new URL(".",c).href}return i(n)};l().then((o=>{n();return c([["p-bb3f9d05",[[1,"cura-button",{size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32]}],[1,"cura-accordion-item",{label:[513],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],colorMode:[1,"color-mode"],opened:[1540],styles:[32]}],[1,"cura-accordion",{color:[513],activeColor:[513,"active-color"],colorMode:[513,"color-mode"],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],behavior:[513],styles:[32]}],[1,"cura-page-template",{contentwidth:[513]}],[1,"cura-heading",{level:[514],size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}],[1,"cura-loader-circle",{size:[513],color:[513]}],[1,"cura-paragraph",{size:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}],[1,"cura-icon",{name:[513],color:[1],size:[8],iconset:[513],disabled:[4]}]]],["p-2d42ccf4",[[1,"cura-icons-view",{selected:[32]}]]],["p-fef52079",[[1,"cura-alert",{type:[1],floating:[516],label:[513],closeable:[516],styles:[32]}]]],["p-4df84c9e",[[1,"cura-checkbox",{checked:[1540],indeterminate:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],size:[513],background:[1],iconColor:[1,"icon-color"],color:[1],styles:[32]}]]],["p-1228e771",[[1,"cura-input-text",{mode:[1537],status:[1537],size:[1537],type:[513],label:[513],placeholder:[513],value:[1032],iconName:[1537,"icon-name"],helperText:[1537,"helper-text"],disabled:[516],required:[516],maskPreset:[8,"mask-preset"],maskRegex:[1537,"mask-regex"],maskAdvanced:[1537,"mask-advanced"],maxlength:[1538],readOnly:[516,"read-only"],isLoading:[1540,"is-loading"],clearIcon:[1540,"clear-icon"],isHovered:[32],isFocused:[32],styles:[32]}]]],["p-72a9ed55",[[1,"cura-button-outline",{size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32]}]]],["p-880917c1",[[1,"cura-button-transparent",{size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32]}]]],["p-c9afb94f",[[1,"cura-radio",{checked:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],background:[1],size:[1],color:[1],styles:[32]}]]],["p-98014544",[[1,"cura-button-select",{size:[513],disabled:[516],selected:[516],iconPosition:[513,"icon-position"],color:[1],background:[1],fontcolor:[1],hovered:[32],styles:[32]}]]],["p-70cefaf8",[[1,"cura-switch",{checked:[1540],disabled:[516],label:[513],ontabindex:[514],position:[513],size:[513],background:[1],color:[1],styles:[32]}]]],["p-edeffbfc",[[1,"cura-display",{level:[514],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}]]],["p-ad194144",[[1,"cura-label",{size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}]]]],o)}));
+import{p as o,w as e,a as i,b as c}from"./p-ba66d7be.js";export{s as setNonce}from"./p-ba66d7be.js";import{g as n}from"./p-f8fffdc1.js";const l=()=>{{o.o=e.__cssshim}const c=import.meta.url;const n={};if(c!==""){n.resourcesUrl=new URL(".",c).href}return i(n)};l().then((o=>{n();return c([["p-bb3f9d05",[[1,"cura-button",{size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32]}],[1,"cura-accordion-item",{label:[513],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],colorMode:[1,"color-mode"],opened:[1540],styles:[32]}],[1,"cura-accordion",{color:[513],activeColor:[513,"active-color"],colorMode:[513,"color-mode"],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],behavior:[513],styles:[32]}],[1,"cura-page-template",{contentwidth:[513]}],[1,"cura-heading",{level:[514],size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}],[1,"cura-loader-circle",{size:[513],color:[513]}],[1,"cura-paragraph",{size:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}],[1,"cura-icon",{name:[513],color:[1],size:[8],iconset:[513],disabled:[4]}]]],["p-2d42ccf4",[[1,"cura-icons-view",{selected:[32]}]]],["p-fef52079",[[1,"cura-alert",{type:[1],floating:[516],label:[513],closeable:[516],styles:[32]}]]],["p-3f5de5e2",[[1,"cura-checkbox",{checked:[1540],indeterminate:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],size:[513],background:[1],iconColor:[1,"icon-color"],color:[1],styles:[32]}]]],["p-1228e771",[[1,"cura-input-text",{mode:[1537],status:[1537],size:[1537],type:[513],label:[513],placeholder:[513],value:[1032],iconName:[1537,"icon-name"],helperText:[1537,"helper-text"],disabled:[516],required:[516],maskPreset:[8,"mask-preset"],maskRegex:[1537,"mask-regex"],maskAdvanced:[1537,"mask-advanced"],maxlength:[1538],readOnly:[516,"read-only"],isLoading:[1540,"is-loading"],clearIcon:[1540,"clear-icon"],isHovered:[32],isFocused:[32],styles:[32]}]]],["p-72a9ed55",[[1,"cura-button-outline",{size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32]}]]],["p-880917c1",[[1,"cura-button-transparent",{size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32]}]]],["p-8d959fb2",[[1,"cura-radio",{checked:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],background:[1],size:[1],color:[1],styles:[32]}]]],["p-98014544",[[1,"cura-button-select",{size:[513],disabled:[516],selected:[516],iconPosition:[513,"icon-position"],color:[1],background:[1],fontcolor:[1],hovered:[32],styles:[32]}]]],["p-51e00a16",[[1,"cura-switch",{checked:[1540],disabled:[516],label:[513],ontabindex:[514],position:[513],size:[513],background:[1],color:[1],styles:[32]}]]],["p-edeffbfc",[[1,"cura-display",{level:[514],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}]]],["p-ad194144",[[1,"cura-label",{size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}]]]],o)}));
 //# sourceMappingURL=cura.esm.js.map

package/dist/cura/{p-4df84c9e.entry.js → p-3f5de5e2.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as a,H as s,g as i}from"./p-ba66d7be.js";import{f as t}from"./p-3688570d.js";const o='@charset "UTF-8";:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-sizing:border-box;box-sizing:border-box}.container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:var(--gap)}.position.container{-ms-flex-direction:row;flex-direction:row}.position .label-wrapper{-ms-flex-pack:end;justify-content:end}.position .message{text-align:right}.position .label{-ms-flex-order:1;order:1}.info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.label-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center;gap:5px}.control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid var(--primary-base-neutral-medium);border-radius:4px;background:var(--neutral-lighter-neutral-purewhite);-ms-flex:1 0;flex:1 0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size);height:var(--size);-ms-flex:0 0 var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:-ms-flexbox;display:flex;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--primary-darker-neutral-white);border-color:var(--primary-base-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--primary-base-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--primary-base-neutral-white);border-color:var(--primary-base-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--primary-base-neutral-base) !important;background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--primary-base-neutral-base)}.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(--primary-base-neutral-dark)}.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 .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 c=class{constructor(a){e(this,a);this.onchange=r(this,"onchange",7);this.isDarkbackground=()=>this.background==="dark";this.isDarkIconColor=()=>this.iconColor==="dark";this.handleClick=()=>{if(this.disabled)return;this.indeterminate=false;this.checked=!this.checked;this.onchange.emit({value:this.value,checked:this.checked,indeterminate:this.indeterminate})};this.checked=false;this.indeterminate=false;this.status="default";this.disabled=false;this.required=false;this.label=undefined;this.ontabindex=0;this.position="left";this.value=undefined;this.name=undefined;this.size="medium";this.background="light";this.iconColor="dark";this.color="accent";this.styles={}}sizeHandler(){this.styles["--size"]=`${t[this.size].size}px`;this.styles["--gap"]=`${t[this.size].gap}px`}setColors(){const e=[{name:"--color-base",background:`${this.color}-base`},{name:"--color-lighter",background:`${this.color}-lighter`},{name:"--color-light",background:`${this.color}-light`},{name:"--color-dark",background:`${this.color}-dark`},{name:"--info-base",background:"info-base"},{name:"--error-base",background:"error-base"},{name:"--success-lighter",background:"success-lighter"},{name:"--success-base",background:"success-base"},{name:"--success-dark",background:"success-dark"},{name:"--error-lighter",background:"error-lighter"},{name:"--primary-base-neutral-white",background:this.isDarkbackground()?"primary-base":"neutral-white"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--neutral-lighter-neutral-purewhite",background:this.isDarkbackground()?"neutral-lighter":"neutral-purewhite"},{name:"--primary-darker-neutral-white",background:this.isDarkbackground()?"primary-darker":"neutral-white"},{name:"--primary-base-neutral-base",background:this.isDarkbackground()?"primary-base":"neutral-base"},{name:"--primary-base-neutral-dark",background:this.isDarkbackground()?"primary-base":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--success-base-lighter",background:this.isDarkbackground()?"success-base":"success-lighter"},{name:"--success-dark-base",background:this.isDarkbackground()?"success-dark":"success-base"},{name:"--error-base-lighter",background:this.isDarkbackground()?"error-base":"error-lighter"},{name:"--error-dark-base",background:this.isDarkbackground()?"error-dark":"error-base"}];e.forEach((e=>this.styles[e.name]=window.CuraAPI.theme.colors.getColor(e.background)));this.styles=Object.assign({},this.styles)}connectedCallback(){this.sizeHandler();this.setColors()}getClasses(){const e={};e["container"]=true;e["checked"]=this.checked;e["disabled"]=this.disabled;e["indeterminate"]=this.indeterminate;e["position"]=this.position==="right";e[this.status]=true;return e}assignColor(e){if(this.disabled)return this.isDarkbackground()?"primary-darker":"neutral-medium";const r={success:{icon:"success-dark",label:this.isDarkbackground()?"success-lighter":"success-darker",message:this.isDarkbackground()?"success-base":"success-dark"},error:{icon:"error-dark",label:this.isDarkbackground()?"error-lighter":"neutral-darker",message:this.isDarkbackground()?"error-base":"error-dark"},default:{icon:this.isDarkIconColor()?"neutral-black":"neutral-purewhite",label:this.isDarkbackground()?"neutral-white":"neutral-black",message:this.isDarkbackground()?"primary-lighter":"neutral-dark"}};return r[this.status][e]}getIcon(){const e=this.indeterminate?"minus":"check";const r=this.assignColor("icon");const s=this.size==="large"?20:"micro";return a("cura-icon",{class:"icon",name:e,size:s,color:r})}render(){return a(s,null,a("div",{class:this.getClasses(),style:this.styles},a("div",{class:"info"},a("div",{class:"label-wrapper"},a("cura-label",{class:"label",size:this.size==="large"?"medium":"xsmall",color:this.assignColor("label")},this.label),this.required&&a("cura-paragraph",{lineHeight:"0%",marginBlock:"0",color:"error-base"},"* ")),a("cura-label",{color:this.assignColor("message"),size:"xsmall",class:"message"},a("slot",null))),a("div",{class:"checkbox",onClick:this.handleClick,tabIndex:this.ontabindex},a("input",{type:"checkbox",name:this.name,value:this.value,disabled:this.disabled,required:this.required,checked:this.checked,indeterminate:this.indeterminate}),this.getIcon())))}get host(){return i(this)}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"],iconColor:["assignColor"]}}};c.style=o;export{c as cura_checkbox};
-//# sourceMappingURL=p-4df84c9e.entry.js.map
+import{r as e,c as r,h as a,H as s,g as i}from"./p-ba66d7be.js";import{f as t}from"./p-3688570d.js";const o='@charset "UTF-8";:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-sizing:border-box;box-sizing:border-box}.container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:var(--gap)}.position.container{-ms-flex-direction:row;flex-direction:row}.position .label-wrapper{-ms-flex-pack:end;justify-content:end}.position .message{text-align:right}.position .label{-ms-flex-order:1;order:1}.info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.label-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center;gap:5px}.control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid var(--primary-base-neutral-medium);border-radius:4px;background:var(--neutral-lighter-neutral-purewhite);-ms-flex:1 0;flex:1 0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size);height:var(--size);-ms-flex:0 0 var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:-ms-flexbox;display:flex;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--primary-darker-neutral-white);border-color:var(--primary-base-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--primary-base-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--primary-base-neutral-white);border-color:var(--primary-base-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--primary-base-neutral-base) !important;background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--primary-base-neutral-base)}.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(--primary-base-neutral-dark)}.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 .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 c=class{constructor(a){e(this,a);this.onchange=r(this,"onchange",7);this.isDarkbackground=()=>this.background==="dark";this.isDarkIconColor=()=>this.iconColor==="dark";this.handleClick=()=>{if(this.disabled)return;this.indeterminate=false;this.checked=!this.checked;this.onchange.emit({value:this.value,checked:this.checked,indeterminate:this.indeterminate})};this.checked=false;this.indeterminate=false;this.status="default";this.disabled=false;this.required=false;this.label=undefined;this.ontabindex=0;this.position="left";this.value=undefined;this.name=undefined;this.size="medium";this.background="light";this.iconColor="dark";this.color="accent";this.styles={}}sizeHandler(){this.styles=Object.assign(Object.assign({},this.styles),{"--size":`${t[this.size].size}px`,"--gap":`${t[this.size].gap}px`})}setColors(){const e=[{name:"--color-base",background:`${this.color}-base`},{name:"--color-lighter",background:`${this.color}-lighter`},{name:"--color-light",background:`${this.color}-light`},{name:"--color-dark",background:`${this.color}-dark`},{name:"--info-base",background:"info-base"},{name:"--error-base",background:"error-base"},{name:"--success-lighter",background:"success-lighter"},{name:"--success-base",background:"success-base"},{name:"--success-dark",background:"success-dark"},{name:"--error-lighter",background:"error-lighter"},{name:"--primary-base-neutral-white",background:this.isDarkbackground()?"primary-base":"neutral-white"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--neutral-lighter-neutral-purewhite",background:this.isDarkbackground()?"neutral-lighter":"neutral-purewhite"},{name:"--primary-darker-neutral-white",background:this.isDarkbackground()?"primary-darker":"neutral-white"},{name:"--primary-base-neutral-base",background:this.isDarkbackground()?"primary-base":"neutral-base"},{name:"--primary-base-neutral-dark",background:this.isDarkbackground()?"primary-base":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--success-base-lighter",background:this.isDarkbackground()?"success-base":"success-lighter"},{name:"--success-dark-base",background:this.isDarkbackground()?"success-dark":"success-base"},{name:"--error-base-lighter",background:this.isDarkbackground()?"error-base":"error-lighter"},{name:"--error-dark-base",background:this.isDarkbackground()?"error-dark":"error-base"}];e.forEach((e=>{this.styles[e.name]=window.CuraAPI.theme.colors.getColor(e.background)}));this.styles=Object.assign({},this.styles)}connectedCallback(){this.sizeHandler();this.setColors()}getClasses(){const e={};e["container"]=true;e["checked"]=this.checked;e["disabled"]=this.disabled;e["indeterminate"]=this.indeterminate;e["position"]=this.position==="right";e[this.status]=true;return e}assignColor(e){if(this.disabled)return this.isDarkbackground()?"primary-darker":"neutral-medium";const r={success:{icon:"success-dark",label:this.isDarkbackground()?"success-lighter":"success-darker",message:this.isDarkbackground()?"success-base":"success-dark"},error:{icon:"error-dark",label:this.isDarkbackground()?"error-lighter":"neutral-darker",message:this.isDarkbackground()?"error-base":"error-dark"},default:{icon:this.isDarkIconColor()?"neutral-black":"neutral-purewhite",label:this.isDarkbackground()?"neutral-white":"neutral-black",message:this.isDarkbackground()?"primary-lighter":"neutral-dark"}};return r[this.status][e]}getIcon(){const e=this.indeterminate?"minus":"check";const r=this.assignColor("icon");const s=this.size==="large"?20:"micro";return a("cura-icon",{class:"icon",name:e,size:s,color:r})}render(){return a(s,null,a("div",{class:this.getClasses(),style:this.styles},a("div",{class:"info"},a("div",{class:"label-wrapper"},a("cura-label",{class:"label",size:this.size==="large"?"medium":"xsmall",color:this.assignColor("label")},this.label),this.required&&a("cura-paragraph",{lineHeight:"0%",marginBlock:"0",color:"error-base"},"* ")),a("cura-label",{color:this.assignColor("message"),size:"xsmall",class:"message"},a("slot",null))),a("div",{class:"checkbox",onClick:this.handleClick,tabIndex:this.ontabindex},a("input",{type:"checkbox",name:this.name,value:this.value,disabled:this.disabled,required:this.required,checked:this.checked,indeterminate:this.indeterminate}),this.getIcon())))}get host(){return i(this)}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"],iconColor:["assignColor"]}}};c.style=o;export{c as cura_checkbox};
+//# sourceMappingURL=p-3f5de5e2.entry.js.map

package/dist/cura/p-3f5de5e2.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["curaCheckboxCss","CuraCheckbox","this","isDarkbackground","background","isDarkIconColor","iconColor","handleClick","disabled","indeterminate","checked","onchange","emit","value","sizeHandler","styles","Object","assign","formsSizes","size","gap","setColors","colors","name","color","forEach","window","CuraAPI","theme","getColor","connectedCallback","getClasses","classes","position","status","assignColor","type","statusColors","success","icon","label","message","error","default","getIcon","iconName","iconSize","h","class","render","Host","style","required","lineHeight","marginBlock","onClick","tabIndex","ontabindex"],"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\n.position {\n\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\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(--primary-base-neutral-medium);\n border-radius: 4px;\n background: var(--neutral-lighter-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(--primary-darker-neutral-white);\n border-color: var(--primary-base-neutral-base);\n cursor: not-allowed;\n\n &:hover {\n border-color: var(--primary-base-neutral-base) !important;\n }\n}\n\n.disabled.checked .checkbox,\n.disabled.indeterminate .checkbox {\n background: var(--primary-base-neutral-white);\n border-color: var(--primary-base-neutral-base);\n\n &:hover {\n border-color: var(--primary-base-neutral-base) !important;\n background: var(--primary-base-neutral-white);\n\n }\n}\n\n.disabled .checkbox:focus {\n border-color: var(--primary-base-neutral-base);\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, checked, indeterminate */\n:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {\n border-color: var(--primary-base-neutral-dark);\n}\n\n/* Estado Success */\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.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 } 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})\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 isDarkbackground = () => this.background === 'dark';\n\n isDarkIconColor = () => this.iconColor === 'dark';\n\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 /**\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: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--neutral-lighter-neutral-purewhite', background: this.isDarkbackground() ? 'neutral-lighter' : 'neutral-purewhite' },\n { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },\n { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : '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\n connectedCallback() {\n this.sizeHandler()\n this.setColors();\n }\n\n /**\n * Handles click event on the checkbox.\n * Emits onchange event with value, checked, and indeterminate states.\n */\n handleClick = () => {\n if (this.disabled) return;\n\n this.indeterminate = false;\n this.checked = !this.checked;\n this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });\n };\n\n /**\n * Retrieves classes based on component state for conditional styling.\n */\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\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\n @Watch('background')\n @Watch('iconColor')\n assignColor(type: 'icon' | 'label' | 'message',) {\n if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\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\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <div class=\"label-wrapper\">\n <cura-label\n class=\"label\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n 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\n color={this.assignColor('message')}\n size=\"xsmall\"\n class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n <div class={\"checkbox\"} onClick={this.handleClick} 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"],"mappings":"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"}

package/dist/cura/p-4db87e8d.system.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ System.register(["./p-36a83bc7.system.js","./p-d3f9c888.system.js"],(function(e){"use strict";var t,r,a,i,s;return{setters:[function(e){t=e.r;r=e.c;a=e.h;i=e.H},function(e){s=e.f}],execute:function(){var o='@charset "UTF-8";:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-sizing:border-box;box-sizing:border-box}.container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:var(--gap)}.position.container{-ms-flex-direction:row;flex-direction:row}.position .label{text-align:right}.position .message{text-align:right}.control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.track{background:var(--neutral-base-black-40);border-radius:16px;-webkit-transition:background-color 0.3s;transition:background-color 0.3s;-ms-flex-align:start;align-items:flex-start;-ms-flex-negative:0;flex-shrink:0;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size-track);height:var(--size)}.thumb{background-color:var(--neutral-white-purewhite);border:2px solid var(--neutral-medium);border-radius:50%;position:absolute;-webkit-transition:outline 0.3s, -webkit-transform 0.3s;transition:outline 0.3s, -webkit-transform 0.3s;transition:transform 0.3s, outline 0.3s;transition:transform 0.3s, outline 0.3s, -webkit-transform 0.3s;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size);height:var(--size)}.checked .thumb{border-color:var(--color-dark-light);background:var(--color-lighter);-webkit-transform:translateX(var(--size));transform:translateX(var(--size))}.checked .thumb:hover{background:var(--neutral-white-purewhite) !important}.checked .track{background:var(--color-base-lighter-50)}.disabled .track{background:var(--primary-base-neutral-black-20)}.disabled .thumb{background:var(--neutral-lighter) !important;border-color:var(--primary-dark-neutral-base);cursor:not-allowed}.disabled.checked .track{background:var(--primary-base-neutral-black-20)}.disabled .thumb:hover{background:var(--neutral-lighter) !important;border-color:var(--primary-dark-neutral-base) !important}:not(.disabled):not(.checked) .thumb:hover{border-color:var(--color-dark-light);background:var(--color-lighter)}:not(.disabled) .thumb:focus{border-color:var(--info-base) !important;z-index:1}';var n=e("cura_switch",function(){function e(e){var a=this;t(this,e);this.onchange=r(this,"onchange",7);this.sizes={large:{size:64},medium:{size:48},small:{size:40}};this.isDarkbackground=function(){return a.background==="dark"};this.toggleSwitch=function(){if(a.disabled)return null;a.checked=!a.checked;a.onchange.emit({checked:a.checked})};this.checked=false;this.disabled=false;this.label="";this.ontabindex=0;this.position="left";this.size="medium";this.background="light";this.color="accent";this.styles={}}e.prototype.sizeHandler=function(){this.styles=Object.assign(Object.assign({},this.styles),{"--size-track":"".concat(this.sizes[this.size].size,"px"),"--size":"".concat(s[this.size].size,"px"),"--gap":"".concat(s[this.size].gap,"px")})};e.prototype.setColors=function(){var e=this;var t=[{name:"--info-base",background:"info-base"},{name:"--neutral-medium",background:"neutral-medium"},{name:"--color-lighter",background:"".concat(this.color,"-lighter")},{name:"--color-base-lighter-50",background:"".concat(this.color,"-").concat(this.isDarkbackground()?"base":"lighter"),opacity:.5},{name:"--color-base-light",background:"".concat(this.color,"-").concat(this.isDarkbackground()?"base":"light")},{name:"--color-dark-light",background:"".concat(this.color,"-").concat(this.isDarkbackground()?"dark":"light")},{name:"--primary-lighter-neutral-dark",background:this.isDarkbackground()?"primary-lighter":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--neutral-white-purewhite",background:"neutral-".concat(this.isDarkbackground()?"white":"purewhite")},{name:"--primary-base-neutral-black-20",background:"".concat(this.isDarkbackground()?"primary-base":"neutral-black"),opacity:.2},{name:"--neutral-base-black-40",background:"neutral-".concat(this.isDarkbackground()?"base":"black"),opacity:.4},{name:"--primary-dark-neutral-base",background:"".concat(this.isDarkbackground()?"primary-dark":"neutral-base")},{name:"--neutral-lighter",background:"".concat(this.isDarkbackground()?"primary-base":"neutral-lighter")}];t.forEach((function(t){e.styles[t.name]=window.CuraAPI.theme.colors.getColor(t.background,t===null\|\|t===void 0?void 0:t.opacity)}));this.styles=Object.assign({},this.styles)};e.prototype.connectedCallback=function(){this.sizeHandler();this.setColors()};e.prototype.assignColor=function(e,t){if(this.disabled)return this.isDarkbackground()?"primary-base":"neutral-medium";return this.isDarkbackground()?e:t};e.prototype.getClasses=function(){var e={};e["container"]=true;e["checked"]=this.checked;e["disabled"]=this.disabled;e["position"]=this.position==="right";return e};e.prototype.render=function(){return a(i,null,a("div",{class:this.getClasses(),style:this.styles},a("div",{class:"info"},a("cura-label",{class:"label",size:this.size==="large"?"medium":"xsmall",lineHeight:"125%",color:this.assignColor("neutral-white","neutral-black")},this.label),a("cura-label",{color:this.assignColor("primary-lighter","neutral-dark"),size:"xsmall",class:"message"},a("slot",null))),a("div",{onClick:this.toggleSwitch,class:"control"},a("div",{class:"track ".concat(this.size.toLowerCase())},a("div",{class:"thumb ".concat(this.size.toLowerCase()),tabIndex:this.ontabindex})))))};Object.defineProperty(e,"watchers",{get:function(){return{size:["sizeHandler"],color:["setColors"],background:["setColors"]}},enumerable:false,configurable:true});return e}());n.style=o}}}));
2	+ //# sourceMappingURL=p-4db87e8d.system.entry.js.map

package/dist/cura/p-4db87e8d.system.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["curaSwitchCss","CuraSwitch","exports","this","sizes","large","size","medium","small","isDarkbackground","_this","background","toggleSwitch","disabled","checked","onchange","emit","class_1","prototype","sizeHandler","styles","Object","assign","concat","formsSizes","gap","setColors","colors","name","color","opacity","forEach","window","CuraAPI","theme","getColor","connectedCallback","assignColor","colorDark","colorLight","getClasses","classes","position","render","h","Host","class","style","lineHeight","label","onClick","toLowerCase","tabIndex","ontabindex"],"sources":["src/components/forms/cura-switch/cura-switch.scss?tag=cura-switch&encapsulation=shadow","src/components/forms/cura-switch/cura-switch.tsx"],"sourcesContent":[":host {\n display: block;\n width: fit-content;\n box-sizing: border-box;\n}\n\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--gap);\n}\n\n.position {\n\n &.container {\n flex-direction: row;\n }\n\n .label {\n text-align: right;\n }\n\n .message {\n text-align: right;\n }\n}\n\n.control {\n width: fit-content;\n}\n\n/* Estilos para o controle de switch */\n.track {\n background: var(--neutral-base-black-40);\n border-radius: 16px;\n transition: background-color 0.3s;\n align-items: flex-start;\n flex-shrink: 0;\n box-sizing: border-box;\n width: var(--size-track);\n height: var(--size);\n}\n\n.thumb {\n background-color: var(--neutral-white-purewhite);\n border: 2px solid var(--neutral-medium);\n border-radius: 50%;\n position: absolute;\n transition: transform 0.3s, outline 0.3s;\n display: inline-block;\n cursor: pointer;\n user-select: none;\n box-sizing: border-box;\n width: var(--size);\n height: var(--size);\n}\n\n/* Estado \"checked\" */\n.checked .thumb {\n border-color: var(--color-dark-light);\n background: var(--color-lighter);\n transform: translateX(var(--size));\n}\n\n.checked .thumb:hover {\n background: var(--neutral-white-purewhite) !important;\n}\n\n.checked .track {\n background: var(--color-base-lighter-50);\n}\n\n/* Estado \"disabled\" */\n\n.disabled .track {\n background: var(--primary-base-neutral-black-20);\n\n}\n\n.disabled .thumb {\n background: var(--neutral-lighter) !important;\n border-color: var(--primary-dark-neutral-base);\n cursor: not-allowed;\n\n}\n\n.disabled.checked .track {\n background: var(--primary-base-neutral-black-20);\n}\n\n.disabled .thumb:hover {\n background: var(--neutral-lighter) !important;\n border-color: var(--primary-dark-neutral-base) !important;\n}\n\n/* Estado hover para não disabled e não checked */\n:not(.disabled):not(.checked) .thumb:hover {\n border-color: var(--color-dark-light);\n background: var(--color-lighter);\n}\n\n/* Estado hover para não disabled */\n:not(.disabled) .thumb:focus {\n border-color: var(--info-base) !important;\n z-index: 1;\n}\n","import { Component, Prop, Event, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-switch',\n styleUrl: 'cura-switch.scss',\n shadow: true,\n})\n\nexport class CuraSwitch {\n /**\n * Indicates whether the switch is checked or not.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /**\n * Indicates whether the switch is disabled or not.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n /**\n * The label text to display next to the switch.\n */\n @Prop({ reflect: true }) label: string = '';\n /**\n * Tab index for the switch element.\n * Reflects as an HTML attribute.\n */\n @Prop({ reflect: true }) ontabindex: number = 0;\n /**\n * Position of the label relative to the switch.\n * Can be 'left' or 'right'.\n */\n @Prop({ reflect: true }) position: \"left\" | \"right\" = 'left';\n /**\n * Size of the switch.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * Background style of the switch.\n * Can be 'dark' or 'light'.\n */\n @Prop() background: 'dark' | 'light' = 'light';\n /**\n * Accent color of the switch.\n */\n @Prop() color = 'accent';\n\n @State() styles = {};\n\n @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n sizes = {\n \"large\": { size: 64 },\n \"medium\": { size: 48 },\n \"small\": { size: 40 },\n };\n\n\n isDarkbackground = () => this.background === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size-track': `${this.sizes[this.size].size}px`,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`\n };\n }\n\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--neutral-medium', background: 'neutral-medium' },\n { name: '--color-lighter', background: `${this.color}-lighter` },\n { name: '--color-base-lighter-50', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'lighter'}`, opacity: 0.5 },\n { name: '--color-base-light', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'light'}` },\n { name: '--color-dark-light', background: `${this.color}-${this.isDarkbackground() ? 'dark' : 'light'}` },\n { name: '--primary-lighter-neutral-dark', background: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--neutral-white-purewhite', background: `neutral-${this.isDarkbackground() ? 'white' : 'purewhite'}` },\n { name: '--primary-base-neutral-black-20', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-black'}`, opacity: 0.2 },\n { name: '--neutral-base-black-40', background: `neutral-${this.isDarkbackground() ? 'base' : 'black'}`, opacity: 0.4 },\n { name: '--primary-dark-neutral-base', background: `${this.isDarkbackground() ? 'primary-dark' : 'neutral-base'}` },\n { name: '--neutral-lighter', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-lighter'}` },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity);\n });\n this.styles = { ...this.styles };\n\n }\n\n connectedCallback() {\n this.sizeHandler()\n this.setColors();\n }\n\n toggleSwitch = () => {\n if (this.disabled) return null;\n\n this.checked = !this.checked;\n this.onchange.emit({ checked: this.checked })\n };\n\n assignColor(colorDark: string, colorLight: string) {\n if (this.disabled) return this.isDarkbackground() ? 'primary-base' : 'neutral-medium';\n return this.isDarkbackground() ? colorDark : colorLight\n }\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n\n return classes;\n }\n\n\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <cura-label class=\"label\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n lineHeight=\"125%\"\n color={this.assignColor('neutral-white', 'neutral-black')}>\n {this.label}\n </cura-label>\n <cura-label\n color={this.assignColor('primary-lighter', 'neutral-dark')}\n size=\"xsmall\"\n class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n\n <div onClick={this.toggleSwitch} class=\"control\">\n <div class={`track ${this.size.toLowerCase()}`}>\n <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/cura/{p-70cefaf8.entry.js → p-51e00a16.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r,c as t,h as e,H as i}from"./p-ba66d7be.js";import{f as a}from"./p-3688570d.js";const s='@charset "UTF-8";:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-sizing:border-box;box-sizing:border-box}.container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:var(--gap)}.position.container{-ms-flex-direction:row;flex-direction:row}.position .label{text-align:right}.position .message{text-align:right}.control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.track{background:var(--neutral-base-black-40);border-radius:16px;-webkit-transition:background-color 0.3s;transition:background-color 0.3s;-ms-flex-align:start;align-items:flex-start;-ms-flex-negative:0;flex-shrink:0;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size-track);height:var(--size)}.thumb{background-color:var(--neutral-white-purewhite);border:2px solid var(--neutral-medium);border-radius:50%;position:absolute;-webkit-transition:outline 0.3s, -webkit-transform 0.3s;transition:outline 0.3s, -webkit-transform 0.3s;transition:transform 0.3s, outline 0.3s;transition:transform 0.3s, outline 0.3s, -webkit-transform 0.3s;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size);height:var(--size)}.checked .thumb{border-color:var(--color-dark-light);background:var(--color-lighter);-webkit-transform:translateX(var(--size));transform:translateX(var(--size))}.checked .thumb:hover{background:var(--neutral-white-purewhite) !important}.checked .track{background:var(--color-base-lighter-50)}.disabled .track{background:var(--primary-base-neutral-black-20)}.disabled .thumb{background:var(--neutral-lighter) !important;border-color:var(--primary-dark-neutral-base);cursor:not-allowed}.disabled.checked .track{background:var(--primary-base-neutral-black-20)}.disabled .thumb:hover{background:var(--neutral-lighter) !important;border-color:var(--primary-dark-neutral-base) !important}:not(.disabled):not(.checked) .thumb:hover{border-color:var(--color-dark-light);background:var(--color-lighter)}:not(.disabled) .thumb:focus{border-color:var(--info-base) !important;z-index:1}';const o=class{constructor(e){r(this,e);this.onchange=t(this,"onchange",7);this.sizes={large:{size:64},medium:{size:48},small:{size:40}};this.isDarkbackground=()=>this.background==="dark";this.toggleSwitch=()=>{if(this.disabled)return null;this.checked=!this.checked;this.onchange.emit({checked:this.checked})};this.checked=false;this.disabled=false;this.label="";this.ontabindex=0;this.position="left";this.size="medium";this.background="light";this.color="accent";this.styles={}}sizeHandler(){this.styles["--size-track"]=`${this.sizes[this.size].size}px`;this.styles["--size"]=`${a[this.size].size}px`;this.styles["--gap"]=`${a[this.size].gap}px`}setColors(){const r=[{name:"--info-base",background:"info-base"},{name:"--neutral-medium",background:"neutral-medium"},{name:"--color-lighter",background:`${this.color}-lighter`},{name:"--color-base-lighter-50",background:`${this.color}-${this.isDarkbackground()?"base":"lighter"}`,opacity:.5},{name:"--color-base-light",background:`${this.color}-${this.isDarkbackground()?"base":"light"}`},{name:"--color-dark-light",background:`${this.color}-${this.isDarkbackground()?"dark":"light"}`},{name:"--primary-lighter-neutral-dark",background:this.isDarkbackground()?"primary-lighter":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--neutral-white-purewhite",background:`neutral-${this.isDarkbackground()?"white":"purewhite"}`},{name:"--primary-base-neutral-black-20",background:`${this.isDarkbackground()?"primary-base":"neutral-black"}`,opacity:.2},{name:"--neutral-base-black-40",background:`neutral-${this.isDarkbackground()?"base":"black"}`,opacity:.4},{name:"--primary-dark-neutral-base",background:`${this.isDarkbackground()?"primary-dark":"neutral-base"}`},{name:"--neutral-lighter",background:`${this.isDarkbackground()?"primary-base":"neutral-lighter"}`}];r.forEach((r=>this.styles[r.name]=window.CuraAPI.theme.colors.getColor(r.background,r===null||r===void 0?void 0:r.opacity)))}connectedCallback(){this.sizeHandler();this.setColors()}assignColor(r,t){if(this.disabled)return this.isDarkbackground()?"primary-base":"neutral-medium";return this.isDarkbackground()?r:t}getClasses(){const r={};r["container"]=true;r["checked"]=this.checked;r["disabled"]=this.disabled;r["position"]=this.position==="right";return r}render(){return e(i,null,e("div",{class:this.getClasses(),style:this.styles},e("div",{class:"info"},e("cura-label",{class:"label",size:this.size==="large"?"medium":"xsmall",lineHeight:"125%",color:this.assignColor("neutral-white","neutral-black")},this.label),e("cura-label",{color:this.assignColor("primary-lighter","neutral-dark"),size:"xsmall",class:"message"},e("slot",null))),e("div",{onClick:this.toggleSwitch,class:"control"},e("div",{class:`track ${this.size.toLowerCase()}`},e("div",{class:`thumb ${this.size.toLowerCase()}`,tabIndex:this.ontabindex})))))}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors"]}}};o.style=s;export{o as cura_switch};
-//# sourceMappingURL=p-70cefaf8.entry.js.map
+import{r,c as t,h as e,H as i}from"./p-ba66d7be.js";import{f as a}from"./p-3688570d.js";const s='@charset "UTF-8";:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-sizing:border-box;box-sizing:border-box}.container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:var(--gap)}.position.container{-ms-flex-direction:row;flex-direction:row}.position .label{text-align:right}.position .message{text-align:right}.control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.track{background:var(--neutral-base-black-40);border-radius:16px;-webkit-transition:background-color 0.3s;transition:background-color 0.3s;-ms-flex-align:start;align-items:flex-start;-ms-flex-negative:0;flex-shrink:0;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size-track);height:var(--size)}.thumb{background-color:var(--neutral-white-purewhite);border:2px solid var(--neutral-medium);border-radius:50%;position:absolute;-webkit-transition:outline 0.3s, -webkit-transform 0.3s;transition:outline 0.3s, -webkit-transform 0.3s;transition:transform 0.3s, outline 0.3s;transition:transform 0.3s, outline 0.3s, -webkit-transform 0.3s;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size);height:var(--size)}.checked .thumb{border-color:var(--color-dark-light);background:var(--color-lighter);-webkit-transform:translateX(var(--size));transform:translateX(var(--size))}.checked .thumb:hover{background:var(--neutral-white-purewhite) !important}.checked .track{background:var(--color-base-lighter-50)}.disabled .track{background:var(--primary-base-neutral-black-20)}.disabled .thumb{background:var(--neutral-lighter) !important;border-color:var(--primary-dark-neutral-base);cursor:not-allowed}.disabled.checked .track{background:var(--primary-base-neutral-black-20)}.disabled .thumb:hover{background:var(--neutral-lighter) !important;border-color:var(--primary-dark-neutral-base) !important}:not(.disabled):not(.checked) .thumb:hover{border-color:var(--color-dark-light);background:var(--color-lighter)}:not(.disabled) .thumb:focus{border-color:var(--info-base) !important;z-index:1}';const o=class{constructor(e){r(this,e);this.onchange=t(this,"onchange",7);this.sizes={large:{size:64},medium:{size:48},small:{size:40}};this.isDarkbackground=()=>this.background==="dark";this.toggleSwitch=()=>{if(this.disabled)return null;this.checked=!this.checked;this.onchange.emit({checked:this.checked})};this.checked=false;this.disabled=false;this.label="";this.ontabindex=0;this.position="left";this.size="medium";this.background="light";this.color="accent";this.styles={}}sizeHandler(){this.styles=Object.assign(Object.assign({},this.styles),{"--size-track":`${this.sizes[this.size].size}px`,"--size":`${a[this.size].size}px`,"--gap":`${a[this.size].gap}px`})}setColors(){const r=[{name:"--info-base",background:"info-base"},{name:"--neutral-medium",background:"neutral-medium"},{name:"--color-lighter",background:`${this.color}-lighter`},{name:"--color-base-lighter-50",background:`${this.color}-${this.isDarkbackground()?"base":"lighter"}`,opacity:.5},{name:"--color-base-light",background:`${this.color}-${this.isDarkbackground()?"base":"light"}`},{name:"--color-dark-light",background:`${this.color}-${this.isDarkbackground()?"dark":"light"}`},{name:"--primary-lighter-neutral-dark",background:this.isDarkbackground()?"primary-lighter":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--neutral-white-purewhite",background:`neutral-${this.isDarkbackground()?"white":"purewhite"}`},{name:"--primary-base-neutral-black-20",background:`${this.isDarkbackground()?"primary-base":"neutral-black"}`,opacity:.2},{name:"--neutral-base-black-40",background:`neutral-${this.isDarkbackground()?"base":"black"}`,opacity:.4},{name:"--primary-dark-neutral-base",background:`${this.isDarkbackground()?"primary-dark":"neutral-base"}`},{name:"--neutral-lighter",background:`${this.isDarkbackground()?"primary-base":"neutral-lighter"}`}];r.forEach((r=>{this.styles[r.name]=window.CuraAPI.theme.colors.getColor(r.background,r===null||r===void 0?void 0:r.opacity)}));this.styles=Object.assign({},this.styles)}connectedCallback(){this.sizeHandler();this.setColors()}assignColor(r,t){if(this.disabled)return this.isDarkbackground()?"primary-base":"neutral-medium";return this.isDarkbackground()?r:t}getClasses(){const r={};r["container"]=true;r["checked"]=this.checked;r["disabled"]=this.disabled;r["position"]=this.position==="right";return r}render(){return e(i,null,e("div",{class:this.getClasses(),style:this.styles},e("div",{class:"info"},e("cura-label",{class:"label",size:this.size==="large"?"medium":"xsmall",lineHeight:"125%",color:this.assignColor("neutral-white","neutral-black")},this.label),e("cura-label",{color:this.assignColor("primary-lighter","neutral-dark"),size:"xsmall",class:"message"},e("slot",null))),e("div",{onClick:this.toggleSwitch,class:"control"},e("div",{class:`track ${this.size.toLowerCase()}`},e("div",{class:`thumb ${this.size.toLowerCase()}`,tabIndex:this.ontabindex})))))}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors"]}}};o.style=s;export{o as cura_switch};
+//# sourceMappingURL=p-51e00a16.entry.js.map

package/dist/cura/p-51e00a16.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["curaSwitchCss","CuraSwitch","this","sizes","large","size","medium","small","isDarkbackground","background","toggleSwitch","disabled","checked","onchange","emit","sizeHandler","styles","Object","assign","formsSizes","gap","setColors","colors","name","color","opacity","forEach","window","CuraAPI","theme","getColor","connectedCallback","assignColor","colorDark","colorLight","getClasses","classes","position","render","h","Host","class","style","lineHeight","label","onClick","toLowerCase","tabIndex","ontabindex"],"sources":["./src/components/forms/cura-switch/cura-switch.scss?tag=cura-switch&encapsulation=shadow","./src/components/forms/cura-switch/cura-switch.tsx"],"sourcesContent":[":host {\n display: block;\n width: fit-content;\n box-sizing: border-box;\n}\n\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--gap);\n}\n\n.position {\n\n &.container {\n flex-direction: row;\n }\n\n .label {\n text-align: right;\n }\n\n .message {\n text-align: right;\n }\n}\n\n.control {\n width: fit-content;\n}\n\n/* Estilos para o controle de switch */\n.track {\n background: var(--neutral-base-black-40);\n border-radius: 16px;\n transition: background-color 0.3s;\n align-items: flex-start;\n flex-shrink: 0;\n box-sizing: border-box;\n width: var(--size-track);\n height: var(--size);\n}\n\n.thumb {\n background-color: var(--neutral-white-purewhite);\n border: 2px solid var(--neutral-medium);\n border-radius: 50%;\n position: absolute;\n transition: transform 0.3s, outline 0.3s;\n display: inline-block;\n cursor: pointer;\n user-select: none;\n box-sizing: border-box;\n width: var(--size);\n height: var(--size);\n}\n\n/* Estado \"checked\" */\n.checked .thumb {\n border-color: var(--color-dark-light);\n background: var(--color-lighter);\n transform: translateX(var(--size));\n}\n\n.checked .thumb:hover {\n background: var(--neutral-white-purewhite) !important;\n}\n\n.checked .track {\n background: var(--color-base-lighter-50);\n}\n\n/* Estado \"disabled\" */\n\n.disabled .track {\n background: var(--primary-base-neutral-black-20);\n\n}\n\n.disabled .thumb {\n background: var(--neutral-lighter) !important;\n border-color: var(--primary-dark-neutral-base);\n cursor: not-allowed;\n\n}\n\n.disabled.checked .track {\n background: var(--primary-base-neutral-black-20);\n}\n\n.disabled .thumb:hover {\n background: var(--neutral-lighter) !important;\n border-color: var(--primary-dark-neutral-base) !important;\n}\n\n/* Estado hover para não disabled e não checked */\n:not(.disabled):not(.checked) .thumb:hover {\n border-color: var(--color-dark-light);\n background: var(--color-lighter);\n}\n\n/* Estado hover para não disabled */\n:not(.disabled) .thumb:focus {\n border-color: var(--info-base) !important;\n z-index: 1;\n}\n","import { Component, Prop, Event, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-switch',\n styleUrl: 'cura-switch.scss',\n shadow: true,\n})\n\nexport class CuraSwitch {\n /**\n * Indicates whether the switch is checked or not.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /**\n * Indicates whether the switch is disabled or not.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n /**\n * The label text to display next to the switch.\n */\n @Prop({ reflect: true }) label: string = '';\n /**\n * Tab index for the switch element.\n * Reflects as an HTML attribute.\n */\n @Prop({ reflect: true }) ontabindex: number = 0;\n /**\n * Position of the label relative to the switch.\n * Can be 'left' or 'right'.\n */\n @Prop({ reflect: true }) position: \"left\" | \"right\" = 'left';\n /**\n * Size of the switch.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * Background style of the switch.\n * Can be 'dark' or 'light'.\n */\n @Prop() background: 'dark' | 'light' = 'light';\n /**\n * Accent color of the switch.\n */\n @Prop() color = 'accent';\n\n @State() styles = {};\n\n @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n sizes = {\n \"large\": { size: 64 },\n \"medium\": { size: 48 },\n \"small\": { size: 40 },\n };\n\n\n isDarkbackground = () => this.background === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size-track': `${this.sizes[this.size].size}px`,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`\n };\n }\n\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--neutral-medium', background: 'neutral-medium' },\n { name: '--color-lighter', background: `${this.color}-lighter` },\n { name: '--color-base-lighter-50', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'lighter'}`, opacity: 0.5 },\n { name: '--color-base-light', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'light'}` },\n { name: '--color-dark-light', background: `${this.color}-${this.isDarkbackground() ? 'dark' : 'light'}` },\n { name: '--primary-lighter-neutral-dark', background: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--neutral-white-purewhite', background: `neutral-${this.isDarkbackground() ? 'white' : 'purewhite'}` },\n { name: '--primary-base-neutral-black-20', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-black'}`, opacity: 0.2 },\n { name: '--neutral-base-black-40', background: `neutral-${this.isDarkbackground() ? 'base' : 'black'}`, opacity: 0.4 },\n { name: '--primary-dark-neutral-base', background: `${this.isDarkbackground() ? 'primary-dark' : 'neutral-base'}` },\n { name: '--neutral-lighter', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-lighter'}` },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity);\n });\n this.styles = { ...this.styles };\n\n }\n\n connectedCallback() {\n this.sizeHandler()\n this.setColors();\n }\n\n toggleSwitch = () => {\n if (this.disabled) return null;\n\n this.checked = !this.checked;\n this.onchange.emit({ checked: this.checked })\n };\n\n assignColor(colorDark: string, colorLight: string) {\n if (this.disabled) return this.isDarkbackground() ? 'primary-base' : 'neutral-medium';\n return this.isDarkbackground() ? colorDark : colorLight\n }\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n\n return classes;\n }\n\n\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <cura-label class=\"label\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n lineHeight=\"125%\"\n color={this.assignColor('neutral-white', 'neutral-black')}>\n {this.label}\n </cura-label>\n <cura-label\n color={this.assignColor('primary-lighter', 'neutral-dark')}\n size=\"xsmall\"\n class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n\n <div onClick={this.toggleSwitch} class=\"control\">\n <div class={`track ${this.size.toLowerCase()}`}>\n <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/cura/{p-c9afb94f.entry.js → p-8d959fb2.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r,c as e,h as a,H as s,g as t}from"./p-ba66d7be.js";import{f as o}from"./p-3688570d.js";const i='@charset "UTF-8";:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-sizing:border-box;box-sizing:border-box;}:host .container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:var(--gap)}:host .position.container{-ms-flex-direction:row;flex-direction:row}:host .position .label-wrapper{-ms-flex-pack:end;justify-content:end}:host .position .message{text-align:right}:host .position .label{-ms-flex-order:1;order:1}:host .info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .label-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center;gap:5px}:host .control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative}:host .radio{margin:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:50%;border:2px solid var(--primary-base-neutral-medium);background:var(--neutral-purewhite);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border-color 0.3s;transition:border-color 0.3s;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;width:var(--size);height:var(--size);-ms-flex:0 0 var(--size);flex:0 0 var(--size)}:host .radio::after{content:"";background:var(--color-base-light);border-radius:50%;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;width:var(--size-after);height:var(--size-after)}:host .radio:focus{border-color:var(--info-base) !important}:host .success .radio{border-color:var(--success-base);background:var(--success-lighter)}:host .success .radio:hover{border-color:var(--success-base) !important}:host .success.checked .radio{border-color:var(--success-base)}:host .success.checked .radio::after{background:var(--success-base)}:host .success.checked .radio:hover{background:var(--success-lighter) !important;border-color:var(--success-base) !important}:host .success.checked .radio:hover::after{background:var(--success-base) !important}:host .error .radio{border-color:var(--error-base);background:var(--error-lighter)}:host .error .radio:hover{border-color:var(--error-base) !important}:host .error.checked .radio{border-color:var(--error-base)}:host .error.checked .radio::after{background:var(--error-base)}:host .error.checked .radio:hover{background:var(--error-lighter) !important;border-color:var(--error-base) !important}:host .error.checked .radio:hover::after{background:var(--error-base) !important}:host .checked .radio::after{opacity:1;background:var(--color-base)}:host .checked .radio{border-color:var(--color-dark)}:host .checked .radio:hover{border-color:var(--color-light) !important}:host .checked .radio:hover::after{background:var(--color-light)}:host .disabled .radio{background:var(--primary-base-neutral-white);border-color:var(--primary-darker-neutral-base);cursor:not-allowed}:host .disabled .radio::after{background:var(--neutral-lighter)}:host .disabled.checked .radio{border-color:var(--primary-base-neutral-base) !important;background:var(--primary-darker-neutral-white) !important}:host .disabled.checked .radio::after{background:var(--primary-base-neutral-base) !important}:host :not(.disabled):not(.checked) .radio:hover{border-color:var(--primary-base-neutral-dark)}';const c=class{constructor(a){r(this,a);this.onchange=e(this,"onchange",7);this.sizes={large:{size:20},medium:{size:14},small:{size:10}};this.isDarkbackground=()=>this.background==="dark";this.handleClick=()=>{if(this.disabled)return;this.checked=!this.checked;this.onchange.emit({value:this.value,checked:this.checked})};this.checked=false;this.status="default";this.disabled=false;this.required=false;this.label="";this.ontabindex=undefined;this.position="left";this.value="";this.name="";this.background="light";this.size="medium";this.color="accent";this.styles={}}sizeHandler(){this.styles["--size-after"]=`${this.sizes[this.size].size}px`;this.styles["--size"]=`${o[this.size].size}px`;this.styles["--gap"]=`${o[this.size].gap}px`}setColors(){const r=[{name:"--info-base",background:"info-base"},{name:"--color-light",background:`${this.color}-light`},{name:"--color-base",background:`${this.color}-base`},{name:"--color-dark",background:`${this.color}-dark`},{name:"--neutral-purewhite",background:"neutral-purewhite"},{name:"--success-lighter",background:"success-lighter"},{name:"--success-base",background:"success-base"},{name:"--error-lighter",background:"error-lighter"},{name:"--error-base",background:"error-base"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--primary-base-neutral-white",background:this.isDarkbackground()?"primary-base":"neutral-white"},{name:"--primary-darker-neutral-white",background:this.isDarkbackground()?"primary-darker":"neutral-white"},{name:"--primary-darker-neutral-base",background:this.isDarkbackground()?"primary-darker":"neutral-base"},{name:"--primary-base-neutral-base",background:this.isDarkbackground()?"primary-base":"neutral-base"},{name:"--primary-base-neutral-dark",background:this.isDarkbackground()?"primary-base":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--success-base-dark",background:this.isDarkbackground()?"success-base":"success-dark"},{name:"--error-base-dark",background:this.isDarkbackground()?"error-base":"error-dark"}];r.forEach((r=>this.styles[r.name]=window.CuraAPI.theme.colors.getColor(r.background)))}connectedCallback(){this.sizeHandler();this.setColors()}getClasses(){const r={};r["container"]=true;r["checked"]=this.checked;r["disabled"]=this.disabled;r["position"]=this.position==="right";r[this.status]=true;return r}assignColor(r){if(this.disabled)return this.isDarkbackground()?"primary-darker":"neutral-medium";const e={success:{label:this.isDarkbackground()?"success-lighter":"success-darker",message:this.isDarkbackground()?"success-base":"success-dark"},error:{label:this.isDarkbackground()?"error-lighter":"neutral-darker",message:this.isDarkbackground()?"error-base":"error-dark"},default:{label:this.isDarkbackground()?"neutral-white":"neutral-black",message:this.isDarkbackground()?"primary-lighter":"neutral-dark"}};return e[this.status][r]}render(){return a(s,null,a("div",{class:this.getClasses(),style:this.styles},a("div",{class:"info"},a("div",{class:"label-wrapper"},a("cura-label",{class:"label",size:this.size==="large"?"medium":"xsmall",color:this.assignColor("label")},this.label),this.required&&a("cura-paragraph",{lineHeight:"0%",marginBlock:"0",color:"error-base"},"* ")),a("cura-label",{color:this.assignColor("message"),size:"xsmall",class:"message"},a("slot",null))),a("input",{type:"radio",class:`radio ${this.size.toLocaleLowerCase()}`,name:this.name,value:this.value,required:this.required,tabIndex:this.ontabindex,disabled:this.disabled,checked:this.checked,onClick:this.handleClick})))}get host(){return t(this)}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"]}}};c.style=i;export{c as cura_radio};
-//# sourceMappingURL=p-c9afb94f.entry.js.map
+import{r,c as e,h as a,H as s,g as t}from"./p-ba66d7be.js";import{f as o}from"./p-3688570d.js";const i='@charset "UTF-8";:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-sizing:border-box;box-sizing:border-box;}:host .container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:var(--gap)}:host .position.container{-ms-flex-direction:row;flex-direction:row}:host .position .label-wrapper{-ms-flex-pack:end;justify-content:end}:host .position .message{text-align:right}:host .position .label{-ms-flex-order:1;order:1}:host .info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .label-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center;gap:5px}:host .control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative}:host .radio{margin:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:50%;border:2px solid var(--primary-base-neutral-medium);background:var(--neutral-purewhite);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border-color 0.3s;transition:border-color 0.3s;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;width:var(--size);height:var(--size);-ms-flex:0 0 var(--size);flex:0 0 var(--size)}:host .radio::after{content:"";background:var(--color-base-light);border-radius:50%;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;width:var(--size-after);height:var(--size-after)}:host .radio:focus{border-color:var(--info-base) !important}:host .success .radio{border-color:var(--success-base);background:var(--success-lighter)}:host .success .radio:hover{border-color:var(--success-base) !important}:host .success.checked .radio{border-color:var(--success-base)}:host .success.checked .radio::after{background:var(--success-base)}:host .success.checked .radio:hover{background:var(--success-lighter) !important;border-color:var(--success-base) !important}:host .success.checked .radio:hover::after{background:var(--success-base) !important}:host .error .radio{border-color:var(--error-base);background:var(--error-lighter)}:host .error .radio:hover{border-color:var(--error-base) !important}:host .error.checked .radio{border-color:var(--error-base)}:host .error.checked .radio::after{background:var(--error-base)}:host .error.checked .radio:hover{background:var(--error-lighter) !important;border-color:var(--error-base) !important}:host .error.checked .radio:hover::after{background:var(--error-base) !important}:host .checked .radio::after{opacity:1;background:var(--color-base)}:host .checked .radio{border-color:var(--color-dark)}:host .checked .radio:hover{border-color:var(--color-light) !important}:host .checked .radio:hover::after{background:var(--color-light)}:host .disabled .radio{background:var(--primary-base-neutral-white);border-color:var(--primary-darker-neutral-base);cursor:not-allowed}:host .disabled .radio::after{background:var(--neutral-lighter)}:host .disabled.checked .radio{border-color:var(--primary-base-neutral-base) !important;background:var(--primary-darker-neutral-white) !important}:host .disabled.checked .radio::after{background:var(--primary-base-neutral-base) !important}:host :not(.disabled):not(.checked) .radio:hover{border-color:var(--primary-base-neutral-dark)}';const c=class{constructor(a){r(this,a);this.onchange=e(this,"onchange",7);this.sizes={large:{size:20},medium:{size:14},small:{size:10}};this.isDarkbackground=()=>this.background==="dark";this.handleClick=()=>{if(this.disabled)return;this.checked=!this.checked;this.onchange.emit({value:this.value,checked:this.checked})};this.checked=false;this.status="default";this.disabled=false;this.required=false;this.label="";this.ontabindex=undefined;this.position="left";this.value="";this.name="";this.background="light";this.size="medium";this.color="accent";this.styles={}}sizeHandler(){this.styles=Object.assign(Object.assign({},this.styles),{"--size-after":`${this.sizes[this.size].size}px`,"--size":`${o[this.size].size}px`,"--gap":`${o[this.size].gap}px`})}setColors(){const r=[{name:"--info-base",background:"info-base"},{name:"--color-light",background:`${this.color}-light`},{name:"--color-base",background:`${this.color}-base`},{name:"--color-dark",background:`${this.color}-dark`},{name:"--neutral-purewhite",background:"neutral-purewhite"},{name:"--success-lighter",background:"success-lighter"},{name:"--success-base",background:"success-base"},{name:"--error-lighter",background:"error-lighter"},{name:"--error-base",background:"error-base"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--primary-base-neutral-white",background:this.isDarkbackground()?"primary-base":"neutral-white"},{name:"--primary-darker-neutral-white",background:this.isDarkbackground()?"primary-darker":"neutral-white"},{name:"--primary-darker-neutral-base",background:this.isDarkbackground()?"primary-darker":"neutral-base"},{name:"--primary-base-neutral-base",background:this.isDarkbackground()?"primary-base":"neutral-base"},{name:"--primary-base-neutral-dark",background:this.isDarkbackground()?"primary-base":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--success-base-dark",background:this.isDarkbackground()?"success-base":"success-dark"},{name:"--error-base-dark",background:this.isDarkbackground()?"error-base":"error-dark"}];r.forEach((r=>{this.styles[r.name]=window.CuraAPI.theme.colors.getColor(r.background)}));this.styles=Object.assign({},this.styles)}connectedCallback(){this.sizeHandler();this.setColors()}getClasses(){const r={};r["container"]=true;r["checked"]=this.checked;r["disabled"]=this.disabled;r["position"]=this.position==="right";r[this.status]=true;return r}assignColor(r){if(this.disabled)return this.isDarkbackground()?"primary-darker":"neutral-medium";const e={success:{label:this.isDarkbackground()?"success-lighter":"success-darker",message:this.isDarkbackground()?"success-base":"success-dark"},error:{label:this.isDarkbackground()?"error-lighter":"neutral-darker",message:this.isDarkbackground()?"error-base":"error-dark"},default:{label:this.isDarkbackground()?"neutral-white":"neutral-black",message:this.isDarkbackground()?"primary-lighter":"neutral-dark"}};return e[this.status][r]}render(){return a(s,null,a("div",{class:this.getClasses(),style:this.styles},a("div",{class:"info"},a("div",{class:"label-wrapper"},a("cura-label",{class:"label",size:this.size==="large"?"medium":"xsmall",color:this.assignColor("label")},this.label),this.required&&a("cura-paragraph",{lineHeight:"0%",marginBlock:"0",color:"error-base"},"* ")),a("cura-label",{color:this.assignColor("message"),size:"xsmall",class:"message"},a("slot",null))),a("input",{type:"radio",class:`radio ${this.size.toLocaleLowerCase()}`,name:this.name,value:this.value,required:this.required,tabIndex:this.ontabindex,disabled:this.disabled,checked:this.checked,onClick:this.handleClick})))}get host(){return t(this)}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"]}}};c.style=i;export{c as cura_radio};
+//# sourceMappingURL=p-8d959fb2.entry.js.map