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

package/dist/components/cura-dropdown-search.js.map

@@ -1 +1 @@
-{"file":"cura-dropdown-search.js","mappings":"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","names":["CuraDropdownSearch"],"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  &-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: 630px;\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: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n\n    z-index: 10000;\n    .dropdown-input-search {\n      display: flex;\n      gap: 4px;\n      padding: 12px 8px;\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      }\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    .dropdown-search-list {\n      position: static;\n      width: 100%;\n      height: 100%;\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   * Define the status of the dropdown search.\n   */\n  @Prop({ reflect: true }) status: 'error' | 'default' = 'default';\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   * 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  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  }\n\n  componentWillLoad() {\n    this.updateSelectedOption(this.value);\n  }\n\n  componentDidRender() {\n    console.log(this.options);\n    if (this.isDropdownOpen && this.isMobile) {\n      this.showOverlay();\n    } else {\n      this.removeOverlay();\n    }\n  }\n  componentDidLoad() {\n    window.addEventListener('resize', this.handleResize);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.handleResize);\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  }\n\n  private removeOverlay() {\n    if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n      document.body.removeChild(this.overlayElement);\n      this.overlayElement = null;\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('click', () => 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.scrollIntoView();\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    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.removeOverlay();\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.scrollIntoView();\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 scrollIntoView() {\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.removeOverlay();\n      }\n    }\n  };\n\n  handleOnBlur() {\n    if (this.isOnBlurInput === true) {\n      setTimeout(() => {\n        this.isDropdownOpen = false;\n        this.removeOverlay();\n      }, 200);\n    }\n  }\n  getClasses() {\n    return {\n      'dropdown-input-search': true,\n      'dropdown-open': this.isDropdownOpen,\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  render() {\n    const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n    return (\n      <Host style={this.styles} 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\n                fontColor=\"dark\"\n                onClick={() => (this.isMobile = false)}\n                iconName=\"arrowLeft\"\n                size=\"medium\"\n                iconOnly\n                color=\"primary\"\n              ></cura-button-transparent>\n            )}\n            <cura-input-text\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.isDropdownOpen = true)}\n              onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n              onBlur={() => {\n                this.handleOnBlur();\n              }}\n              placeholder={this.placeholder}\n              size=\"large\"\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"],"version":3}
+{"file":"cura-dropdown-search.js","mappings":"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","names":["CuraDropdownSearch"],"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  &-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: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n\n    z-index: 10000;\n    .dropdown-input-search {\n      display: flex;\n      gap: 4px;\n      padding: 12px 8px;\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      }\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    .dropdown-search-list {\n      position: static;\n      width: 100%;\n      height: 100%;\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   * Define the status of the dropdown search.\n   */\n  @Prop({ reflect: true }) status: 'error' | 'default' = 'default';\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  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(this.value);\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption(this.value);\n  }\n\n  componentDidRender() {\n    if (this.isDropdownOpen && this.isMobile) {\n      this.showOverlay();\n    } else {\n      this.removeOverlay();\n    }\n  }\n  componentDidLoad() {\n    window.addEventListener('resize', this.handleResize);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.handleResize);\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  }\n\n  private removeOverlay() {\n    if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n      document.body.removeChild(this.overlayElement);\n      this.overlayElement = null;\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('click', () => 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.scrollIntoView();\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.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.scrollIntoView();\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 scrollIntoView() {\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.removeOverlay();\n      }\n    }\n  };\n\n  handleOnBlur() {\n    if (this.isOnBlurInput === true) {\n      setTimeout(() => {\n        this.isDropdownOpen = false;\n        this.removeOverlay();\n      }, 200);\n    }\n  }\n  getClasses() {\n    return {\n      'dropdown-input-search': true,\n      'dropdown-open': this.isDropdownOpen,\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  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\n                fontColor=\"dark\"\n                onClick={() => (this.isMobile = false)}\n                iconName=\"arrowLeft\"\n                size=\"medium\"\n                iconOnly\n                color=\"primary\"\n              ></cura-button-transparent>\n            )}\n            <cura-input-text\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.isDropdownOpen = true)}\n              onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n              onBlur={() => {\n                this.handleOnBlur();\n              }}\n              placeholder={this.placeholder}\n              size=\"large\"\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"],"version":3}

package/dist/components/cura-heading2.js

