@rededor/cura 2.0.0-alpha.10 → 2.0.0-alpha.11

package/dist/cura/p-7fd143aa.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as a,h as t,H as r}from"./p-PPMZr_VE.js";import{f as i}from"./p-Dot54hbB.js";import"./p-BPKQjAwN.js";const s='@charset "UTF-8";:host{display:block;box-sizing:border-box;min-width:0}.container{display:flex;align-items:center;flex-direction:row-reverse;justify-content:start;gap:var(--gap);text-align:left;cursor:pointer}.position{flex-direction:row}.info{overflow:hidden}.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=class{constructor(t){e(this,t);this.onchange=a(this,"onchange");if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.checked=false;this.disabled=false;this.label="";this.ontabindex=0;this.position="left";this.size="medium";this.background="light";this.color="accent";this.overflowLabel="none";this.overflowHelper="none";this.styles={};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})}}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:"39e910a3c68672eb23a123529a77f8ee0d1093aa",role:"switch","aria-checked":this.checked,"aria-disabled":this.disabled},t("div",{key:"649b89d2709b8afa30cfc1ba549d45ac3c9c04a1",class:this.getClasses(),style:this.styles,onClick:this.toggleSwitch},t("div",{key:"4b1c7d704f0db997a4738abbd248c3a0bbcfdfcd",class:"info"},t("cura-label",{key:"b225b06ed00144348d08bb95c8a5bf2f1f48e610",textOverflow:this.overflowLabel,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:"22f5e79e0b2e98867663a9a60436d11bc2ce236e",textOverflow:this.overflowHelper,style:{textAlign:this.position==="right"?"right":"left"},color:this.assignColor("primary-lighter","neutral-dark"),size:"xsmall",class:"message"},t("slot",{key:"d9ed12c05133baeec10aa149f26d6dc01b2e3cd8"}))),t("div",{key:"d51364956de2b53735285109dd457cbff9500eb7",class:"control"},t("div",{key:"5f1ce68eba5430eac69d670a72c4abd48a79a90d",class:`track ${this.size.toLowerCase()}`},t("div",{key:"5077af32559bc7eb183745544844d01a6078ee1d",class:`thumb ${this.size.toLowerCase()}`,tabIndex:this.ontabindex})))))}static get formAssociated(){return true}static get watchers(){return{size:["sizeHandler"],color:["setColors"],background:["setColors"]}}};l.style=s;export{l as cura_switch};
-//# sourceMappingURL=p-7fd143aa.entry.js.map

