@rededor/cura 1.5.0-alpha.1 → 1.5.0-alpha.2

package/dist/cura/p-9d7c6e96.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["curaDropdownSearchCss","CuraDropdownSearchStyle0","CuraDropdownSearch","this","overlayElement","adjustInputPosition","async","isKeyboardOpen","window","innerHeight","screenDefaultHeight","dropdown","_a","host","shadowRoot","querySelector","style","bottom","_b","screen","height","scroll","top","left","behavior","handleSlotChange","options","Array","from","querySelectorAll","addClickListenersToOptions","updateHoveredIndex","handleInputChange","event","input","target","value","onValueChange","handleKeyDown","key","preventDefault","moveHighlight","hoveredIndex","handleOnBlur","onSelectedOption","handleResize","isMobile","innerWidth","isDropdownOpen","showOverlay","resetDropdownStyles","removeOverlay","setUp","connectedCallback","weights","CuraAPI","theme","fonts","getWeights","styles","colors","getColor","breakpoints","get","getSize","getFamily","medium","newValue","updateSelectedOption","valueChanged","emit","componentWillLoad","componentDidRender","getDropdownSearchListHeight","componentDidLoad","addEventListener","visualViewport","disconnectedCallback","removeEventListener","document","createElement","className","position","width","zIndex","backgroundColor","body","appendChild","originalOverflow","overflow","parentNode","removeChild","forEach","option","index","selectedOptionIndex","findIndex","getAttribute","updateOptionAttribute","scrollHoveredOptionIntoView","selectedOption","selectable","selectedValue","textContent","isOnBlurInput","direction","visibleOptions","newIndex","length","attribute","indexToUpdate","currentValue","container","hoveredOption","optionRect","getBoundingClientRect","containerRect","scrollTop","setTimeout","getClasses","disabled","status","getDropdownClasses","visible","hostCSSProperties","dropdownMaxHeight","handleOnFocus","dropdownInputSearchElement","setProperty","offsetHeight","handleGoBack","removeProperty","render","isMobileDropdown","h","Host","class","fontColor","onClick","iconName","size","iconOnly","color","label","part","mode","required","hideErrorIcon","e","onInput","onFocus","onBlur","placeholder","onKeyDown","name","id","onSlotchange"],"sources":["src/components/forms/cura-dropdown-search/cura-dropdown-search.scss?tag=cura-dropdown-search&encapsulation=shadow","src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"sourcesContent":["@import '../../../scss/mixins/shadows.scss';\n\n:host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.dropdown {\n  display: flex;\n  position: relative;\n\n  flex-direction: column;\n  width: inherit;\n\n  .dropdown-search-list {\n    z-index: 1000;\n  }\n\n  &-input-search {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n\n\n    &.dropdown-open {\n      ::part(cura-input-field) {\n        border-radius: 4px 4px 0px 0px;\n      }\n      ::slotted([slot='helperText']) {\n        display: none;\n      }\n\n      cura-input-text {\n        ::slotted([slot='helperText']) {\n          display: none;\n        }\n      }\n    }\n  }\n\n  &-search-list {\n    position: absolute;\n    top:  calc(100% - 8px);\n    width: 100%;\n    max-height: var(--dropdown-max-height);\n    padding: 12px 12px;\n    margin: 0;\n    box-sizing: border-box;\n    @include shadow-level3(--neutral-black-shadow);\n    border-radius: 0px 0px 4px 4px;\n    border-top: 0 var(--neutral-light);\n    border-right: 2px solid var(--neutral-light);\n    border-bottom: 2px solid var(--neutral-light);\n    border-left: 2px solid var(--neutral-light);\n    background-color: var(--neutral-purewhite);\n    list-style: none;\n    overflow-y: auto;\n    display: none;\n\n    &.visible {\n      display: block;\n    }\n\n    &-input-search {\n      width: inherit;\n\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 16px 8px;\n      border-bottom: 2px solid var(--info-base);\n      background-color: var(--neutral-purewhite);\n\n      cura-input-text {\n        width: inherit;\n      }\n\n      &.error {\n        background-color: var(--error-lighter);\n        border-bottom: 2px solid var(--error-dark);\n      }\n    }\n  }\n\n  &-mobile {\n    position: fixed;\n    top: 1%;\n    left: 0;\n    right: 0;\n    width: 100%;\n    z-index: 10000;\n    \n    .dropdown-input-search {\n      display: flex;\n      background-color: var(--neutral-purewhite);\n      border-bottom: 2px solid var(--info-base);\n      z-index: 10000;\n      cura-button-transparent {\n        display: flex;\n        margin-right: 4px;\n      }\n      cura-input-text {\n        padding: 12px 8px 12px 0px;\n      }\n      &.error {\n        background-color: var(--error-lighter);\n        border-bottom: 2px solid var(--error-dark);\n      }\n      &.dropdown-open {\n        display: flex;\n\n        ::slotted([slot='helperText']) {\n          display: block;\n        }\n      }\n    }\n\n    .dropdown-search-list {\n      position: static;\n      width: 100%;\n      height: calc(100vh - var(--dynamic-input-search-height, 0));\n      max-height: none;\n      padding: 12px 12px;\n      margin: 0;\n      box-sizing: border-box;\n      box-shadow: none;\n      border: none;\n      background-color: var(--neutral-purewhite);\n      list-style: none;\n      overflow-y: auto;\n      z-index: 10000;\n    }\n  }\n}\n","import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search',\n  styleUrl: 'cura-dropdown-search.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearch {\n  /**\n   * Size of the dropdown search mode default: 'small', 'medium', or 'large' (default: 'large')\n   */\n  @Prop({ reflect: true, mutable: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n   * Define the status of the dropdown search.\n   */\n  @Prop({ reflect: true }) status: 'error' | 'default' = 'default';\n\n  /**\n   * Whether the select component is disabled.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the dropdown search component.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Indicates if the dropdown search is required.\n   */\n  @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n  /**\n   * Indicates if the dropdown search is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n  /**\n   * The value of the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * The placeholder text for the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n  /**\n   * The label for the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) label: string = '';\n\n  /**\n   * Custom icon name. Default: search.\n   */\n  @Prop({ reflect: true }) iconName = 'search';\n\n  /**\n   * CSS max-height property for dropdown item.\n   * Default to 630px\n   */\n  @Prop({ reflect: true }) dropdownMaxHeight = '630px';\n\n  /**\n   * Reference to the host element.\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Indicates if the overlay is visible.\n   */\n  @State() overlayVisible: boolean = false;\n\n  /**\n   * Event emitted when the value changes.\n   */\n  @Event() valueChanged: EventEmitter<string>;\n\n  /**\n   * Indicates if the dropdown is open.\n   */\n  @State() isDropdownOpen: boolean = false;\n\n  /**\n * Styles for the component.\n\n */\n  @State() styles = {};\n\n  /**\n   * Indicates if the component is being viewed on a mobile device.\n   */\n  @State() isMobile: boolean = window.innerWidth < 768;\n\n  /**\n   * The mode of the dropdown search.\n   */\n  @State() mode: 'default' | 'transparent' = 'default';\n\n  @Event() onselect: EventEmitter;\n\n  @State() inputTextRef!: HTMLCuraInputTextElement;\n\n  /**\n   * Indicates if the input is on blur.\n   */\n  @State() isOnBlurInput: boolean = true;\n\n  /**\n   * The index of the currently hovered option.\n   */\n  @State() hoveredIndex: number = -1;\n\n  /**\n   * The options for the dropdown search.\n   * @type {HTMLCuraDropdownSearchOptionElement[]}\n   */\n\n  weights;\n\n  private overlayElement: HTMLDivElement | null = null;\n\n  @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n  /**\n   *\n   * Stores the original value of the 'overflow' style of the body\n   * before blocking the scroll.\n   */\n  @State() originalOverflow: string = '';\n  @State() screenDefaultHeight = 0;\n\n  private adjustInputPosition = async () => {\n    // const tick = await Promise.resolve().then();\n    const isKeyboardOpen = window?.innerHeight < this.screenDefaultHeight;\n      const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLElement;\n      if (dropdown) {\n        // dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';\n        dropdown.style.bottom = isKeyboardOpen ? `${window?.screen?.height - window?.innerHeight}px` : '0';\n        window.scroll({ top: 0, left: 0, behavior: 'smooth' });\n      }\n  };\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n    this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n    this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n    this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n    this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n    this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n  }\n\n  @Watch('value')\n  onValueChange(newValue: string) {\n    this.updateSelectedOption(newValue);\n    this.valueChanged.emit(newValue);\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption(this.value);\n  }\n\n  componentDidRender() {\n    if (this.isDropdownOpen && this.isMobile) {\n      this.showOverlay();\n      this.getDropdownSearchListHeight();\n    } else {\n      this.removeOverlay();\n    }\n  }\n  componentDidLoad() {\n    this.screenDefaultHeight = window?.innerHeight;\n    window?.addEventListener('resize', this.setUp);\n    window?.visualViewport?.addEventListener('resize', this.adjustInputPosition);\n  }\n\n  disconnectedCallback() {\n    window?.removeEventListener('resize', this.setUp);\n    window?.visualViewport?.removeEventListener('resize', this.adjustInputPosition);\n  }\n\n  private showOverlay() {\n    if (!this.overlayElement) {\n      this.overlayElement = document.createElement('div');\n      this.overlayElement.className = 'dropdown-overlay';\n      this.overlayElement.style.position = 'fixed';\n      this.overlayElement.style.top = '0';\n      this.overlayElement.style.left = '0';\n      this.overlayElement.style.width = '100%';\n      this.overlayElement.style.height = '100%';\n      this.overlayElement.style.zIndex = '9999';\n      this.overlayElement.style.backgroundColor = 'white';\n      document.body.appendChild(this.overlayElement);\n\n      this.originalOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n    }\n  }\n\n  private removeOverlay() {\n    if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n      document.body.removeChild(this.overlayElement);\n      this.overlayElement = null;\n      document.body.style.overflow = this.originalOverflow;\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n    this.addClickListenersToOptions();\n    this.updateHoveredIndex();\n  };\n\n  private addClickListenersToOptions() {\n    this.options.forEach((option, index) => {\n      option?.addEventListener('optionSelected', () => this.onSelectedOption(index));\n    });\n  }\n\n  private updateSelectedOption(value: string) {\n    const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n    this.hoveredIndex = selectedOptionIndex;\n    this.updateOptionAttribute('hovered', this.hoveredIndex);\n    this.updateOptionAttribute('selected', this.hoveredIndex);\n\n    this.scrollHoveredOptionIntoView();\n    this.adjustInputPosition();\n  }\n\n  private handleInputChange = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.onValueChange(this.value);\n    // this.valueChanged.emit(this.value);\n  };\n\n  private onSelectedOption(index: number) {\n    const selectedOption = this.options[index];\n    if (selectedOption.selectable) {\n      const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;\n\n      this.value = selectedValue || '';\n      this.updateSelectedOption(this.value);\n\n      this.isDropdownOpen = false;\n      this.isOnBlurInput = true;\n      this.resetDropdownStyles();\n      this.removeOverlay();\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      this.moveHighlight(1);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      this.moveHighlight(-1);\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      if (this.hoveredIndex > -1) {\n        this.handleOnBlur();\n        this.onSelectedOption(this.hoveredIndex);\n      }\n    }\n  };\n\n  private moveHighlight(direction: number) {\n    const visibleOptions = this.options;\n    const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n    this.hoveredIndex = newIndex;\n    this.updateOptionAttribute('hovered', this.hoveredIndex);\n    this.scrollHoveredOptionIntoView();\n  }\n\n  private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n    this.options.forEach((option, index) => {\n      (option as any)[attribute] = index === indexToUpdate;\n    });\n  }\n\n  private updateHoveredIndex() {\n    const visibleOptions = this.options;\n    const currentValue = this.value;\n    this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n  }\n\n  private scrollHoveredOptionIntoView() {\n    const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n    const hoveredOption = this.options[this.hoveredIndex];\n\n    if (container && hoveredOption) {\n      const optionRect = hoveredOption.getBoundingClientRect();\n      const containerRect = container.getBoundingClientRect();\n\n      if (optionRect.bottom > containerRect.bottom) {\n        container.scrollTop += optionRect.bottom - containerRect.bottom;\n      }\n\n      if (optionRect.top < containerRect.top) {\n        container.scrollTop -= containerRect.top - optionRect.top;\n      }\n    }\n  }\n\n  private handleResize = () => {\n    this.isMobile = window.innerWidth < 768;\n    if (this.isDropdownOpen) {\n      if (this.isMobile) {\n        this.showOverlay();\n      } else {\n        this.resetDropdownStyles();\n        this.removeOverlay();\n      }\n    }\n  };\n\n  handleOnBlur() {\n    if (this.isOnBlurInput === true) {\n      setTimeout(() => {\n        this.isDropdownOpen = false;\n        this.resetDropdownStyles();\n        this.removeOverlay();\n      }, 200);\n    }\n  }\n  getClasses() {\n    return {\n      'dropdown-input-search': true,\n      'dropdown-open': this.isDropdownOpen,\n      'disabled': this.disabled,\n      [this.status]: true,\n    };\n  }\n\n  getDropdownClasses() {\n    return {\n      'dropdown-search-list': true,\n      'visible': this.options.length && this.isDropdownOpen ? true : false,\n    };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--dropdown-max-height': this.dropdownMaxHeight,\n    };\n  }\n\n  handleOnFocus() {\n    this.isDropdownOpen = true;\n  }\n\n  getDropdownSearchListHeight() {\n    const dropdownInputSearchElement = this.host.shadowRoot?.querySelector('.dropdown-input-search') as HTMLInputElement;\n    if (dropdownInputSearchElement) {\n      this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);\n    }\n  }\n\n  handleGoBack() {\n    this.resetDropdownStyles();\n    this.isMobile = false;\n  }\n\n  resetDropdownStyles() {\n    const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n    if (dropdown && dropdown.style.position === 'fixed') {\n      dropdown.style.position = 'relative';\n      dropdown.style.removeProperty('bottom');\n    }\n  }\n\n  setUp = () => {\n    this.handleResize()\n    this.adjustInputPosition();\n  }\n\n  render() {\n    const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n    return (\n      <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n        <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n          <div class={this.getClasses()}>\n          {this.isMobile && this.isDropdownOpen && (\n              <cura-button-transparent fontColor=\"dark\" onClick={() => this.handleGoBack()} iconName=\"arrowLeft\" size=\"medium\" iconOnly color=\"primary\"></cura-button-transparent>\n            )}\n            <cura-input-text\n              disabled={this.disabled}\n              label={this.label}\n              part=\"cura-input-field\"\n              mode={isMobileDropdown ? 'transparent' : 'default'}\n              required={this.required}\n              hideErrorIcon={this.status === 'error'}\n              iconName={this.iconName || 'search'}\n              value={this.value}\n              status={this.status}\n              onValueChange={e => this.onValueChange(e.target.value as string)}\n              onInput={e => this.handleInputChange(e)}\n              onFocus={() => this.handleOnFocus()}\n              onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n              onBlur={() => {\n                this.handleOnBlur();\n              }}\n              placeholder={this.placeholder}\n              size={this.size}\n              onKeyDown={this.handleKeyDown}\n            >\n              <slot name=\"helperText\"></slot>\n            </cura-input-text>\n          </div>\n          <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n            <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as a,c as e,h as t,H as s}from"./p-fd5ed6b0.js";const i=":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(--base-spacing) * 3px);max-width:600px;min-width:200px;padding:0px calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 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(--base-spacing) * 5px)}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:calc(var(--base-spacing) * 4px);background:none;border:none;cursor:pointer}.close.mobile{display:none}.close.desktop{display:flex}@media (max-width: 768px){.wrapper{position:fixed;bottom:0px;width:80%;padding-top:calc(var(--base-spacing) * 4px);padding-bottom:0px;border-radius:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0px 0px;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:calc(var(--base-spacing) * 4px);padding:calc(var(--base-spacing) * 4px) 0px;justify-content:center;width:100%}.close.mobile{display:flex;gap:calc(var(--base-spacing) * 2px)}.close.desktop{display:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}";const o=i;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(s,{key:"50f4146aed5392ae16803fb060d4921a5e8a3271",role:"dialog","aria-modal":"true",style:{"--zIndex":this.zindex}},t("div",{key:"149e99a4b8b479515ed3d67c5c8aea08d4d96d1c",class:this.open?"modal container open":"modal container",style:this.styles},t("div",{key:"f32f7f7e16475c51babf95e1ca5f4fea449c1bb0",class:this.open?"modal backdrop open":"modal backdrop",onClick:this.handleClose}),t("div",{key:"183f7ab8f2cee8106795f6104c38a2c93272387f",class:"wrapper"},t("button",{key:"28778c8120c92dfcae0443dccd21f55a204bd82e",class:"close desktop",onClick:this.handleClose},t("cura-icon",{key:"a847de5c1314ea1460673870334f3f98e98f1cf9",name:"close",color:"error-dark",size:"small"})),t("slot",{key:"e08b556b7232425c2b83a21dac75d30fb4361a83"}),t("button",{key:"e736a95f878ff5a2ad6897d9140fd74b26939445",class:"close mobile",onClick:this.handleClose},t("cura-icon",{key:"9eaeaca6f4ea9d3cde5fd44e108de389c727f991",name:"close",color:"error-dark",size:"16"}),t("cura-paragraph",{key:"2476b85e5dd7d6092d3d1d1714ee4a79b73b12d0",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=o;export{r as cura_modal};
+//# sourceMappingURL=p-a4a1f6c6.entry.js.map

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

@@ -0,0 +1 @@
+{"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-none} #{$spacing-xxs} #{$spacing-xxs} #{$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  }\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\" aria-modal=\"true\" 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=\"small\"></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,khEACrB,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,aAAY,OAAOC,MAAO,CAAE,WAAYrC,KAAKsC,SAC9DL,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,WAElDT,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":[]}

package/dist/cura/{p-cfbe2bce.entry.js → p-bd99ef4c.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,H as s,g as r}from"./p-fd5ed6b0.js";const i=":host{display:block;box-sizing:border-box;width:100%}cura-heading{--margin-block:0 !important}.container{display:flex}.compact{display:flex;padding:0px;justify-content:space-between;align-items:center}.compact .heading{text-align:right}.stepper-list{gap:4px;display:flex;flex-shrink:0;align-items:center;padding:0;flex:1;width:100%;justify-content:space-between}.step{display:flex;align-items:center;flex-direction:row;flex:1;gap:4px}.step .wrapper{flex:1;position:relative}.step .divider{background-color:var(--neutral-light);height:2px;flex:1;transition:all 1s}.step .animation{position:absolute;top:0;left:0;right:0;width:var(--progress-width)}.step .done{background-color:var(--success-light)}.step .stop{background-color:var(--error-light)}.step .active{background-color:var(--info-light)}.last{flex:0}";const o=i;const a=class{constructor(e){t(this,e);this.activeStepIndex=undefined;this.errorInCurrentStep=false;this.displayHeading=false;this.variant="default";this.steps=[];this.styles={};this.stepList=[]}connectedCallback(){this.initializeSteps();const{fonts:t,colors:e,spacing:s}=window.CuraAPI.theme;const r=t.getWeights();this.styles=this.generateStyles(e,t,s,r)}generateStyles(t,e,s,r){return{"--base-spacing":s.getSpacing(),"--neutral-purewhite":t.getColor("neutral-purewhite"),"--neutral-lighter":t.getColor("neutral-lighter"),"--neutral-base":t.getColor("neutral-base"),"--neutral-light":t.getColor("neutral-light"),"--success-light":t.getColor("success-light"),"--info-light":t.getColor("info-light"),"--error-light":t.getColor("error-light"),"--font-size":e.getSize(),"--font-color":e.getColor(),"--font-family":e.getFamily(),"--font-weight-regular":r.regular}}initializeSteps(){if(typeof this.steps==="string"){this.stepList=JSON.parse(this.steps||"[]")}else{this.stepList=this.steps}}getStepStatus(t){if(this.activeStepIndex===t&&this.errorInCurrentStep)return"stop";if(this.activeStepIndex===t&&this.stepList.length!==t)return"active";if(this.activeStepIndex>=t)return"done";return"default"}getProgressStyles(){const t={default:{progressColor:"var(--info-light)",activeStepTextColor:"info-darker",nextStepTextColor:"info-dark"},firstStep:{progressColor:"var(--info-light)",activeStepTextColor:"neutral-dark",nextStepTextColor:"neutral-medium"},completed:{progressColor:"var(--success-light)",activeStepTextColor:"success-darker",nextStepTextColor:"success-dark"},error:{progressColor:"var(--error-light)",activeStepTextColor:"error-darker",nextStepTextColor:"error-dark"}};if(this.errorInCurrentStep){return t.error}if(this.activeStepIndex===0){return t.firstStep}if(this.activeStepIndex===this.stepList.length){return t.completed}return t.default}renderCompactStepper(){var t;const s=this.activeStepIndex===0?this.stepList[this.activeStepIndex].title:this.stepList[this.activeStepIndex-1].title;const r=this.activeStepIndex===0?this.stepList[this.activeStepIndex+1].title:(t=this.stepList[this.activeStepIndex])===null||t===void 0?void 0:t.title;const i=this.activeStepIndex===this.stepList.length;const o=!(i||this.errorInCurrentStep);const{progressColor:a,activeStepTextColor:l,nextStepTextColor:n}=this.getProgressStyles();const c=this.activeStepIndex*100/this.stepList.length;return e("div",{class:"container compact",style:this.styles},e("cura-progress-bar",{progress:c,progressColor:a,active:this.activeStepIndex!==0},!o?e("cura-icon",{name:this.errorInCurrentStep?"alertCircle":"checkCircle",color:this.errorInCurrentStep?"error-dark":"success-dark",size:"16"}):e("cura-heading",{color:"neutral-dark",size:"xsmall"},this.activeStepIndex,"/",this.stepList.length)),this.displayHeading&&e("div",{class:"heading"},e("cura-heading",{size:"small",weight:"bold",color:l},s),!i&&e("cura-heading",{size:"xsmall",weight:"regular",color:n},"Próximo: ",r)))}renderStep(t,s){const r=this.getStepStatus(s+1);const i=s===this.stepList.length-1;const o=r!=="default"?"100%":"0";return e("div",{class:`step ${i?"last":""}`,key:t.title},e("cura-stepper-item",{heading:t.title,label:t.label,displayHeading:this.displayHeading,status:r}),s<this.stepList.length-1&&e("div",{class:"wrapper"},e("div",{class:"divider"}),e("div",{class:`divider ${r} animation`,style:{"--progress-width":o}})))}renderStepper(){return e("div",{class:"container",style:this.styles},e("div",{class:"stepper-list"},this.stepList.map(((t,e)=>this.renderStep(t,e)))))}render(){return e(s,{key:"a3c23a43dc82cba74b777a7e28ae7de1632ec95d"},this.variant==="default"?this.renderStepper():this.renderCompactStepper())}get host(){return r(this)}};a.style=o;export{a as cura_stepper};
-//# sourceMappingURL=p-cfbe2bce.entry.js.map
+import{r as t,h as e,H as s,g as r}from"./p-fd5ed6b0.js";const i=":host{display:block;box-sizing:border-box;width:100%}cura-heading{--margin-block:0 !important}.container{display:flex}.compact{display:flex;padding:0px;justify-content:space-between;align-items:center}.compact .heading{text-align:right}.stepper-list{gap:4px;display:flex;flex-shrink:0;align-items:center;padding:0;flex:1;width:100%;justify-content:space-between}.step{display:flex;align-items:center;flex-direction:row;flex:1;gap:4px}.step .wrapper{flex:1;position:relative}.step .divider{background-color:var(--neutral-light);height:2px;flex:1;transition:all 1s}.step .animation{position:absolute;top:0;left:0;right:0;width:var(--progress-width)}.step .done{background-color:var(--success-light)}.step .stop{background-color:var(--error-light)}.step .active{background-color:var(--info-light)}.last{flex:0}";const o=i;const a=class{constructor(e){t(this,e);this.activeStepIndex=undefined;this.errorInCurrentStep=false;this.displayHeading=false;this.variant="default";this.steps=[];this.styles={};this.stepList=[]}connectedCallback(){this.initializeSteps();const{fonts:t,colors:e,spacing:s}=window.CuraAPI.theme;const r=t.getWeights();this.styles=this.generateStyles(e,t,s,r)}generateStyles(t,e,s,r){return{"--base-spacing":s.getSpacing(),"--neutral-purewhite":t.getColor("neutral-purewhite"),"--neutral-lighter":t.getColor("neutral-lighter"),"--neutral-base":t.getColor("neutral-base"),"--neutral-light":t.getColor("neutral-light"),"--success-light":t.getColor("success-light"),"--info-light":t.getColor("info-light"),"--error-light":t.getColor("error-light"),"--font-size":e.getSize(),"--font-color":e.getColor(),"--font-family":e.getFamily(),"--font-weight-regular":r.regular}}initializeSteps(){if(typeof this.steps==="string"){this.stepList=JSON.parse(this.steps||"[]")}else{this.stepList=this.steps}}getStepStatus(t){if(this.activeStepIndex===t&&this.errorInCurrentStep)return"stop";if(this.activeStepIndex===t&&this.stepList.length!==t)return"active";if(this.activeStepIndex>=t)return"done";return"default"}getProgressStyles(){const t={default:{progressColor:"var(--info-light)",activeStepTextColor:"info-darker",nextStepTextColor:"info-dark"},firstStep:{progressColor:"var(--info-light)",activeStepTextColor:"neutral-dark",nextStepTextColor:"neutral-medium"},completed:{progressColor:"var(--success-light)",activeStepTextColor:"success-darker",nextStepTextColor:"success-dark"},error:{progressColor:"var(--error-light)",activeStepTextColor:"error-darker",nextStepTextColor:"error-dark"}};if(this.errorInCurrentStep){return t.error}if(this.activeStepIndex===0){return t.firstStep}if(this.activeStepIndex===this.stepList.length){return t.completed}return t.default}renderCompactStepper(){var t;const s=this.activeStepIndex===0?this.stepList[this.activeStepIndex].title:this.stepList[this.activeStepIndex-1].title;const r=this.activeStepIndex===0?this.stepList[this.activeStepIndex+1].title:(t=this.stepList[this.activeStepIndex])===null||t===void 0?void 0:t.title;const i=this.activeStepIndex===this.stepList.length;const o=!(i||this.errorInCurrentStep);const{progressColor:a,activeStepTextColor:l,nextStepTextColor:n}=this.getProgressStyles();const c=this.activeStepIndex*100/this.stepList.length;return e("div",{class:"container compact",style:this.styles},e("cura-progress-bar",{progress:c,progressColor:a,active:this.activeStepIndex!==0},!o?e("cura-icon",{name:this.errorInCurrentStep?"alertCircle":"checkCircle",color:this.errorInCurrentStep?"error-dark":"success-dark",size:"16"}):e("cura-heading",{color:"neutral-dark",size:"xsmall"},this.activeStepIndex,"/",this.stepList.length)),this.displayHeading&&e("div",{class:"heading"},e("cura-heading",{size:"small",weight:"bold",color:l},s),!i&&e("cura-heading",{size:"xsmall",weight:"regular",color:n},"Próximo: ",r)))}renderStep(t,s){const r=this.getStepStatus(s+1);const i=s===this.stepList.length-1;const o=r!=="default"?"100%":"0";return e("div",{class:`step ${i?"last":""}`,key:t.title},e("cura-stepper-item",{heading:t.title,label:t.label,displayHeading:this.displayHeading,status:r}),s<this.stepList.length-1&&e("div",{class:"wrapper"},e("div",{class:"divider"}),e("div",{class:`divider ${r} animation`,style:{"--progress-width":o}})))}renderStepper(){return e("div",{class:"container",style:this.styles},e("div",{class:"stepper-list"},this.stepList.map(((t,e)=>this.renderStep(t,e)))))}render(){return e(s,{key:"a6562de52fefff80eb2d310555ce56956cce64d9"},this.variant==="default"?this.renderStepper():this.renderCompactStepper())}get host(){return r(this)}};a.style=o;export{a as cura_stepper};
+//# sourceMappingURL=p-bd99ef4c.entry.js.map

package/dist/cura/{p-cfbe2bce.entry.js.map → p-bd99ef4c.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["curaStepperCss","CuraStepperStyle0","CuraStepper","connectedCallback","this","initializeSteps","fonts","colors","spacing","window","CuraAPI","theme","weights","getWeights","styles","generateStyles","getSpacing","getColor","getSize","getFamily","regular","steps","stepList","JSON","parse","getStepStatus","step","activeStepIndex","errorInCurrentStep","length","getProgressStyles","progressStyles","default","progressColor","activeStepTextColor","nextStepTextColor","firstStep","completed","error","renderCompactStepper","title","subtitle","_a","inProgress","progress","h","class","style","active","name","color","size","displayHeading","weight","renderStep","stepIndex","stepStatus","lastStep","progressWidth","key","heading","label","status","renderStepper","map","render","Host","variant"],"sources":["src/components/cura-stepper/cura-stepper.scss?tag=cura-stepper&encapsulation=shadow","src/components/cura-stepper/cura-stepper.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n}\n\ncura-heading { \n  --margin-block: 0 !important;\n}\n\n.container {\n  display: flex;\n}\n\n.compact {\n  display: flex;\n  padding: 0px;\n  justify-content: space-between;\n  align-items: center;\n\n  .heading{\n    text-align: right;\n  }\n}\n\n.stepper-list {\n  gap: 4px;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  padding: 0;\n  flex: 1;\n  width: 100%;\n  justify-content: space-between;\n}\n\n.step{\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  flex: 1;\n  gap: 4px;\n\n  .wrapper {\n    flex: 1;\n    position: relative;\n  }\n\n  .divider{\n    background-color: var(--neutral-light);\n    height: 2px;\n    flex: 1;\n\n    transition: all 1s;\n  }\n\n  .animation {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: var(--progress-width);\n  }\n\n  .done{\n    background-color: var(--success-light);\n  }\n\n  .stop{\n    background-color: var(--error-light);\n  }\n\n  .active{\n    background-color: var(--info-light);\n  }\n}\n\n.last{\n  flex: 0;\n}\n","import { Component, Host, State, h, Element, Prop } from '@stencil/core';\nimport { Step } from './stepper.type';\n\n@Component({\n  tag: 'cura-stepper',\n  styleUrl: 'cura-stepper.scss',\n  shadow: true,\n})\nexport class CuraStepper {\n  /**\n   * The current active step index\n   */\n  @Prop({ reflect: true }) activeStepIndex: number;\n\n  /**\n   * Indicates if a step has encountered an error\n   * If `true`, the current step will be marked as 'stop'\n   */\n  @Prop({ reflect: true }) errorInCurrentStep: boolean = false;\n\n  /**\n   * Whether to display the title (default: false)\n   */\n  @Prop({ reflect: true }) displayHeading: boolean = false;\n\n  /**\n   * Allows you to set the appearance of the component (default: default)\n   */\n  @Prop({ reflect: true }) variant: 'compact' | 'default' = 'default';\n\n  /**\n   * List of steps in the stepper.\n   */\n  @Prop() steps: Step[] | string = [];\n  /**\n   * Reference to the host element.\n   */\n  @Element() host: HTMLElement;\n\n  @State() styles = {};\n\n  /**\n   * Array of steps in the stepper.\n   *\n   * @type {Date[]}\n   * @default []\n   */\n  @State() stepList: Step[] = [];\n\n  connectedCallback() {\n    this.initializeSteps();\n\n    const { fonts, colors, spacing } = window.CuraAPI.theme;\n    const weights = fonts.getWeights();\n\n    this.styles = this.generateStyles(colors, fonts, spacing, weights);\n  }\n\n  generateStyles(colors, fonts, spacing, weights) {\n    return {\n      '--base-spacing': spacing.getSpacing(),\n      '--neutral-purewhite': colors.getColor('neutral-purewhite'),\n      '--neutral-lighter': colors.getColor('neutral-lighter'),\n      '--neutral-base': colors.getColor('neutral-base'),\n      '--neutral-light': colors.getColor('neutral-light'),\n      '--success-light': colors.getColor('success-light'),\n      '--info-light': colors.getColor('info-light'),\n      '--error-light': colors.getColor('error-light'),\n      '--font-size': fonts.getSize(),\n      '--font-color': fonts.getColor(),\n      '--font-family': fonts.getFamily(),\n      '--font-weight-regular': weights.regular,\n    };\n  }\n\n  initializeSteps() {\n    if (typeof this.steps === 'string') {\n      this.stepList = JSON.parse(this.steps || '[]');\n    } else {\n      this.stepList = this.steps;\n    }\n  }\n\n  getStepStatus(step: number): 'done' | 'stop' | 'active' | 'default' {\n    if (this.activeStepIndex === step && this.errorInCurrentStep) return 'stop';\n    if (this.activeStepIndex === step && this.stepList.length !== step) return 'active';\n    if (this.activeStepIndex >= step) return 'done';\n\n    return 'default';\n  }\n\n  getProgressStyles() {\n    const progressStyles = {\n      default: {\n        progressColor: 'var(--info-light)',\n        activeStepTextColor: 'info-darker',\n        nextStepTextColor: 'info-dark',\n      },\n      firstStep: {\n        progressColor: 'var(--info-light)',\n        activeStepTextColor: 'neutral-dark',\n        nextStepTextColor: 'neutral-medium',\n      },\n      completed: {\n        progressColor: 'var(--success-light)',\n        activeStepTextColor: 'success-darker',\n        nextStepTextColor: 'success-dark',\n      },\n      error: {\n        progressColor: 'var(--error-light)',\n        activeStepTextColor: 'error-darker',\n        nextStepTextColor: 'error-dark',\n      },\n    };\n\n    if (this.errorInCurrentStep) {\n      return progressStyles.error;\n    }\n\n    if (this.activeStepIndex === 0) {\n      return progressStyles.firstStep;\n    }\n\n    if (this.activeStepIndex === this.stepList.length) {\n      return progressStyles.completed;\n    }\n\n    return progressStyles.default;\n  }\n\n  renderCompactStepper() {\n    const title = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex].title : this.stepList[this.activeStepIndex - 1].title;\n    const subtitle = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex + 1].title : this.stepList[this.activeStepIndex]?.title;\n    const completed = this.activeStepIndex === this.stepList.length;\n    const inProgress = !(completed || this.errorInCurrentStep);\n    const { progressColor, activeStepTextColor, nextStepTextColor } = this.getProgressStyles();\n\n    // Representa a porcentagem de progresso (step atual / quantidade de steps;)\n    const progress = (this.activeStepIndex * 100) / this.stepList.length;\n\n    return (\n      <div class=\"container compact\" style={this.styles}>\n        <cura-progress-bar progress={progress} progressColor={progressColor} active={this.activeStepIndex !== 0}>\n          {!inProgress ? (\n            <cura-icon name={this.errorInCurrentStep ? 'alertCircle' : 'checkCircle'} color={this.errorInCurrentStep ? 'error-dark' : 'success-dark'} size=\"16\"></cura-icon>\n          ) : (\n            <cura-heading color=\"neutral-dark\" size=\"xsmall\">\n              {this.activeStepIndex}/{this.stepList.length}\n            </cura-heading>\n          )}\n        </cura-progress-bar>\n        {this.displayHeading && (\n          <div class=\"heading\">\n            <cura-heading size=\"small\" weight=\"bold\" color={activeStepTextColor}>\n              {title}\n            </cura-heading>\n            {!completed && (\n              <cura-heading size=\"xsmall\" weight=\"regular\" color={nextStepTextColor}>\n                Próximo: {subtitle}\n              </cura-heading>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  renderStep(step: Step, stepIndex: number) {\n    const stepStatus = this.getStepStatus(stepIndex + 1);\n    const lastStep = stepIndex === this.stepList.length - 1;\n    const progressWidth = stepStatus !== 'default' ? '100%' : '0';\n\n    return (\n      <div class={`step ${lastStep ? 'last' : ''}`} key={step.title}>\n        <cura-stepper-item heading={step.title} label={step.label} displayHeading={this.displayHeading} status={stepStatus} />\n        {stepIndex < this.stepList.length - 1 && (\n          <div class=\"wrapper\">\n            <div class=\"divider\" />\n            <div class={`divider ${stepStatus} animation`} style={{ '--progress-width': progressWidth }} />\n          </div>\n        )}\n      </div>\n    );\n  }\n  renderStepper() {\n    return (\n      <div class=\"container\" style={this.styles}>\n        <div class=\"stepper-list\">{this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex))}</div>\n      </div>\n    );\n  }\n\n  render() {\n    return <Host>{this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper()}</Host>;\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["curaStepperCss","CuraStepperStyle0","CuraStepper","connectedCallback","this","initializeSteps","fonts","colors","spacing","window","CuraAPI","theme","weights","getWeights","styles","generateStyles","getSpacing","getColor","getSize","getFamily","regular","steps","stepList","JSON","parse","getStepStatus","step","activeStepIndex","errorInCurrentStep","length","getProgressStyles","progressStyles","default","progressColor","activeStepTextColor","nextStepTextColor","firstStep","completed","error","renderCompactStepper","title","subtitle","_a","inProgress","progress","h","class","style","active","name","color","size","displayHeading","weight","renderStep","stepIndex","stepStatus","lastStep","progressWidth","key","heading","label","status","renderStepper","map","render","Host","variant"],"sources":["src/components/cura-stepper/cura-stepper.scss?tag=cura-stepper&encapsulation=shadow","src/components/cura-stepper/cura-stepper.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n}\n\ncura-heading { \n  --margin-block: 0 !important;\n}\n\n.container {\n  display: flex;\n}\n\n.compact {\n  display: flex;\n  padding: 0px;\n  justify-content: space-between;\n  align-items: center;\n\n  .heading{\n    text-align: right;\n  }\n}\n\n.stepper-list {\n  gap: 4px;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  padding: 0;\n  flex: 1;\n  width: 100%;\n  justify-content: space-between;\n}\n\n.step{\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  flex: 1;\n  gap: 4px;\n\n  .wrapper {\n    flex: 1;\n    position: relative;\n  }\n\n  .divider{\n    background-color: var(--neutral-light);\n    height: 2px;\n    flex: 1;\n\n    transition: all 1s;\n  }\n\n  .animation {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: var(--progress-width);\n  }\n\n  .done{\n    background-color: var(--success-light);\n  }\n\n  .stop{\n    background-color: var(--error-light);\n  }\n\n  .active{\n    background-color: var(--info-light);\n  }\n}\n\n.last{\n  flex: 0;\n}\n","import { Component, Host, State, h, Element, Prop } from '@stencil/core';\nimport { Step } from './stepper.type';\n\n@Component({\n  tag: 'cura-stepper',\n  styleUrl: 'cura-stepper.scss',\n  shadow: true,\n})\nexport class CuraStepper {\n  /**\n   * The current active step index\n   */\n  @Prop({ reflect: true }) activeStepIndex: number;\n\n  /**\n   * Indicates if a step has encountered an error\n   * If `true`, the current step will be marked as 'stop'\n   */\n  @Prop({ reflect: true }) errorInCurrentStep: boolean = false;\n\n  /**\n   * Whether to display the title (default: false)\n   */\n  @Prop({ reflect: true }) displayHeading: boolean = false;\n\n  /**\n   * Allows you to set the appearance of the component (default: default)\n   */\n  @Prop({ reflect: true }) variant: 'compact' | 'default' = 'default';\n\n  /**\n   * List of steps in the stepper.\n   */\n  @Prop() steps: Step[] | string = [];\n  /**\n   * Reference to the host element.\n   */\n  @Element() host: HTMLElement;\n\n  @State() styles = {};\n\n  /**\n   * Array of steps in the stepper.\n   *\n   * @type {Date[]}\n   * @default []\n   */\n  @State() stepList: Step[] = [];\n\n  connectedCallback() {\n    this.initializeSteps();\n\n    const { fonts, colors, spacing } = window.CuraAPI.theme;\n    const weights = fonts.getWeights();\n\n    this.styles = this.generateStyles(colors, fonts, spacing, weights);\n  }\n\n  generateStyles(colors, fonts, spacing, weights) {\n    return {\n      '--base-spacing': spacing.getSpacing(),\n      '--neutral-purewhite': colors.getColor('neutral-purewhite'),\n      '--neutral-lighter': colors.getColor('neutral-lighter'),\n      '--neutral-base': colors.getColor('neutral-base'),\n      '--neutral-light': colors.getColor('neutral-light'),\n      '--success-light': colors.getColor('success-light'),\n      '--info-light': colors.getColor('info-light'),\n      '--error-light': colors.getColor('error-light'),\n      '--font-size': fonts.getSize(),\n      '--font-color': fonts.getColor(),\n      '--font-family': fonts.getFamily(),\n      '--font-weight-regular': weights.regular,\n    };\n  }\n\n  initializeSteps() {\n    if (typeof this.steps === 'string') {\n      this.stepList = JSON.parse(this.steps || '[]');\n    } else {\n      this.stepList = this.steps;\n    }\n  }\n\n  getStepStatus(step: number): 'done' | 'stop' | 'active' | 'default' {\n    if (this.activeStepIndex === step && this.errorInCurrentStep) return 'stop';\n    if (this.activeStepIndex === step && this.stepList.length !== step) return 'active';\n    if (this.activeStepIndex >= step) return 'done';\n\n    return 'default';\n  }\n\n  getProgressStyles() {\n    const progressStyles = {\n      default: {\n        progressColor: 'var(--info-light)',\n        activeStepTextColor: 'info-darker',\n        nextStepTextColor: 'info-dark',\n      },\n      firstStep: {\n        progressColor: 'var(--info-light)',\n        activeStepTextColor: 'neutral-dark',\n        nextStepTextColor: 'neutral-medium',\n      },\n      completed: {\n        progressColor: 'var(--success-light)',\n        activeStepTextColor: 'success-darker',\n        nextStepTextColor: 'success-dark',\n      },\n      error: {\n        progressColor: 'var(--error-light)',\n        activeStepTextColor: 'error-darker',\n        nextStepTextColor: 'error-dark',\n      },\n    };\n\n    if (this.errorInCurrentStep) {\n      return progressStyles.error;\n    }\n\n    if (this.activeStepIndex === 0) {\n      return progressStyles.firstStep;\n    }\n\n    if (this.activeStepIndex === this.stepList.length) {\n      return progressStyles.completed;\n    }\n\n    return progressStyles.default;\n  }\n\n  renderCompactStepper() {\n    const title = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex].title : this.stepList[this.activeStepIndex - 1].title;\n    const subtitle = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex + 1].title : this.stepList[this.activeStepIndex]?.title;\n    const completed = this.activeStepIndex === this.stepList.length;\n    const inProgress = !(completed || this.errorInCurrentStep);\n    const { progressColor, activeStepTextColor, nextStepTextColor } = this.getProgressStyles();\n\n    // Representa a porcentagem de progresso (step atual / quantidade de steps;)\n    const progress = (this.activeStepIndex * 100) / this.stepList.length;\n\n    return (\n      <div class=\"container compact\" style={this.styles}>\n        <cura-progress-bar progress={progress} progressColor={progressColor} active={this.activeStepIndex !== 0}>\n          {!inProgress ? (\n            <cura-icon name={this.errorInCurrentStep ? 'alertCircle' : 'checkCircle'} color={this.errorInCurrentStep ? 'error-dark' : 'success-dark'} size=\"16\"></cura-icon>\n          ) : (\n            <cura-heading color=\"neutral-dark\" size=\"xsmall\">\n              {this.activeStepIndex}/{this.stepList.length}\n            </cura-heading>\n          )}\n        </cura-progress-bar>\n        {this.displayHeading && (\n          <div class=\"heading\">\n            <cura-heading size=\"small\" weight=\"bold\" color={activeStepTextColor}>\n              {title}\n            </cura-heading>\n            {!completed && (\n              <cura-heading size=\"xsmall\" weight=\"regular\" color={nextStepTextColor}>\n                Próximo: {subtitle}\n              </cura-heading>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  renderStep(step: Step, stepIndex: number) {\n    const stepStatus = this.getStepStatus(stepIndex + 1);\n    const lastStep = stepIndex === this.stepList.length - 1;\n    const progressWidth = stepStatus !== 'default' ? '100%' : '0';\n\n    return (\n      <div class={`step ${lastStep ? 'last' : ''}`} key={step.title}>\n        <cura-stepper-item heading={step.title} label={step.label} displayHeading={this.displayHeading} status={stepStatus}></cura-stepper-item>\n        {stepIndex < this.stepList.length - 1 && (\n          <div class=\"wrapper\">\n            <div class=\"divider\" />\n            <div class={`divider ${stepStatus} animation`} style={{ '--progress-width': progressWidth }} />\n          </div>\n        )}\n      </div>\n    );\n  }\n  renderStepper() {\n    return (\n      <div class=\"container\" style={this.styles}>\n        <div class=\"stepper-list\">{this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex))}</div>\n      </div>\n    );\n  }\n\n  render() {\n    return <Host>{this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper()}</Host>;\n  }\n}\n"],"mappings":"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","ignoreList":[]}