@@ -68,7 +68,7 @@ const CuraHeading = /*@__PURE__*/ proxyCustomElement(class CuraHeading extends H
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: '456cd35fd9ad4389ceb13d3b89d05f70e2423068', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: '55016d81f72ce0b506a7e2f2fbca3aa92448d581', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/cura-label2.js

@@ -53,7 +53,7 @@ const CuraLabel = /*@__PURE__*/ proxyCustomElement(class CuraLabel extends HTMLE
         };
     }
     render() {
-        return (h(Host, { key: '42662869e7cc4cd7cc8ff29ef37209514eaea0ac', style: this.hostCSSProperties() }, h("p", { key: 'cf6be4faf13ab24e0ae65edea48b528763072a7b', style: this.styles, class: this.getClasses() }, h("slot", { key: '45ee41cdc15f0c73672e4b3047df4508dbb870e3' }))));
+        return (h(Host, { key: '34d418859c8067e879a089240d36b58f5e91c8fc', style: this.hostCSSProperties() }, h("p", { key: '4a28171e079f80d8e61ebe840b858d65dd6d62c3', style: this.styles, class: this.getClasses() }, h("slot", { key: '0796484498caddf7935ff3458e13cfab47759a4b' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/cura-loader-bar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuraLoaderBar extends Components.CuraLoaderBar, HTMLElement {}
+export const CuraLoaderBar: {
+    prototype: CuraLoaderBar;
+    new (): CuraLoaderBar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cura-loader-bar.js

@@ -0,0 +1,8 @@
+import { C as CuraLoaderBar$1, d as defineCustomElement$1 } from './cura-loader-bar2.js';
+
+const CuraLoaderBar = CuraLoaderBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraLoaderBar, defineCustomElement };
+
+//# sourceMappingURL=cura-loader-bar.js.map

package/dist/components/cura-loader-bar.js.map

@@ -0,0 +1 @@
+{"file":"cura-loader-bar.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/cura-loader-bar2.js

@@ -0,0 +1,64 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const curaLoaderBarCss = ":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 CuraLoaderBarStyle0 = curaLoaderBarCss;
+
+const CuraLoaderBar = /*@__PURE__*/ proxyCustomElement(class CuraLoaderBar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.color = 'primary-base';
+        this.progress = 0;
+        this.styles = {};
+    }
+    handleChangeColor() {
+        this.setColor();
+    }
+    handleProgress() {
+        this.setProgress();
+    }
+    connectedCallback() {
+        this.setColor();
+        this.setProgress();
+    }
+    render() {
+        return (h(Host, { key: 'fbd3b560f2c5bc00e729300e3f2afa09690cabc8' }, h("div", { key: '0a728618223b33796b63768a543580b5d30e0115', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '06230a2ddf4bea3bef96a09814f3e0da9dde31a3', class: "progress-bar-fill" }))));
+    }
+    setColor() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.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 this; }
+    static get watchers() { return {
+        "color": ["handleChangeColor"],
+        "progress": ["handleProgress"]
+    }; }
+    static get style() { return CuraLoaderBarStyle0; }
+}, [1, "cura-loader-bar", {
+        "color": [1],
+        "progress": [2],
+        "styles": [32]
+    }, undefined, {
+        "color": ["handleChangeColor"],
+        "progress": ["handleProgress"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-loader-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-loader-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraLoaderBar);
+            }
+            break;
+    } });
+}
+
+export { CuraLoaderBar as C, defineCustomElement as d };
+
+//# sourceMappingURL=cura-loader-bar2.js.map

package/dist/components/cura-loader-bar2.js.map

@@ -0,0 +1 @@
+{"file":"cura-loader-bar2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,+TAA+T,CAAC;AACzV,4BAAe,gBAAgB;;MCMlB,aAAa;;;;;qBAGR,cAAc;wBACX,CAAC;sBAEF,EAAE;;IAGpB,iBAAiB;QACf,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;IAGD,cAAc;QACZ,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,EAAE,EAAC,cAAc,EAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAC5D,6DAAM,KAAK,EAAC,mBAAmB,GAAQ,CACnC,CACD,EACP;KACH;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,EAAE,GAAG,CAAC,EAC3E,cAAc,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GACjE,CAAA;KACF;IAED,WAAW;QACT,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,aAAa,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,GACnC,CAAA;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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>\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"],"version":3}

package/dist/components/cura-loader-circle2.js