package/dist/cura/p-7fd143aa.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaSwitchCss","CuraSwitch","constructor","hostRef","this","checked","disabled","label","ontabindex","position","size","background","color","overflowLabel","overflowHelper","styles","sizes","large","medium","small","isDarkbackground","toggleSwitch","internals","setFormValue","toString","onchange","emit","sizeHandler","Object","assign","formsSizes","gap","setColors","colors","name","opacity","forEach","window","CuraAPI","theme","getColor","connectedCallback","formAssociatedCallback","form","ariaLabel","formStateRestoreCallback","state","value","formResetCallback","setValidity","formDisabledCallback","assignColor","colorDark","colorLight","getClasses","classes","render","h","Host","key","role","class","style","onClick","textOverflow","textAlign","weight","lineHeight","toLowerCase","tabIndex"],"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@import '../../../scss/mixins/text.scss';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n\n  min-width: 0;\n}\n\n.container {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  justify-content: start;\n  gap: var(--gap);\n  text-align: left;\n\n  cursor: pointer;\n}\n\n.position {\n  flex-direction: row;\n}\n\n.info {\n  overflow: hidden;\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.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/* 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/* 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}\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  /**\n   * Controls how the label text should handle overflow.\n   * - `'none'`: No overflow handling; the label displays normally.\n   * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n   * - `string`: Custom overflow handling mode.\n   *\n   * @default 'none'\n   */\n  @Prop({ reflect: true }) overflowLabel: 'none' | 'single' | string = 'none';\n\n  /**\n   * Controls how the helper text should handle overflow.\n   * - `'none'`: No overflow handling; the label displays normally.\n   * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n   * - `string`: Custom overflow handling mode.\n   *\n   * @default 'none'\n   */\n  @Prop({ reflect: true }) overflowHelper: 'none' | 'single' | string = 'none';\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\" aria-checked={this.checked} aria-disabled={this.disabled}>\n        <div class={this.getClasses()} style={this.styles} onClick={this.toggleSwitch}>\n          <div class=\"info\">\n            <cura-label\n              textOverflow={this.overflowLabel}\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              textOverflow={this.overflowHelper}\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 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-8c83f259.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as r,H as e,a}from"./p-PPMZr_VE.js";import"./p-BPKQjAwN.js";const t=":host{display:block}:host .progress-bar{position:absolute;left:0;bottom:0;width:100%;height:4px;background-color:var(--neutral-base)}:host .progress-bar span{position:absolute;left:0;bottom:0;width:var(--bar-width);height:100%;border-radius:0 2px 2px 0;background-color:var(--color-base);transition:width 0.2s linear}";const o=class{constructor(r){s(this,r);this.color="primary-base";this.progress=0;this.styles={}}handleChangeColor(){this.setColor()}handleProgress(){this.setProgress()}connectedCallback(){this.setColor();this.setProgress()}render(){return r(e,{key:"397073d5ad18c49fedee1832e89c15108b693e01",role:"progressbar","aria-valuenow":this.progress,"aria-valuemin":0,"aria-valuemax":100},r("div",{key:"e3c46bc440ee9c54b308679fa8358df4f10c6a9c",id:"progress-bar",class:"progress-bar",style:this.styles},r("span",{key:"1635e7d72dd6b34455a1891f6a1907f603c91cb7",class:"progress-bar-fill"})))}setColor(){this.styles=Object.assign(Object.assign({},this.styles),{"--neutral-base":window.CuraAPI.theme.colors.getColor(`neutral-base`,.2),"--color-base":window.CuraAPI.theme.colors.getColor(this.color)})}setProgress(){this.styles=Object.assign(Object.assign({},this.styles),{"--bar-width":`${this.progress}%`})}get host(){return a(this)}static get watchers(){return{color:["handleChangeColor"],progress:["handleProgress"]}}};o.style=t;export{o as cura_loader_bar};
-//# sourceMappingURL=p-8c83f259.entry.js.map

package/dist/cura/p-8c83f259.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaLoaderBarCss","CuraLoaderBar","constructor","hostRef","this","color","progress","styles","handleChangeColor","setColor","handleProgress","setProgress","connectedCallback","render","h","Host","key","role","id","class","style","Object","assign","window","CuraAPI","theme","colors","getColor"],"sources":["src/components/loaders/cura-loader-bar/cura-loader-bar.scss?tag=cura-loader-bar&encapsulation=shadow","src/components/loaders/cura-loader-bar/cura-loader-bar.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  .progress-bar {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 4px;\n    background-color: var(--neutral-base);\n\n    span {\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      width: var(--bar-width);\n      height: 100%;\n      border-radius: 0 2px 2px 0;\n      background-color: var(--color-base);\n      transition: width 0.2s linear;\n    }\n  }\n}\n","import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-loader-bar',\n  styleUrl: 'cura-loader-bar.scss',\n  shadow: true,\n})\nexport class CuraLoaderBar {\n  @Element() host: HTMLElement;\n\n  @Prop() color = 'primary-base';\n  @Prop() progress = 0;\n\n  @State() styles = {};\n\n  @Watch('color')\n  handleChangeColor() {\n    this.setColor();\n  }\n\n  @Watch('progress')\n  handleProgress() {\n    this.setProgress();\n  }\n\n  connectedCallback() {\n    this.setColor();\n    this.setProgress();\n  }\n\n  render() {\n    return (\n      <Host role=\"progressbar\"\n        aria-valuenow={this.progress}\n        aria-valuemin={0}\n        aria-valuemax={100}>\n        <div id=\"progress-bar\" class=\"progress-bar\" style={this.styles}>\n          <span class=\"progress-bar-fill\"></span>\n        </div>\n      </Host>\n    );\n  }\n\n  setColor() {\n    this.styles = {\n      ...this.styles,\n      '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2),\n      '--color-base': window.CuraAPI.theme.colors.getColor(this.color),\n    }\n  }\n\n  setProgress() {\n    this.styles = {\n      ...this.styles,\n      '--bar-width': `${this.progress}%`,\n    }\n  }\n}\n"],"mappings":"4EAAA,MAAMA,EAAmB,gU,MCOZC,EAAa,MAL1B,WAAAC,CAAAC,G,UAQUC,KAAKC,MAAG,eACRD,KAAQE,SAAG,EAEVF,KAAMG,OAAG,EA4CnB,CAzCC,iBAAAC,GACEJ,KAAKK,U,CAIP,cAAAC,GACEN,KAAKO,a,CAGP,iBAAAC,GACER,KAAKK,WACLL,KAAKO,a,CAGP,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,cACM,gBAAAb,KAAKE,SACL,kBAAC,gBACD,KACfQ,EAAA,OAAAE,IAAA,2CAAKE,GAAG,eAAeC,MAAM,eAAeC,MAAOhB,KAAKG,QACtDO,EAAA,QAAAE,IAAA,2CAAMG,MAAM,uB,CAMpB,QAAAV,GACEL,KAAKG,OAAMc,OAAAC,OAAAD,OAAAC,OAAA,GACNlB,KAAKG,QAAM,CACd,iBAAkBgB,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,eAAgB,IACvE,eAAgBJ,OAAOC,QAAQC,MAAMC,OAAOC,SAASvB,KAAKC,Q,CAI9D,WAAAM,GACEP,KAAKG,OACAc,OAAAC,OAAAD,OAAAC,OAAA,GAAAlB,KAAKG,QAAM,CACd,cAAe,GAAGH,KAAKE,a","ignoreList":[]}