@rededor/cura 1.6.1-alpha.6 → 1.6.1-alpha.8

package/dist/cura/p-0d78f2ed.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as a,H as s,g as t}from"./p-4ee8efca.js";import{f as c}from"./p-f9b8f665.js";const o='@charset "UTF-8";:host{display:block;width:fit-content;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap)}.position.container{flex-direction:row}.position .label-wrapper{justify-content:end}.position .message{text-align:right}.position .label{order:1}.info{display:flex;flex-direction:column}.label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}.control{width:fit-content;cursor:pointer;position:relative}.checkbox{appearance:none;border:2px solid var(--neutral-base-neutral-medium);border-radius:4px;background:var(--neutral-black-neutral-purewhite);flex:1 0;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-sizing:border-box;width:var(--size);height:var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:flex;opacity:0;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--neutral-darker-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--neutral-base-neutral-white);background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--neutral-darker-neutral-base) !important}.checked .checkbox{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover{border-color:var(--color-base) !important;background:var(--color-light)}.indeterminate .checkbox{border-color:var(--color-base);background:var(--color-light)}.indeterminate .checkbox:hover{border-color:var(--color-dark) !important;background:var(--color-base)}.checked .icon,.indeterminate .icon{opacity:1}:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover{border-color:var(--neutral-purewhite-neutral-dark)}.success.dark .checkbox{background:var(--neutral-black)}.success .checkbox{border-color:var(--success-base);background:var(--success-lighter)}.success .checkbox:hover{border-color:var(--success-base) !important}.success.checked .checkbox{border-color:var(--success-dark-base);background:var(--success-base-lighter)}.success.checked .checkbox:hover{border-color:var(--success-dark-base)}.error.dark .checkbox{background:var(--neutral-black)}.error .checkbox{border-color:var(--error-base);background:var(--error-lighter)}.error .checkbox:hover{border-color:var(--error-base) !important}.error.checked .checkbox{border-color:var(--error-dark-base);background:var(--error-base-lighter)}.error.checked .checkbox:hover{border-color:var(--error-dark-base)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}';const i=o;const n=class{constructor(a){e(this,a);this.onchange=r(this,"onchange",7);if(a.$hostElement$["s-ei"]){this.internals=a.$hostElement$["s-ei"]}else{this.internals=a.$hostElement$.attachInternals();a.$hostElement$["s-ei"]=this.internals}this.isDarkBackground=()=>this.background==="dark";this.isDarkIconColor=()=>this.iconColor==="dark";this.handleClick=()=>{if(this.disabled)return;this.indeterminate=false;this.checked=!this.checked;this.internals.setFormValue(this.value);this.onchange.emit({value:this.value,checked:this.checked,indeterminate:this.indeterminate})};this.checked=false;this.indeterminate=false;this.status="default";this.disabled=false;this.required=false;this.label=undefined;this.ontabindex=0;this.position="left";this.value=undefined;this.name=undefined;this.size="medium";this.background="light";this.iconColor="dark";this.color="accent";this.styles={}}sizeHandler(){this.styles=Object.assign(Object.assign({},this.styles),{"--size":`${c[this.size].size}px`,"--gap":`${c[this.size].gap}px`})}setColors(){const e=[{name:"--color-base",background:`${this.color}-base`},{name:"--color-lighter",background:`${this.color}-lighter`},{name:"--color-light",background:`${this.color}-light`},{name:"--color-dark",background:`${this.color}-dark`},{name:"--info-base",background:"info-base"},{name:"--error-base",background:"error-base"},{name:"--success-lighter",background:"success-lighter"},{name:"--success-base",background:"success-base"},{name:"--success-dark",background:"success-dark"},{name:"--error-lighter",background:"error-lighter"},{name:"--neutral-black",background:"neutral-black"},{name:"--primary-base-neutral-white",background:this.isDarkBackground()?"primary-base":"neutral-white"},{name:"--neutral-base-neutral-medium",background:this.isDarkBackground()?"neutral-base":"neutral-medium"},{name:"--neutral-black-neutral-purewhite",background:this.isDarkBackground()?"neutral-black":"neutral-purewhite"},{name:"--neutral-black-neutral-white",background:this.isDarkBackground()?"neutral-black":"neutral-white"},{name:"--neutral-darker-neutral-base",background:this.isDarkBackground()?"neutral-darker":"neutral-base"},{name:"--neutral-base-neutral-base",background:this.isDarkBackground()?"primary-base":"neutral-base"},{name:"--neutral-purewhite-neutral-dark",background:this.isDarkBackground()?"neutral-purewhite":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkBackground()?"primary-base":"neutral-medium"},{name:"--success-base-lighter",background:this.isDarkBackground()?"success-base":"success-lighter"},{name:"--success-dark-base",background:this.isDarkBackground()?"success-dark":"success-base"},{name:"--error-base-lighter",background:this.isDarkBackground()?"error-base":"error-lighter"},{name:"--error-dark-base",background:this.isDarkBackground()?"error-dark":"error-base"}];e.forEach((e=>{this.styles[e.name]=window.CuraAPI.theme.colors.getColor(e.background)}));this.styles=Object.assign({},this.styles)}connectedCallback(){this.sizeHandler();this.setColors()}formAssociatedCallback(e){e.ariaLabel=this.label}formStateRestoreCallback(e){this.value=e.value;this.checked=e.checked;this.indeterminate=e.indeterminate;this.internals.setFormValue(this.value)}formResetCallback(){this.value="";this.checked=false;this.indeterminate=false;this.internals.setValidity({});this.internals.setFormValue(this.value)}formDisabledCallback(e){this.disabled=e}getClasses(){const e={};e["container"]=true;e["checked"]=this.checked;e["disabled"]=this.disabled;e[this.background]=true;e["indeterminate"]=this.indeterminate;e["position"]=this.position==="right";e[this.status]=true;return e}assignColor(e){if(this.disabled)return this.isDarkBackground()?"neutral-dark":"neutral-dark";const r={success:{icon:"success-dark",label:this.isDarkBackground()?"success-lighter":"success-darker",message:this.isDarkBackground()?"success-base":"success-dark"},error:{icon:"error-dark",label:this.isDarkBackground()?"error-lighter":"neutral-darker",message:this.isDarkBackground()?"error-base":"error-dark"},default:{icon:this.isDarkIconColor()?"neutral-black":"neutral-purewhite",label:this.isDarkBackground()?"neutral-white":"neutral-black",message:this.isDarkBackground()?"primary-lighter":"neutral-dark"}};return r[this.status][e]}getIcon(){const e=this.indeterminate?"minus":"check";const r=this.assignColor("icon");const s=this.size==="large"?20:"micro";return a("cura-icon",{class:"icon",name:e,size:s,color:r})}render(){return a(s,{key:"38dc1c859eaacfa8a0a60efca1fe47586a596188",role:"checkbox","aria-checked":this.checked,"aria-disabled":this.disabled,"aria-required":this.required,"aria-invalid":this.status==="error"},a("div",{key:"f7ed7a6f038dc25a410bb28b9d1c460cbd6cfc06",class:this.getClasses(),style:this.styles,onClick:this.handleClick},a("div",{key:"d967848cdfbf62dbafcb25a53e7f406d5ea52dba",class:"info"},a("div",{key:"2042553ad48d01211bdb1be932288066bb680437",class:"label-wrapper"},a("cura-label",{key:"15c411defab17c9da0c5a9857a158ea910715ccf",class:"label",weight:"bold",size:this.size==="large"?"medium":"xsmall",color:this.assignColor("label")},this.label),this.required&&a("cura-paragraph",{key:"d6363a35853c75e88e7d2ba9433aa10d1836a453",lineHeight:"0%",marginBlock:"0",color:"error-base"},"* ")),a("cura-label",{key:"dcaa4aabaa1f0ae23c2f1580390411791e5bc5dc",color:this.assignColor("message"),size:"xsmall",class:"message"},a("slot",{key:"54c48d59491756083ce98052956ca98193394c54"}))),a("div",{key:"522472497187f857f589aa258795b50a41f4fa05",class:"checkbox",tabIndex:this.ontabindex},a("input",{key:"fc052a7fe97d6ca47ba6c89cdf4335b23e1625b8",type:"checkbox",name:this.name,value:this.value,disabled:this.disabled,required:this.required,checked:this.checked,indeterminate:this.indeterminate}),this.getIcon())))}static get formAssociated(){return true}get host(){return t(this)}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"],iconColor:["assignColor"]}}};n.style=i;export{n as cura_checkbox};
-//# sourceMappingURL=p-0d78f2ed.entry.js.map

package/dist/cura/p-0d78f2ed.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","role","required","style","onClick","weight","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 role=\"checkbox\"\n        aria-checked={this.checked}\n        aria-disabled={this.disabled}\n        aria-required={this.required}\n        aria-invalid={this.status === 'error'}>\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-3c3d330f.entry.js

@@ -1,2 +0,0 @@
-import{r,c as e,h as a,H as s,g as t}from"./p-4ee8efca.js";import{f as i}from"./p-f9b8f665.js";const o='@charset "UTF-8";:host{display:block;width:fit-content;box-sizing:border-box;}:host .container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap)}:host .position.container{flex-direction:row}:host .position .label-wrapper{justify-content:end}:host .position .message{text-align:right}:host .position .label{order:1}:host .info{display:flex;flex-direction:column}:host .label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}:host .control{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);box-sizing:border-box;transition:border-color 0.3s;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;width:var(--size);height:var(--size);flex:0 0 var(--size)}:host .radio::after{content:"";background:var(--color-base-light);border-radius:50%;opacity:0;transition:opacity 0.3s;width:var(--size-after);height:var(--size-after)}:host .radio:focus{border-color:var(--info-base) !important}:host .success .radio{border-color:var(--success-base);background:var(--success-lighter)}:host .success .radio:hover{border-color:var(--success-base) !important}:host .success.checked .radio{border-color:var(--success-base)}:host .success.checked .radio::after{background:var(--success-base)}:host .success.checked .radio:hover{background:var(--success-lighter) !important;border-color:var(--success-base) !important}:host .success.checked .radio:hover::after{background:var(--success-base) !important}:host .error .radio{border-color:var(--error-base);background:var(--error-lighter)}:host .error .radio:hover{border-color:var(--error-base) !important}:host .error.checked .radio{border-color:var(--error-base)}:host .error.checked .radio::after{background:var(--error-base)}:host .error.checked .radio:hover{background:var(--error-lighter) !important;border-color:var(--error-base) !important}:host .error.checked .radio:hover::after{background:var(--error-base) !important}:host .checked .radio::after{opacity:1;background:var(--color-base)}:host .checked .radio{border-color:var(--color-dark)}:host .checked .radio:hover{border-color:var(--color-light) !important}:host .checked .radio:hover::after{background:var(--color-light)}:host .disabled .radio{background:var(--primary-base-neutral-white);border-color:var(--primary-darker-neutral-base);cursor:not-allowed}:host .disabled .radio::after{background:var(--neutral-lighter)}:host .disabled.checked .radio{border-color:var(--primary-base-neutral-base) !important;background:var(--primary-darker-neutral-white) !important}:host .disabled.checked .radio::after{background:var(--primary-base-neutral-base) !important}:host :not(.disabled):not(.checked) .radio:hover{border-color:var(--primary-base-neutral-dark)}';const c=o;const d=class{constructor(a){r(this,a);this.onchange=e(this,"onchange",7);if(a.$hostElement$["s-ei"]){this.internals=a.$hostElement$["s-ei"]}else{this.internals=a.$hostElement$.attachInternals();a.$hostElement$["s-ei"]=this.internals}this.sizes={large:{size:20},medium:{size:14},small:{size:10}};this.isDarkbackground=()=>this.background==="dark";this.handleClick=()=>{if(this.disabled)return;this.checked=!this.checked;this.internals.setFormValue(this.value);this.onchange.emit({value:this.value,checked:this.checked})};this.checked=false;this.status="default";this.disabled=false;this.required=false;this.label="";this.ontabindex=undefined;this.position="left";this.value="";this.name="";this.background="light";this.size="medium";this.color="accent";this.styles={}}sizeHandler(){this.styles=Object.assign(Object.assign({},this.styles),{"--size-after":`${this.sizes[this.size].size}px`,"--size":`${i[this.size].size}px`,"--gap":`${i[this.size].gap}px`})}setColors(){const r=[{name:"--info-base",background:"info-base"},{name:"--color-light",background:`${this.color}-light`},{name:"--color-base",background:`${this.color}-base`},{name:"--color-dark",background:`${this.color}-dark`},{name:"--neutral-purewhite",background:"neutral-purewhite"},{name:"--success-lighter",background:"success-lighter"},{name:"--success-base",background:"success-base"},{name:"--error-lighter",background:"error-lighter"},{name:"--error-base",background:"error-base"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--primary-base-neutral-white",background:this.isDarkbackground()?"primary-base":"neutral-white"},{name:"--primary-darker-neutral-white",background:this.isDarkbackground()?"primary-darker":"neutral-white"},{name:"--primary-darker-neutral-base",background:this.isDarkbackground()?"primary-darker":"neutral-base"},{name:"--primary-base-neutral-base",background:this.isDarkbackground()?"primary-base":"neutral-base"},{name:"--primary-base-neutral-dark",background:this.isDarkbackground()?"primary-base":"neutral-dark"},{name:"--primary-base-neutral-medium",background:this.isDarkbackground()?"primary-base":"neutral-medium"},{name:"--success-base-dark",background:this.isDarkbackground()?"success-base":"success-dark"},{name:"--error-base-dark",background:this.isDarkbackground()?"error-base":"error-dark"}];r.forEach((r=>{this.styles[r.name]=window.CuraAPI.theme.colors.getColor(r.background)}));this.styles=Object.assign({},this.styles)}formAssociatedCallback(r){r.ariaLabel=this.label}formStateRestoreCallback(r){this.value=r.value;this.checked=r.checked;this.internals.setFormValue(this.value)}formResetCallback(){this.value="";this.checked=false;this.internals.setValidity({});this.internals.setFormValue(this.value)}formDisabledCallback(r){this.disabled=r}connectedCallback(){this.sizeHandler();this.setColors()}getClasses(){const r={};r["container"]=true;r["checked"]=this.checked;r["disabled"]=this.disabled;r["position"]=this.position==="right";r[this.status]=true;return r}assignColor(r){if(this.disabled)return this.isDarkbackground()?"primary-darker":"neutral-medium";const e={success:{label:this.isDarkbackground()?"success-lighter":"success-darker",message:this.isDarkbackground()?"success-base":"success-dark"},error:{label:this.isDarkbackground()?"error-lighter":"neutral-darker",message:this.isDarkbackground()?"error-base":"error-dark"},default:{label:this.isDarkbackground()?"neutral-white":"neutral-black",message:this.isDarkbackground()?"primary-lighter":"neutral-dark"}};return e[this.status][r]}render(){return a(s,{key:"73974985488d137a905266282c8baed872afb7b6",role:"radio","aria-checked":this.checked,"aria-disabled":this.disabled,"aria-required":this.required,"aria-invalid":this.status==="error"},a("div",{key:"d0dc114fda0829fa588f4a79deceec572d1a6c05",class:this.getClasses(),style:this.styles},a("div",{key:"a0e5eba07c667423e866d388385e5c874e20d2de",class:"info"},a("div",{key:"776244c29497773dcd1437fbbff2d6cc1429776e",class:"label-wrapper"},a("cura-label",{key:"4e340091e13ee08fbd7e5461a1a26c8d6161d509",class:"label",size:this.size==="large"?"medium":"xsmall",color:this.assignColor("label")},this.label),this.required&&a("cura-paragraph",{key:"082446dae9772ffde74131b3cbfb14464140e2be",lineHeight:"0%",marginBlock:"0",color:"error-base"},"* ")),a("cura-label",{key:"d2fd69bf7aa35a0861eb60a718c64742cabeb521",color:this.assignColor("message"),size:"xsmall",class:"message"},a("slot",{key:"b4d9c088779cacdcff50d3f0340d987339705465"}))),a("input",{key:"bfd06db3f307be85b8a7ecc541305ceb6bb5c9b6",type:"radio",class:`radio ${this.size.toLocaleLowerCase()}`,name:this.name,value:this.value,required:this.required,tabIndex:this.ontabindex,disabled:this.disabled,checked:this.checked,onClick:this.handleClick})))}static get formAssociated(){return true}get host(){return t(this)}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"]}}};d.style=c;export{d as cura_radio};
-//# sourceMappingURL=p-3c3d330f.entry.js.map

package/dist/cura/p-3c3d330f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaRadioCss","CuraRadioStyle0","CuraRadio","this","sizes","large","size","medium","small","isDarkbackground","background","handleClick","disabled","checked","internals","setFormValue","value","onchange","emit","sizeHandler","styles","Object","assign","formsSizes","gap","setColors","colors","name","color","forEach","window","CuraAPI","theme","getColor","formAssociatedCallback","form","ariaLabel","label","formStateRestoreCallback","state","formResetCallback","setValidity","formDisabledCallback","connectedCallback","getClasses","classes","position","status","assignColor","type","statusColors","success","message","error","default","render","h","Host","key","role","required","class","style","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, AttachInternals } 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  formAssociated: 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  @AttachInternals() internals: ElementInternals;\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 = {\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  /**\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 }) {\n    this.value = state.value;\n    this.checked = state.checked;\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.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  connectedCallback() {\n    this.sizeHandler()\n    this.setColors();\n  }\n\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n    this.internals.setFormValue(this.value);\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 role=\"radio\"\n        aria-checked={this.checked}\n        aria-disabled={this.disabled}\n        aria-required={this.required}\n        aria-invalid={this.status === 'error'}>\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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","ignoreList":[]}

package/dist/cura/p-9db912ea.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as a,h as t,H as r}from"./p-4ee8efca.js";import{f as i}from"./p-f9b8f665.js";const s='@charset "UTF-8";:host{display:block;width:fit-content;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap);text-align:left}.position{flex-direction:row}.label,.message{text-align:left}.control{width:fit-content}.track{background:var(--neutral-dark-base);border-radius:16px;transition:background-color 0.3s;align-items:flex-start;flex-shrink:0;box-sizing:border-box;width:var(--size-track);height:var(--size);position:relative}.thumb{background:var(--neutral-purewhite);border:2px solid var(--neutral-darker-medium);border-radius:50%;position:absolute;transition:transform 0.3s, outline 0.3s;display:inline-block;cursor:pointer;user-select:none;box-sizing:border-box;width:var(--size);height:var(--size);top:50%;transform:translateY(-50%)}.checked .thumb{border-color:var(--color-dark);box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));background:var(--neutral-purewhite);transform:translateX(var(--size)) translateY(-50%)}.checked .thumb:hover{background:var(--neutral-pale) !important;border-color:var(--neutral-darker-medium) !important}.checked .thumb:active{border-color:var(--color-dark);background:var(--neutral-pale)}.checked .track{background:var(--color-base-light)}.disabled .track{background:var(--neutral-black-neutral-pale)}.disabled .thumb{background:var(--neutral-black-neutral-base) !important;border-color:var(--neutral-black-neutral-pale) !important;cursor:not-allowed}.disabled.checked .track{background:var(--neutral-black-neutral-pale)}.container.disabled .thumb:focus{outline:none !important;border-color:var(--neutral-black-neutral-pale) !important}:not(.disabled):not(.checked) .thumb:hover{border-color:var(--color-dark);background:var(--neutral-pale)}:not(.disabled):not(.checked) .thumb:active{border-color:var(--color-dark);background:var(--neutral-pale)}:not(.disabled) .thumb:focus{outline:2px solid var(--info-base) !important;border:2px solid var(--neutral-darker-medium);z-index:1}:not(.disabled) .checked .thumb:focus{outline:2px solid var(--info-base) !important;border-color:var(--color-dark)}';const l=s;const o=class{constructor(t){e(this,t);this.onchange=a(this,"onchange",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.sizes={large:{size:64},medium:{size:48},small:{size:40}};this.isDarkbackground=()=>this.background==="dark";this.toggleSwitch=()=>{if(this.disabled)return null;this.checked=!this.checked;this.internals.setFormValue(this.checked.toString());this.onchange.emit({checked:this.checked})};this.checked=false;this.disabled=false;this.label="";this.ontabindex=0;this.position="left";this.size="medium";this.background="light";this.color="accent";this.styles={}}sizeHandler(){this.styles=Object.assign(Object.assign({},this.styles),{"--size-track":`${this.sizes[this.size].size}px`,"--size":`${i[this.size].size}px`,"--gap":`${i[this.size].gap}px`})}setColors(){const e=[{name:"--info-base",background:"info-base"},{name:"--neutral-black-shadow",background:"neutral-black",opacity:.16},{name:"--neutral-purewhite",background:"neutral-purewhite"},{name:"--neutral-medium",background:"neutral-medium"},{name:"--neutral-pale",background:"neutral-pale"},{name:"--neutral-dark-base",background:`neutral-${this.isDarkbackground()?"dark":"base"}`},{name:"--neutral-darker-medium",background:`neutral-${this.isDarkbackground()?"darker":"medium"}`},{name:"--neutral-black-neutral-pale",background:`${this.isDarkbackground()?"neutral-black":"neutral-pale"}`},{name:"--neutral-black-neutral-base",background:`${this.isDarkbackground()?"neutral-dark":"neutral-base"}`},{name:"--color-base-light",background:`${this.color}-light`},{name:"--color-dark",background:`${this.color}-dark`}];e.forEach((e=>{this.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)}connectedCallback(){this.sizeHandler();this.setColors()}formAssociatedCallback(e){e.ariaLabel=this.label}formStateRestoreCallback(e){this.checked=e.value==="true";this.internals.setFormValue(this.checked.toString())}formResetCallback(){this.checked=false;this.internals.setValidity({});this.internals.setFormValue(this.checked.toString())}formDisabledCallback(e){this.disabled=e}assignColor(e,a){if(this.disabled)return this.isDarkbackground()?"neutral-dark":"neutral-dark";return this.isDarkbackground()?e:a}getClasses(){const e={};e["container"]=true;e["checked"]=this.checked;e["disabled"]=this.disabled;e["position"]=this.position==="right";return e}render(){return t(r,{key:"6d6dee59547a29e11ba423aed2e0c3beb0fe7cc7",role:"switch","aria-checked":this.checked,"aria-disabled":this.disabled},t("div",{key:"85d2f2d78f4e43a92c694fee2bf22d4dbfb3eb5d",class:this.getClasses(),style:this.styles},t("div",{key:"09802da22abd10e235f9110b051717244588eb04",class:"info"},t("cura-label",{key:"2df09ee13d301f6b9392d7387373326d9f4efe22",style:{textAlign:this.position==="right"?"right":"left"},class:"label",weight:"bold",size:this.size==="large"?"medium":"xsmall",lineHeight:"125%",color:this.assignColor("neutral-white","neutral-black")},this.label),t("cura-label",{key:"6474c893ba57f14ab9cd96307b03492bff568cf4",style:{textAlign:this.position==="right"?"right":"left"},color:this.assignColor("primary-lighter","neutral-dark"),size:"xsmall",class:"message"},t("slot",{key:"2329e2d7855a9357d00c36f93858d54f7857bdca"}))),t("div",{key:"39c3b260ce60a409c9c04c98d9d8426ff9afd6af",onClick:this.toggleSwitch,class:"control"},t("div",{key:"dd613f737b66c2facca47adc52a79f010eafaa3d",class:`track ${this.size.toLowerCase()}`},t("div",{key:"7ab3462d12f7e3448130c81a09064bec2b4b60da",class:`thumb ${this.size.toLowerCase()}`,tabIndex:this.ontabindex})))))}static get formAssociated(){return true}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors"]}}};o.style=l;export{o as cura_switch};
-//# sourceMappingURL=p-9db912ea.entry.js.map

package/dist/cura/p-9db912ea.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","role","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 role=\"switch\"\n        aria-checked={this.checked}\n        aria-disabled={this.disabled}>\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":[]}

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

@@ -1,2 +0,0 @@
-import{r as a,c as e,h as t,H as i}from"./p-4ee8efca.js";const o=":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn 0.3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}.backdrop{background-color:var(--background-color);z-index:calc(var(--zIndex) - 10);animation:fadeIn 0.3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-white);border:2px solid var(--neutral-light);border-radius:calc(var(--cura-spacing-base) * 3px);max-width:600px;min-width:200px;padding:calc(var(--cura-spacing-base) * 4px);z-index:var(--zIndex);box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));transform:scale(0.95);transition:transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease}.wrapper ::slotted(*){max-height:80vh;overflow:auto;padding-right:calc(var(--cura-spacing-base) * 5px)}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:calc(var(--cura-spacing-base) * 4px);background:none;border:none;cursor:pointer}.close.mobile{display:none}.close.desktop{display:flex;padding:0}@media (max-width: 768px){.wrapper{position:fixed;bottom:0px;width:80%;padding-top:calc(var(--cura-spacing-base) * 4px);padding-bottom:0px;border-radius:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px) 0px 0px;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:calc(var(--cura-spacing-base) * 4px);padding:calc(var(--cura-spacing-base) * 4px) 0px;justify-content:center;width:100%}.close.mobile{display:flex;gap:calc(var(--cura-spacing-base) * 2px)}.close.desktop{display:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}";const s=o;const r=class{constructor(t){a(this,t);this.modalClose=e(this,"modalClose",7);this.handleClose=()=>{this.modalClose.emit();this.open=false};this.open=false;this.background="light";this.top=0;this.bottom=0;this.left=0;this.right=0;this.mobileCloseLabel="Fechar";this.zindex="100";this.styles={}}setColors(){const a={dark:window.CuraAPI.theme.colors.getColor("neutral-black",.4),light:window.CuraAPI.theme.colors.getColor("primary-darker",.8)};this.styles=Object.assign(Object.assign({},this.styles),{"--background-color":a[this.background]})}setOffset(a,e){this.styles=Object.assign(Object.assign({},this.styles),{[`--${a}-offset`]:`${e}px`})}setTop(){this.setOffset("top",this.top)}setBottom(){this.setOffset("bottom",this.bottom)}setLeft(){this.setOffset("left",this.left)}setRight(){this.setOffset("right",this.right)}connectedCallback(){this.styles=Object.assign(Object.assign({},this.styles),{"--neutral-white":window.CuraAPI.theme.colors.getColor("neutral-white"),"--neutral-light":window.CuraAPI.theme.colors.getColor("neutral-light"),"--base-spacing":window.CuraAPI.theme.spacing.getSpacing()});this.setColors();this.setTop();this.setBottom();this.setLeft();this.setRight()}render(){return t(i,{key:"96d1bb55eb2e3b1de05a106b81bf1d71920ed62d",role:"dialog","aria-modal":"true",style:{"--zIndex":this.zindex}},t("div",{key:"c95338b0230f898659e3cc880dfdaa665cb3897c",class:this.open?"modal container open":"modal container",style:this.styles},t("div",{key:"195abcb943a81e317ef653b7dc17093cf85a7f11",class:this.open?"modal backdrop open":"modal backdrop",onClick:this.handleClose}),t("div",{key:"faeee32908544ba4d9d64ac254587fa1b26348ef",class:"wrapper"},t("button",{key:"753d1f141aa624a3bba4e31d456e08a71c69dd30",class:"close desktop",onClick:this.handleClose},t("cura-icon",{key:"129e1dcfb4b4b048b0a8634182268dd16dd663c9",name:"close",color:"error-dark",size:"16"})),t("slot",{key:"a199bfb47a3f7b288e5a05f4739a51eef1de2b0f"}),t("button",{key:"84cc6e3f45b754df5369969ba396f2cb49a61b38",class:"close mobile",onClick:this.handleClose},t("cura-icon",{key:"7e9e2d1792459b5ceaea7b1070fc28b8439624f0",name:"close",color:"error-dark",size:"16"}),t("cura-paragraph",{key:"756739c185ddabd3e793aaa86f6e86941ddbe5b9",color:"error-dark",size:"small",marginBlock:"0"},this.mobileCloseLabel)))))}static get watchers(){return{background:["setColors"],top:["setTop"],bottom:["setBottom"],left:["setLeft"],right:["setRight"]}}};r.style=s;export{r as cura_modal};
-//# sourceMappingURL=p-d6897ac1.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["curaModalCss","CuraModalStyle0","CuraModal","this","handleClose","modalClose","emit","open","setColors","backgroundTheme","dark","window","CuraAPI","theme","colors","getColor","light","styles","Object","assign","background","setOffset","name","value","setTop","top","setBottom","bottom","setLeft","left","setRight","right","connectedCallback","spacing","getSpacing","render","h","Host","key","role","style","zindex","class","onClick","color","size","marginBlock","mobileCloseLabel"],"sources":["src/components/cura-modal/cura-modal.scss?tag=cura-modal&encapsulation=shadow","src/components/cura-modal/cura-modal.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/spacing.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/animations.scss';\n\n:host {\n  display: block;\n}\n\n.modal {\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  top: var(--top-offset);\n  bottom: var(--bottom-offset);\n  left: var(--left-offset);\n  right: var(--right-offset);\n  z-index: -1;\n  margin-top: var(--offset-top);\n\n  &.open {\n    z-index:  var(--zIndex);\n\n    .backdrop,\n    .wrapper {\n      opacity: 1;\n      visibility: visible;\n      animation: fadeIn 0.3s ease-out;\n    }\n  }\n}\n\n.container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.backdrop,\n.wrapper {\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\n.backdrop {\n  background-color: var(--background-color);\n  z-index:  calc(var(--zIndex) - 10);\n  animation: fadeIn 0.3s ease-out;\n}\n\n.wrapper {\n  position: fixed;\n  background-color: var(--neutral-white);\n  border: 2px solid var(--neutral-light);\n  border-radius: #{$spacing-xxxs};\n  max-width: 600px;\n  min-width: 200px;\n  padding: #{$spacing-xxs};\n  z-index:  var(--zIndex);\n\n  @include shadow-level4();\n\n  transform: scale(0.95);\n  transition: transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease;\n\n  ::slotted(*) {\n    max-height: 80vh;\n    overflow: auto;\n    padding-right: #{$spacing-xs};\n  }\n}\n\n.modal.open .wrapper {\n  transform: scale(1);\n  opacity: 1;\n  visibility: visible;\n}\n\n.close {\n  justify-self: flex-end;\n  padding-top: #{$spacing-xxs};\n  background: none;\n  border: none;\n  cursor: pointer;\n\n  &.mobile {\n    display: none;\n  }\n\n  &.desktop {\n    display: flex;\n    padding: 0;\n  }\n}\n\n@include mobile-only() {\n  .wrapper {\n    position: fixed;\n    bottom: #{$spacing-none};\n    width: 80%;\n    padding-top: #{$spacing-xxs};\n    padding-bottom: #{$spacing-none};\n    border-radius: #{$spacing-xxxs} #{$spacing-xxxs} #{$spacing-none} #{$spacing-none};\n    border-bottom: none;\n  }\n\n  .close {\n    align-items: center;\n    border-top: 1px dashed var(--neutral-light);\n    margin-top: #{$spacing-xxs};\n    padding: #{$spacing-xxs} #{$spacing-none};\n    justify-content: center;\n    width: 100%;\n\n    &.mobile {\n      display: flex;\n      gap: #{$spacing-mini};\n    }\n\n    &.desktop {\n      display: none;\n    }\n  }\n}\n\n@include fadeIn();\n@include fadeOut();\n","import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-modal',\n  styleUrl: 'cura-modal.scss',\n  shadow: true,\n})\nexport class CuraModal {\n  /**\n   * Property open to control modal visibility.\n   * Default: false\n   */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /**\n   * Property background to control modal backdrop color.\n   * Default: light\n   */\n  @Prop() background?: 'dark' | 'light' = 'light';\n  /**\n   * Property top to control modal top position.\n   * Default: 0px\n   */\n  @Prop() top?: number = 0;\n  /**\n   * Property bottom to control modal bottom position.\n   * Default: 0px\n   */\n  @Prop() bottom?: number = 0;\n  /**\n   * Property left to control modal left position.\n   * Default: 0px\n   */\n  @Prop() left?: number = 0;\n  /**\n   * Property right to control modal right position.\n   * Default: 0px\n   */\n  @Prop() right?: number = 0;\n  /**\n   * Defines the label for the close button when the modal is viewed on mobile.\n   * Default: Fechar\n   */\n  @Prop({ reflect: true }) mobileCloseLabel: string = 'Fechar';\n  /**\n   * Property zindex to control the z-index value of the component.\n   * Default: 100\n   */\n  @Prop({ reflect: true }) zindex: string = '100';\n  /**\n   * Event close to handle modal close.\n   */\n  @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n  @State() styles = {};\n\n  @Watch('background')\n  setColors() {\n    const backgroundTheme = {\n      dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n      light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n    };\n\n    this.styles = {\n      ...this.styles,\n      '--background-color': backgroundTheme[this.background],\n    };\n  }\n\n  setOffset(name: string, value: number) {\n    this.styles = {\n      ...this.styles,\n      [`--${name}-offset`]: `${value}px`,\n    };\n  }\n\n  @Watch('top')\n  setTop() {\n    this.setOffset('top', this.top);\n  }\n\n  @Watch('bottom')\n  setBottom() {\n    this.setOffset('bottom', this.bottom);\n  }\n\n  @Watch('left')\n  setLeft() {\n    this.setOffset('left', this.left);\n  }\n\n  @Watch('right')\n  setRight() {\n    this.setOffset('right', this.right);\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'),\n      '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n    this.setColors();\n    this.setTop();\n    this.setBottom();\n    this.setLeft();\n    this.setRight();\n  }\n\n  private handleClose = () => {\n    this.modalClose.emit();\n    this.open = false;\n  };\n\n  render() {\n    return (\n      <Host role=\"dialog\"\n        aria-modal=\"true\"\n        style={{ '--zIndex': this.zindex }}>\n        <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n          <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.handleClose}></div>\n          <div class=\"wrapper\">\n            {/* Desktop button */}\n            <button class=\"close desktop\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"16\"></cura-icon>\n            </button>\n            <slot></slot>\n            {/* Mobile button */}\n            <button class=\"close mobile\" onClick={this.handleClose}>\n              <cura-icon name=\"close\" color=\"error-dark\" size=\"16\"></cura-icon>\n              <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n                {this.mobileCloseLabel}\n              </cura-paragraph>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,0gEACrB,MAAAC,EAAeD,E,MCMFE,EAAS,M,gEAsGZC,KAAAC,YAAc,KACpBD,KAAKE,WAAWC,OAChBH,KAAKI,KAAO,KAAK,E,UAnGsC,M,gBAKjB,Q,SAKjB,E,YAKG,E,UAKF,E,WAKC,E,sBAK2B,S,YAKV,M,YAMxB,E,CAGlB,SAAAC,GACE,MAAMC,EAAkB,CACtBC,KAAMC,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,gBAAiB,IAC5DC,MAAOL,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,iBAAkB,KAGhEZ,KAAKc,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GACNhB,KAAKc,QAAM,CACd,qBAAsBR,EAAgBN,KAAKiB,a,CAI/C,SAAAC,CAAUC,EAAcC,GACtBpB,KAAKc,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GACNhB,KAAKc,QAAM,CACd,CAAC,KAAKK,YAAgB,GAAGC,O,CAK7B,MAAAC,GACErB,KAAKkB,UAAU,MAAOlB,KAAKsB,I,CAI7B,SAAAC,GACEvB,KAAKkB,UAAU,SAAUlB,KAAKwB,O,CAIhC,OAAAC,GACEzB,KAAKkB,UAAU,OAAQlB,KAAK0B,K,CAI9B,QAAAC,GACE3B,KAAKkB,UAAU,QAASlB,KAAK4B,M,CAG/B,iBAAAC,GACE7B,KAAKc,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GACNhB,KAAKc,QAAM,CACd,kBAAmBN,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,iBACxD,kBAAmBJ,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,iBACxD,iBAAkBJ,OAAOC,QAAQC,MAAMoB,QAAQC,eAEjD/B,KAAKK,YACLL,KAAKqB,SACLrB,KAAKuB,YACLvB,KAAKyB,UACLzB,KAAK2B,U,CAQP,MAAAK,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SAAQ,aACN,OACXC,MAAO,CAAE,WAAYrC,KAAKsC,SAC1BL,EAAA,OAAAE,IAAA,2CAAKI,MAAOvC,KAAKI,KAAO,uBAAyB,kBAAmBiC,MAAOrC,KAAKc,QAC9EmB,EAAA,OAAAE,IAAA,2CAAKI,MAAOvC,KAAKI,KAAO,sBAAwB,iBAAkBoC,QAASxC,KAAKC,cAChFgC,EAAA,OAAAE,IAAA,2CAAKI,MAAM,WAETN,EAAA,UAAAE,IAAA,2CAAQI,MAAM,gBAAgBC,QAASxC,KAAKC,aAC1CgC,EAAA,aAAAE,IAAA,2CAAWhB,KAAK,QAAQsB,MAAM,aAAaC,KAAK,QAElDT,EAAA,QAAAE,IAAA,6CAEAF,EAAA,UAAAE,IAAA,2CAAQI,MAAM,eAAeC,QAASxC,KAAKC,aACzCgC,EAAA,aAAAE,IAAA,2CAAWhB,KAAK,QAAQsB,MAAM,aAAaC,KAAK,OAChDT,EAAA,kBAAAE,IAAA,2CAAgBM,MAAM,aAAaC,KAAK,QAAQC,YAAY,KACzD3C,KAAK4C,qB","ignoreList":[]}