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/cjs/cura-checkbox.cjs.entry.js CHANGED Viewed

@@ -41,8 +41,7 @@ const CuraCheckbox = class {
     this.styles = {};
   }
   sizeHandler() {
-    this.styles['--size'] = `${curaForms_definitions.formsSizes[this.size].size}px`;
-    this.styles['--gap'] = `${curaForms_definitions.formsSizes[this.size].gap}px`;
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--size': `${curaForms_definitions.formsSizes[this.size].size}px`, '--gap': `${curaForms_definitions.formsSizes[this.size].gap}px` });
   }
   /**
    * Watches changes in color and background properties to update styles.
@@ -71,7 +70,9 @@ const CuraCheckbox = class {
       { name: '--error-base-lighter', background: this.isDarkbackground() ? 'error-base' : 'error-lighter' },
       { name: '--error-dark-base', background: this.isDarkbackground() ? 'error-dark' : 'error-base' },
     ];
-    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() {

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

	@@ -1 +1 @@
1	- {"file":"cura-checkbox.entry.cjs.js","mappings":"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","names":["formsSizes","h","Host"],"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.entry.cjs.js","mappings":"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","names":["formsSizes","h","Host"],"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/cjs/cura-radio.cjs.entry.js CHANGED Viewed

@@ -38,9 +38,7 @@ const CuraRadio = class {
     this.styles = {};
   }
   sizeHandler() {
-    this.styles['--size-after'] = `${this.sizes[this.size].size}px`;
-    this.styles['--size'] = `${curaForms_definitions.formsSizes[this.size].size}px`;
-    this.styles['--gap'] = `${curaForms_definitions.formsSizes[this.size].gap}px`;
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--size-after': `${this.sizes[this.size].size}px`, '--size': `${curaForms_definitions.formsSizes[this.size].size}px`, '--gap': `${curaForms_definitions.formsSizes[this.size].gap}px` });
   }
   setColors() {
     const colors = [
@@ -63,7 +61,10 @@ const CuraRadio = class {
       { 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/cjs/cura-radio.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cura-radio.entry.cjs.js","mappings":"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","names":["formsSizes","h","Host"],"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.entry.cjs.js","mappings":"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","names":["formsSizes","h","Host"],"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/cjs/cura-switch.cjs.entry.js CHANGED Viewed

@@ -34,9 +34,7 @@ const CuraSwitch = class {
     this.styles = {};
   }
   sizeHandler() {
-    this.styles['--size-track'] = `${this.sizes[this.size].size}px`;
-    this.styles['--size'] = `${curaForms_definitions.formsSizes[this.size].size}px`;
-    this.styles['--gap'] = `${curaForms_definitions.formsSizes[this.size].gap}px`;
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--size-track': `${this.sizes[this.size].size}px`, '--size': `${curaForms_definitions.formsSizes[this.size].size}px`, '--gap': `${curaForms_definitions.formsSizes[this.size].gap}px` });
   }
   setColors() {
     const colors = [
@@ -54,7 +52,10 @@ const CuraSwitch = class {
       { 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/cjs/cura-switch.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cura-switch.entry.cjs.js","mappings":"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","names":["formsSizes","h","Host"],"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.entry.cjs.js","mappings":"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","names":["formsSizes","h","Host"],"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/collection/components/forms/cura-checkbox/cura-checkbox.js CHANGED Viewed

@@ -32,8 +32,7 @@ export class CuraCheckbox {
     this.styles = {};
   }
   sizeHandler() {
-    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': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
   }
   /**
    * Watches changes in color and background properties to update styles.
@@ -62,7 +61,9 @@ export class CuraCheckbox {
       { name: '--error-base-lighter', background: this.isDarkbackground() ? 'error-base' : 'error-lighter' },
       { name: '--error-dark-base', background: this.isDarkbackground() ? 'error-dark' : 'error-base' },
     ];
-    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() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-checkbox.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-checkbox/cura-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"cura-checkbox.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-checkbox/cura-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -29,9 +29,7 @@ export class CuraRadio {
     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 = [
@@ -54,7 +52,10 @@ export class CuraRadio {
       { 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/collection/components/forms/cura-radio/cura-radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-radio.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-radio/cura-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"cura-radio.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-radio/cura-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -25,9 +25,7 @@ export class CuraSwitch {
     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 = [
@@ -45,7 +43,10 @@ export class CuraSwitch {
       { 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/collection/components/forms/cura-switch/cura-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-switch.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAQvD,MAAM,OAAO,UAAU;;IA0CrB,UAAK,GAAG;MACN,OAAO,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACrB,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtB,OAAO,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;KACtB,CAAC;IAGF,qBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC;~~IAoCpD~~,iBAAY,GAAG,GAAG,EAAE;MAClB,IAAI,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;MAE/B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAA;IAC/C,CAAC,CAAC;~~mBAtFyD~~,KAAK;oBAInB,KAAK;iBAIT,EAAE;sBAKG,CAAC;oBAKO,MAAM;gBAKE,QAAQ;sBAK/B,OAAO;iBAI9B,QAAQ;kBAEN,EAAE;;EAcpB,WAAW;IACT,IAAI,CAAC,MAAM,CAAC,cAAc,~~CAAC~~,GAAG,~~GAAG,~~IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,~~CAAA;IAC/D~~,~~IAAI,CAAC,MAAM,CAAC,~~QAAQ,~~CAAC~~,GAAG,~~GAAG,~~UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,~~CAAA;IACzD~~,~~IAAI,CAAC,MAAM,CAAC,~~OAAO,~~CAAC~~,GAAG,~~GAAG,~~UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,~~CAAA~~;~~EACzD~~,CAAC;EAID,SAAS;IACP,MAAM,MAAM,GAAG;MACb,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE;MAChD,EAAE,IAAI,EAAE,kBAAkB,EAAE,UAAU,EAAE,gBAAgB,EAAE;MAC1D,EAAE,IAAI,EAAE,iBAAiB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,UAAU,EAAE;MAChE,EAAE,IAAI,EAAE,yBAAyB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;MAC9H,EAAE,IAAI,EAAE,oBAAoB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;MACzG,EAAE,IAAI,EAAE,oBAAoB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;MACzG,EAAE,IAAI,EAAE,gCAAgC,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,cAAc,EAAE;MACpH,EAAE,IAAI,EAAE,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,EAAE;MAClH,EAAE,IAAI,EAAE,2BAA2B,EAAE,UAAU,EAAE,WAAW,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE;MAC/G,EAAE,IAAI,EAAE,iCAAiC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;MACtI,EAAE,IAAI,EAAE,yBAAyB,EAAE,UAAU,EAAE,WAAW,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;MACtH,EAAE,IAAI,EAAE,6BAA6B,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE;MACnH,EAAE,IAAI,EAAE,mBAAmB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,EAAE,EAAE;KAC7G,CAAC;IAEF,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,~~CAAC,~~IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC,CAAC;~~EAC5H~~,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,WAAW,EAAE,CAAA;IAClB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EASD,WAAW,CAAC,SAAiB,EAAE,UAAkB;IAC/C,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAC;IACtF,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAA;EACzD,CAAC;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC5B,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;IAClC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;IACpC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC;IAEhD,OAAO,OAAO,CAAC;EACjB,CAAC;EAGD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;QAC/C,WAAK,KAAK,EAAC,MAAM;UACf,kBAAY,KAAK,EAAC,OAAO,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACjD,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,eAAe,CAAC,IACxD,IAAI,CAAC,KAAK,CACA;UACb,kBACE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,iBAAiB,EAAE,cAAc,CAAC,EAC1D,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS;YACf,eAAa,CACF,CACT;QAEN,WAAK,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAC,SAAS;UAC9C,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE;YAC5C,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAQ,CAC7E,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
1	+ {"version":3,"file":"cura-switch.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAQvD,MAAM,OAAO,UAAU;;IA0CrB,UAAK,GAAG;MACN,OAAO,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACrB,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtB,OAAO,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;KACtB,CAAC;IAGF,qBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC;IA2CpD,iBAAY,GAAG,GAAG,EAAE;MAClB,IAAI,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;MAE/B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAA;IAC/C,CAAC,CAAC;mBA7FyD,KAAK;oBAInB,KAAK;iBAIT,EAAE;sBAKG,CAAC;oBAKO,MAAM;gBAKE,QAAQ;sBAK/B,OAAO;iBAI9B,QAAQ;kBAEN,EAAE;;EAcpB,WAAW;IACT,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,EACjD,QAAQ,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,EAC3C,OAAO,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,GAC1C,CAAC;EACJ,CAAC;EAID,SAAS;IACP,MAAM,MAAM,GAAG;MACb,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE;MAChD,EAAE,IAAI,EAAE,kBAAkB,EAAE,UAAU,EAAE,gBAAgB,EAAE;MAC1D,EAAE,IAAI,EAAE,iBAAiB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,UAAU,EAAE;MAChE,EAAE,IAAI,EAAE,yBAAyB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;MAC9H,EAAE,IAAI,EAAE,oBAAoB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;MACzG,EAAE,IAAI,EAAE,oBAAoB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;MACzG,EAAE,IAAI,EAAE,gCAAgC,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,cAAc,EAAE;MACpH,EAAE,IAAI,EAAE,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,EAAE;MAClH,EAAE,IAAI,EAAE,2BAA2B,EAAE,UAAU,EAAE,WAAW,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE;MAC/G,EAAE,IAAI,EAAE,iCAAiC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;MACtI,EAAE,IAAI,EAAE,yBAAyB,EAAE,UAAU,EAAE,WAAW,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;MACtH,EAAE,IAAI,EAAE,6BAA6B,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE;MACnH,EAAE,IAAI,EAAE,mBAAmB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,EAAE,EAAE;KAC7G,CAAC;IAEF,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MACrB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IACnG,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,MAAM,qBAAQ,IAAI,CAAC,MAAM,CAAE,CAAC;EAEnC,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,WAAW,EAAE,CAAA;IAClB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EASD,WAAW,CAAC,SAAiB,EAAE,UAAkB;IAC/C,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAC;IACtF,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAA;EACzD,CAAC;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC5B,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;IAClC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;IACpC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC;IAEhD,OAAO,OAAO,CAAC;EACjB,CAAC;EAGD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;QAC/C,WAAK,KAAK,EAAC,MAAM;UACf,kBAAY,KAAK,EAAC,OAAO,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACjD,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,eAAe,CAAC,IACxD,IAAI,CAAC,KAAK,CACA;UACb,kBACE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,iBAAiB,EAAE,cAAc,CAAC,EAC1D,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS;YACf,eAAa,CACF,CACT;QAEN,WAAK,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAC,SAAS;UAC9C,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE;YAC5C,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAQ,CAC7E,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -42,8 +42,7 @@ const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox exten
     this.styles = {};
   }
   sizeHandler() {
-    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': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
   }
   /**
    * Watches changes in color and background properties to update styles.
@@ -72,7 +71,9 @@ const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox exten
       { name: '--error-base-lighter', background: this.isDarkbackground() ? 'error-base' : 'error-lighter' },
       { name: '--error-dark-base', background: this.isDarkbackground() ? 'error-dark' : 'error-base' },
     ];
-    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() {