@rededor/cura 0.5.3 → 0.5.4

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

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