@rededor/cura 1.6.1-alpha.1 → 1.6.1-alpha.3

package/dist/cura/p-38777561.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,H as a,g as o}from"./p-4ee8efca.js";const s=":host{display:block;box-sizing:border-box}:host .container{position:fixed;z-index:99999;display:flex;box-sizing:border-box;min-width:328px;height:fit-content;padding:16px;border:1px solid var(--color-base);border-radius:12px;background-color:var(--neutral-purewhite);overflow:hidden;box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12))}:host .container.loader{padding:16px 16px 20px}:host .container.top{top:24px}:host .container.top.center{top:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, top 0.5s ease-in-out}:host .container.top.center.active{top:24px;opacity:1}:host .container.bottom{bottom:24px}:host .container.bottom.center{bottom:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, bottom 0.5s ease-in-out}:host .container.bottom.center.active{bottom:24px;opacity:1}:host .container.left{left:-100%;opacity:0;transition:opacity 0.5s ease-in-out, left 0.5s ease-in-out}@media (max-width: 768px){:host .container.left{right:unset;left:50%;transform:translateX(-50%)}}:host .container.left.active{left:24px;opacity:1}:host .container.right{right:-100%;opacity:0;transition:opacity 0.5s ease-in-out, right 0.5s ease-in-out}@media (max-width: 768px){:host .container.right{right:unset;left:50%;transform:translateX(-50%)}}:host .container.right.active{right:24px;opacity:1}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:4px}:host .container .default-icon{margin-right:12px}:host .container .close-icon{margin-left:12px;cursor:pointer}";const n=s;const r=class{constructor(i){t(this,i);this.toastClosed=e(this,"toastClosed",7);this.handleClose=()=>{this.closeContainer()};this.type="info";this.position="top-right";this.icon=undefined;this.label=undefined;this.closeButton=true;this.loader=true;this.autoCloseDelay=1e4;this.styles={};this.progress=0}async close(){this.closeContainer()}handleChangeType(){this.setStyle()}connectedCallback(){this.setStyle()}render(){return i(a,{key:"d5869739f883147328ee08bcf6564b6cc9097851"},i("div",{key:"367bdb7c433982902d018ec64e1372b85bbc52d2",class:this.getClasses(),style:this.styles},i("cura-icon",{key:"35dbde1e3dfbef3ec3faf3313aa607e2f74409be",class:"default-icon",name:this.getNameIcon(),size:16,color:`${this.type}-dark`}),i("div",{key:"ca266eb0c1816f92af3468be34068c29fc4fc61f",class:"content"},i("cura-heading",{key:"86d3dc19bd9c4fa2ed8ecd21754385fba7635212",level:4,size:"xsmall",color:`${this.type}-dark`,weight:"bold","margin-block":"0"},this.label),i("cura-paragraph",{key:"dae10d64662b2681fa00e64ede122f29de49d505",color:`${this.type}-darker`,size:"xsmall",marginBlock:"0",lineHeight:"133.33%"},i("slot",{key:"1b969326c2e051ea34d68ba5677b3d8e0159e723"})),i("slot",{key:"2028c0a32df403290b1efcd158410563eda34bbf",name:"actions"})),this.closeButton&&i("cura-icon",{key:"91afab9024300f807e1dae585cfa79543e65d579",class:"close-icon",name:"close",size:16,color:"error-dark",onClick:this.handleClose}),this.loader&&!!this.autoCloseDelay&&i("cura-loader-bar",{key:"89abd5c338f443d8946faaed961de31c8d1eac64",color:`${this.type}-base`,progress:this.progress})))}componentDidLoad(){this.openContainer();this.startAnimation()}setStyle(){this.styles=Object.assign(Object.assign({},this.styles),{"--neutral-purewhite":window.CuraAPI.theme.colors.getColor(`neutral-purewhite`),"--neutral-base":window.CuraAPI.theme.colors.getColor(`neutral-base`,.2),"--primary-base":window.CuraAPI.theme.colors.getColor(`primary-base`),"--color-base":window.CuraAPI.theme.colors.getColor(`${this.type}-base`)})}getClasses(){const[t,e]=this.position.split("-");const i={};i["container"]=true;i[t]=true;i[e]=true;if(this.loader){i["loader"]=true}return i}getNameIcon(){const t={info:"infoCircle",success:"checkCircle",warning:"alertCircle",error:"alertTriangle"};return this.icon?this.icon:t[this.type]}openContainer(){this.container=this.host.shadowRoot.querySelector(".container");this.container.classList.add("active")}closeContainer(){this.container.classList.remove("active");setTimeout((()=>{this.toastClosed.emit();this.host.remove()}),500)}startAnimation(){if(!!this.autoCloseDelay){if(this.loader){this.progress=0;let t=setInterval((()=>{if(this.progress>=100){clearInterval(t);this.closeContainer()}else{this.progress++}}),this.autoCloseDelay/100)}else{let t=setInterval((()=>{clearInterval(t);this.closeContainer()}),this.autoCloseDelay)}}}get host(){return o(this)}static get watchers(){return{type:["handleChangeType"],position:["handleChangeType"]}}};r.style=n;export{r as cura_toast};
-//# sourceMappingURL=p-38777561.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["curaToastCss","CuraToastStyle0","CuraToast","this","handleClose","closeContainer","close","handleChangeType","setStyle","connectedCallback","render","h","Host","key","class","getClasses","style","styles","name","getNameIcon","size","color","type","level","weight","label","marginBlock","lineHeight","closeButton","onClick","loader","autoCloseDelay","progress","componentDidLoad","openContainer","startAnimation","Object","assign","window","CuraAPI","theme","colors","getColor","firstPosition","secondPosition","position","split","classes","iconMapping","info","success","warning","error","icon","container","host","shadowRoot","querySelector","classList","add","remove","setTimeout","toastClosed","emit","intervalId","setInterval","clearInterval"],"sources":["src/components/cura-toast/cura-toast.scss?tag=cura-toast&encapsulation=shadow","src/components/cura-toast/cura-toast.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n\n@mixin horizontalConfig($property) {\n  #{$property}: 24px;\n\n  &.center {\n    #{$property}: -100%;\n    left: 50%;\n    transform: translateX(-50%);\n    opacity: 0;\n    transition: opacity 0.5s ease-in-out, #{$property} 0.5s ease-in-out;\n\n    &.active {\n      #{$property}: 24px;\n      opacity: 1;\n    }\n  }\n}\n\n@mixin verticalConfig($property) {\n  #{$property}: -100%;\n  opacity: 0;\n  transition: opacity 0.5s ease-in-out, #{$property} 0.5s ease-in-out;\n  \n  @include mobile-only() {\n    right: unset;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  &.active {\n    #{$property}: 24px;\n    opacity: 1;\n  }\n}\n\n:host {\n  display: block;\n  box-sizing: border-box;\n\n  .container {\n    position: fixed;\n    z-index: 99999;\n    display: flex;\n    box-sizing: border-box;\n    min-width: 328px;\n    height: fit-content;\n    padding: 16px;\n    border: 1px solid var(--color-base);\n    border-radius: 12px;\n    background-color: var(--neutral-purewhite);\n    overflow: hidden;\n    @include shadow-level4();\n\n    &.loader {\n      padding: 16px 16px 20px;\n    }\n\n    &.top {\n      @include horizontalConfig(top);\n    }\n\n    &.bottom {\n      @include horizontalConfig(bottom);\n    }\n\n    &.left {\n      @include verticalConfig(left);\n    }\n\n    &.right {\n      @include verticalConfig(right);\n    }\n\n    .content {\n      flex: 1 1 0;\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .default-icon {\n      margin-right: 12px;\n    }\n\n    .close-icon {\n      margin-left: 12px;\n      cursor: pointer;\n    }\n  }\n}","import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'cura-toast',\n  styleUrl: 'cura-toast.scss',\n  shadow: true,\n})\nexport class CuraToast {\n  @Element() host: HTMLElement;\n\n  @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n  @Prop() position: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' = 'top-right';\n  @Prop({ reflect: true }) icon: string;\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeButton = true;\n  @Prop({ reflect: true }) loader = true;\n  @Prop({ reflect: true }) autoCloseDelay = 10000;\n\n  @State() styles = {};\n  @State() progress = 0;\n\n  @Event({ eventName: 'toastClosed' }) toastClosed: EventEmitter<void>;\n\n  /**\n   * Method to close toast component\n   */\n  @Method()\n  async close() {\n    this.closeContainer();\n  }\n\n  @Watch('type')\n  @Watch('position')\n  handleChangeType() {\n    this.setStyle();\n  }\n\n  container: HTMLElement;\n\n  connectedCallback() {\n    this.setStyle();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-icon class=\"default-icon\" name={this.getNameIcon()} size={16} color={`${this.type}-dark`}></cura-icon>\n          <div class=\"content\">\n            <cura-heading level={4} size=\"xsmall\" color={`${this.type}-dark`} weight=\"bold\" margin-block=\"0\">\n              {this.label}\n            </cura-heading>\n            <cura-paragraph color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n            <slot name=\"actions\"></slot>\n          </div>\n          {this.closeButton && <cura-icon class=\"close-icon\" name=\"close\" size={16} color=\"error-dark\" onClick={this.handleClose}></cura-icon>}\n          {this.loader && !!this.autoCloseDelay && <cura-loader-bar color={`${this.type}-base`} progress={this.progress}></cura-loader-bar>}\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    this.openContainer();\n    this.startAnimation();\n  }\n\n  setStyle() {\n    this.styles = {\n      ...this.styles,\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`),\n      '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2),\n      '--primary-base': window.CuraAPI.theme.colors.getColor(`primary-base`),\n      '--color-base': window.CuraAPI.theme.colors.getColor(`${this.type}-base`)\n    }\n  }\n\n  getClasses() {\n    const [firstPosition, secondPosition] = this.position.split('-');\n    const classes = {};\n\n    classes['container'] = true;\n    classes[firstPosition] = true;\n    classes[secondPosition] = true;\n\n    if (this.loader) {\n      classes['loader'] = true;\n    }\n\n    return classes;\n  }\n\n  getNameIcon() {\n    const iconMapping = {\n      info: 'infoCircle',\n      success: 'checkCircle',\n      warning: 'alertCircle',\n      error: 'alertTriangle',\n    };\n    return this.icon ? this.icon : iconMapping[this.type];\n  }\n\n  openContainer() {\n    this.container = this.host.shadowRoot.querySelector('.container') as HTMLElement;\n    this.container.classList.add('active');\n  }\n\n  closeContainer() {\n    this.container.classList.remove('active');\n    setTimeout(() => {\n      this.toastClosed.emit();\n      this.host.remove();\n    }, 500);\n  }\n\n  handleClose = () => {\n    this.closeContainer();\n  };\n\n  startAnimation() {\n    if (!!this.autoCloseDelay) {\n      if (this.loader) {\n        this.progress = 0;\n        let intervalId = setInterval(() => {\n          if (this.progress >= 100) {\n            clearInterval(intervalId);\n            this.closeContainer();\n          } else {\n            this.progress++;\n          }\n        }, this.autoCloseDelay/100);\n      } else {\n        let intervalId = setInterval(() => {\n          clearInterval(intervalId);\n          this.closeContainer();\n        }, this.autoCloseDelay);\n      }\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cura/p-405a50de.entry.js.map

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

