@rededor/cura 0.5.3 → 0.5.4

package/dist/esm-es5/cura-checkbox.entry.js.map

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

package/dist/esm-es5/cura-radio.entry.js

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

package/dist/esm-es5/cura-radio.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["curaRadioCss","CuraRadio","this","sizes","large","size","medium","small","isDarkbackground","_this","background","handleClick","disabled","checked","onchange","emit","value","prototype","sizeHandler","styles","concat","formsSizes","gap","setColors","colors","name","color","forEach","window","CuraAPI","theme","getColor","connectedCallback","getClasses","classes","position","status","assignColor","type","statusColors","success","label","message","error","default","render","h","Host","class","style","required","lineHeight","marginBlock","toLocaleLowerCase","tabIndex","ontabindex","onClick"],"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"],"mappings":"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"}
+{"version":3,"names":["curaRadioCss","CuraRadio","this","sizes","large","size","medium","small","isDarkbackground","_this","background","handleClick","disabled","checked","onchange","emit","value","prototype","sizeHandler","styles","Object","assign","concat","formsSizes","gap","setColors","colors","name","color","forEach","window","CuraAPI","theme","getColor","connectedCallback","getClasses","classes","position","status","assignColor","type","statusColors","success","label","message","error","default","render","h","Host","class","style","required","lineHeight","marginBlock","toLocaleLowerCase","tabIndex","ontabindex","onClick"],"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"],"mappings":"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"}

package/dist/esm-es5/cura-switch.entry.js

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

package/dist/esm-es5/cura-switch.entry.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rededor/cura",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "Cura Design System",
   "author": "Rede D`Or São Luiz",
   "license": "MIT",
@@ -49,5 +49,5 @@
     "storybook": "^7.6.7",
     "svgo": "^3.0.1"
   },
-  "gitHead": "92e40041b6db23a97d8ca7f33d0e0129145045e8"
+  "gitHead": "b697834a3e3ac9b2e425791dd37dabed3e8b9d38"
 }

package/dist/cura/p-4df84c9e.entry.js.map

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

package/dist/cura/p-70cefaf8.entry.js.map

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

package/dist/cura/p-a6d20c12.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaRadioCss","CuraRadio","exports","this","sizes","large","size","medium","small","isDarkbackground","_this","background","handleClick","disabled","checked","onchange","emit","value","class_1","prototype","sizeHandler","styles","concat","formsSizes","gap","setColors","colors","name","color","forEach","window","CuraAPI","theme","getColor","connectedCallback","getClasses","classes","position","status","assignColor","type","statusColors","success","label","message","error","default","render","h","Host","class","style","required","lineHeight","marginBlock","toLocaleLowerCase","tabIndex","ontabindex","onClick"],"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"],"mappings":"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"}

package/dist/cura/p-c9afb94f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaRadioCss","CuraRadio","this","sizes","large","size","medium","small","isDarkbackground","background","handleClick","disabled","checked","onchange","emit","value","sizeHandler","styles","formsSizes","gap","setColors","colors","name","color","forEach","window","CuraAPI","theme","getColor","connectedCallback","getClasses","classes","position","status","assignColor","type","statusColors","success","label","message","error","default","render","h","Host","class","style","required","lineHeight","marginBlock","toLocaleLowerCase","tabIndex","ontabindex","onClick"],"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"],"mappings":"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"}

package/dist/cura/p-eea5ca70.system.entry.js

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