@@ -26,7 +26,7 @@ const CuraLoaderCircle = /*@__PURE__*/ proxyCustomElement(class CuraLoaderCircle
         };
     }
     render() {
-        return (h(Host, { key: '8b2b73c6aefffd1a4350618ed52038a414cebb48', style: this.getStyles() }, h("svg", { key: '4478c39440bc66adcb3bcf1d947ae12cd5c3c721', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '3c01be9c541a634c504a2b8f72296426b8cebe28' }, h("circle", { key: '153102890325235a989b91badcadd00f852ccc3e', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '5fd7be471c351a46154fa96b459a99be297dfb5e', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '89ce06231240879c222d93fc4efc44d963bbd167' }, h("linearGradient", { key: '0999b93ff91ef7d31b9bfc70cfb08190838197e9', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'd7adf5104e03f40f4c757d218c0fc786e9f8ef2c' }), h("stop", { key: '8aaddbffb82d660aa8d62b2147efb74409218f41', offset: "1" }))))));
+        return (h(Host, { key: 'dd0c9e5b82f8f3b41511d31333af00e46435e9db', style: this.getStyles() }, h("svg", { key: '2a6a1edab6501c7788bebed93bbc87143d10fbaf', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '8dd113e23ffc4f5df091738a878eee76e030c904' }, h("circle", { key: 'a6e06aad2260ffb8cec65aed59ef8f09459765a1', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '88ac6f03cac1030593e06e6062d8d9947474aa62', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '6bae1e73907f3f8a17560ef055290c4ac41959e7' }, h("linearGradient", { key: 'c2510effd844984927f4b32fbb7f770ebcb09a3c', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '477e90e9eadf1385a8b897917886e1fe352c41d0' }), h("stop", { key: '135e22c3a11916fa1ce4bc5870774ecf37512e6f', offset: "1" }))))));
     }
     static get style() { return CuraLoaderCircleStyle0; }
 }, [1, "cura-loader-circle", {

package/dist/components/cura-paragraph2.js

@@ -52,7 +52,7 @@ const CuraParagraph = /*@__PURE__*/ proxyCustomElement(class CuraParagraph exten
         };
     }
     render() {
-        return (h(Host, { key: '5b219ac846a02c36df1db1ff5be6f0c5c833c2c1', style: this.hostCSSProperties() }, h("p", { key: 'e53f25d18b0b5d54548879872c0f234d3782b4f0', style: this.styles, class: this.setsizeClass() }, h("slot", { key: 'be875e98ec8c19682f972d0e4bb0bb07e9ee4224' }))));
+        return (h(Host, { key: '2c9903f885ae8346efdbb1569264fc078aee9224', style: this.hostCSSProperties() }, h("p", { key: '287c656408d2e9876497f70784ae7ce166417272', style: this.styles, class: this.setsizeClass() }, h("slot", { key: 'dde5f8d46c384a76605c1ef33b73c8f442c7a48b' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/cura-radio.js

@@ -131,7 +131,7 @@ const CuraRadio$1 = /*@__PURE__*/ proxyCustomElement(class CuraRadio extends HTM
         return statusColors[this.status][type];
     }
     render() {
-        return (h(Host, { key: '8f28f0ad3ec32f97cd39f5c574f7c779b326c3c0' }, h("div", { key: 'd94d37293c9165c13e082bbc7f78e7b35606147d', class: this.getClasses(), style: this.styles }, h("div", { key: 'fd743a9a24a22e59d0f9066d65dbe3c5b21c57b7', class: "info" }, h("div", { key: '080b345ff308b6cb0fbf1913aa6a1c872e3c325c', class: "label-wrapper" }, h("cura-label", { key: '9c0f0d376470b12273a359c65a91954cfa96b1a9', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '117eaafe86a8c2f6b190a7cefaaf2d882d658940', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '162ba073fc2722b4f1c2a3e8cfa42ae1940b4c99', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '453713a040379257a9be7c9cd327ffbd8ad3affb' }))), h("input", { key: '19ad607763975886902d6e88fd44bf3e1da75c8a', 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 }))));
+        return (h(Host, { key: 'cd50b6a8c2b43e7ddfc44c2a2d634118e8c8180c' }, h("div", { key: '0ab58b0b1e0561cfbe5801167873d3f1f6b8b48d', class: this.getClasses(), style: this.styles }, h("div", { key: '24399f088f99dd08696b8421140c64765b7ae82f', class: "info" }, h("div", { key: '5fa201595808fd9aede224943fd37cfe8972b51e', class: "label-wrapper" }, h("cura-label", { key: '58f5d8d6f176a1519458c30fbbf0f11bc11b72c1', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: 'ce96f49de0925ca3739640acadd25bb8d9fbbd26', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: 'b2188df747035a27bae0ad5206ac48ef31320268', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '215226214804fe80e0b049224a590411ddd1f01e' }))), h("input", { key: 'd3fc5b35a27e44f9d8e5f5ab9f9c348ef7bc8bb9', 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 this; }

package/dist/components/cura-select-option2.js

@@ -42,7 +42,7 @@ const CuraSelectOption = /*@__PURE__*/ proxyCustomElement(class CuraSelectOption
         };
     }
     render() {
-        return (h(Host, { key: '9eb6b609efeb50130efd27c20bc7a42441687ce7', slot: "option" }, h("div", { key: 'f72ff1ec9f5b5a579152b09e7a02496be5ab944b', class: this.getClasses(), style: this.styles }, h("cura-label", { key: '0b45ade14ca8ad351a696ec6bad4349eadec38f1', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '2015c43b9b1686fdef5f0369a91ce376327e5d7f' })), this.selected && h("cura-icon", { key: '9ee481f8ee3e586bd629559e90acf30976711059', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
+        return (h(Host, { key: '231c03411af0a5639358ff232e4a81287a8571f0', slot: "option" }, h("div", { key: 'b5baa8f7c4a4e863b96ffda1454a8c339d4b2656', class: this.getClasses(), style: this.styles }, h("cura-label", { key: '36d3381260263303242c443004f7e201c2683d4e', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: 'cc72fed8c51592c8fd076d091272879c7572a181' })), this.selected && h("cura-icon", { key: 'e118108f84d49b3d6574a143f09b2c43d43d11a8', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/cura-select2.js

@@ -253,13 +253,13 @@ const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTM
         return (h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
     }
     render() {
-        return (h(Host, { key: '25024f752db0a0189ece93612e54a43b47668efd', style: this.styles }, h("div", { key: 'eae2f00129bb2d82fa1586ce7f6e2e4bb71b20de', class: this.getClasses(), tabIndex: 0, ref: (el) => (this.selectRef = el), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onKeyDown: this.handleKeyDown, onClick: this.handleClick }, this.label && (h("cura-label", { key: '0ac1eb8e18c97432a2c46e35dc04fce4d2dc640a', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '09e8e758d595c641afbb7729847bc6e123ecd869', class: 'required' }, "* "))), h("div", { key: '2248ebad1ab820689635db06db8725d39118b04b', class: {
+        return (h(Host, { key: '35fd5d99705c940578485552a50bcec54efe036e', style: this.styles }, h("div", { key: '1903a7b03e32215678670a2d7d8b49643cc2086b', class: this.getClasses(), tabIndex: 0, ref: (el) => (this.selectRef = el), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onKeyDown: this.handleKeyDown, onClick: this.handleClick }, this.label && (h("cura-label", { key: '99aeba22f4b6204d936b6a9dcf6affa29e9411a8', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '7e335f6fdb0ee6d9e987fba8ec245006f02761b5', class: 'required' }, "* "))), h("div", { key: 'c9ba61c15951f6689724025778fe8a933ab5b9bd', class: {
                 'cura-input-field': true,
                 'open': this.isOpen
-            } }, this.renderIcon(), h("input", { key: 'ea3909b76182006256055be075a446a8cb2813af', tabIndex: 0, type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.value }), h("cura-icon", { key: '13a28271273b9a96e39cb62ca91e6769ea33ee43', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'fb1802d14cf6099e0ddf71f0623c1f0ffba6747c', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: '2c257fd28f5c560dd66fe9f73c2fb3c165174efa' })), this.isOpen && (h("div", { key: '36dbd0fa457f7d1ec9c771dafc7491a821267812', class: {
+            } }, this.renderIcon(), h("input", { key: '0c1369e661fc6e34c8bf75f5ef4b977e749dc0b5', tabIndex: 0, type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.value }), h("cura-icon", { key: '95b5105660bcfc0c1562955449a1fc737048e8c2', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'b5565e686989fe0c1e62f6c01fef52b2829bf4f5', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: '4a265609d8742b7e736920d54525cb2405785ea6' })), this.isOpen && (h("div", { key: '8f0609c7c2e709506ea4bdeeebdb1aae8abde1df', class: {
                 'menu': true,
                 'open': this.isOpen
-            } }, h("slot", { key: 'f8d751989092e50820cb7b71903eef743f672a6b', name: 'option' }))))));
+            } }, h("slot", { key: 'b6f84b885909ea1a9213cb3d590a02d736320228', name: 'option' }))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }

package/dist/components/cura-switch.js

@@ -102,7 +102,7 @@ const CuraSwitch$1 = /*@__PURE__*/ proxyCustomElement(class CuraSwitch extends H
         return classes;
     }
     render() {
-        return (h(Host, { key: 'e0040434db080b1ccdb12a1389ca028f5c02f66a' }, h("div", { key: '6008f7aef47e0519e965c2be573dc1eacc001b6c', class: this.getClasses(), style: this.styles }, h("div", { key: 'a954404dce1c7eafd79cb3236e8761a3dc29f86e', class: "info" }, h("cura-label", { key: '6ff5cc1f26abad0f173c4e1330aaae43357b7737', 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), h("cura-label", { key: 'b82e4cb25ef94481642e1d5a2180eb4e12b8eff8', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '243e906253614d9ce837e0c598b259ad7c87afb4' }))), h("div", { key: '36d0165722a6fae98ca829a5a2e89edef3694ff2', onClick: this.toggleSwitch, class: "control" }, h("div", { key: 'f9c0c7cbc84b655e37e7e8df1c2293c1260445ca', class: `track ${this.size.toLowerCase()}` }, h("div", { key: 'e5ca4006ad41a6cbf8d62ca612b52ef26fb7255f', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+        return (h(Host, { key: '2ccbfc3c5aae5ec8be3f879541b7cbcf203b62a9' }, h("div", { key: '2acacb0bab31f8736155dc764a6e3d57508f7a48', class: this.getClasses(), style: this.styles }, h("div", { key: '16c7cfedbd029d4e481cb2c3268690d594962ff3', class: "info" }, h("cura-label", { key: '24ed0fd9a9c0ebacc52407319b16a202f2defc96', 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), h("cura-label", { key: '4a84fb18a2fd43c623cb9aa9e9573482a22f6372', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '0ec0427dee691d224daa58db943c07d906d08dd0' }))), h("div", { key: '5b4a04200b4880474b693e605ba3e8671a3bd980', onClick: this.toggleSwitch, class: "control" }, h("div", { key: '2e3e764a87d57edc520f9d56b980d80d455d8d74', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '36b9da57ea3b95e419d7bb0b5ad4f24d7acd1b63', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/components/cura-toast.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuraToast extends Components.CuraToast, HTMLElement {}
+export const CuraToast: {
+    prototype: CuraToast;
+    new (): CuraToast;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cura-toast.js

@@ -0,0 +1,157 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './cura-heading2.js';
+import { d as defineCustomElement$4 } from './cura-icon2.js';
+import { d as defineCustomElement$3 } from './cura-loader-bar2.js';
+import { d as defineCustomElement$2 } from './cura-paragraph2.js';
+
+const curaToastCss = ":host{display:block;box-sizing:border-box}:host .container{position:fixed;display:flex;box-sizing:border-box;min-width:328px;height:fit-content;padding:16px;border:1px solid var(--color-base);border-radius:12px;background-color:var(--neutral-purewhite);overflow:hidden;box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12))}:host .container.loader{padding:16px 16px 20px}:host .container.top{top:24px}:host .container.top.center{top:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, top 0.5s ease-in-out}:host .container.top.center.active{top:24px;opacity:1}:host .container.bottom{bottom:24px}:host .container.bottom.center{bottom:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, bottom 0.5s ease-in-out}:host .container.bottom.center.active{bottom:24px;opacity:1}:host .container.left{left:-100%;opacity:0;transition:opacity 0.5s ease-in-out, left 0.5s ease-in-out}@media (max-width: 768px){:host .container.left{right:unset;left:50%;transform:translateX(-50%)}}:host .container.left.active{left:24px;opacity:1}:host .container.right{right:-100%;opacity:0;transition:opacity 0.5s ease-in-out, right 0.5s ease-in-out}@media (max-width: 768px){:host .container.right{right:unset;left:50%;transform:translateX(-50%)}}:host .container.right.active{right:24px;opacity:1}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:4px}:host .container .default-icon{margin-right:12px}:host .container .close-icon{margin-left:12px;cursor:pointer}";
+const CuraToastStyle0 = curaToastCss;
+
+const CuraToast$1 = /*@__PURE__*/ proxyCustomElement(class CuraToast extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.close = createEvent(this, "close", 7);
+        this.handleClose = () => {
+            this.close.emit();
+            this.closeContainer();
+        };
+        this.type = 'info';
+        this.position = 'top-right';
+        this.icon = undefined;
+        this.label = undefined;
+        this.closeButton = true;
+        this.loader = true;
+        this.autoCloseDelay = 10000;
+        this.styles = {};
+        this.progress = 0;
+    }
+    handleChangeType() {
+        this.setStyle();
+    }
+    connectedCallback() {
+        this.setStyle();
+    }
+    render() {
+        return (h(Host, { key: '8a49bdd99528c7b50b1b8a0de6ee0d985ffd5a11' }, h("div", { key: '6e560327e729ecb9fc9e6c081cc4d3b1131f892c', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '25efc30bc808e9f04be780ddf5bdc7edc3e56725', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'b1cbab08ae6845f8f544d4497b786fdfae645b72', class: "content" }, h("cura-heading", { key: '6d64c4fc8c43862f8fc5dba886b34a904a81208d', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'fa990a332ca8caf8b110b643b39c44a17bb8de67', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'ec9ab2abe06b0d67ea71725abe3a02aca1a736c6' })), h("slot", { key: 'dc08874d1145bb7e62cac9081014d17ad0095f53', name: "actions" })), this.closeButton && h("cura-icon", { key: '3f22011909ed7074962a2ccec8ffe05bb9b01feb', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '2e4168859d19170702a690bed3a20d28029cf7dc', color: `${this.type}-base`, progress: this.progress }))));
+    }
+    componentDidLoad() {
+        this.openContainer();
+        this.startAnimation();
+    }
+    setStyle() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`), '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--primary-base': window.CuraAPI.theme.colors.getColor(`primary-base`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.type}-base`) });
+    }
+    getClasses() {
+        const [firstPosition, secondPosition] = this.position.split('-');
+        const classes = {};
+        classes['container'] = true;
+        classes[firstPosition] = true;
+        classes[secondPosition] = true;
+        if (this.loader) {
+            classes['loader'] = true;
+        }
+        return classes;
+    }
+    getNameIcon() {
+        const iconMapping = {
+            info: 'infoCircle',
+            success: 'checkCircle',
+            warning: 'alertCircle',
+            error: 'alertTriangle',
+        };
+        return this.icon ? this.icon : iconMapping[this.type];
+    }
+    openContainer() {
+        this.container = this.host.shadowRoot.querySelector('.container');
+        this.container.classList.add('active');
+    }
+    closeContainer() {
+        this.container.classList.remove('active');
+        setTimeout(() => {
+            this.host.remove();
+        }, 500);
+    }
+    startAnimation() {
+        if (!!this.autoCloseDelay) {
+            if (this.loader) {
+                this.progress = 0;
+                let intervalId = setInterval(() => {
+                    if (this.progress >= 100) {
+                        clearInterval(intervalId);
+                        this.closeContainer();
+                    }
+                    else {
+                        this.progress++;
+                    }
+                }, this.autoCloseDelay / 100);
+            }
+            else {
+                let intervalId = setInterval(() => {
+                    clearInterval(intervalId);
+                    this.closeContainer();
+                }, this.autoCloseDelay);
+            }
+        }
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "type": ["handleChangeType"],
+        "position": ["handleChangeType"]
+    }; }
+    static get style() { return CuraToastStyle0; }
+}, [1, "cura-toast", {
+        "type": [1],
+        "position": [1],
+        "icon": [513],
+        "label": [513],
+        "closeButton": [516, "close-button"],
+        "loader": [516],
+        "autoCloseDelay": [514, "auto-close-delay"],
+        "styles": [32],
+        "progress": [32]
+    }, undefined, {
+        "type": ["handleChangeType"],
+        "position": ["handleChangeType"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-toast", "cura-heading", "cura-icon", "cura-loader-bar", "cura-paragraph"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-toast":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraToast$1);
+            }
+            break;
+        case "cura-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "cura-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "cura-loader-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cura-paragraph":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const CuraToast = CuraToast$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraToast, defineCustomElement };
+
+//# sourceMappingURL=cura-toast.js.map

package/dist/components/cura-toast.js.map

@@ -0,0 +1 @@
+{"file":"cura-toast.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,6hDAA6hD,CAAC;AACnjD,wBAAe,YAAY;;MCMdA,WAAS;;;;;;QAqGpB,gBAAW,GAAG;YACZ,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YAClB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB,CAAC;oBArGuD,MAAM;wBACgD,WAAW;;;2BAGnF,IAAI;sBACT,IAAI;8BACI,KAAK;sBAE7B,EAAE;wBACA,CAAC;;IAMrB,gBAAgB;QACd,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;IAID,iBAAiB;QACf,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,kEAAW,KAAK,EAAC,cAAc,EAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,OAAO,GAAc,EAC5G,4DAAK,KAAK,EAAC,SAAS,IAClB,qEAAc,KAAK,EAAE,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,OAAO,EAAE,MAAM,EAAC,MAAM,kBAAc,GAAG,IAC7F,IAAI,CAAC,KAAK,CACE,EACf,uEAAgB,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,SAAS,EAAE,IAAI,EAAC,QAAQ,EAAC,WAAW,EAAC,GAAG,EAAC,UAAU,EAAC,SAAS,IAC9F,8DAAa,CACE,EACjB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EACL,IAAI,CAAC,WAAW,IAAI,kEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,GAAc,EACnI,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,wEAAiB,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAoB,CAC7H,CACD,EACP;KACH;IAED,gBAAgB;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,qBAAqB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC,EAChF,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,EAAE,GAAG,CAAC,EAC3E,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,EACtE,cAAc,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,IAAI,OAAO,CAAC,GAC1E,CAAA;KACF;IAED,UAAU;QACR,MAAM,CAAC,aAAa,EAAE,cAAc,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACjE,MAAM,OAAO,GAAG,EAAE,CAAC;QAEnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC;QAC9B,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;QAE/B,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;SAC1B;QAED,OAAO,OAAO,CAAC;KAChB;IAED,WAAW;QACT,MAAM,WAAW,GAAG;YAClB,IAAI,EAAE,YAAY;YAClB,OAAO,EAAE,aAAa;YACtB,OAAO,EAAE,aAAa;YACtB,KAAK,EAAE,eAAe;SACvB,CAAC;QACF,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACvD;IAED,aAAa;QACX,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAgB,CAAC;QACjF,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;KACxC;IAED,cAAc;QACZ,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC1C,UAAU,CAAC;YACT,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;SACpB,EAAE,GAAG,CAAC,CAAC;KACT;IAOD,cAAc;QACZ,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE;YACzB,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;gBAClB,IAAI,UAAU,GAAG,WAAW,CAAC;oBAC3B,IAAI,IAAI,CAAC,QAAQ,IAAI,GAAG,EAAE;wBACxB,aAAa,CAAC,UAAU,CAAC,CAAC;wBAC1B,IAAI,CAAC,cAAc,EAAE,CAAC;qBACvB;yBAAM;wBACL,IAAI,CAAC,QAAQ,EAAE,CAAC;qBACjB;iBACF,EAAE,IAAI,CAAC,cAAc,GAAC,GAAG,CAAC,CAAC;aAC7B;iBAAM;gBACL,IAAI,UAAU,GAAG,WAAW,CAAC;oBAC3B,aAAa,CAAC,UAAU,CAAC,CAAC;oBAC1B,IAAI,CAAC,cAAc,EAAE,CAAC;iBACvB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;aACzB;SACF;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraToast"],"sources":["src/components/cura-toast/cura-toast.scss?tag=cura-toast&encapsulation=shadow","src/components/cura-toast/cura-toast.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n\n@mixin horizontalConfig($property) {\n  #{$property}: 24px;\n\n  &.center {\n    #{$property}: -100%;\n    left: 50%;\n    transform: translateX(-50%);\n    opacity: 0;\n    transition: opacity 0.5s ease-in-out, #{$property} 0.5s ease-in-out;\n\n    &.active {\n      #{$property}: 24px;\n      opacity: 1;\n    }\n  }\n}\n\n@mixin verticalConfig($property) {\n  #{$property}: -100%;\n  opacity: 0;\n  transition: opacity 0.5s ease-in-out, #{$property} 0.5s ease-in-out;\n  \n  @include mobile-only() {\n    right: unset;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  &.active {\n    #{$property}: 24px;\n    opacity: 1;\n  }\n}\n\n:host {\n  display: block;\n  box-sizing: border-box;\n\n  .container {\n    position: fixed;\n    display: flex;\n    box-sizing: border-box;\n    min-width: 328px;\n    height: fit-content;\n    padding: 16px;\n    border: 1px solid var(--color-base);\n    border-radius: 12px;\n    background-color: var(--neutral-purewhite);\n    overflow: hidden;\n    @include shadow-level4();\n\n    &.loader {\n      padding: 16px 16px 20px;\n    }\n\n    &.top {\n      @include horizontalConfig(top);\n    }\n\n    &.bottom {\n      @include horizontalConfig(bottom);\n    }\n\n    &.left {\n      @include verticalConfig(left);\n    }\n\n    &.right {\n      @include verticalConfig(right);\n    }\n\n    .content {\n      flex: 1 1 0;\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .default-icon {\n      margin-right: 12px;\n    }\n\n    .close-icon {\n      margin-left: 12px;\n      cursor: pointer;\n    }\n  }\n}","import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cura-toast',\n  styleUrl: 'cura-toast.scss',\n  shadow: true,\n})\nexport class CuraToast {\n  @Element() host: HTMLElement;\n\n  @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n  @Prop() position: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' = 'top-right';\n  @Prop({ reflect: true }) icon: string;\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeButton = true;\n  @Prop({ reflect: true }) loader = true;\n  @Prop({ reflect: true }) autoCloseDelay = 10000;\n  \n  @State() styles = {};\n  @State() progress = 0;\n\n  @Event({ eventName: 'close' }) close: EventEmitter<void>;\n\n  @Watch('type')\n  @Watch('position')\n  handleChangeType() {\n    this.setStyle();\n  }\n\n  container: HTMLElement;\n\n  connectedCallback() {\n    this.setStyle();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-icon class=\"default-icon\" name={this.getNameIcon()} size={16} color={`${this.type}-dark`}></cura-icon>\n          <div class=\"content\">\n            <cura-heading level={4} size=\"xsmall\" color={`${this.type}-dark`} weight=\"bold\" margin-block=\"0\">\n              {this.label}\n            </cura-heading>\n            <cura-paragraph color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n            <slot name=\"actions\"></slot>\n          </div>\n          {this.closeButton && <cura-icon class=\"close-icon\" name=\"close\" size={16} color=\"error-dark\" onClick={this.handleClose}></cura-icon>}\n          {this.loader && !!this.autoCloseDelay && <cura-loader-bar color={`${this.type}-base`} progress={this.progress}></cura-loader-bar>}\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    this.openContainer();\n    this.startAnimation();\n  }\n\n  setStyle() {\n    this.styles = {\n      ...this.styles,\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`),\n      '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2),\n      '--primary-base': window.CuraAPI.theme.colors.getColor(`primary-base`),\n      '--color-base': window.CuraAPI.theme.colors.getColor(`${this.type}-base`)\n    }\n  }\n\n  getClasses() {\n    const [firstPosition, secondPosition] = this.position.split('-');\n    const classes = {};\n\n    classes['container'] = true;\n    classes[firstPosition] = true;\n    classes[secondPosition] = true;\n\n    if (this.loader) {\n      classes['loader'] = true;\n    }\n\n    return classes;\n  }\n\n  getNameIcon() {\n    const iconMapping = {\n      info: 'infoCircle',\n      success: 'checkCircle',\n      warning: 'alertCircle',\n      error: 'alertTriangle',\n    };\n    return this.icon ? this.icon : iconMapping[this.type];\n  }\n\n  openContainer() {\n    this.container = this.host.shadowRoot.querySelector('.container') as HTMLElement;\n    this.container.classList.add('active');\n  }\n\n  closeContainer() {\n    this.container.classList.remove('active');\n    setTimeout(() => {\n      this.host.remove();\n    }, 500);\n  }\n\n  handleClose = () => {\n    this.close.emit();\n    this.closeContainer();\n  };\n\n  startAnimation() {\n    if (!!this.autoCloseDelay) {\n      if (this.loader) {\n        this.progress = 0;\n        let intervalId = setInterval(() => {\n          if (this.progress >= 100) {\n            clearInterval(intervalId);\n            this.closeContainer();\n          } else {\n            this.progress++;\n          }\n        }, this.autoCloseDelay/100);\n      } else {\n        let intervalId = setInterval(() => {\n          clearInterval(intervalId);\n          this.closeContainer();\n        }, this.autoCloseDelay);\n      }\n    }\n  }\n}\n"],"version":3}

package/dist/components/index.js

@@ -18,6 +18,7 @@ import { CuraIcon } from './cura-icon.js';
 import { CuraIconsView } from './cura-icons-view.js';
 import { CuraInputText } from './cura-input-text.js';
 import { CuraLabel } from './cura-label.js';
+import { CuraLoaderBar } from './cura-loader-bar.js';
 import { CuraLoaderCircle } from './cura-loader-circle.js';
 import { CuraPageTemplate } from './cura-page-template.js';
 import { CuraParagraph } from './cura-paragraph.js';
@@ -25,6 +26,7 @@ import { CuraRadio } from './cura-radio.js';
 import { CuraSelect } from './cura-select.js';
 import { CuraSelectOption } from './cura-select-option.js';
 import { CuraSwitch } from './cura-switch.js';
+import { CuraToast } from './cura-toast.js';
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 
 /**
@@ -561,6 +563,7 @@ const defineCustomElements = (opts) => {
             CuraIconsView,
             CuraInputText,
             CuraLabel,
+            CuraLoaderBar,
             CuraLoaderCircle,
             CuraPageTemplate,
             CuraParagraph,
@@ -568,6 +571,7 @@ const defineCustomElements = (opts) => {
             CuraSelect,
             CuraSelectOption,
             CuraSwitch,
+            CuraToast,
         ].forEach(cmp => {
             if (!customElements.get(cmp.is)) {
                 customElements.define(cmp.is, cmp, opts);