package/dist/cura/p-6f7f157e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaButtonOutlineCss","CuraButtonOutlineStyle0","CuraButtonOutline","connectedCallback","this","weights","window","CuraAPI","theme","fonts","getWeights","styles","spacing","getSpacing","colors","getColor","getSize","getFamily","medium","textAlign","setColors","getClasses","classes","_a","size","toLowerCase","iconPosition","iconOnly","disabled","isLoading","justify","name","thema","background","color","forEach","Object","assign","getIcon","iconName","iconSize","h","iconset","getSymbolColor","handleMouseEnter","hovered","handleMouseLeave","fontColor","handleClick","e","preventDefault","href","type","internals","form","submit","reset","render","symbolColor","labelSize","labelSizes","Host","key","target","class","style","onClick","onMouseEnter","onMouseLeave","lineHeight"],"sources":["src/components/buttons/cura-button-outline/cura-button-outline.scss?tag=cura-button-outline&encapsulation=shadow","src/components/buttons/cura-button-outline/cura-button-outline.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: transparent;\n      box-sizing: border-box;\n      border: none;\n\n      &::before {\n        content: \"\";\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        box-sizing: border-box;\n        border: 2px solid var(--color-dark-neutral-purewhite);\n        border-radius: var(--border-radius);\n      }\n\n      &:not(.disabled):not(.isLoading):hover {\n       background-color: var(--color-lighter-color-darker);\n      }\n\n      &:not(.disabled):not(.inverted):not(.isLoading):active {\n       background-color: var(--color-light-color-darker);\n      }\n\n    };\n\n    @include button-sizes();\n\n    // Children Elements\n    @include button-container();\n    @include button-label();\n\n\n    @include button-icon();\n\n    // Disabled state\n    @include button-disabled() {\n     &::before {\n      border-color: var(--neutral-dark);\n     }\n    };\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    // Loading State\n    @include button-loading();\n\n  }\n\n}\n","import { Component, Host, h, Prop, Watch, State, AttachInternals } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button-outline',\n  styleUrl: 'cura-button-outline.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class CuraButtonOutline {\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n   * Button type: button (default) | submit | reset\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n  * Button size: small | medium | large (default)\n  */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n  * Disabled state. Boolean.\n  */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n  * Loading state. Boolean.\n  */\n  @Prop({ reflect: true }) isLoading = false;\n\n  /**\n  * Name of the icon to be used from iconset.\n  */\n  @Prop({ reflect: true }) iconName: string;\n  /**\n  * Custom iconset if needed.\n  */\n  @Prop({ reflect: true }) iconset = 'default';\n  /**\n  * Icon position: left (default) | right.\n  */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n  /**\n  * Set button to FAB/icon only.\n  */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /**\n  * Property href switch button to link.\n  */\n  @Prop({ reflect: true }) href: string;\n  /**\n  * Set target if link.\n  */\n  @Prop({ reflect: true }) target = \"_self\";\n  /**\n  * Color base from color scheme. Default: primary.\n  */\n  @Prop() color = 'primary';\n  /**\n  * Set the font background to dark or light.\n  */\n  @Prop() background: 'dark' | 'light' = 'light';\n\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop() fontColor: 'dark' | 'light' = 'dark';\n  /**\n  * Set text aligment for the button label.\n  * Vales: left (default) | center | right.\n  */\n  @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Justify icons and label inside the button.\n   * Vales: false (default) | true.\n   */\n  @Prop({ reflect: true }) justify = false;\n\n  @State() styles = {};\n\n  @State() hovered = false;\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--text-align'] = this.textAlign;\n    this.setColors();\n  }\n\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size?.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n    classes['justify'] = this.justify;\n    return classes;\n  }\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-dark-neutral-purewhite', thema: `${this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite'}` },\n      { name: '--color-lighter-color-darker', thema: `${this.background === 'light' ? `${this.color}-lighter` : `${this.color}-darker`}` },\n      { name: '--color-light-color-darker', thema: `${this.background === 'light' ? `${this.color}-light` : `${this.color}-lighter`}` },\n      { name: '--neutral-dark', thema: 'neutral-dark' },\n    ]\n\n    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema));\n    this.styles = { ...this.styles };\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'large' ? 20 : 16;\n\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\n  }\n\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  @Watch('fontColor')\n  @Watch('color')\n  getSymbolColor() {\n    if (this.disabled) return 'neutral-dark';\n    return this.fontColor === 'light' ? 'neutral-purewhite' : `${this.color}-darker`;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled || this.isLoading) {\n      e.preventDefault();\n      return;\n    }\n    if (!this.href) {\n      if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n      if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n    }\n  }\n\n  render() {\n    const symbolColor = this.getSymbolColor();\n    const labelSize = labelSizes[this.size] || labelSizes[\"default\"];\n    return (\n      <Host>\n        {this.href ? (\n          <a href={this.disabled ? '' : this.href}\n            target={this.target}\n            class={this.getClasses()}\n            style={this.styles}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label size={labelSize} lineHeight='normal' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </a>\n        ) : (\n          <button class={this.getClasses()}\n            style={this.styles}\n            disabled={this.disabled || null}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}\n            type={this.type}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label size={labelSize} lineHeight='normal' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["curaDisplayCss","CuraDisplayStyle0","CuraDisplay","this","theme","window","CuraAPI","handleChangeColor","setColors","connectedCallback","setFontProperties","weights","fonts","getWeights","fontSizeBase","getSize","styles","getFamily","bold","medium","hostCSSProperties","marginBlock","lineHeight","fontColor","color","colors","getColor","Object","assign","spotColor","getClasses","classes","_a","size","toLowerCase","getHeadingTag","tags","h","style","class","default","level","render","Host","key"],"sources":["src/components/text/cura-display/cura-display.scss?tag=cura-display&encapsulation=shadow","src/components/text/cura-display/cura-display.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n  display: block;\n  font-size: var(--font-size-base);\n\n  h1, h2, h3, h4, h5, h6 {\n    font-family: var(--font-family);\n    font-size: 3em;\n    font-weight: var(--font-weight-bold);\n    color: var(--color-body);\n    line-height: var(--line-height);\n    margin-block: var(--margin-block);\n    letter-spacing: 0px;\n\n    &.small {\n      font-size: 2.2857142857142856em;\n      letter-spacing: -1.68px;\n    }\n\n    ::slotted(b), ::slotted(strong) {\n      font-weight: var(--font-weight-bold);\n    }\n\n    ::slotted(a) {\n      font-weight: var(--font-weight-bold);\n      color: var(--color-link);\n      text-underline-offset: 10%;\n      cursor: pointer;\n    }\n\n    ::slotted(u) {\n      text-underline-offset: 10%;\n    }\n\n    ::slotted(i), ::slotted(em) {\n      font-style: italic;\n      font-weight: var(--font-weight-medium);\n    }\n\n    ::slotted(abbr) {\n      color: var(--color-link);\n      text-decoration: underline dashed 1px var(--color-link);\n      text-underline-offset: 10%;\n      cursor: default;\n    }\n  }\n\n  @include medium-large() {\n    h1, h2, h3, h4, h5, h6 {\n      font-size: 3.429em;\n\n      &.small {\n        font-size: 2.857142857142857em;\n        letter-spacing: -1.92px;\n      }\n    }\n  }\n\n  @include xlarge-only() {\n    h1, h2, h3, h4, h5, h6 {\n      font-size: 4.286em;\n      line-height: calc(var(--line-height) + 5%);\n\n      &.small {\n        font-size: 3.5714285714285716em;\n        letter-spacing: -1.2px;\n      }\n    }\n  }\n\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-display',\n  styleUrl: 'cura-display.scss',\n  shadow: true,\n})\nexport class CuraDisplay {\n\n  /**\n   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n   * Values: 1(default) to 6.\n   */\n  @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6 = 1;\n\n  /**\n   * Display size.\n   * Values: 'large' (default) | 'small'.\n   */\n  @Prop({reflect: true}) size: 'large' | 'small' = 'large';\n\n  /**\n  * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n  * Values: Color from design system scheme. Default to 'accent-dark'.\n  */\n  @Prop() spotColor = 'accent-dark';\n\n  /**\n   * Text color.\n   * Values: Color from design system scheme. Default to the font color from the theme.\n   */\n  @Prop() color: string;\n  @Watch('color')\n  @Watch('spotColor')\n  handleChangeColor() {\n    this.setColors();\n  }\n\n  /**\n   * CSS margin-block property values.\n   * Default to 1.25em\n   */\n  @Prop({reflect: true}) marginBlock = '1.25em';\n\n  /**\n   * CSS line-height property values.\n   * Default to 140%\n   */\n  @Prop({reflect: true}) lineHeight = '120%';\n\n  /**\n   * Host element <cura-display>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  fontSizeBase: string;\n  theme = window.CuraAPI.theme;\n  @State() styles = {};\n\n  connectedCallback() {\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  setFontProperties() {\n    this.weights = this.theme.fonts.getWeights();\n    this.fontSizeBase = this.theme.fonts.getSize();\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),\n      '--font-size': window.CuraAPI.theme.fonts.getSize(),\n      '--font-weight-bold': this.weights.bold,\n      '--font-weight-medium': this.weights.medium\n    };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--margin-block': this.marginBlock,\n      '--font-size-base': this.fontSizeBase,\n      '--line-height': this.lineHeight\n    };\n  }\n\n  setColors() {\n    const fontColor = this.color\n      ? this.theme.colors.getColor(this.color)\n      : this.theme.fonts.getColor();\n    this.styles = {\n      ...this.styles,\n      '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n      '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n    };\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size?.toLowerCase()}`] = true;\n    return classes;\n  }\n\n  getHeadingTag() {\n    const classes = this.getClasses();\n    const tags = {\n      '1': <h1 style={this.styles} class={classes}><slot></slot></h1>,\n      '2': <h2 style={this.styles} class={classes}><slot></slot></h2>,\n      '3': <h3 style={this.styles} class={classes}><slot></slot></h3>,\n      '4': <h4 style={this.styles} class={classes}><slot></slot></h4>,\n      '5': <h5 style={this.styles} class={classes}><slot></slot></h5>,\n      '6': <h6 style={this.styles} class={classes}><slot></slot></h6>,\n      'default': <h1 style={this.styles} class={classes}><slot></slot></h1>\n    };\n    return tags[`${this.level}`] || tags['default'];\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()}>\n        { this.getHeadingTag() }\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,ovEACvB,MAAAC,EAAeD,E,MCMFE,EAAW,M,yBAqDtBC,KAAAC,MAAQC,OAAOC,QAAQF,M,WA/C+B,E,UAML,Q,eAM7B,c,sCAiBiB,S,gBAMD,O,YAalB,E,CA3BlB,iBAAAG,GACEJ,KAAKK,W,CA4BP,iBAAAC,GACEN,KAAKO,oBACLP,KAAKK,W,CAGP,iBAAAE,GACEP,KAAKQ,QAAUR,KAAKC,MAAMQ,MAAMC,aAChCV,KAAKW,aAAeX,KAAKC,MAAMQ,MAAMG,UACrCZ,KAAKa,OAAS,CACZ,gBAAiBX,OAAOC,QAAQF,MAAMQ,MAAMK,UAAU,WACtD,cAAeZ,OAAOC,QAAQF,MAAMQ,MAAMG,UAC1C,qBAAsBZ,KAAKQ,QAAQO,KACnC,uBAAwBf,KAAKQ,QAAQQ,O,CAIzC,iBAAAC,GACE,MAAO,CACL,iBAAkBjB,KAAKkB,YACvB,mBAAoBlB,KAAKW,aACzB,gBAAiBX,KAAKmB,W,CAI1B,SAAAd,GACE,MAAMe,EAAYpB,KAAKqB,MACnBrB,KAAKC,MAAMqB,OAAOC,SAASvB,KAAKqB,OAChCrB,KAAKC,MAAMQ,MAAMc,WACrBvB,KAAKa,OAAMW,OAAAC,OAAAD,OAAAC,OAAA,GACNzB,KAAKa,QAAM,CACd,eAAgBO,GAAapB,KAAKC,MAAMqB,OAAOC,SAAS,kBACxD,eAAgBvB,KAAKC,MAAMqB,OAAOC,SAAS,GAAGvB,KAAK0B,c,CAIvD,UAAAC,G,MACE,MAAMC,EAAU,GAChBA,EAAQ,IAAGC,EAAA7B,KAAK8B,QAAI,MAAAD,SAAA,SAAAA,EAAEE,iBAAmB,KACzC,OAAOH,C,CAGT,aAAAI,GACE,MAAMJ,EAAU5B,KAAK2B,aACrB,MAAMM,EAAO,CACX,EAAKC,EAAA,MAAIC,MAAOnC,KAAKa,OAAQuB,MAAOR,GAASM,EAAA,cAC7C,EAAKA,EAAA,MAAIC,MAAOnC,KAAKa,OAAQuB,MAAOR,GAASM,EAAA,cAC7C,EAAKA,EAAA,MAAIC,MAAOnC,KAAKa,OAAQuB,MAAOR,GAASM,EAAA,cAC7C,EAAKA,EAAA,MAAIC,MAAOnC,KAAKa,OAAQuB,MAAOR,GAASM,EAAA,cAC7C,EAAKA,EAAA,MAAIC,MAAOnC,KAAKa,OAAQuB,MAAOR,GAASM,EAAA,cAC7C,EAAKA,EAAA,MAAIC,MAAOnC,KAAKa,OAAQuB,MAAOR,GAASM,EAAA,cAC7CG,QAAWH,EAAA,MAAIC,MAAOnC,KAAKa,OAAQuB,MAAOR,GAASM,EAAA,eAErD,OAAOD,EAAK,GAAGjC,KAAKsC,UAAYL,EAAK,U,CAGvC,MAAAM,GACE,OACEL,EAACM,EAAI,CAAAC,IAAA,2CAACN,MAAOnC,KAAKiB,qBACdjB,KAAKgC,gB","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["curaSwitchCss","CuraSwitchStyle0","CuraSwitch","this","sizes","large","size","medium","small","isDarkbackground","background","toggleSwitch","disabled","checked","internals","setFormValue","toString","onchange","emit","sizeHandler","styles","Object","assign","formsSizes","gap","setColors","colors","name","opacity","color","forEach","window","CuraAPI","theme","getColor","connectedCallback","formAssociatedCallback","form","ariaLabel","label","formStateRestoreCallback","state","value","formResetCallback","setValidity","formDisabledCallback","assignColor","colorDark","colorLight","getClasses","classes","position","render","h","Host","key","class","style","textAlign","weight","lineHeight","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":["@import '../../../../src/scss/mixins/shadows.scss';\n\n: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  text-align: left;\n\n}\n\n.position {\n  flex-direction: row;\n}\n\n.label,\n.message {\n  text-align: left;\n}\n\n.control {\n  width: fit-content;\n}\n\n/* Estilos para o controle de switch */\n.track {\n  background: var(--neutral-dark-base);\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  position: relative;\n}\n\n.thumb {\n  background: var(--neutral-purewhite);\n  border: 2px solid var(--neutral-darker-medium);\n  border-radius: 50%;\n\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  top: 50%;\n  transform: translateY(-50%);\n}\n\n/* Estado \"checked\" */\n.checked .thumb {\n  border-color: var(--color-dark);\n  @include shadow-level3(--neutral-black-shadow);\n  background: var(--neutral-purewhite);\n  transform: translateX(var(--size)) translateY(-50%);\n}\n\n.checked .thumb:hover {\n  background: var(--neutral-pale) !important;\n  border-color: var(--neutral-darker-medium) !important;\n}\n\n.checked .thumb:active {\n  border-color: var(--color-dark);\n  background: var(--neutral-pale);\n}\n\n\n.checked .track {\n  background: var(--color-base-light);\n}\n\n/* Estado \"disabled\" */\n.disabled .track {\n  background: var(--neutral-black-neutral-pale);\n}\n\n.disabled .thumb {\n  background: var(--neutral-black-neutral-base) !important;\n  border-color: var(--neutral-black-neutral-pale) !important;\n  cursor: not-allowed;\n}\n\n.disabled.checked .track {\n  background: var(--neutral-black-neutral-pale);\n}\n\n.container.disabled .thumb:focus {\n  outline: none !important;\n  border-color: var(--neutral-black-neutral-pale) !important;\n}\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);\n  background: var(--neutral-pale);\n}\n\n:not(.disabled):not(.checked) .thumb:active {\n  border-color: var(--color-dark);\n  background: var(--neutral-pale);\n}\n\n\n/* Estado hover para não disabled */\n:not(.disabled) .thumb:focus {\n  outline: 2px solid var(--info-base) !important;\n  border: 2px solid var(--neutral-darker-medium);\n  z-index: 1;\n}\n\n:not(.disabled) .checked .thumb:focus {\n  outline: 2px solid var(--info-base) !important;\n  border-color: var(--color-dark);\n}","import { Component, Prop, Event, h, Host, Watch, EventEmitter, State, AttachInternals } 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  formAssociated: true,\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  @AttachInternals() internals: ElementInternals;\n\n  sizes = {\n    large: { size: 64 },\n    medium: { size: 48 },\n    small: { size: 40 },\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-black-shadow', background: 'neutral-black', opacity: 0.16 },\n      { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n      { name: '--neutral-medium', background: 'neutral-medium' },\n      { name: '--neutral-pale', background: 'neutral-pale' },\n      { name: '--neutral-dark-base', background: `neutral-${this.isDarkbackground() ? 'dark' : 'base'}` },\n      { name: '--neutral-darker-medium', background: `neutral-${this.isDarkbackground() ? 'darker' : 'medium'}` },\n      { name: '--neutral-black-neutral-pale', background: `${this.isDarkbackground() ? 'neutral-black' : 'neutral-pale'}` },\n      { name: '--neutral-black-neutral-base', background: `${this.isDarkbackground() ? 'neutral-dark' : 'neutral-base'}` },\n      { name: '--color-base-light', background: `${this.color}-light` },\n      { name: '--color-dark', background: `${this.color}-dark` },\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  connectedCallback() {\n    this.sizeHandler();\n    this.setColors();\n  }\n\n  /**\n   * Callback for form association.\n   */\n  formAssociatedCallback(form: { ariaLabel: string }) {\n    form.ariaLabel = this.label;\n  }\n\n  /**\n   * Callback to restore the switch state from the form.\n   */\n  formStateRestoreCallback(state: { value: string }) {\n    this.checked = state.value === 'true';\n    this.internals.setFormValue(this.checked.toString());\n  }\n\n  /**\n   * Callback to reset the switch state when the form is reset.\n   */\n  formResetCallback() {\n    this.checked = false;\n    this.internals.setValidity({});\n    this.internals.setFormValue(this.checked.toString());\n  }\n\n  /**\n   * Callback to update the switch's disabled state when the form's disabled state changes.\n   */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  toggleSwitch = () => {\n    if (this.disabled) return null;\n\n    this.checked = !this.checked;\n    this.internals.setFormValue(this.checked.toString());\n    this.onchange.emit({ checked: this.checked });\n  };\n\n  assignColor(colorDark: string, colorLight: string) {\n    if (this.disabled) return this.isDarkbackground() ? 'neutral-dark' : 'neutral-dark';\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  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"info\">\n            <cura-label\n              style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n              class=\"label\"\n              weight=\"bold\"\n              size={this.size === 'large' ? 'medium' : 'xsmall'}\n              lineHeight=\"125%\"\n              color={this.assignColor('neutral-white', 'neutral-black')}\n            >\n              {this.label}\n            </cura-label>\n            <cura-label\n              style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n              color={this.assignColor('primary-lighter', 'neutral-dark')}\n              size=\"xsmall\"\n              class=\"message\"\n            >\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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","ignoreList":[]}