package/dist/cura/p-eea5ca70.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaCheckboxCss","CuraCheckbox","exports","this","isDarkbackground","_this","background","isDarkIconColor","iconColor","handleClick","disabled","indeterminate","checked","onchange","emit","value","class_1","prototype","sizeHandler","styles","concat","formsSizes","size","gap","setColors","colors","name","color","forEach","window","CuraAPI","theme","getColor","Object","assign","connectedCallback","getClasses","classes","position","status","assignColor","type","statusColors","success","icon","label","message","error","default","getIcon","iconName","iconSize","h","class","render","Host","style","required","lineHeight","marginBlock","onClick","tabIndex","ontabindex"],"sources":["src/components/forms/cura-checkbox/cura-checkbox.scss?tag=cura-checkbox&encapsulation=shadow","src/components/forms/cura-checkbox/cura-checkbox.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: fit-content;\n  box-sizing: border-box;\n}\n\n/* Container e Layout */\n.container {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  gap: var(--gap);\n\n}\n\n.position {\n\n  &.container {\n    flex-direction: row;\n  }\n\n  .label-wrapper {\n    justify-content: end;\n  }\n\n  .message {\n    text-align: right;\n  }\n\n  .label {\n    order:1\n  }\n\n}\n\n.info {\n  display: flex;\n  flex-direction: column;\n}\n\n.label-wrapper {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  gap: 5px;\n}\n\n/* Control e Checkbox */\n.control {\n  width: fit-content;\n  cursor: pointer;\n  position: relative;\n}\n\n.checkbox {\n  appearance: none;\n  border: 2px solid var(--primary-base-neutral-medium);\n  border-radius: 4px;\n  background: var(--neutral-lighter-neutral-purewhite);\n  flex: 1 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n  box-sizing: border-box;\n  width: var(--size);\n  height: var(--size);\n  flex: 0 0 var(--size);\n}\n\n.icon {\n  position: absolute;\n  display: flex;\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n\n/* Estados de Foco */\n.checkbox:focus {\n  border-color: var(--info-base) !important;\n}\n\n/* Estado Disabled */\n.disabled .checkbox {\n  background: var(--primary-darker-neutral-white);\n  border-color: var(--primary-base-neutral-base);\n  cursor: not-allowed;\n\n  &:hover {\n    border-color: var(--primary-base-neutral-base) !important;\n  }\n}\n\n.disabled.checked .checkbox,\n.disabled.indeterminate .checkbox {\n  background: var(--primary-base-neutral-white);\n  border-color: var(--primary-base-neutral-base);\n\n  &:hover {\n    border-color: var(--primary-base-neutral-base) !important;\n    background: var(--primary-base-neutral-white);\n\n  }\n}\n\n.disabled .checkbox:focus {\n  border-color: var(--primary-base-neutral-base);\n}\n\n/* Estado Checked */\n.checked .checkbox,\n.indeterminate .checkbox {\n  border-color: var(--color-dark);\n  background: var(--color-base);\n\n  &:hover {\n    border-color: var(--color-light) !important;\n    background: var(--color-lighter);\n  }\n}\n\n.checked .icon,\n.indeterminate .icon {\n  opacity: 1;\n}\n\n/* Hover para não disabled, checked, indeterminate */\n:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {\n  border-color: var(--primary-base-neutral-dark);\n}\n\n/* Estado Success */\n.success .checkbox {\n  border-color: var(--success-base)  ;\n  background: var(--success-lighter);\n\n  &:hover{\n  border-color: var(--success-base)  !important;\n  }\n}\n\n.success.checked .checkbox {\n  border-color: var(--success-dark-base);\n  background: var(--success-base-lighter);\n\n  &:hover {\n    border-color: var(--success-dark-base);\n  }\n}\n\n/* Estado Error */\n.error .checkbox {\n  border-color: var(--error-base);\n  background: var(--error-lighter);\n\n  &:hover {\n    border-color: var(--error-base) !important;\n  }\n}\n\n.error.checked .checkbox {\n  border-color: var(--error-dark-base);\n  background: var(--error-base-lighter);\n\n  &:hover {\n    border-color: var(--error-dark-base);\n  }\n}\n\n/* Input */\ninput {\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n","import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n  tag: 'cura-checkbox',\n  styleUrl: 'cura-checkbox.scss',\n  shadow: true,\n})\n\nexport class CuraCheckbox {\n  /**\n   * Reflects the checked state of the checkbox.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Reflects the indeterminate state of the checkbox.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n  /**\n  * Status of the checkbox.\n  * Can be 'error', 'success', or 'default'.\n  */\n  @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n  /**\n   * Reflects the disabled state of the checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n  * Reflects the required state of the checkbox.\n  */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Text label associated with the checkbox.\n   */\n  @Prop({ reflect: true }) label: string;\n  /**\n   * Specifies the tabindex of the checkbox.\n   */\n  @Prop({ reflect: true }) ontabindex: number = 0;\n  /**\n   * Position of the label relative to the checkbox.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n  /**\n   * Value associated with the checkbox.\n   */\n  @Prop({ reflect: true }) value: string;\n  /**\n   * Name attribute of the checkbox.\n   */\n  @Prop({ reflect: true }) name: string;\n  /**\n   * Size of the checkbox.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Background theme of the checkbox.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n  * iconColor theme of the checkbox.\n  * Can be 'dark' or 'light'.\n  */\n  @Prop() iconColor: 'dark' | 'light' = 'dark';\n  /**\n   * Color theme of the checkbox.\n   */\n  @Prop() color = 'accent';\n\n  @State() styles = {};\n\n  @Element() host: HTMLElement;\n\n  @Event() onchange: EventEmitter<{ value: string, checked: boolean, indeterminate: boolean }>;\n\n  isDarkbackground = () => this.background === 'dark';\n\n  isDarkIconColor = () => this.iconColor === 'dark';\n\n  @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"],"mappings":"gNAAA,IAAMA,EAAkB,orG,ICSXC,EAAYC,EAAA,2B,sEAuEvBC,KAAAC,iBAAmB,WAAM,OAAAC,EAAKC,aAAe,MAApB,EAEzBH,KAAAI,gBAAkB,WAAM,OAAAF,EAAKG,YAAc,MAAnB,EAmDxBL,KAAAM,YAAc,WACZ,GAAIJ,EAAKK,SAAU,OAEnBL,EAAKM,cAAgB,MACrBN,EAAKO,SAAWP,EAAKO,QACrBP,EAAKQ,SAASC,KAAK,CAAEC,MAAOV,EAAKU,MAAOH,QAASP,EAAKO,QAASD,cAAeN,EAAKM,e,eA5H1B,M,mBAKM,M,YAKiB,U,cAIrC,M,cAIA,M,qCAQC,E,cAKQ,O,mDAaQ,S,gBAKvB,Q,eAKD,O,WAItB,S,YAEE,E,CAWlBK,EAAAC,UAAAC,YAAA,WACEf,KAAKgB,OAAO,UAAY,GAAAC,OAAGC,EAAWlB,KAAKmB,MAAMA,KAAI,MACrDnB,KAAKgB,OAAO,SAAW,GAAAC,OAAGC,EAAWlB,KAAKmB,MAAMC,IAAG,K,EAQrDP,EAAAC,UAAAO,UAAA,eAAAnB,EAAAF,KACE,IAAMsB,EAAS,CACb,CAAEC,KAAM,eAAgBpB,WAAY,GAAAc,OAAGjB,KAAKwB,MAAK,UACjD,CAAED,KAAM,kBAAmBpB,WAAY,GAAAc,OAAGjB,KAAKwB,MAAK,aACpD,CAAED,KAAM,gBAAiBpB,WAAY,GAAAc,OAAGjB,KAAKwB,MAAK,WAClD,CAAED,KAAM,eAAgBpB,WAAY,GAAAc,OAAGjB,KAAKwB,MAAK,UACjD,CAAED,KAAM,cAAepB,WAAY,aACnC,CAAEoB,KAAM,eAAgBpB,WAAY,cACpC,CAAEoB,KAAM,oBAAqBpB,WAAY,mBACzC,CAAEoB,KAAM,iBAAkBpB,WAAY,gBACtC,CAAEoB,KAAM,iBAAkBpB,WAAY,gBACtC,CAAEoB,KAAM,kBAAmBpB,WAAY,iBACvC,CAAEoB,KAAM,+BAAgCpB,WAAYH,KAAKC,mBAAqB,eAAiB,iBAC/F,CAAEsB,KAAM,gCAAiCpB,WAAYH,KAAKC,mBAAqB,eAAiB,kBAChG,CAAEsB,KAAM,sCAAuCpB,WAAYH,KAAKC,mBAAqB,kBAAoB,qBACzG,CAAEsB,KAAM,iCAAkCpB,WAAYH,KAAKC,mBAAqB,iBAAmB,iBACnG,CAAEsB,KAAM,8BAA+BpB,WAAYH,KAAKC,mBAAqB,eAAiB,gBAC9F,CAAEsB,KAAM,8BAA+BpB,WAAYH,KAAKC,mBAAqB,eAAiB,gBAC9F,CAAEsB,KAAM,gCAAiCpB,WAAYH,KAAKC,mBAAqB,eAAiB,kBAChG,CAAEsB,KAAM,yBAA0BpB,WAAYH,KAAKC,mBAAqB,eAAiB,mBACzF,CAAEsB,KAAM,sBAAuBpB,WAAYH,KAAKC,mBAAqB,eAAiB,gBACtF,CAAEsB,KAAM,uBAAwBpB,WAAYH,KAAKC,mBAAqB,aAAe,iBACrF,CAAEsB,KAAM,oBAAqBpB,WAAYH,KAAKC,mBAAqB,aAAe,eAGpFqB,EAAOG,SAAQ,SAAAD,GAAS,OAAAtB,EAAKc,OAAOQ,EAAMD,MAAQG,OAAOC,QAAQC,MAAMN,OAAOO,SAASL,EAAMrB,WAArE,IACxBH,KAAKgB,OAAMc,OAAAC,OAAA,GAAQ/B,KAAKgB,O,EAG1BH,EAAAC,UAAAkB,kBAAA,WACEhC,KAAKe,cACLf,KAAKqB,W,EAkBPR,EAAAC,UAAAmB,WAAA,WACE,IAAMC,EAAU,GAChBA,EAAQ,aAAe,KACvBA,EAAQ,WAAalC,KAAKS,QAC1ByB,EAAQ,YAAclC,KAAKO,SAC3B2B,EAAQ,iBAAmBlC,KAAKQ,cAChC0B,EAAQ,YAAclC,KAAKmC,WAAa,QACxCD,EAAQlC,KAAKoC,QAAU,KAEvB,OAAOF,C,EAUTrB,EAAAC,UAAAuB,YAAA,SAAYC,GACV,GAAItC,KAAKO,SAAU,OAAOP,KAAKC,mBAAqB,iBAAmB,iBAEvE,IAAMsC,EAAe,CACnBC,QAAS,CACPC,KAAM,eACNC,MAAO1C,KAAKC,mBAAqB,kBAAoB,iBACrD0C,QAAS3C,KAAKC,mBAAqB,eAAiB,gBAEtD2C,MAAO,CACLH,KAAM,aACNC,MAAO1C,KAAKC,mBAAqB,gBAAkB,iBACnD0C,QAAS3C,KAAKC,mBAAqB,aAAe,cAEpD4C,QAAS,CACPJ,KAAMzC,KAAKI,kBAAoB,gBAAkB,oBACjDsC,MAAO1C,KAAKC,mBAAqB,gBAAkB,gBACnD0C,QAAS3C,KAAKC,mBAAqB,kBAAoB,iBAI3D,OAAOsC,EAAavC,KAAKoC,QAAQE,E,EAMnCzB,EAAAC,UAAAgC,QAAA,WACE,IAAMC,EAAW/C,KAAKQ,cAAgB,QAAU,QAChD,IAAMH,EAAYL,KAAKqC,YAAY,QACnC,IAAMW,EAAWhD,KAAKmB,OAAS,QAAU,GAAK,QAE9C,OAAO8B,EAAA,aAAWC,MAAM,OAAO3B,KAAMwB,EAAU5B,KAAM6B,EAAUxB,MAAOnB,G,EAIxEQ,EAAAC,UAAAqC,OAAA,WACE,OACEF,EAACG,EAAI,KACHH,EAAA,OAAKC,MAAOlD,KAAKiC,aAAcoB,MAAOrD,KAAKgB,QACzCiC,EAAA,OAAKC,MAAM,QACTD,EAAA,OAAKC,MAAM,iBACTD,EAAA,cACEC,MAAM,QACN/B,KAAMnB,KAAKmB,OAAS,QAAU,SAAW,SACzCK,MAAOxB,KAAKqC,YAAY,UACvBrC,KAAK0C,OAEP1C,KAAKsD,UAAYL,EAAA,kBAAgBM,WAAW,KAAKC,YAAY,IAAIhC,MAAM,cAAY,OAEtFyB,EAAA,cACEzB,MAAOxB,KAAKqC,YAAY,WACxBlB,KAAK,SACL+B,MAAM,WACND,EAAA,eAGJA,EAAA,OAAKC,MAAO,WAAYO,QAASzD,KAAKM,YAAaoD,SAAU1D,KAAK2D,YAChEV,EAAA,SACEX,KAAK,WACLf,KAAMvB,KAAKuB,KACXX,MAAOZ,KAAKY,MACZL,SAAUP,KAAKO,SACf+C,SAAUtD,KAAKsD,SACf7C,QAAST,KAAKS,QACdD,cAAeR,KAAKQ,gBAErBR,KAAK8C,Y,oUA7NO,I"}

package/dist/cura/p-f6e61abf.system.entry.js

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