@zanichelli/albe-web-components 15.0.0-rc2 → 15.0.0

package/dist/esm-es5/z-range-picker.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZRangePickerStyle0","ZRangePicker","ZRangePickerMode","DATE","ZDatePickerPosition","BOTTOM","prototype","handleClick","this","getFocusedInput","handleKeyDown","ev","currentPicker","activeInput","firstPicker","lastPicker","key","document","activeElement","classList","contains","concat","rangePickerId","_a","close","_b","open","isCrossIconEntered","firstInputError","_c","clear","printDate","_d","selectedDates","lastInputError","_e","_f","isPrevArrowEntered","isNextArrowEntered","arrowPressed","preventDefault","changeMonth","componentDidLoad","setupPickers","setupFirstPickersReadOnly","set","firstPickerReadOnly","setupLastPickersReadOnly","lastPickerReadOnly","_this","config","enableTime","mode","DATE_TIME","locale","Italian","allowInput","wrap","dateFormat","ariaDateFormat","minuteIncrement","time_24hr","onValueUpdate","firstInputActive","firstDate","lastDate","setRangeStyle","onChange","_selectedDates","_dateStr","instance","onDateSelect","input","onOpen","setAriaOptions","element","flatpickrPosition","setFlatpickrPosition","onYearChange","onMonthChange","onKeyDown","flatpickr","Object","assign","clickOpens","appendTo","querySelector","querySelectorAll","forEach","innerHTML","trim","charAt","disableDates","date","index","calendar","getElementsByClassName","Array","from","calendarDate","getDateWithoutTime","replaceMonths","ariaLabel","breakpoint","inRange","toggle","formatDate","firstDateString","lastDateString","dateSelect","emit","newDate","Date","getFullYear","getMonth","getDate","time","month","split","months","Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre","pieces","replace","parseInt","focusedZInput","closest","hasFirstDate","length","hasLastDate","onStopTyping","value","text","detail","englishData","englishParsedData","join","isValidDate","validateDate","parse","toString","setDate","render","zInputProps","type","InputType","TEXT","icon","tabindex","message","bind","h","class","_g","placeholder","firstPickerPlaceholder","readonly","firstAriaLabel","label","firstLabel","status","InputStatus","ERROR","onStartTyping","lastPickerPlaceholder","secondAriaLabel","secondLabel"],"sources":["src/components/date-picker/styles.css?tag=z-range-picker","src/components/date-picker/z-range-picker/index.tsx"],"sourcesContent":["@import \"~flatpickr/dist/flatpickr.min.css\";\n@import \"~flatpickr/dist/plugins/monthSelect/style.css\";\n\n/* stylelint-disable selector-class-pattern -- we have no control over flatpickr css classes naming */\n\n:host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --z-range-picker--toggle-height: 0;\n}\n\nz-date-picker {\n  position: relative;\n}\n\nz-date-picker > div > * {\n  cursor: pointer !important;\n}\n\nz-range-picker {\n  position: relative;\n}\n\n.flatpickr-toggle-container {\n  width: fit-content;\n}\n\n.range-pickers-container > div {\n  position: relative;\n}\n\n.hidden-input {\n  position: absolute;\n  bottom: 0;\n  width: 0;\n  height: 0;\n  visibility: hidden !important;\n}\n\n/* Calendar container selectors */\n.flatpickr-calendar::before,\n.flatpickr-calendar::after {\n  display: none;\n}\n\n.flatpickr-calendar {\n  position: absolute !important;\n  top: var(--z-range-picker--toggle-height) !important;\n  left: 0 !important;\n  padding-top: calc(var(--space-unit) * 2);\n  border-radius: 2px;\n  box-shadow: var(--shadow-2);\n  font-family: var(--font-family-sans) !important;\n}\n\n.months.top > .flatpickr-calendar {\n  top: -288px !important;\n}\n\n.date.top > .flatpickr-calendar,\n.date.top > div > .flatpickr-calendar {\n  top: -401px !important;\n}\n\n.date-time.top > .flatpickr-calendar,\n.date-time.top > div > .flatpickr-calendar {\n  top: -523px !important;\n}\n\n.flatpickr-calendar,\n.flatpickr-innerContainer,\n.flatpickr-days,\n.dayContainer,\n.flatpickr-rContainer,\n.flatpickr-monthSelect-months {\n  width: calc(var(--space-unit) * 42) !important;\n  max-width: calc(var(--space-unit) * 42) !important;\n}\n\n.flatpickr-monthSelect-months {\n  box-sizing: border-box;\n  padding: 0 !important;\n  margin: calc(var(--space-unit) * 2) 0 !important;\n}\n\n/* Months and year row containers selectors */\n.flatpickr-months {\n  position: relative;\n  height: calc(var(--space-unit) * 6) !important;\n  align-items: center;\n  margin-bottom: var(--space-unit) 0 !important;\n}\n\n.flatpickr-month {\n  overflow: visible !important;\n  height: calc(var(--space-unit) * 6) !important;\n}\n\n.flatpickr-current-month {\n  left: 0 !important;\n  display: flex !important;\n  width: fill-available;\n  height: calc(var(--space-unit) * 6);\n  align-items: baseline;\n  justify-content: space-evenly;\n  padding-top: 0;\n}\n\n/* Months arrows selectors */\n.flatpickr-next-month,\n.flatpickr-prev-month {\n  position: static !important;\n  display: flex;\n  width: calc(var(--space-unit) * 4) !important;\n  height: calc(var(--space-unit) * 4) !important;\n  align-items: center;\n  justify-content: center;\n  padding: 0 !important;\n}\n\n.flatpickr-prev-month {\n  margin-left: var(--space-unit);\n}\n\n.flatpickr-next-month {\n  margin-right: var(--space-unit);\n}\n\n.flatpickr-next-month > svg,\n.flatpickr-prev-month > svg {\n  width: calc(var(--space-unit) * 2) !important;\n  height: calc(var(--space-unit) * 2) !important;\n  fill: var(--color-primary01);\n}\n\n.flatpickr-next-month:hover,\n.flatpickr-prev-month:hover,\n.flatpickr-next-month:focus,\n.flatpickr-prev-month:focus {\n  border: none !important;\n  border-color: var(--color-primary03) !important;\n  background-color: var(--color-primary03) !important;\n  border-radius: var(--border-radius);\n  color: var(--color-hover-primary) !important;\n  outline: none !important;\n}\n\n.flatpickr-next-month:hover svg,\n.flatpickr-prev-month:hover svg {\n  fill: var(--color-hover-primary) !important;\n}\n\n.flatpickr-next-month:active,\n.flatpickr-prev-month:active {\n  border-color: var(--color-surface01) !important;\n  background-color: var(--color-surface01) !important;\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-2) !important;\n  color: var(--color-primary01) !important;\n}\n\n.flatpickr-next-month:focus svg,\n.flatpickr-prev-month:focus svg {\n  fill: var(--color-primary01) !important;\n}\n\n/* Months dropdown selectors */\n.flatpickr-monthDropdown-months {\n  width: 108px !important;\n  height: calc(var(--space-unit) * 5.5) !important;\n  padding-left: var(--space-unit) !important;\n  background: var(--color-surface01) !important;\n  color: var(--color-default-text) !important;\n  font-size: var(--font-size-3) !important;\n  font-weight: var(--font-rg) !important;\n  outline: 1px solid black !important;\n}\n\n.flatpickr-monthDropdown-months:hover,\n.flatpickr-monthDropdown-months:focus {\n  outline: 1px solid var(--color-primary01) !important;\n}\n\n/* Year toggle selectors */\n.flatpickr-current-month > .numInputWrapper {\n  display: flex;\n  width: calc(var(--space-unit) * 10);\n  height: calc(var(--space-unit) * 5.5) !important;\n  background: var(--color-surface01) !important;\n  color: var(--color-default-text);\n  outline: 1px solid black !important;\n}\n\n.flatpickr-current-month > .numInputWrapper:hover,\n.flatpickr-current-month > .numInputWrapper:focus-within {\n  outline: 1px solid var(--color-primary01) !important;\n}\n\n.flatpickr-current-month > .numInputWrapper > input {\n  padding: 0 calc(var(--space-unit) * 3) 0 var(--space-unit);\n  font-size: var(--font-size-3) !important;\n  font-weight: var(--font-rg) !important;\n  text-align: center;\n}\n\n/* Weekdays selectors */\n.flatpickr-weekdays {\n  height: calc(var(--space-unit) * 6);\n  border-bottom: 1px solid var(--color-surface03);\n}\n\n.flatpickr-weekday {\n  font-size: var(--font-size-3) !important;\n  font-weight: var(--font-rg) !important;\n}\n\n/* Calendar days and months selectors */\n.flatpickr-day,\n.flatpickr-monthSelect-month {\n  width: calc(var(--space-unit) * 6) !important;\n  max-width: 100% !important;\n  height: calc(var(--space-unit) * 6) !important;\n  border: none;\n  margin: 0 !important;\n  border-radius: 0 !important;\n  box-shadow: none !important;\n  font-size: var(--font-size-3) !important;\n  line-height: calc(var(--space-unit) * 6) !important;\n}\n\n.flatpickr-day {\n  width: calc(var(--space-unit) * 6) !important;\n  border: none;\n  line-height: calc(var(--space-unit) * 6) !important;\n}\n\n.flatpickr-monthSelect-month {\n  width: calc(var(--space-unit) * 14) !important;\n  padding: 0 !important;\n  border: 2px solid var(--color-surface01) !important;\n  line-height: calc(var(--space-unit) * 5) !important;\n}\n\n.flatpickr-day:not(.flatpickr-disabled):hover,\n.flatpickr-day:not(.flatpickr-disabled):active,\n.flatpickr-day:not(.flatpickr-disabled):focus,\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:hover,\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:active,\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:focus,\n.flatpickr-day:not(.flatpickr-disabled).selected:hover,\n.flatpickr-day:not(.flatpickr-disabled).selected:active,\n.flatpickr-day:not(.flatpickr-disabled).selected:focus,\n.flatpickr-monthSelect-month:hover,\n.flatpickr-monthSelect-month:active,\n.flatpickr-monthSelect-month:focus {\n  border-color: var(--color-hover-primary) !important;\n  background-color: var(--color-hover-primary) !important;\n  color: var(--color-text-inverse) !important;\n}\n\n.flatpickr-day.today,\n.flatpickr-monthSelect-month.today {\n  border: 2px solid var(--color-hover-primary) !important;\n}\n\n.flatpickr-day.selected:not(.flatpickr-disabled),\n.flatpickr-monthSelect-month.selected:not(.flatpickr-disabled) {\n  border-color: var(--color-primary01) !important;\n  background-color: var(--color-primary01) !important;\n}\n\n.flatpickr-weekday:nth-child(6),\n.flatpickr-weekday:nth-child(7),\n.flatpickr-day:nth-child(7n + 6),\n.flatpickr-day:nth-child(7n + 7) {\n  font-weight: var(--font-sb) !important;\n}\n\n/* Date and time selectors */\n.flatpickr-time {\n  display: block;\n  height: 90px !important;\n  max-height: 90px !important;\n  text-align: left;\n}\n\n.flatpickr-time::before {\n  display: block;\n  width: 100%;\n  padding-left: var(--space-unit);\n  color: var(--color-default-text) !important;\n  content: \"Orario\";\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  text-transform: uppercase;\n}\n\n.flatpickr-time.time24hr {\n  margin: calc(var(--space-unit) * 2) !important;\n}\n\n.flatpickr-time.time24hr > .numInputWrapper > input:hover,\n.flatpickr-time.time24hr > .numInputWrapper > input:focus,\n.flatpickr-time.time24hr > .numInputWrapper:hover {\n  background-color: var(--color-surface01) !important;\n}\n\n.flatpickr-time.time24hr > div {\n  width: calc(var(--space-unit) * 10) !important;\n  height: calc(var(--space-unit) * 5.5) !important;\n  margin-right: var(--space-unit) !important;\n  margin-left: var(--space-unit) !important;\n}\n\n.flatpickr-time-separator {\n  display: flex;\n  height: calc(var(--space-unit) * 5.5) !important;\n  align-items: center;\n  justify-content: center;\n  font-weight: unset !important;\n}\n\n.flatpickr-minute,\n.flatpickr-hour {\n  font-size: var(--font-size-3) !important;\n  font-weight: var(--font-rg) !important;\n  outline: 1px solid black !important;\n}\n\n.numInputWrapper:hover .flatpickr-minute,\n.numInputWrapper:hover .flatpickr-hour,\n.flatpickr-minute:focus,\n.flatpickr-hour:focus {\n  outline: 1px solid var(--color-primary01) !important;\n}\n\n/* toggle arrows selectors */\n.arrowUp,\n.arrowDown {\n  width: calc(var(--space-unit) * 2) !important;\n  height: calc(var(--space-unit) * 2) !important;\n  padding: 0 !important;\n  border: none !important;\n  opacity: 1 !important;\n}\n\n.arrowUp {\n  margin-top: calc(var(--space-unit) / 2) !important;\n  margin-right: calc(var(--space-unit) / 2) !important;\n}\n\n.arrowDown {\n  top: auto !important;\n  margin-top: calc(var(--space-unit) * 3) !important;\n  margin-right: calc(var(--space-unit) / 2) !important;\n}\n\n.arrowUp:hover,\n.arrowDown:hover {\n  border-color: var(--color-primary03) !important;\n  background-color: var(--color-primary03) !important;\n  border-radius: var(--border-radius);\n  color: var(--color-hover-primary) !important;\n}\n\n.arrowUp:active,\n.arrowDown:active {\n  border-color: var(--color-surface01) !important;\n  background-color: var(--color-surface01) !important;\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-2) !important;\n  color: var(--color-primary01) !important;\n}\n\n.arrowUp::after,\n.arrowDown::after {\n  padding: 2.5px !important;\n  border: solid var(--color-primary01) !important;\n  border-width: 0 1px 1px 0 !important;\n}\n\n.arrowUp::after {\n  top: 0 !important;\n  margin-top: 6px !important;\n  margin-left: 5.5px !important;\n  transform: rotate(-135deg);\n}\n\n.arrowDown::after {\n  top: 0 !important;\n  left: 5.5px !important;\n  margin-top: 4px !important;\n  transform: rotate(45deg);\n}\n\n/* range-date-picker selectors */\n\n.flatpickr-day:not(.flatpickr-disabled).inRange:hover,\n.flatpickr-day:not(.flatpickr-disabled).today.inRange:hover,\n.flatpickr-day.prevMonthDay:not(.flatpickr-disabled).inRange:hover,\n.flatpickr-monthSelect-month:not(.flatpickr-disabled).inRange:hover {\n  border-color: var(--color-hover-primary) !important;\n  background-color: var(--color-hover-primary) !important;\n}\n\n.flatpickr-day:not(.flatpickr-disabled).inRange,\n.flatpickr-day:not(.flatpickr-disabled).today.inRange,\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.inRange,\n.flatpickr-monthSelect-month:not(.flatpickr-disabled).inRange {\n  border-color: var(--color-primary03);\n  background-color: var(--color-primary03);\n}\n\n.flatpickr-day:not(.flatpickr-disabled).startRange,\n.flatpickr-day:not(.flatpickr-disabled).endRange,\n.flatpickr-monthSelect-month:not(.flatpickr-disabled).startRange,\n.flatpickr-monthSelect-month:not(.flatpickr-disabled).endRange {\n  border-color: var(--color-primary01) !important;\n  background-color: var(--color-primary01) !important;\n}\n\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.selected.startRange,\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.selected.endRange {\n  border-color: var(--color-primary01) !important;\n  background-color: var(--color-primary01) !important;\n}\n\n.flatpickr-range.second-input {\n  cursor: pointer;\n}\n\n.range-pickers-container {\n  display: flex;\n  gap: 16px;\n}\n","import {Component, Element, Event, EventEmitter, Listen, Prop, State, Watch, h} from \"@stencil/core\";\n\nimport flatpickr from \"flatpickr\";\nimport {Italian} from \"flatpickr/dist/l10n/it.js\";\n\nimport {InputStatus, InputType, ZDatePickerPosition, ZRangePickerMode} from \"../../../beans\";\nimport {setAriaOptions, setFlatpickrPosition, validateDate} from \"../utils\";\n\n@Component({\n  tag: \"z-range-picker\",\n  styleUrl: \"../styles.css\",\n  shadow: false,\n})\nexport class ZRangePicker {\n  @Element() element: HTMLZRangePickerElement;\n\n  /** unique id */\n  @Prop()\n  rangePickerId: string;\n\n  /** first z-input aria label */\n  @Prop()\n  firstAriaLabel?: string;\n\n  /** first z-input label */\n  @Prop()\n  firstLabel?: string;\n\n  /** second z-input aria label */\n  @Prop()\n  secondAriaLabel?: string;\n\n  /** second z-input label */\n  @Prop()\n  secondLabel?: string;\n\n  /** [Optional] datepicker mode: date or datetime */\n  @Prop()\n  mode: ZRangePickerMode = ZRangePickerMode.DATE;\n\n  /** readonly mode */\n  @Prop()\n  firstPickerReadOnly = false;\n\n  /** readonly mode */\n  @Prop()\n  lastPickerReadOnly = false;\n\n  /** readonly mode */\n  @Prop()\n  firstPickerPlaceholder = \"\";\n\n  /** readonly mode */\n  @Prop()\n  lastPickerPlaceholder = \"\";\n\n  @State()\n  flatpickrPosition: ZDatePickerPosition = ZDatePickerPosition.BOTTOM;\n\n  @State()\n  activeInput = \"start-input\";\n\n  @State()\n  firstInputError = false;\n\n  @State()\n  lastInputError = false;\n\n  private firstPicker;\n\n  private lastPicker;\n\n  /** emitted when date changes, returns an array with the two selected dates */\n  @Event()\n  dateSelect: EventEmitter;\n\n  @Listen(\"click\", {target: \"body\", capture: true})\n  handleClick(): void {\n    this.getFocusedInput();\n  }\n\n  @Listen(\"keyup\", {target: \"body\", capture: true})\n  handleKeyDown(ev: KeyboardEvent): void {\n    const currentPicker = this.activeInput === \"start-input\" ? this.firstPicker : this.lastPicker;\n\n    this.getFocusedInput();\n\n    if (ev.key === \"Escape\") {\n      document.activeElement.classList.contains(`${this.rangePickerId}-1`) && this.firstPicker?.close();\n\n      document.activeElement.classList.contains(`${this.rangePickerId}-2`) && this.lastPicker?.close();\n    }\n\n    if (ev.key === \"Enter\" || ev.key === \" \") {\n      if (\n        document.activeElement.classList.contains(`${this.rangePickerId}-1`) ||\n        document.activeElement.classList.contains(`${this.rangePickerId}-2`)\n      ) {\n        currentPicker?.open();\n      }\n\n      const isCrossIconEntered = document.activeElement.classList.contains(\"reset-icon\");\n\n      if (isCrossIconEntered) {\n        if (this.activeInput === \"start-input\") {\n          this.firstInputError = false;\n          this.firstPicker?.clear();\n          this.printDate(null, this.lastPicker?.selectedDates[0] || null);\n        }\n        if (this.activeInput === \"end-input\") {\n          this.lastInputError = false;\n          this.firstPicker?.clear();\n          this.printDate(this.firstPicker?.selectedDates[0] || null, null);\n        }\n      }\n\n      const isPrevArrowEntered = document.activeElement.classList.contains(\"flatpickr-prev-month\");\n      const isNextArrowEntered = document.activeElement.classList.contains(\"flatpickr-next-month\");\n      const arrowPressed = isPrevArrowEntered || isNextArrowEntered;\n\n      arrowPressed && ev.key === \" \" && ev.preventDefault();\n\n      isPrevArrowEntered && currentPicker?.changeMonth(-1);\n      isNextArrowEntered && currentPicker?.changeMonth(1);\n    }\n  }\n\n  componentDidLoad(): void {\n    this.setupPickers();\n  }\n\n  @Watch(\"firstPickerReadOnly\")\n  setupFirstPickersReadOnly(): void {\n    this.firstPicker?.set(\"clickOpens\", !this.firstPickerReadOnly);\n  }\n\n  @Watch(\"lastPickerReadOnly\")\n  setupLastPickersReadOnly(): void {\n    this.lastPicker?.set(\"clickOpens\", !this.lastPickerReadOnly);\n  }\n\n  @Watch(\"mode\")\n  setupPickers(): void {\n    const config = {\n      enableTime: this.mode === ZRangePickerMode.DATE_TIME,\n      locale: Italian,\n      allowInput: true,\n      wrap: true,\n      dateFormat: this.mode === ZRangePickerMode.DATE_TIME ? \"d-m-Y - H:i\" : \"d-m-Y\",\n      ariaDateFormat: \"d F Y\",\n      minuteIncrement: 1,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      time_24hr: true,\n      onValueUpdate: () => {\n        const firstInputActive = this.activeInput === \"start-input\";\n        const firstDate = this.firstPicker.selectedDates[0];\n        const lastDate = this.lastPicker.selectedDates[0];\n\n        if (+firstDate > +lastDate) {\n          if (firstInputActive) {\n            this.firstInputError = true;\n            this.printDate(null, lastDate || null);\n          } else {\n            this.lastInputError = true;\n            this.printDate(firstDate || null, null);\n          }\n        } else {\n          this.lastInputError = false;\n          this.firstInputError = false;\n          this.printDate(firstDate || null, lastDate || null);\n        }\n        this.setRangeStyle(0);\n        this.setRangeStyle(1);\n      },\n      onChange: (_selectedDates, _dateStr, instance) => {\n        this.onDateSelect();\n        this.setRangeStyle(instance.input.classList.contains(\"start-input\") ? 0 : 1);\n      },\n      onOpen: (_selectedDates, _dateStr, instance) => {\n        setAriaOptions(this.element, this.mode);\n        this.flatpickrPosition = setFlatpickrPosition(this.element, this.mode);\n        this.setRangeStyle(instance.input.classList.contains(\"start-input\") ? 0 : 1);\n        this.getFocusedInput();\n      },\n      onYearChange: (_selectedDates, _dateStr, instance) => {\n        this.setRangeStyle(instance.input.classList.contains(\"start-input\") ? 0 : 1);\n      },\n      onMonthChange: (_selectedDates, _dateStr, instance) => {\n        this.setRangeStyle(instance.input.classList.contains(\"start-input\") ? 0 : 1);\n      },\n      onKeyDown: () => {\n        setAriaOptions(this.element, this.mode);\n      },\n    };\n\n    this.firstPicker = flatpickr(`.${this.rangePickerId}-1-container`, {\n      ...{...config, clickOpens: !this.firstPickerReadOnly},\n      mode: \"single\",\n      appendTo: this.element.querySelector(`.${this.rangePickerId}-1-wrapper`),\n    });\n    this.lastPicker = flatpickr(`.${this.rangePickerId}-2-container`, {\n      ...{...config, clickOpens: !this.lastPickerReadOnly},\n      mode: \"single\",\n      appendTo: this.element.querySelector(`.${this.rangePickerId}-2-wrapper`),\n    });\n\n    this.element.querySelectorAll(\".flatpickr-weekday\").forEach((element) => {\n      element.innerHTML = element.innerHTML.trim().charAt(0);\n    });\n  }\n\n  private onDateSelect(): void {\n    const firstInputActive = this.activeInput === \"start-input\";\n    const firstDate = this.firstPicker.selectedDates[0];\n    const lastDate = this.lastPicker.selectedDates[0];\n\n    if (+firstDate > +lastDate) {\n      if (firstInputActive) {\n        this.firstInputError = true;\n        this.printDate(null, lastDate || null);\n      } else {\n        this.lastInputError = true;\n        this.printDate(firstDate || null, null);\n      }\n    } else {\n      this.lastInputError = false;\n      this.firstInputError = false;\n      this.printDate(firstDate || null, lastDate || null);\n    }\n  }\n\n  private disableDates(date, index): void {\n    const calendar = this.element.getElementsByClassName(\"flatpickr-calendar\")[index];\n\n    Array.from(calendar.getElementsByClassName(\"flatpickr-day\")).forEach((element: Element) => {\n      const calendarDate = this.getDateWithoutTime(this.replaceMonths(element.ariaLabel, null));\n\n      const breakpoint = this.getDateWithoutTime(date);\n      const inRange = index === 0 ? calendarDate > breakpoint : calendarDate < breakpoint;\n\n      if (inRange) {\n        element.classList.toggle(\"flatpickr-disabled\", true);\n      } else {\n        element.classList.toggle(\"flatpickr-disabled\", false);\n      }\n    });\n    setAriaOptions(this.element, this.mode);\n  }\n\n  private formatDate(date): string {\n    if (this.mode === ZRangePickerMode.DATE) {\n      return `${flatpickr.formatDate(date, \"d-m-Y\")}`;\n    }\n\n    return `${flatpickr.formatDate(date, \"d-m-Y - H:i\")}`;\n  }\n\n  private printDate(firstDate, lastDate): void {\n    const firstDateString = firstDate ? this.formatDate(firstDate) : null;\n    const lastDateString = lastDate ? this.formatDate(lastDate) : null;\n\n    this.dateSelect.emit([firstDateString, lastDateString]);\n  }\n\n  private getDateWithoutTime(date): Date {\n    const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0);\n\n    return newDate;\n  }\n\n  /** Replace month word to month number */\n  private replaceMonths(date, time): Date {\n    const month = date.split(\" \")[1];\n    const months = {\n      /* eslint-disable @typescript-eslint/naming-convention */\n      Gennaio: \"01\",\n      Febbraio: \"02\",\n      Marzo: \"03\",\n      Aprile: \"04\",\n      Maggio: \"05\",\n      Giugno: \"06\",\n      Luglio: \"07\",\n      Agosto: \"08\",\n      Settembre: \"09\",\n      Ottobre: \"10\",\n      Novembre: \"11\",\n      Dicembre: \"12\",\n      /* eslint-enable @typescript-eslint/naming-convention */\n    };\n\n    const pieces = date.replace(month, months[month]).split(\" \");\n\n    return new Date(\n      parseInt(pieces[2]),\n      parseInt(pieces[1]) - 1,\n      parseInt(pieces[0]),\n      time ? parseInt(time.split(\":\")[0]) : 0,\n      time ? parseInt(time.split(\":\")[1]) : 0\n    );\n  }\n\n  /** Get the current focused input, first or last */\n  private getFocusedInput(): string {\n    const focusedZInput = document.activeElement.closest(\"z-input\");\n    if (!focusedZInput) {\n      return;\n    }\n\n    if (focusedZInput?.classList.contains(\"start-input\")) {\n      this.activeInput = \"start-input\";\n    } else if (focusedZInput.classList.contains(\"end-input\")) {\n      this.activeInput = \"end-input\";\n    }\n  }\n\n  /** Set style of the days between the two selected dates */\n  private setRangeStyle(index): void {\n    Array.from(this.element.getElementsByClassName(\"flatpickr-calendar\")).forEach((element: Element) => {\n      Array.from(element.getElementsByClassName(\"flatpickr-day\")).forEach((element: Element) => {\n        const hasFirstDate = this.firstPicker.selectedDates.length === 1;\n        const hasLastDate = this.lastPicker.selectedDates.length === 1;\n        let firstDate;\n        let lastDate;\n        const date = this.getDateWithoutTime(this.replaceMonths(element.ariaLabel, null));\n\n        if (hasFirstDate) {\n          firstDate = this.getDateWithoutTime(this.firstPicker.selectedDates[0]);\n          if (+date === +firstDate) {\n            element.classList.toggle(\"startRange\", true);\n          } else {\n            element.classList.toggle(\"startRange\", false);\n          }\n        }\n\n        if (hasLastDate) {\n          lastDate = this.getDateWithoutTime(this.lastPicker.selectedDates[0]);\n          if (+date === +lastDate) {\n            element.classList.toggle(\"endRange\", true);\n          } else {\n            element.classList.toggle(\"endRange\", false);\n          }\n        }\n\n        if (hasFirstDate && hasLastDate) {\n          if (date > firstDate && date < lastDate) {\n            element.classList.toggle(\"inRange\", true);\n          } else {\n            element.classList.toggle(\"inRange\", false);\n          }\n        }\n\n        if (index === 0 && hasLastDate) {\n          this.disableDates(this.lastPicker.selectedDates[0], index);\n        }\n        if (index === 1 && hasFirstDate) {\n          this.disableDates(this.firstPicker.selectedDates[0], index);\n        }\n      });\n    });\n  }\n\n  private onStopTyping(value): void {\n    const text = value.detail.value.replace(\"/\", \"-\");\n    const englishData = text.split(\"-\");\n    const time = this.mode === ZRangePickerMode.DATE_TIME ? `T${englishData[3]}:00` : \"\";\n    const englishParsedData = `${englishData[2]}-${englishData[1]}-${englishData[0]}${time}`.split(\" \").join(\"\");\n\n    const isValidDate = validateDate(text, this.mode === ZRangePickerMode.DATE_TIME);\n\n    const date = Date.parse(englishParsedData).toString();\n\n    if (this.activeInput === \"start-input\") {\n      if (text === \"\") {\n        this.firstInputError = false;\n        this.firstPicker.setDate([]);\n        this.printDate(null, this.lastPicker.selectedDates[0] || null);\n      } else if (!isValidDate) {\n        this.firstInputError = true;\n        this.printDate(null, this.lastPicker.selectedDates[0] || null);\n      } else if (isValidDate) {\n        if (this.lastPicker.selectedDates.length === 1) {\n          if (+date <= +this.lastPicker.selectedDates[0]) {\n            this.firstInputError = false;\n            this.firstPicker.setDate([text]);\n            this.printDate(new Date(englishParsedData), this.lastPicker.selectedDates[0]);\n          } else {\n            this.firstInputError = true;\n            this.printDate(null, this.lastPicker.selectedDates[0]);\n          }\n        } else {\n          this.firstInputError = false;\n          this.firstPicker.setDate([text]);\n          this.printDate(new Date(englishParsedData), null);\n        }\n      }\n    } else if (text === \"\") {\n      this.lastInputError = false;\n      this.lastPicker.setDate([]);\n      this.printDate(this.firstPicker.selectedDates[0] || null, null);\n    } else if (!isValidDate) {\n      this.lastInputError = true;\n      this.printDate(this.firstPicker.selectedDates[0] || null, null);\n    } else if (isValidDate) {\n      if (this.firstPicker.selectedDates.length === 1) {\n        if (+date >= +this.firstPicker.selectedDates[0]) {\n          this.lastInputError = false;\n          this.lastPicker.setDate([text]);\n          this.printDate(this.firstPicker.selectedDates[0], new Date(englishParsedData));\n        } else {\n          this.lastInputError = true;\n          this.printDate(this.firstPicker.selectedDates[0], null);\n        }\n      } else {\n        this.lastInputError = false;\n        this.lastPicker.setDate([text]);\n        this.printDate(null, new Date(englishParsedData));\n      }\n    }\n\n    this.setRangeStyle(this.activeInput === \"start-input\" ? 0 : 1);\n  }\n\n  render(): HTMLDivElement {\n    const zInputProps = {\n      type: InputType.TEXT,\n      icon: \"event\",\n      tabindex: \"0\",\n      message: false,\n      onStopTyping: this.onStopTyping.bind(this),\n      value: \"\",\n    };\n\n    return (\n      <div\n        class={{\n          [\"range-pickers-container\"]: true,\n          [this.mode]: true,\n          [this.activeInput]: true,\n          [this.flatpickrPosition]: true,\n        }}\n      >\n        <div class={`${this.rangePickerId}-1-wrapper`}>\n          <div class={`${this.rangePickerId}-1-container`}>\n            <z-input\n              {...zInputProps}\n              placeholder={this.firstPickerPlaceholder}\n              readonly={this.firstPickerReadOnly}\n              data-input=\"data-input\"\n              class={`start-input ${this.rangePickerId}-1`}\n              ariaLabel={this.firstAriaLabel}\n              label={this.firstLabel}\n              status={this.firstInputError && InputStatus.ERROR}\n              onStartTyping={() => {\n                this.firstInputError = false;\n              }}\n            />\n          </div>\n        </div>\n        <div class={`${this.rangePickerId}-2-wrapper`}>\n          <div class={`${this.rangePickerId}-2-container`}>\n            <z-input\n              {...zInputProps}\n              placeholder={this.lastPickerPlaceholder}\n              readonly={this.lastPickerReadOnly}\n              data-input=\"data-input\"\n              class={`end-input ${this.rangePickerId}-2`}\n              ariaLabel={this.secondAriaLabel}\n              label={this.secondLabel}\n              status={this.lastInputError && InputStatus.ERROR}\n              onStartTyping={() => {\n                this.lastInputError = false;\n              }}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm-es5/z-section-title.entry.js

@@ -0,0 +1,2 @@
+import{r as registerInstance,h,a as Host,g as getElement}from"./index-ab5f1eaa.js";import{y as ZSectionTitleDividerPosition,D as DividerSize}from"./index-2255c6c8.js";var stylesCss=':host{--z-section-title--divider-color:var(--red500);display:-ms-flexbox;display:flex;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;font-family:var(--font-family-sans)}:host,:host ::slotted(*){-webkit-box-sizing:border-box;box-sizing:border-box}::slotted(*){margin:0}::slotted([slot="secondary-title"]){padding-bottom:calc(var(--space-unit) / 2);border-bottom:var(--border-size-large) solid var(--z-section-title--divider-color);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5rem;text-transform:uppercase}::slotted([slot="primary-title"]){font-size:var(--font-size-6);font-weight:var(--font-sb);line-height:2rem}:host([uppercase]:not([uppercase="false"])) ::slotted([slot="primary-title"]){text-transform:uppercase}@media (min-width: 1152px){::slotted([slot="primary-title"]){font-size:var(--font-size-7);line-height:2.25rem}}';var ZSectionTitleStyle0=stylesCss;var ZSectionTitle=function(){function e(e){registerInstance(this,e);this.dividerPosition=ZSectionTitleDividerPosition.BEFORE;this.uppercase=true}e.prototype.componentWillRender=function(){this.hasSecondaryTitle=!!this.host.querySelector("[slot=secondary-title]")};e.prototype.render=function(){return h(Host,{key:"aae886e9941d8767af39a351671a7aaaf844176a"},h("slot",{key:"08a1466c1d96e8f2dc754d3566bc2567bfd26dfd",name:"secondary-title"}),!this.hasSecondaryTitle&&this.dividerPosition===ZSectionTitleDividerPosition.BEFORE&&h("z-divider",{key:"ab9e30f7c179c37482d84db65729a3fa78fd9e06",size:DividerSize.LARGE,color:"z-section-title--divider-color"}),h("slot",{key:"4cad003315cf3df2e0dd6a7391035fd8e056e8b0",name:"primary-title"}),!this.hasSecondaryTitle&&this.dividerPosition===ZSectionTitleDividerPosition.AFTER&&h("z-divider",{key:"6e99ca4877aba8c76e4484be6fced23aa5b8e165",size:DividerSize.LARGE,color:"z-section-title--divider-color"}))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();ZSectionTitle.style=ZSectionTitleStyle0;export{ZSectionTitle as z_section_title};
+//# sourceMappingURL=z-section-title.entry.js.map

package/dist/esm-es5/z-section-title.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZSectionTitleStyle0","ZSectionTitle","ZSectionTitleDividerPosition","BEFORE","prototype","componentWillRender","this","hasSecondaryTitle","host","querySelector","render","h","Host","key","name","dividerPosition","size","DividerSize","LARGE","color","AFTER"],"sources":["src/components/z-section-title/styles.css?tag=z-section-title&encapsulation=shadow","src/components/z-section-title/index.tsx"],"sourcesContent":[":host {\n  --z-section-title--divider-color: var(--red500);\n\n  display: flex;\n  width: fit-content;\n  flex-direction: column;\n  align-items: flex-start;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n:host ::slotted(*) {\n  box-sizing: border-box;\n}\n\n::slotted(*) {\n  margin: 0;\n}\n\n::slotted([slot=\"secondary-title\"]) {\n  padding-bottom: calc(var(--space-unit) / 2);\n  border-bottom: var(--border-size-large) solid var(--z-section-title--divider-color);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5rem;\n  text-transform: uppercase;\n}\n\n::slotted([slot=\"primary-title\"]) {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-sb);\n  line-height: 2rem;\n}\n\n:host([uppercase]:not([uppercase=\"false\"])) ::slotted([slot=\"primary-title\"]) {\n  text-transform: uppercase;\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  ::slotted([slot=\"primary-title\"]) {\n    font-size: var(--font-size-7);\n    line-height: 2.25rem;\n  }\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ZSectionTitleDividerPosition} from \"../../beans\";\n\n/**\n * Section title component.\n * An optional secondary title can be put over the primary one.\n *\n * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,\n * following its width and removing the one for the primary title.\n * @slot primary-title - Slot for the primary title.\n * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `\"--red500\"`. Default is `\"--red500\"`.\n */\n@Component({\n  tag: \"z-section-title\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSectionTitle {\n  /**\n   * Divider position for the primary title.\n   * This prop only works if the secondary title is not set.\n   */\n  @Prop()\n  dividerPosition: ZSectionTitleDividerPosition = ZSectionTitleDividerPosition.BEFORE;\n\n  /**\n   * Whether the primary title text is uppercase.\n   */\n  @Prop({reflect: true})\n  uppercase = true;\n\n  @Element() host: HTMLZSectionTitleElement;\n\n  private hasSecondaryTitle: boolean;\n\n  componentWillRender(): void {\n    this.hasSecondaryTitle = !!this.host.querySelector(\"[slot=secondary-title]\");\n  }\n\n  render(): HTMLZSectionTitleElement {\n    return (\n      <Host>\n        <slot name=\"secondary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n        <slot name=\"primary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"uKAAA,IAAMA,UAAY,s8BAClB,IAAAC,oBAAeD,U,ICgBFE,cAAa,W,4DAMwBC,6BAA6BC,O,eAMjE,I,CAMZF,EAAAG,UAAAC,oBAAA,WACEC,KAAKC,oBAAsBD,KAAKE,KAAKC,cAAc,yB,EAGrDR,EAAAG,UAAAM,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,qBACTR,KAAKC,mBAAqBD,KAAKS,kBAAoBb,6BAA6BC,QAChFQ,EAAA,aAAAE,IAAA,2CACEG,KAAMC,YAAYC,MAClBC,MAAM,mCAGVR,EAAA,QAAAE,IAAA,2CAAMC,KAAK,mBACTR,KAAKC,mBAAqBD,KAAKS,kBAAoBb,6BAA6BkB,OAChFT,EAAA,aAAAE,IAAA,2CACEG,KAAMC,YAAYC,MAClBC,MAAM,mC,kIApCQ,G","ignoreList":[]}

package/dist/esm-es5/z-select.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(e,t,s,i){function r(e){return e instanceof s?e:new s((function(t){t(e)}))}return new(s||(s=Promise))((function(s,n){function c(e){try{a(i.next(e))}catch(e){n(e)}}function l(e){try{a(i["throw"](e))}catch(e){n(e)}}function a(e){e.done?s(e.value):r(e.value).then(c,l)}a((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var s={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},i,r,n,c;return c={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(c[Symbol.iterator]=function(){return this}),c;function l(e){return function(t){return a([e,t])}}function a(l){if(i)throw new TypeError("Generator is already executing.");while(c&&(c=0,l[0]&&(s=0)),s)try{if(i=1,r&&(n=l[0]&2?r["return"]:l[0]?r["throw"]||((n=r["return"])&&n.call(r),0):r.next)&&!(n=n.call(r,l[1])).done)return n;if(r=0,n)l=[l[0]&2,n.value];switch(l[0]){case 0:case 1:n=l;break;case 4:s.label++;return{value:l[1],done:false};case 5:s.label++;r=l[1];l=[0];continue;case 7:l=s.ops.pop();s.trys.pop();continue;default:if(!(n=s.trys,n=n.length>0&&n[n.length-1])&&(l[0]===6||l[0]===2)){s=0;continue}if(l[0]===3&&(!n||l[1]>n[0]&&l[1]<n[3])){s.label=l[1];break}if(l[0]===6&&s.label<n[1]){s.label=n[1];n=l;break}if(n&&s.label<n[2]){s.label=n[2];s.ops.push(l);break}if(n[2])s.ops.pop();s.trys.pop();continue}l=t.call(e,s)}catch(e){l=[6,e];r=0}finally{i=n=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-ab5f1eaa.js";import{e as ControlSize,g as KeyboardCode,l as ListDividerType,i as ListSize}from"./index-2255c6c8.js";import{r as randomId,b as boolean,d as getElementTree,a as handleKeyboardSubmit,e as getClickedElement}from"./utils-7983d02c.js";import"./breakpoints-680e0e56.js";var stylesCss='.sc-z-select-h{display:inline-block;width:inherit;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}[size="small"].sc-z-select-h,[size="x-small"].sc-z-select-h{font-size:var(--font-size-2)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:calc(var(--space-unit) * 0.5) var(--space-unit);border:var(--border-size-small) solid var(--gray200);border-top:none;background:var(--color-surface01);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.fixed.sc-z-select{position:static}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:calc(var(--space-unit) * 0.5);outline:none;scrollbar-color:var(--color-primary01) transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-track{background-color:transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:calc(var(--space-unit) * 1.5)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{display:block;padding:calc(var(--space-unit) * 0.5) 0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{display:block;padding:calc(var(--space-unit) * 0.5) var(--space-unit)}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{padding:0}[size="small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:16px;--z-icon-height:16px}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:14px;--z-icon-height:14px}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:0 var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.selected.sc-z-select{font-weight:bold}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}.z-list-group-title.sc-z-select{color:var(--gray800)}.reset-item.sc-z-select{color:var(--color-primary01);fill:var(--color-primary01)}.reset-item-content.sc-z-select{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.reset-item.reset-item-margin.sc-z-select .reset-item-content.sc-z-select{margin-left:calc(var(--space-unit))}.reset-item.sc-z-select .reset-item-content.sc-z-select>z-icon.sc-z-select{margin-right:var(--space-unit)}.reset-item.hide.sc-z-select{display:none}';var ZSelectStyle0=stylesCss;var ZSelect=function(){function e(e){registerInstance(this,e);this.optionSelect=createEvent(this,"optionSelect",7);this.resetSelect=createEvent(this,"resetSelect",7);this.itemsList=[];this.htmlid="id-".concat(randomId());this.items=undefined;this.name=undefined;this.label=undefined;this.ariaLabel="";this.disabled=false;this.readonly=false;this.placeholder=undefined;this.htmltitle=undefined;this.status=undefined;this.message=true;this.autocomplete=false;this.noresultslabel="Nessun risultato";this.hasGroupItems=undefined;this.isfixed=false;this.resetItem=undefined;this.size=ControlSize.BIG;this.isOpen=false;this.selectedItem=null;this.focusedItemId=undefined;this.searchString=undefined;this.toggleSelectUl=this.toggleSelectUl.bind(this);this.selectItem=this.selectItem.bind(this);this.handleSelectFocus=this.handleSelectFocus.bind(this)}e.prototype.watchItems=function(){this.itemsList=this.getInitialItemsArray();this.selectedItem=this.itemsList.find((function(e){return e.selected}))};e.prototype.getFocusedItemHandler=function(e){this.focusedItemId=e.target.id};e.prototype.getSelectedItem=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this.selectedItem]}))}))};e.prototype.getValue=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this.getSelectedValue()]}))}))};e.prototype.setValue=function(e){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(s){t=[];if(typeof e==="string"){t.push(e)}else{t=e}this.selectedItem=this.itemsList.find((function(e){return t.includes(e.id)}));return[2]}))}))};e.prototype.emitOptionSelect=function(){this.optionSelect.emit({id:this.htmlid,selected:this.getSelectedValue()})};e.prototype.emitResetSelect=function(){this.resetSelect.emit({id:this.htmlid})};e.prototype.componentWillLoad=function(){this.watchItems()};e.prototype.componentWillRender=function(){this.filterItems(this.searchString)};e.prototype.getInitialItemsArray=function(){return typeof this.items==="string"?JSON.parse(this.items):this.items};e.prototype.mapSelectedItemToItemsArray=function(){var e=this;var t=this.getInitialItemsArray();return t.map((function(t){var s;t.selected=t.id===((s=e.selectedItem)===null||s===void 0?void 0:s.id);return t}))};e.prototype.getSelectedValue=function(){var e;return(e=this.selectedItem)===null||e===void 0?void 0:e.id};e.prototype.filterItems=function(e){var t=this.mapSelectedItemToItemsArray();if(!(e===null||e===void 0?void 0:e.length)){this.itemsList=t}else{this.itemsList=t.filter((function(t){return t.name.toUpperCase().includes(e.toUpperCase())})).map((function(t){var s=t.name.toUpperCase().indexOf(e.toUpperCase());var i=s+e.length;var r=t.name.substring(0,s)+"<strong>".concat(t.name.substring(s,i),"</strong>")+t.name.substring(i,t.name.length);t.name=r;return t}))}};e.prototype.hasAutocomplete=function(){return boolean(this.autocomplete)===true};e.prototype.handleInputChange=function(e){this.searchString=e.detail.value;if(!this.isOpen){this.toggleSelectUl()}};e.prototype.selectItem=function(e,t){if(e&&e.disabled){return}this.itemsList=this.mapSelectedItemToItemsArray();this.itemsList=this.itemsList.map((function(s){s.selected=false;if(s.id===(e===null||e===void 0?void 0:e.id)){s.selected=t}return s}));this.selectedItem=this.itemsList.find((function(e){return e.selected}));this.emitOptionSelect();if(this.searchString){this.searchString=null}};e.prototype.arrowsSelectNav=function(e,t){var s=this.resetItem&&!!this.selectedItem;var i=[KeyboardCode.ARROW_DOWN,KeyboardCode.ARROW_UP];if(!i.includes(e.key)){return}e.preventDefault();e.stopPropagation();if(!this.isOpen){this.toggleSelectUl()}var r;if(this.resetItem){if(e.key===KeyboardCode.ARROW_DOWN){r=t+1===this.itemsList.length+1?+!s:t+1}else if(e.key===KeyboardCode.ARROW_UP){r=t<=+!s?this.itemsList.length:t-1}}if(!this.resetItem){if(e.key===KeyboardCode.ARROW_DOWN){r=t+1===this.itemsList.length?0:t+1}else if(e.key===KeyboardCode.ARROW_UP){r=t<=0?this.itemsList.length-1:t-1}}this.focusSelectItem(r)};e.prototype.focusSelectItem=function(e){var t=this.element.querySelector("#".concat(this.htmlid,"_").concat(e));if(t){t.focus()}};e.prototype.toggleSelectUl=function(e){if(e===void 0){e=false}if(this.disabled||this.readonly){return}if(!this.isOpen){document.addEventListener("click",this.handleSelectFocus);document.addEventListener("keyup",this.handleSelectFocus)}else{document.removeEventListener("click",this.handleSelectFocus);document.removeEventListener("keyup",this.handleSelectFocus);if(e){this.element.querySelector("#".concat(this.htmlid,"_input")).focus()}}this.focusedItemId="";this.isOpen=!this.isOpen};e.prototype.handleInputClick=function(e){var t=e.composedPath();var s=t.find((function(e){return e.classList&&e.classList.contains("reset-icon")}));if(s){e.stopPropagation();return}this.toggleSelectUl()};e.prototype.handleSelectFocus=function(e){var t=this;if(e instanceof KeyboardEvent&&e.key===KeyboardCode.ESC){e.stopPropagation();return this.toggleSelectUl(true)}if(e instanceof KeyboardEvent&&e.key!==KeyboardCode.TAB&&e.key!==KeyboardCode.ENTER){return}var s=getElementTree(getClickedElement());var i=s.find((function(e){return e.nodeName.toLowerCase()==="z-input"&&e.id==="".concat(t.htmlid,"_input")}));if(!i){this.toggleSelectUl(e instanceof MouseEvent?true:false)}};e.prototype.scrollToLetter=function(e){var t=this.itemsList.find((function(t){return t.name.charAt(0)===e}));if(t){this.focusSelectItem(this.itemsList.indexOf(t))}};e.prototype.renderInput=function(){var e=this;return h("z-input",{class:{"active-select":this.isOpen,"cursor-select":!this.autocomplete},id:"".concat(this.htmlid,"_input"),htmlid:"".concat(this.htmlid,"_select_input"),placeholder:this.placeholder,value:!this.isOpen&&this.selectedItem?this.selectedItem.name.replace(/<[^>]+>/g,""):null,label:this.label,"aria-expanded":this.isOpen?"true":"false","aria-label":this.ariaLabel,"aria-controls":"".concat(this.htmlid,"_list"),"aria-autocomplete":this.hasAutocomplete()?"list":"none","aria-activedescendant":this.isOpen?this.focusedItemId:"",icon:this.isOpen?"caret-up":"caret-down",hasclearicon:this.hasAutocomplete(),message:false,disabled:this.disabled,readonly:this.readonly||!this.hasAutocomplete()&&this.isOpen,status:this.isOpen?undefined:this.status,role:"combobox",size:this.size,onClick:function(t){e.handleInputClick(t)},onKeyUp:function(t){if(t.keyCode!==13){t.preventDefault()}handleKeyboardSubmit(t,e.toggleSelectUl)},onKeyDown:function(t){return e.arrowsSelectNav(t,e.selectedItem?e.itemsList.indexOf(e.selectedItem):e.resetItem?0:-1)},onInputChange:function(t){e.handleInputChange(t)},onKeyPress:function(t){if(!e.hasAutocomplete()){t.preventDefault();e.scrollToLetter(String.fromCharCode(t.keyCode))}}})};e.prototype.renderSelectUl=function(){var e;return h("div",{class:this.isOpen?"open":"closed",tabindex:"-1"},h("div",{class:{"ul-scroll-wrapper":true,fixed:this.isfixed},tabindex:"-1"},h("z-list",{role:"listbox","aria-label":this.ariaLabel||this.label,tabindex:this.disabled||this.readonly||!this.isOpen?-1:0,id:"".concat(this.htmlid,"_list"),"aria-multiselectable":false,size:this.listSizeType(),class:(e={disabled:this.disabled,readonly:this.readonly,filled:!!this.selectedItem},e["input-".concat(this.status)]=!this.isOpen&&!!this.status,e)},this.resetItem&&this.renderResetItem(),this.renderSelectUlItems())))};e.prototype.renderResetItem=function(){var e=this;return h("z-list-element",{class:{hide:!this.selectedItem||!this.resetItem,"reset-item":true,"reset-item-margin":!this.hasGroupItems},clickable:true,disabled:false,dividerType:ListDividerType.ELEMENT,role:"option",tabindex:"0","aria-selected":"false",id:"".concat(this.htmlid,"_").concat(this.resetItem?"0":"none"),size:this.listSizeType(),onClickItem:function(){e.selectedItem=null;e.searchString=null;e.emitResetSelect()},onKeyDown:function(t){return e.arrowsSelectNav(t,0)}},h("div",{class:"reset-item-content"},h("z-icon",{name:"multiply-circled"}),h("span",null,this.resetItem)))};e.prototype.renderItem=function(e,t,s){var i=this;return h("z-list-element",{clickable:!e.disabled,disabled:e.disabled,dividerType:s?ListDividerType.HEADER:ListDividerType.ELEMENT,role:"option",tabindex:e.disabled||!this.isOpen?-1:0,"aria-selected":e.selected?"true":"false",id:"".concat(this.htmlid,"_").concat(t),size:this.listSizeType(),onClickItem:function(){return i.selectItem(e,true)},onKeyDown:function(e){return i.arrowsSelectNav(e,t)}},h("div",{class:"list-element-container"},e.icon&&h("z-icon",{name:e.icon}),h("span",{class:{selected:!!e.selected,"list-element-content":true},innerHTML:e.name})))};e.prototype.listSizeType=function(){if(this.size===ControlSize.SMALL||this.size===ControlSize.X_SMALL){return ListSize.SMALL}return ListSize.MEDIUM};e.prototype.renderSelectUlItems=function(){var e=this;if(!this.itemsList.length){return this.renderNoSearchResults()}if(this.hasGroupItems){return this.renderSelectGroupItems()}return this.itemsList.map((function(t,s,i){var r=i.length===s+1;var n=e.resetItem?s+1:s;return e.renderItem(t,n,r)}))};e.prototype.renderSelectGroupItems=function(){var e=this;var t=this.itemsList.reduce((function(t,s,i,r){var n;var c=s.category;var l=r.length===i+1;var a=e.resetItem?i+1:i;var o=e.renderItem(s,a,l);t[c]=(n=t[c])!==null&&n!==void 0?n:[];t[c].push(o);return t}),{});return Object.entries(t).map((function(e){var t=e[0],s=e[1];return h("z-list-group",{"divider-type":ListDividerType.ELEMENT},h("span",{class:"body-3-sb z-list-group-title",slot:"header-title"},t),s.map((function(e){return e})))}))};e.prototype.renderNoSearchResults=function(){return h("z-list-element",{color:"blue500",class:"no-results",size:this.listSizeType()},h("z-icon",{name:"multiply-circle",fill:"blue500"}),this.noresultslabel)};e.prototype.renderMessage=function(){if(boolean(this.message)===false){return}return h("z-input-message",{message:boolean(this.message)===true?undefined:this.message,status:this.status,class:this.size})};e.prototype.render=function(){return h("div",{key:"9746ad38f69cb9f568cd1ef2e36937ae0f13bfed",class:"select-wrapper"},this.renderInput(),this.renderSelectUl(),this.renderMessage())};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{items:["watchItems"]}},enumerable:false,configurable:true});return e}();ZSelect.style=ZSelectStyle0;export{ZSelect as z_select};
+//# sourceMappingURL=z-select.entry.js.map

package/dist/esm-es5/z-select.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZSelectStyle0","ZSelect","class_1","hostRef","this","itemsList","concat","randomId","ControlSize","BIG","toggleSelectUl","bind","selectItem","handleSelectFocus","prototype","watchItems","getInitialItemsArray","selectedItem","find","item","selected","getFocusedItemHandler","e","focusedItemId","target","id","getSelectedItem","getValue","getSelectedValue","setValue","value","values","push","includes","emitOptionSelect","optionSelect","emit","htmlid","emitResetSelect","resetSelect","componentWillLoad","componentWillRender","filterItems","searchString","items","JSON","parse","mapSelectedItemToItemsArray","_this","initialItemsList","map","_a","prevList","length","filter","name","toUpperCase","start","indexOf","end","newName","substring","hasAutocomplete","boolean","autocomplete","handleInputChange","detail","isOpen","disabled","i","arrowsSelectNav","key","showResetIcon","resetItem","arrows","KeyboardCode","ARROW_DOWN","ARROW_UP","preventDefault","stopPropagation","index","focusSelectItem","focusElem","element","querySelector","focus","selfFocusOnClose","readonly","document","addEventListener","removeEventListener","handleInputClick","cp","composedPath","clearIcon","classList","contains","KeyboardEvent","ESC","TAB","ENTER","tree","getElementTree","getClickedElement","parent","elem","nodeName","toLowerCase","MouseEvent","scrollToLetter","letter","foundItem","charAt","renderInput","h","class","placeholder","replace","label","ariaLabel","icon","hasclearicon","message","status","undefined","role","size","onClick","onKeyUp","keyCode","handleKeyboardSubmit","onKeyDown","onInputChange","onKeyPress","String","fromCharCode","renderSelectUl","tabindex","fixed","isfixed","listSizeType","_b","filled","renderResetItem","renderSelectUlItems","hide","hasGroupItems","clickable","dividerType","ListDividerType","ELEMENT","onClickItem","renderItem","lastItem","HEADER","innerHTML","SMALL","X_SMALL","ListSize","MEDIUM","renderNoSearchResults","renderSelectGroupItems","array","itemKey","newData","reduce","group","category","zListItem","Object","entries","slot","color","fill","noresultslabel","renderMessage","render"],"sources":["src/components/z-select/styles.css?tag=z-select&encapsulation=scoped","src/components/z-select/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: inherit;\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n}\n\n:host([size=\"small\"]),\n:host([size=\"x-small\"]) {\n  font-size: var(--font-size-2);\n}\n\n.select-wrapper > z-input {\n  width: 100%;\n}\n\n.select-wrapper > div {\n  position: relative;\n}\n\n.select-wrapper > div.closed {\n  overflow: hidden;\n  height: 0;\n}\n\n.select-wrapper .ul-scroll-wrapper {\n  position: absolute;\n  width: 100%;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 0.5) var(--space-unit);\n  border: var(--border-size-small) solid var(--gray200);\n  border-top: none;\n  background: var(--color-surface01);\n  outline: none;\n}\n\n.select-wrapper .closed .ul-scroll-wrapper {\n  z-index: 10;\n}\n\n.select-wrapper .open .ul-scroll-wrapper {\n  z-index: 20;\n}\n\n.select-wrapper .ul-scroll-wrapper.fixed {\n  position: static;\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list {\n  position: relative;\n  overflow: auto;\n  max-height: 240px;\n  padding: calc(var(--space-unit) * 0.5);\n  outline: none;\n\n  /* Firefox scrollbar */\n  scrollbar-color: var(--color-primary01) transparent;\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar {\n  width: 10px;\n  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n  border-radius: var(--border-radius);\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-thumb {\n  width: 10px;\n  background-color: var(--color-primary01);\n  border-radius: var(--border-radius);\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container {\n  display: flex;\n  align-items: center;\n  padding-left: calc(var(--space-unit) * 1.5);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content {\n  display: block;\n  padding: calc(var(--space-unit) * 0.5) 0;\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon + .list-element-content {\n  display: block;\n  padding: calc(var(--space-unit) * 0.5) var(--space-unit);\n}\n\n:host([size=\"x-small\"])\n  .select-wrapper\n  .ul-scroll-wrapper\n  z-list\n  z-list-element\n  .list-element-container\n  .list-element-content {\n  padding: 0;\n}\n\n:host([size=\"small\"]) .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n:host([size=\"x-small\"]) .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n:host([size=\"x-small\"])\n  .select-wrapper\n  .ul-scroll-wrapper\n  z-list\n  z-list-element\n  .list-element-container\n  > z-icon\n  + .list-element-content {\n  padding: 0 var(--space-unit);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content.selected {\n  font-weight: bold;\n}\n\n.select-wrapper .ul-scroll-wrapper .no-results z-icon {\n  margin-right: var(--space-unit);\n}\n\n.z-list-group-title {\n  color: var(--gray800);\n}\n\n.reset-item {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\n.reset-item-content {\n  display: flex;\n  align-items: center;\n}\n\n.reset-item.reset-item-margin .reset-item-content {\n  margin-left: calc(var(--space-unit));\n}\n\n.reset-item .reset-item-content > z-icon {\n  margin-right: var(--space-unit);\n}\n\n.reset-item.hide {\n  display: none;\n}\n","import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InputStatus, KeyboardCode, ListDividerType, ListSize, SelectItem} from \"../../beans\";\nimport {boolean, getClickedElement, getElementTree, handleKeyboardSubmit, randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-select\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZSelect {\n  @Element() element: HTMLZSelectElement;\n\n  /** the id of the input element */\n  @Prop()\n  htmlid = `id-${randomId()}`;\n\n  /** the input select options */\n  @Prop()\n  items: SelectItem[] | string;\n\n  /** the input name */\n  @Prop()\n  name?: string;\n\n  /** the input label */\n  @Prop()\n  label?: string;\n\n  /** the input aria-label */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** the input is disabled */\n  @Prop()\n  disabled?: boolean = false;\n\n  /** the input is readonly */\n  @Prop()\n  readonly?: boolean = false;\n\n  /** the input placeholder (optional) */\n  @Prop()\n  placeholder?: string;\n\n  /** the input html title (optional) */\n  @Prop()\n  htmltitle?: string;\n\n  /** the input status (optional) */\n  @Prop()\n  status?: InputStatus;\n\n  /** input helper message (optional) - if set to `false` message won't be displayed */\n  @Prop()\n  message?: string | boolean = true;\n\n  /** the input has autocomplete option */\n  @Prop()\n  autocomplete?: boolean = false;\n\n  /** no result text message */\n  @Prop()\n  noresultslabel?: string = \"Nessun risultato\";\n\n  /** */\n  @Prop()\n  hasGroupItems?: boolean;\n\n  /** When fixed, it occupies space and pushes down next elements. */\n  @Prop()\n  isfixed?: boolean = false;\n\n  /** */\n  @Prop()\n  resetItem?: string;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  isOpen = false;\n\n  @State()\n  selectedItem: null | SelectItem = null;\n\n  @State()\n  focusedItemId: string;\n\n  @State()\n  searchString: null | string;\n\n  private itemsList: SelectItem[] = [];\n\n  constructor() {\n    this.toggleSelectUl = this.toggleSelectUl.bind(this);\n    this.selectItem = this.selectItem.bind(this);\n    this.handleSelectFocus = this.handleSelectFocus.bind(this);\n  }\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.itemsList = this.getInitialItemsArray();\n    this.selectedItem = this.itemsList.find((item: SelectItem) => item.selected);\n  }\n\n  @Listen(\"ariaDescendantFocus\")\n  getFocusedItemHandler(e: CustomEvent): void {\n    this.focusedItemId = (e.target as Element).id;\n  }\n\n  /** get the input selected options */\n  @Method()\n  async getSelectedItem(): Promise<SelectItem> {\n    return this.selectedItem;\n  }\n\n  /** get the input value */\n  @Method()\n  async getValue(): Promise<string> {\n    return this.getSelectedValue();\n  }\n\n  /** set the input value */\n  @Method()\n  async setValue(value: string | string[]): Promise<void> {\n    let values: string[] = [];\n    if (typeof value === \"string\") {\n      values.push(value);\n    } else {\n      values = value;\n    }\n\n    this.selectedItem = this.itemsList.find((item: SelectItem) => values.includes(item.id));\n  }\n\n  /** Emitted on select option selection, returns select id, selected item id */\n  @Event()\n  optionSelect: EventEmitter;\n\n  private emitOptionSelect(): void {\n    this.optionSelect.emit({\n      id: this.htmlid,\n      selected: this.getSelectedValue(),\n    });\n  }\n\n  /** Emitted on reset selected item, returns select id, selected item id */\n  @Event()\n  resetSelect: EventEmitter;\n\n  private emitResetSelect(): void {\n    this.resetSelect.emit({\n      id: this.htmlid,\n    });\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  componentWillRender(): void {\n    this.filterItems(this.searchString);\n  }\n\n  private getInitialItemsArray(): SelectItem[] {\n    return typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n  }\n\n  private mapSelectedItemToItemsArray(): SelectItem[] {\n    const initialItemsList = this.getInitialItemsArray();\n\n    return initialItemsList.map((item: SelectItem) => {\n      item.selected = item.id === this.selectedItem?.id;\n\n      return item;\n    });\n  }\n\n  private getSelectedValue(): string {\n    return this.selectedItem?.id;\n  }\n\n  private filterItems(searchString: string): void {\n    const prevList = this.mapSelectedItemToItemsArray();\n    if (!searchString?.length) {\n      this.itemsList = prevList;\n    } else {\n      this.itemsList = prevList\n        .filter((item: SelectItem) => {\n          return item.name.toUpperCase().includes(searchString.toUpperCase());\n        })\n        .map((item: SelectItem) => {\n          const start = item.name.toUpperCase().indexOf(searchString.toUpperCase());\n          const end = start + searchString.length;\n          const newName =\n            item.name.substring(0, start) +\n            `<strong>${item.name.substring(start, end)}</strong>` +\n            item.name.substring(end, item.name.length);\n          item.name = newName;\n\n          return item;\n        });\n    }\n  }\n\n  private hasAutocomplete(): boolean {\n    return boolean(this.autocomplete) === true;\n  }\n\n  private handleInputChange(e: CustomEvent): void {\n    this.searchString = e.detail.value;\n    if (!this.isOpen) {\n      this.toggleSelectUl();\n    }\n  }\n\n  private selectItem(item: null | SelectItem, selected: boolean): void {\n    if (item && item.disabled) {\n      return;\n    }\n\n    this.itemsList = this.mapSelectedItemToItemsArray();\n    this.itemsList = this.itemsList.map((i: SelectItem) => {\n      i.selected = false;\n      if (i.id === item?.id) {\n        i.selected = selected;\n      }\n\n      return i;\n    });\n\n    this.selectedItem = this.itemsList.find((item: SelectItem) => item.selected);\n\n    this.emitOptionSelect();\n\n    if (this.searchString) {\n      this.searchString = null;\n    }\n  }\n\n  private arrowsSelectNav(e: KeyboardEvent, key: number): void {\n    const showResetIcon = this.resetItem && !!this.selectedItem;\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (!arrows.includes(e.key as KeyboardCode)) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (!this.isOpen) {\n      this.toggleSelectUl();\n    }\n\n    let index: number;\n\n    if (this.resetItem) {\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        index = key + 1 === this.itemsList.length + 1 ? +!showResetIcon : key + 1;\n      } else if (e.key === KeyboardCode.ARROW_UP) {\n        index = key <= +!showResetIcon ? this.itemsList.length : key - 1;\n      }\n    }\n\n    if (!this.resetItem) {\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        index = key + 1 === this.itemsList.length ? 0 : key + 1;\n      } else if (e.key === KeyboardCode.ARROW_UP) {\n        index = key <= 0 ? this.itemsList.length - 1 : key - 1;\n      }\n    }\n\n    this.focusSelectItem(index);\n  }\n\n  private focusSelectItem(index: number): void {\n    const focusElem: HTMLLIElement = this.element.querySelector(`#${this.htmlid}_${index}`);\n    if (focusElem) {\n      focusElem.focus();\n    }\n  }\n\n  private toggleSelectUl(selfFocusOnClose = false): void {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (!this.isOpen) {\n      document.addEventListener(\"click\", this.handleSelectFocus);\n      document.addEventListener(\"keyup\", this.handleSelectFocus);\n    } else {\n      document.removeEventListener(\"click\", this.handleSelectFocus);\n      document.removeEventListener(\"keyup\", this.handleSelectFocus);\n      if (selfFocusOnClose) {\n        (this.element.querySelector(`#${this.htmlid}_input`) as HTMLInputElement).focus();\n      }\n    }\n\n    this.focusedItemId = \"\";\n    this.isOpen = !this.isOpen;\n  }\n\n  private handleInputClick(e: MouseEvent | KeyboardEvent): void {\n    const cp = e.composedPath();\n    const clearIcon = cp.find((item: HTMLElement) => item.classList && item.classList.contains(\"reset-icon\"));\n    if (clearIcon) {\n      e.stopPropagation();\n\n      return;\n    }\n\n    this.toggleSelectUl();\n  }\n\n  private handleSelectFocus(e: MouseEvent | KeyboardEvent): void {\n    if (e instanceof KeyboardEvent && e.key === KeyboardCode.ESC) {\n      e.stopPropagation();\n\n      return this.toggleSelectUl(true);\n    }\n\n    if (e instanceof KeyboardEvent && e.key !== KeyboardCode.TAB && e.key !== KeyboardCode.ENTER) {\n      return;\n    }\n\n    const tree = getElementTree(getClickedElement());\n    const parent = tree.find((elem: HTMLElement) => {\n      return elem.nodeName.toLowerCase() === \"z-input\" && elem.id === `${this.htmlid}_input`;\n    });\n\n    if (!parent) {\n      this.toggleSelectUl(e instanceof MouseEvent ? true : false);\n    }\n  }\n\n  private scrollToLetter(letter: string): void {\n    const foundItem = this.itemsList.find((item: SelectItem) => item.name.charAt(0) === letter);\n    if (foundItem) {\n      this.focusSelectItem(this.itemsList.indexOf(foundItem));\n    }\n  }\n\n  private renderInput(): HTMLZInputElement {\n    return (\n      <z-input\n        class={{\n          \"active-select\": this.isOpen,\n          \"cursor-select\": !this.autocomplete,\n        }}\n        id={`${this.htmlid}_input`}\n        htmlid={`${this.htmlid}_select_input`}\n        placeholder={this.placeholder}\n        value={!this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, \"\") : null}\n        label={this.label}\n        aria-expanded={this.isOpen ? \"true\" : \"false\"}\n        aria-label={this.ariaLabel}\n        aria-controls={`${this.htmlid}_list`}\n        aria-autocomplete={this.hasAutocomplete() ? \"list\" : \"none\"}\n        aria-activedescendant={this.isOpen ? this.focusedItemId : \"\"}\n        icon={this.isOpen ? \"caret-up\" : \"caret-down\"}\n        hasclearicon={this.hasAutocomplete()}\n        message={false}\n        disabled={this.disabled}\n        readonly={this.readonly || (!this.hasAutocomplete() && this.isOpen)}\n        status={this.isOpen ? undefined : this.status}\n        role=\"combobox\"\n        size={this.size}\n        onClick={(e: MouseEvent) => {\n          this.handleInputClick(e);\n        }}\n        onKeyUp={(e: KeyboardEvent) => {\n          if (e.keyCode !== 13) {\n            e.preventDefault();\n          }\n          handleKeyboardSubmit(e, this.toggleSelectUl);\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          return this.arrowsSelectNav(\n            e,\n            this.selectedItem ? this.itemsList.indexOf(this.selectedItem) : this.resetItem ? 0 : -1\n          );\n        }}\n        onInputChange={(e: CustomEvent) => {\n          this.handleInputChange(e);\n        }}\n        onKeyPress={(e: KeyboardEvent) => {\n          if (!this.hasAutocomplete()) {\n            e.preventDefault();\n            this.scrollToLetter(String.fromCharCode(e.keyCode));\n          }\n        }}\n      />\n    );\n  }\n\n  private renderSelectUl(): HTMLDivElement {\n    return (\n      <div\n        class={this.isOpen ? \"open\" : \"closed\"}\n        tabindex=\"-1\"\n      >\n        <div\n          class={{\n            \"ul-scroll-wrapper\": true,\n            \"fixed\": this.isfixed,\n          }}\n          tabindex=\"-1\"\n        >\n          <z-list\n            role=\"listbox\"\n            aria-label={this.ariaLabel || this.label}\n            tabindex={this.disabled || this.readonly || !this.isOpen ? -1 : 0}\n            id={`${this.htmlid}_list`}\n            aria-multiselectable={false}\n            size={this.listSizeType()}\n            class={{\n              disabled: this.disabled,\n              readonly: this.readonly,\n              filled: !!this.selectedItem,\n              [`input-${this.status}`]: !this.isOpen && !!this.status,\n            }}\n          >\n            {this.resetItem && this.renderResetItem()}\n            {this.renderSelectUlItems()}\n          </z-list>\n        </div>\n      </div>\n    );\n  }\n\n  private renderResetItem(): HTMLZListElementElement {\n    return (\n      <z-list-element\n        class={{\n          \"hide\": !this.selectedItem || !this.resetItem,\n          \"reset-item\": true,\n          \"reset-item-margin\": !this.hasGroupItems,\n        }}\n        clickable={true}\n        disabled={false}\n        dividerType={ListDividerType.ELEMENT}\n        role=\"option\"\n        tabindex=\"0\"\n        aria-selected=\"false\"\n        id={`${this.htmlid}_${this.resetItem ? \"0\" : \"none\"}`}\n        size={this.listSizeType()}\n        onClickItem={() => {\n          this.selectedItem = null;\n          this.searchString = null;\n          this.emitResetSelect();\n        }}\n        onKeyDown={(e: KeyboardEvent) => this.arrowsSelectNav(e, 0)}\n      >\n        <div class=\"reset-item-content\">\n          <z-icon name=\"multiply-circled\" />\n          <span>{this.resetItem}</span>\n        </div>\n      </z-list-element>\n    );\n  }\n\n  private renderItem(item: SelectItem, key: number, lastItem: boolean): HTMLZListElementElement {\n    return (\n      <z-list-element\n        clickable={!item.disabled}\n        disabled={item.disabled}\n        dividerType={lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT}\n        role=\"option\"\n        tabindex={item.disabled || !this.isOpen ? -1 : 0}\n        aria-selected={item.selected ? \"true\" : \"false\"}\n        id={`${this.htmlid}_${key}`}\n        size={this.listSizeType()}\n        onClickItem={() => this.selectItem(item, true)}\n        onKeyDown={(e: KeyboardEvent) => this.arrowsSelectNav(e, key)}\n      >\n        <div class=\"list-element-container\">\n          {item.icon && <z-icon name={item.icon} />}\n          <span\n            class={{\n              \"selected\": !!item.selected,\n              \"list-element-content\": true,\n            }}\n            innerHTML={item.name}\n          />\n        </div>\n      </z-list-element>\n    );\n  }\n\n  private listSizeType(): ListSize {\n    if (this.size === ControlSize.SMALL || this.size === ControlSize.X_SMALL) {\n      return ListSize.SMALL;\n    }\n\n    return ListSize.MEDIUM;\n  }\n\n  private renderSelectUlItems(): HTMLZListElementElement | HTMLZListElementElement[] {\n    if (!this.itemsList.length) {\n      return this.renderNoSearchResults();\n    }\n\n    if (this.hasGroupItems) {\n      return this.renderSelectGroupItems();\n    }\n\n    return this.itemsList.map((item: SelectItem, key, array) => {\n      const lastItem = array.length === key + 1;\n      const itemKey = this.resetItem ? key + 1 : key;\n\n      return this.renderItem(item, itemKey, lastItem);\n    });\n  }\n\n  private renderSelectGroupItems(): HTMLZListElementElement | HTMLZListElementElement[] {\n    const newData = this.itemsList.reduce((group, item, index, array) => {\n      const {category} = item;\n      const lastItem = array.length === index + 1;\n      const itemKey = this.resetItem ? index + 1 : index;\n      const zListItem = this.renderItem(item, itemKey, lastItem);\n\n      group[category] = group[category] ?? [];\n      group[category].push(zListItem);\n\n      return group;\n    }, {});\n\n    return Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n      return (\n        <z-list-group divider-type={ListDividerType.ELEMENT}>\n          <span\n            class=\"body-3-sb z-list-group-title\"\n            slot=\"header-title\"\n          >\n            {key}\n          </span>\n          {value.map((item) => item)}\n        </z-list-group>\n      );\n    });\n  }\n\n  private renderNoSearchResults(): HTMLZListElementElement {\n    return (\n      <z-list-element\n        color=\"blue500\"\n        class=\"no-results\"\n        size={this.listSizeType()}\n      >\n        <z-icon\n          name=\"multiply-circle\"\n          fill=\"blue500\"\n        />\n        {this.noresultslabel}\n      </z-list-element>\n    );\n  }\n\n  private renderMessage(): HTMLZInputMessageElement {\n    if (boolean(this.message) === false) {\n      return;\n    }\n\n    return (\n      <z-input-message\n        message={boolean(this.message) === true ? undefined : (this.message as string)}\n        status={this.status}\n        class={this.size}\n      />\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"select-wrapper\">\n        {this.renderInput()}\n        {this.renderSelectUl()}\n        {this.renderMessage()}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm-es5/z-skip-to-content.entry.js

@@ -0,0 +1,2 @@
+import{r as registerInstance,h,a as Host,g as getElement}from"./index-ab5f1eaa.js";import{T as ThemeVariant}from"./index-2255c6c8.js";import{d as getElementTree,a as handleKeyboardSubmit}from"./utils-7983d02c.js";import"./breakpoints-680e0e56.js";var stylesCss=".sc-z-skip-to-content-h{position:absolute;left:-100%;height:60px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);background-color:#24f4ff;font-family:var(--font-family-sans);font-weight:var(--font-rg);text-align:center}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{display:-ms-inline-flexbox;display:inline-flex;height:100%;-ms-flex-align:center;align-items:center}.skip-to-content-visible.sc-z-skip-to-content-h,.sc-z-skip-to-content-h:focus{position:static;display:block}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-invisible.sc-z-skip-to-content{overflow:hidden;width:0;height:0}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-visible.sc-z-skip-to-content{width:initial;height:initial}.dark.sc-z-skip-to-content-h{background-color:var(--color-surface05);color:var(--color-surface01)}.light.sc-z-skip-to-content-h{border:var(--border-size-medium) solid var(--color-surface05);background-color:var(--color-surface01);color:var(--color-default-text)}@media (min-width: 768px){.sc-z-skip-to-content-h{text-align:start}}@media (min-width: 1152px){.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{padding:0 calc(var(--space-unit) * 3);border-right:var(--border-size-small) solid var(--color-surface05)}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-invisible.sc-z-skip-to-content{overflow:initial;width:initial;height:initial}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:first-child{padding-left:0}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child,.dark.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child,.light.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child{padding-right:0;border-right:none}.dark.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{border-right:var(--border-size-small) solid var(--color-surface01)}}";var ZSkipToContentStyle0=stylesCss;var ZSkipToContent=function(){function t(t){registerInstance(this,t);this.variant=undefined;this.links=[];this.visible=false;this.visibleLink=""}t.prototype.handleFocusOutSkipToContent=function(t){if(this.isInSkipToContent(t.target)){this.visible=false}};t.prototype.handleFocusSkipToContent=function(t){if(this.isInSkipToContent(t.target)){this.visible=true}};t.prototype.componentDidLoad=function(){this.showFirstChild()};t.prototype.componentWillRender=function(){if(this.links){this.links=typeof this.links==="string"?JSON.parse(this.links):this.links}};t.prototype.isInSkipToContent=function(t){var i=getElementTree(t);var n=i.find((function(t){return t.nodeName.toLowerCase()==="z-skip-to-content"}));return!!n};t.prototype.showFirstChild=function(){var t;var i=(t=this.hostElement.children)===null||t===void 0?void 0:t[0];if(i){this.visibleLink=i.id}};t.prototype.handleLinkClick=function(){this.visible=false};t.prototype.render=function(){var t;var i=this;return h(Host,{key:"ae03554e1bb63eebca8f51d3cae23b885ee79428",class:(t={},t[this.variant]=true,t["skip-to-content-visible"]=this.visible,t)},this.links.map((function(t,n){var e="skip-to-content-".concat(n);return h("div",{class:"link-container"},h("a",{id:e,class:{"body-1-sb":true,"z-link":true,"z-link-underline":true,"z-link-white":i.variant===ThemeVariant.DARK,"z-link-black":i.variant!==ThemeVariant.DARK,"link-visible":e==i.visibleLink,"link-invisible":e!=i.visibleLink},"aria-label":t.ariaLabel||t.label,href:t.href,onFocus:function(){return i.visibleLink=e},onClick:function(){return i.handleLinkClick()},onKeyUp:function(t){return handleKeyboardSubmit(t,i.handleLinkClick.bind(i))}},t.label))})))};Object.defineProperty(t.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();ZSkipToContent.style=ZSkipToContentStyle0;export{ZSkipToContent as z_skip_to_content};
+//# sourceMappingURL=z-skip-to-content.entry.js.map

package/dist/esm-es5/z-skip-to-content.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZSkipToContentStyle0","ZSkipToContent","prototype","handleFocusOutSkipToContent","e","this","isInSkipToContent","target","visible","handleFocusSkipToContent","componentDidLoad","showFirstChild","componentWillRender","links","JSON","parse","elem","tree","getElementTree","menuParent","find","nodeName","toLowerCase","firstChild","_a","hostElement","children","visibleLink","id","handleLinkClick","render","_this","h","Host","key","class","_b","variant","map","link","i","concat","ThemeVariant","DARK","ariaLabel","label","href","onFocus","onClick","onKeyUp","handleKeyboardSubmit","bind"],"sources":["src/components/z-skip-to-content/styles.css?tag=z-skip-to-content&encapsulation=scoped","src/components/z-skip-to-content/index.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  left: -100%;\n  height: 60px;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);\n  background-color: #24f4ff;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  text-align: center;\n}\n\n:host > .link-container {\n  display: inline-flex;\n  height: 100%;\n  align-items: center;\n}\n\n:host.skip-to-content-visible,\n:host:focus {\n  position: static;\n  display: block;\n}\n\n:host > .link-container > a.z-link.link-invisible {\n  overflow: hidden;\n  width: 0;\n  height: 0;\n}\n\n:host > .link-container > a.z-link.link-visible {\n  width: initial;\n  height: initial;\n}\n\n:host.dark {\n  background-color: var(--color-surface05);\n  color: var(--color-surface01);\n}\n\n:host.light {\n  border: var(--border-size-medium) solid var(--color-surface05);\n  background-color: var(--color-surface01);\n  color: var(--color-default-text);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  :host {\n    text-align: start;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host > .link-container {\n    padding: 0 calc(var(--space-unit) * 3);\n    border-right: var(--border-size-small) solid var(--color-surface05);\n  }\n\n  :host > .link-container > a.z-link.link-invisible {\n    overflow: initial;\n    width: initial;\n    height: initial;\n  }\n\n  :host > .link-container:first-child {\n    padding-left: 0;\n  }\n\n  :host > .link-container:last-child,\n  :host.dark > .link-container:last-child,\n  :host.light > .link-container:last-child {\n    padding-right: 0;\n    border-right: none;\n  }\n\n  :host.dark > .link-container {\n    border-right: var(--border-size-small) solid var(--color-surface01);\n  }\n}\n","import {Component, Element, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {SkipToContentLink, ThemeVariant} from \"../../beans\";\nimport {getElementTree, handleKeyboardSubmit} from \"../../utils/utils\";\n\n/**\n * Component short description.\n */\n@Component({\n  tag: \"z-skip-to-content\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZSkipToContent {\n  /** Graphical variant: `dark`, `light`. */\n  @Prop({reflect: true})\n  variant?: ThemeVariant;\n\n  /** Array to fill link into skip-content */\n  @Prop({mutable: true})\n  links: string | SkipToContentLink[] = [];\n\n  @State()\n  visible = false;\n\n  @State()\n  visibleLink = \"\";\n\n  @Element() hostElement: HTMLZSkipToContentElement;\n\n  @Listen(\"focusout\", {target: \"document\"})\n  handleFocusOutSkipToContent(e: FocusEvent): void {\n    if (this.isInSkipToContent(e.target)) {\n      this.visible = false;\n    }\n  }\n\n  @Listen(\"focusin\", {target: \"document\"})\n  handleFocusSkipToContent(e: FocusEvent): void {\n    if (this.isInSkipToContent(e.target)) {\n      this.visible = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.showFirstChild();\n  }\n\n  componentWillRender(): void {\n    if (this.links) {\n      this.links = typeof this.links === \"string\" ? JSON.parse(this.links) : this.links;\n    }\n  }\n\n  private isInSkipToContent(elem): boolean {\n    const tree = getElementTree(elem);\n    const menuParent = tree.find((elem: Element) => elem.nodeName.toLowerCase() === \"z-skip-to-content\");\n\n    return !!menuParent;\n  }\n\n  private showFirstChild(): void {\n    const firstChild = this.hostElement.children?.[0];\n    if (firstChild) {\n      this.visibleLink = firstChild.id;\n    }\n  }\n\n  private handleLinkClick(): void {\n    this.visible = false;\n  }\n\n  render(): HTMLZSkipToContentElement {\n    return (\n      <Host\n        class={{\n          [this.variant]: true,\n          \"skip-to-content-visible\": this.visible,\n        }}\n      >\n        {(this.links as SkipToContentLink[]).map((link, i) => {\n          const id = `skip-to-content-${i}`;\n\n          return (\n            <div class=\"link-container\">\n              <a\n                id={id}\n                class={{\n                  \"body-1-sb\": true,\n                  \"z-link\": true,\n                  \"z-link-underline\": true,\n                  \"z-link-white\": this.variant === ThemeVariant.DARK,\n                  \"z-link-black\": this.variant !== ThemeVariant.DARK,\n                  \"link-visible\": id == this.visibleLink,\n                  \"link-invisible\": id != this.visibleLink,\n                }}\n                aria-label={link.ariaLabel || link.label}\n                href={link.href}\n                onFocus={() => (this.visibleLink = id)}\n                onClick={() => this.handleLinkClick()}\n                onKeyUp={(e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this))}\n              >\n                {link.label}\n              </a>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"uPAAA,IAAMA,UAAY,w8DAClB,IAAAC,qBAAeD,U,ICYFE,eAAc,W,yEAOa,G,aAG5B,M,iBAGI,E,CAKdA,EAAAC,UAAAC,4BAAA,SAA4BC,GAC1B,GAAIC,KAAKC,kBAAkBF,EAAEG,QAAS,CACpCF,KAAKG,QAAU,K,GAKnBP,EAAAC,UAAAO,yBAAA,SAAyBL,GACvB,GAAIC,KAAKC,kBAAkBF,EAAEG,QAAS,CACpCF,KAAKG,QAAU,I,GAInBP,EAAAC,UAAAQ,iBAAA,WACEL,KAAKM,gB,EAGPV,EAAAC,UAAAU,oBAAA,WACE,GAAIP,KAAKQ,MAAO,CACdR,KAAKQ,aAAeR,KAAKQ,QAAU,SAAWC,KAAKC,MAAMV,KAAKQ,OAASR,KAAKQ,K,GAIxEZ,EAAAC,UAAAI,kBAAA,SAAkBU,GACxB,IAAMC,EAAOC,eAAeF,GAC5B,IAAMG,EAAaF,EAAKG,MAAK,SAACJ,GAAkB,OAAAA,EAAKK,SAASC,gBAAkB,mBAAhC,IAEhD,QAASH,C,EAGHlB,EAAAC,UAAAS,eAAA,W,MACN,IAAMY,GAAaC,EAAAnB,KAAKoB,YAAYC,YAAQ,MAAAF,SAAA,SAAAA,EAAG,GAC/C,GAAID,EAAY,CACdlB,KAAKsB,YAAcJ,EAAWK,E,GAI1B3B,EAAAC,UAAA2B,gBAAA,WACNxB,KAAKG,QAAU,K,EAGjBP,EAAAC,UAAA4B,OAAA,W,MAAA,IAAAC,EAAA1B,KACE,OACE2B,EAACC,KAAI,CAAAC,IAAA,2CACHC,OAAKC,EAAA,GACHA,EAAC/B,KAAKgC,SAAU,KAChBD,EAAA,2BAA2B/B,KAAKG,Q,IAGhCH,KAAKQ,MAA8ByB,KAAI,SAACC,EAAMC,GAC9C,IAAMZ,EAAK,mBAAAa,OAAmBD,GAE9B,OACER,EAAA,OAAKG,MAAM,kBACTH,EAAA,KACEJ,GAAIA,EACJO,MAAO,CACL,YAAa,KACb,SAAU,KACV,mBAAoB,KACpB,eAAgBJ,EAAKM,UAAYK,aAAaC,KAC9C,eAAgBZ,EAAKM,UAAYK,aAAaC,KAC9C,eAAgBf,GAAMG,EAAKJ,YAC3B,iBAAkBC,GAAMG,EAAKJ,aAC9B,aACWY,EAAKK,WAAaL,EAAKM,MACnCC,KAAMP,EAAKO,KACXC,QAAS,kBAAOhB,EAAKJ,YAAcC,CAA1B,EACToB,QAAS,WAAM,OAAAjB,EAAKF,iBAAL,EACfoB,QAAS,SAAC7C,GAAM,OAAA8C,qBAAqB9C,EAAG2B,EAAKF,gBAAgBsB,KAAKpB,GAAlD,GAEfQ,EAAKM,O,6IAzFK,G","ignoreList":[]}

package/dist/esm-es5/z-slideshow.entry.js

@@ -0,0 +1,2 @@
+import{r as registerInstance,h,g as getElement}from"./index-ab5f1eaa.js";import{p as Device}from"./index-2255c6c8.js";import{f as convertJson,g as getDevice,a as handleKeyboardSubmit}from"./utils-7983d02c.js";import"./breakpoints-680e0e56.js";var stylesCss=':host{display:block;width:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:-ms-flexbox;display:flex;width:inherit;-ms-flex-direction:column;flex-direction:column}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;z-index:10;top:50%;width:auto;margin:0 var(--space-unit);cursor:pointer;fill:var(--color-primary01);-webkit-transition:0.6s ease;transition:0.6s ease}main .scroll.disabled{opacity:0.5;pointer-events:none}main .scroll.right{right:0}#slides{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;line-height:0px;overflow-y:hidden;-webkit-transition:all 300ms;transition:all 300ms}footer{display:grid;width:100%;height:56px;-ms-flex-align:center;align-items:center;border-top:var(--border-size-medium) solid var(--color-surface02);grid-template:2 / 2;grid-template-areas:"center center" "left right"}footer>div{width:100%;-ms-flex-align:center;align-items:center}footer .footer-center{grid-area:center}footer .footer-left{grid-area:left}footer .footer-right{grid-area:right}footer .bullet-container{display:-ms-flexbox;display:flex;min-height:60px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0 auto}footer .bullet-container .bullet{width:8px;height:8px;margin:var(--space-unit) 2px;background-color:var(--gray200);border-radius:50%;pointer-events:none}footer .bullet-container .bullet.selected{background-color:var(--gray400)}@media only screen and (min-width: 768px){footer{height:76px;border-top:var(--border-size-medium) solid var(--color-surface02);grid-template:1 / 1fr 2fr 1fr;grid-template-areas:"left center right"}footer .bullet-container .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bullet-container .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);cursor:pointer;pointer-events:auto}}';var ZSlideshowStyle0=stylesCss;function isStringArray(t){return Array.isArray(t)&&t.every((function(t){return typeof t==="string"}))}var ZSlideshow=function(){function t(t){registerInstance(this,t);this.slideshowid=undefined;this.data=undefined;this.device=undefined;this.currentSlide=0}t.prototype.watchData=function(){this.parseLinks()};t.prototype.componentWillLoad=function(){this.parseLinks();this.setDevice();window.addEventListener("resize",this.handleResize.bind(this))};t.prototype.componentDidRender=function(){this.setStyle()};t.prototype.handleResize=function(){this.setDevice();this.setStyle()};t.prototype.parseLinks=function(){var t;switch(typeof this.data){case"string":{var e=(t=convertJson(this.data))!==null&&t!==void 0?t:[];if(!isStringArray(e)){throw new Error("Passed data is invalid")}this.links=e;break}default:this.links=this.data;break}};t.prototype.setStyle=function(){var t=this.el.shadowRoot.querySelector("#slides");if(!t){return}var e=this.el.shadowRoot.querySelectorAll(".slide");var i=this.el.offsetWidth;var r=i*this.links.length;t.style.width="".concat(r,"px");t.style.transform="translate(-".concat(i*this.currentSlide,"px)");e.forEach((function(t){var e=t.querySelector("img");e.style.width="".concat(i,"px")}))};t.prototype.setDevice=function(){this.device=getDevice()};t.prototype.setCurrentSlide=function(t){this.currentSlide=t};t.prototype.getBulletDimension=function(){switch(this.device){case Device.MOBILE:return 24;case Device.TABLET:return 32;default:return 40}};t.prototype.renderSlides=function(t){var e=this;return h("div",{id:"slides"},t.map((function(t,i){return h("div",{id:"slide"+i,class:"slide ".concat(e.currentSlide!==i&&"hide")},h("img",{src:t}))})))};t.prototype.renderScroll=function(t){var e=this;var i=false,r=this.currentSlide;if(t==="left"){i=this.currentSlide===0;r--}else if(t==="right"){i=this.currentSlide===this.links.length-1;r++}return h("z-icon",{class:"scroll ".concat(t," ").concat(i&&"disabled"),width:this.getBulletDimension(),height:this.getBulletDimension(),name:"chevron-".concat(t,"-circle"),onClick:function(){!i&&e.setCurrentSlide(r)},onKeyUp:function(t){return!i&&handleKeyboardSubmit(t,(function(){e.setCurrentSlide(r)}))},tabindex:0,role:"button"})};t.prototype.renderSlideshowMain=function(){return h("main",null,this.renderScroll("left"),this.renderSlides(this.links),this.renderScroll("right"))};t.prototype.renderBullet=function(t){var e=this;return h("a",{class:"bullet ".concat(this.currentSlide===t&&"selected"),onClick:function(){return e.setCurrentSlide(t)},onKeyUp:function(i){return handleKeyboardSubmit(i,(function(){return e.setCurrentSlide(t)}))},tabindex:0,role:"button"})};t.prototype.renderSlideshowFooter=function(){var t=this;return h("footer",null,h("div",{class:"footer-left"},h("slot",{name:"footer-left"})),h("div",{class:"footer-center"},h("div",{class:"bullet-container"},Object.keys(this.links).map((function(e){return t.renderBullet(parseInt(e))})))),h("div",{class:"footer-right"},h("slot",{name:"footer-right"})))};t.prototype.render=function(){if(!this.links||!this.links.length){return h("div",null)}return h("div",{id:this.slideshowid},this.renderSlideshowMain(),this.renderSlideshowFooter())};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{data:["watchData"]}},enumerable:false,configurable:true});return t}();ZSlideshow.style=ZSlideshowStyle0;export{ZSlideshow as z_slideshow};
+//# sourceMappingURL=z-slideshow.entry.js.map

package/dist/esm-es5/z-slideshow.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZSlideshowStyle0","isStringArray","data","Array","isArray","every","datum","ZSlideshow","prototype","watchData","this","parseLinks","componentWillLoad","setDevice","window","addEventListener","handleResize","bind","componentDidRender","setStyle","parsed","_a","convertJson","Error","links","refSlides","el","shadowRoot","querySelector","allImages","querySelectorAll","width","offsetWidth","fullwidth","length","style","concat","transform","currentSlide","forEach","item","img","device","getDevice","setCurrentSlide","index","getBulletDimension","Device","MOBILE","TABLET","renderSlides","items","_this","h","id","map","i","class","src","renderScroll","direction","disabled","nextSlide","height","name","onClick","onKeyUp","e","handleKeyboardSubmit","tabindex","role","renderSlideshowMain","renderBullet","renderSlideshowFooter","Object","keys","parseInt","render","slideshowid"],"sources":["src/snowflakes/myz/z-slideshow/styles.css?tag=z-slideshow&encapsulation=shadow","src/snowflakes/myz/z-slideshow/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: inherit;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  display: flex;\n  width: inherit;\n  flex-direction: column;\n}\n\nmain {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n}\n\nmain z-icon.scroll {\n  position: absolute;\n  z-index: 10;\n  top: 50%;\n  width: auto;\n  margin: 0 var(--space-unit);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  transition: 0.6s ease;\n}\n\nmain .scroll.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\nmain .scroll.right {\n  right: 0;\n}\n\n#slides {\n  display: flex;\n  flex-wrap: wrap;\n  line-height: 0px;\n  overflow-y: hidden;\n  transition: all 300ms;\n}\n\nfooter {\n  display: grid;\n  width: 100%;\n  height: 56px;\n  align-items: center;\n  border-top: var(--border-size-medium) solid var(--color-surface02);\n  grid-template: 2 / 2;\n  grid-template-areas: \"center center\" \"left right\";\n}\n\nfooter > div {\n  width: 100%;\n  align-items: center;\n}\n\nfooter .footer-center {\n  grid-area: center;\n}\n\nfooter .footer-left {\n  grid-area: left;\n}\n\nfooter .footer-right {\n  grid-area: right;\n}\n\nfooter .bullet-container {\n  display: flex;\n  min-height: 60px;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto;\n}\n\nfooter .bullet-container .bullet {\n  width: 8px;\n  height: 8px;\n  margin: var(--space-unit) 2px;\n  background-color: var(--gray200);\n  border-radius: 50%;\n  pointer-events: none;\n}\n\nfooter .bullet-container .bullet.selected {\n  background-color: var(--gray400);\n}\n\n/* Tablet breakpoint */\n\n@media only screen and (min-width: 768px) {\n  footer {\n    height: 76px;\n    border-top: var(--border-size-medium) solid var(--color-surface02);\n    grid-template: 1 / 1fr 2fr 1fr;\n    grid-template-areas: \"left center right\";\n  }\n\n  footer .bullet-container .bullet {\n    width: 10px;\n    height: 10px;\n    margin: var(--space-unit) 3px;\n  }\n}\n\n/* Desktop breakpoint */\n\n@media only screen and (min-width: 1025px) {\n  main z-icon.scroll {\n    margin: 0 10px;\n  }\n\n  footer .bullet-container .bullet {\n    width: 16px;\n    height: 16px;\n    margin: var(--space-unit) calc(var(--space-unit) * 0.5);\n    cursor: pointer;\n    pointer-events: auto;\n  }\n}\n","import {Component, Element, Prop, State, Watch, h} from \"@stencil/core\";\nimport {Device} from \"../../../beans\";\nimport {convertJson, getDevice, handleKeyboardSubmit} from \"../../../utils/utils\";\n\n/**\n * Check if data is an array of strings.\n * @param {unknown} data Data to check\n * @returns {boolean}\n */\nfunction isStringArray(data: unknown): data is string[] {\n  return Array.isArray(data) && data.every((datum: unknown): datum is string => typeof datum === \"string\");\n}\n\n/**\n * @slot footer-right - right content slot in footer\n * @slot footer-left - left content slot in footer\n */\n@Component({\n  tag: \"z-slideshow\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSlideshow {\n  @Element() el: HTMLZSlideshowElement;\n\n  /** slideshow id */\n  @Prop()\n  slideshowid: string;\n\n  /** array or JSON stringified images urls */\n  @Prop()\n  data: string[] | string;\n\n  @State()\n  device: Device;\n\n  @State()\n  currentSlide = 0;\n\n  private links: string[];\n\n  @Watch(\"data\")\n  watchData(): void {\n    this.parseLinks();\n  }\n\n  componentWillLoad(): void {\n    this.parseLinks();\n\n    this.setDevice();\n    window.addEventListener(\"resize\", this.handleResize.bind(this));\n  }\n\n  componentDidRender(): void {\n    this.setStyle();\n  }\n\n  private handleResize(): void {\n    this.setDevice();\n    this.setStyle();\n  }\n\n  private parseLinks(): void {\n    switch (typeof this.data) {\n      case \"string\": {\n        const parsed = convertJson(this.data) ?? [];\n        if (!isStringArray(parsed)) {\n          throw new Error(\"Passed data is invalid\");\n        }\n\n        this.links = parsed;\n        break;\n      }\n      default:\n        this.links = this.data;\n        break;\n    }\n  }\n\n  private setStyle(): void {\n    const refSlides = this.el.shadowRoot.querySelector(\"#slides\") as HTMLElement;\n    if (!refSlides) {\n      return;\n    }\n\n    const allImages = this.el.shadowRoot.querySelectorAll(\".slide\");\n    const width = this.el.offsetWidth;\n    const fullwidth = width * this.links.length;\n\n    refSlides.style.width = `${fullwidth}px`;\n    refSlides.style.transform = `translate(-${width * this.currentSlide}px)`;\n    allImages.forEach((item: HTMLElement) => {\n      const img = item.querySelector(\"img\");\n      img.style.width = `${width}px`;\n    });\n  }\n\n  private setDevice(): void {\n    this.device = getDevice();\n  }\n\n  private setCurrentSlide(index: number): void {\n    this.currentSlide = index;\n  }\n\n  private getBulletDimension(): number {\n    switch (this.device) {\n      case Device.MOBILE:\n        return 24;\n      case Device.TABLET:\n        return 32;\n      default:\n        return 40;\n    }\n  }\n\n  private renderSlides(items: string[]): HTMLElement {\n    return (\n      <div id=\"slides\">\n        {items.map((item: string, i: number) => (\n          <div\n            id={\"slide\" + i}\n            class={`slide ${this.currentSlide !== i && \"hide\"}`}\n          >\n            <img src={item} />\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  private renderScroll(direction: \"left\" | \"right\"): HTMLZIconElement {\n    let disabled = false,\n      nextSlide = this.currentSlide;\n\n    if (direction === \"left\") {\n      disabled = this.currentSlide === 0;\n      nextSlide--;\n    } else if (direction === \"right\") {\n      disabled = this.currentSlide === this.links.length - 1;\n      nextSlide++;\n    }\n\n    return (\n      <z-icon\n        class={`scroll ${direction} ${disabled && \"disabled\"}`}\n        width={this.getBulletDimension()}\n        height={this.getBulletDimension()}\n        name={`chevron-${direction}-circle`}\n        onClick={() => {\n          !disabled && this.setCurrentSlide(nextSlide);\n        }}\n        onKeyUp={(e: KeyboardEvent) =>\n          !disabled &&\n          handleKeyboardSubmit(e, () => {\n            this.setCurrentSlide(nextSlide);\n          })\n        }\n        tabindex={0}\n        role=\"button\"\n      />\n    );\n  }\n\n  private renderSlideshowMain(): HTMLElement {\n    return (\n      <main>\n        {this.renderScroll(\"left\")}\n        {this.renderSlides(this.links)}\n        {this.renderScroll(\"right\")}\n      </main>\n    );\n  }\n\n  private renderBullet(i: number): HTMLElement {\n    return (\n      <a\n        class={`bullet ${this.currentSlide === i && \"selected\"}`}\n        onClick={() => this.setCurrentSlide(i)}\n        onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, () => this.setCurrentSlide(i))}\n        tabindex={0}\n        role=\"button\"\n      ></a>\n    );\n  }\n\n  private renderSlideshowFooter(): HTMLElement {\n    return (\n      <footer>\n        <div class=\"footer-left\">\n          <slot name=\"footer-left\" />\n        </div>\n        <div class=\"footer-center\">\n          <div class=\"bullet-container\">{Object.keys(this.links).map((i) => this.renderBullet(parseInt(i)))}</div>\n        </div>\n        <div class=\"footer-right\">\n          <slot name=\"footer-right\" />\n        </div>\n      </footer>\n    );\n  }\n\n  render(): HTMLElement {\n    if (!this.links || !this.links.length) {\n      return <div />;\n    }\n\n    return (\n      <div id={this.slideshowid}>\n        {this.renderSlideshowMain()}\n        {this.renderSlideshowFooter()}\n      </div>\n    );\n  }\n}\n"],"mappings":"mPAAA,IAAMA,UAAY,67DAClB,IAAAC,iBAAeD,UCQf,SAASE,cAAcC,GACrB,OAAOC,MAAMC,QAAQF,IAASA,EAAKG,OAAM,SAACC,GAAoC,cAAOA,IAAU,QAAjB,GAChF,C,IAWaC,WAAU,W,8HAeN,C,CAKfA,EAAAC,UAAAC,UAAA,WACEC,KAAKC,Y,EAGPJ,EAAAC,UAAAI,kBAAA,WACEF,KAAKC,aAELD,KAAKG,YACLC,OAAOC,iBAAiB,SAAUL,KAAKM,aAAaC,KAAKP,M,EAG3DH,EAAAC,UAAAU,mBAAA,WACER,KAAKS,U,EAGCZ,EAAAC,UAAAQ,aAAA,WACNN,KAAKG,YACLH,KAAKS,U,EAGCZ,EAAAC,UAAAG,WAAA,W,MACN,cAAeD,KAAKR,MAClB,IAAK,SAAU,CACb,IAAMkB,GAASC,EAAAC,YAAYZ,KAAKR,SAAK,MAAAmB,SAAA,EAAAA,EAAI,GACzC,IAAKpB,cAAcmB,GAAS,CAC1B,MAAM,IAAIG,MAAM,yB,CAGlBb,KAAKc,MAAQJ,EACb,K,CAEF,QACEV,KAAKc,MAAQd,KAAKR,KAClB,M,EAIEK,EAAAC,UAAAW,SAAA,WACN,IAAMM,EAAYf,KAAKgB,GAAGC,WAAWC,cAAc,WACnD,IAAKH,EAAW,CACd,M,CAGF,IAAMI,EAAYnB,KAAKgB,GAAGC,WAAWG,iBAAiB,UACtD,IAAMC,EAAQrB,KAAKgB,GAAGM,YACtB,IAAMC,EAAYF,EAAQrB,KAAKc,MAAMU,OAErCT,EAAUU,MAAMJ,MAAQ,GAAAK,OAAGH,EAAS,MACpCR,EAAUU,MAAME,UAAY,cAAAD,OAAcL,EAAQrB,KAAK4B,aAAY,OACnET,EAAUU,SAAQ,SAACC,GACjB,IAAMC,EAAMD,EAAKZ,cAAc,OAC/Ba,EAAIN,MAAMJ,MAAQ,GAAAK,OAAGL,EAAK,K,KAItBxB,EAAAC,UAAAK,UAAA,WACNH,KAAKgC,OAASC,W,EAGRpC,EAAAC,UAAAoC,gBAAA,SAAgBC,GACtBnC,KAAK4B,aAAeO,C,EAGdtC,EAAAC,UAAAsC,mBAAA,WACN,OAAQpC,KAAKgC,QACX,KAAKK,OAAOC,OACV,OAAO,GACT,KAAKD,OAAOE,OACV,OAAO,GACT,QACE,OAAO,G,EAIL1C,EAAAC,UAAA0C,aAAA,SAAaC,GAAb,IAAAC,EAAA1C,KACN,OACE2C,EAAA,OAAKC,GAAG,UACLH,EAAMI,KAAI,SAACf,EAAcgB,GAAS,OACjCH,EAAA,OACEC,GAAI,QAAUE,EACdC,MAAO,SAAArB,OAASgB,EAAKd,eAAiBkB,GAAK,SAE3CH,EAAA,OAAKK,IAAKlB,IALqB,I,EAYjCjC,EAAAC,UAAAmD,aAAA,SAAaC,GAAb,IAAAR,EAAA1C,KACN,IAAImD,EAAW,MACbC,EAAYpD,KAAK4B,aAEnB,GAAIsB,IAAc,OAAQ,CACxBC,EAAWnD,KAAK4B,eAAiB,EACjCwB,G,MACK,GAAIF,IAAc,QAAS,CAChCC,EAAWnD,KAAK4B,eAAiB5B,KAAKc,MAAMU,OAAS,EACrD4B,G,CAGF,OACET,EAAA,UACEI,MAAO,UAAArB,OAAUwB,EAAS,KAAAxB,OAAIyB,GAAY,YAC1C9B,MAAOrB,KAAKoC,qBACZiB,OAAQrD,KAAKoC,qBACbkB,KAAM,WAAA5B,OAAWwB,EAAS,WAC1BK,QAAS,YACNJ,GAAYT,EAAKR,gBAAgBkB,E,EAEpCI,QAAS,SAACC,GACR,OAACN,GACDO,qBAAqBD,GAAG,WACtBf,EAAKR,gBAAgBkB,E,GAFvB,EAKFO,SAAU,EACVC,KAAK,U,EAKH/D,EAAAC,UAAA+D,oBAAA,WACN,OACElB,EAAA,YACG3C,KAAKiD,aAAa,QAClBjD,KAAKwC,aAAaxC,KAAKc,OACvBd,KAAKiD,aAAa,S,EAKjBpD,EAAAC,UAAAgE,aAAA,SAAahB,GAAb,IAAAJ,EAAA1C,KACN,OACE2C,EAAA,KACEI,MAAO,UAAArB,OAAU1B,KAAK4B,eAAiBkB,GAAK,YAC5CS,QAAS,WAAM,OAAAb,EAAKR,gBAAgBY,EAArB,EACfU,QAAS,SAACC,GAAqB,OAAAC,qBAAqBD,GAAG,WAAM,OAAAf,EAAKR,gBAAgBY,EAArB,GAA9B,EAC/Ba,SAAU,EACVC,KAAK,U,EAKH/D,EAAAC,UAAAiE,sBAAA,eAAArB,EAAA1C,KACN,OACE2C,EAAA,cACEA,EAAA,OAAKI,MAAM,eACTJ,EAAA,QAAMW,KAAK,iBAEbX,EAAA,OAAKI,MAAM,iBACTJ,EAAA,OAAKI,MAAM,oBAAoBiB,OAAOC,KAAKjE,KAAKc,OAAO+B,KAAI,SAACC,GAAM,OAAAJ,EAAKoB,aAAaI,SAASpB,GAA3B,MAEpEH,EAAA,OAAKI,MAAM,gBACTJ,EAAA,QAAMW,KAAK,kB,EAMnBzD,EAAAC,UAAAqE,OAAA,WACE,IAAKnE,KAAKc,QAAUd,KAAKc,MAAMU,OAAQ,CACrC,OAAOmB,EAAA,W,CAGT,OACEA,EAAA,OAAKC,GAAI5C,KAAKoE,aACXpE,KAAK6D,sBACL7D,KAAK+D,wB,oPA5LS,G","ignoreList":[]}

package/dist/esm-es5/z-stepper-item.entry.js

@@ -0,0 +1,2 @@
+import{r as registerInstance,h,a as Host}from"./index-ab5f1eaa.js";var stylesCss=':host{position:relative;width:calc(var(--space-unit) * 5);font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-icon-width:20px;--z-icon-height:20px}:host(:not(:last-child)){-ms-flex:1;flex:1}:host(:not(:last-child))::after{position:absolute;z-index:1;top:calc(var(--space-unit) * 4 - var(--border-size-medium) / 2);right:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * 3);display:block;width:auto;border-bottom:var(--border-size-medium) solid var(--color-disabled03);margin:0 calc(var(--space-unit) * -2) 0 calc(var(--space-unit) * 2);content:""}.stepper-item{display:-ms-flexbox;display:flex;width:calc(var(--space-unit) * 5);-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;color:inherit;font-family:inherit;font-size:12px;line-height:16px;outline:0;text-decoration:none}.stepper-item span{display:none;width:calc(100% + calc(var(--space-unit) * 4));color:var(--color-default-text);text-align:center}:host([href]:not([disabled],[pressed])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}:host([pressed]),:host([pressed]) .stepper-item{pointer-events:none}.indicator{display:-ms-flexbox;display:flex;width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4);-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:var(--border-size-medium) solid var(--color-primary01);margin:calc(var(--space-unit) * 2);background:var(--color-surface01);border-radius:50%;color:var(--color-primary01);content:counter(stepper);font-size:14px;font-weight:var(--font-sb);line-height:1}:host([pressed]:not([disabled])) .indicator{border-color:var(--color-active-primary);background:var(--color-active-primary);color:var(--color-text-inverse)}:host(:not([disabled]):focus-within) .indicator{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host([href]:not([disabled],[pressed],[checked])) .indicator:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary)}:host([disabled]) .indicator{border-color:var(--color-disabled02);background:var(--color-disabled01);color:var(--color-disabled03)}:host([checked]:not([disabled])) .indicator{border-color:var(--color-success-default);color:var(--color-success-default)}:host([checked]:not([disabled])) .indicator z-icon{fill:var(--color-success-default)}:host([checked]) .indicator z-icon>svg{width:24px;height:24px}@media (min-width: 768px){.stepper-item span{display:block}}@media (min-width: 1152px){:host{width:calc(var(--space-unit) * 10);--z-icon-width:24px;--z-icon-height:24px}:host(:not(:last-child))::after{top:calc(var(--space-unit) * 5 - var(--border-size-medium) / 2);left:calc(var(--space-unit) * 8)}.stepper-item{width:calc(var(--space-unit) * 10);font-size:18px;line-height:28px}.indicator{width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 6);font-size:16px}}';var ZStepperItemStyle0=stylesCss;var ZStepperItem=function(){function e(e){registerInstance(this,e);this.index=undefined;this.href=undefined;this.pressed=undefined;this.checked=undefined;this.disabled=undefined}e.prototype.getAttributes=function(){var e=this;var t=this.href&&!this.pressed&&!this.disabled?{onClick:function(){return location.href=e.href}}:undefined;var i=t?{role:"link"}:undefined;var r=this.pressed&&!this.disabled?{ariaCurrent:"step"}:undefined;var a=this.pressed||this.href===""?{tabindex:-1}:undefined;return Object.assign(Object.assign(Object.assign(Object.assign({},t),i),r),a)};e.prototype.render=function(){return h(Host,{key:"d760ab7aef2991d5ffc8754e4e03263c4c476a6d",role:"listitem"},h("button",Object.assign({key:"7fca3fa04459cdea8813db6382726cc601e4e3f8",class:"stepper-item",disabled:this.disabled},this.getAttributes()),h("div",{key:"c727b40105af8807c1b7fddf19243147bc2acdab",class:"indicator"},this.checked?h("z-icon",{name:"checkmark"}):this.index),h("span",{key:"f8d063aeeac60eb9adeaf65774b60ff07bb1c9ba"},h("slot",{key:"b0bd5470c318acc8037abb11b974a4cc1f057fd8"}))))};return e}();ZStepperItem.style=ZStepperItemStyle0;export{ZStepperItem as z_stepper_item};
+//# sourceMappingURL=z-stepper-item.entry.js.map

package/dist/esm-es5/z-stepper-item.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZStepperItemStyle0","ZStepperItem","prototype","getAttributes","_this","this","href","pressed","disabled","onClick","location","undefined","role","current","ariaCurrent","tabindex","Object","assign","render","h","Host","key","class","checked","name","index"],"sources":["src/components/z-stepper-item/styles.css?tag=z-stepper-item&encapsulation=shadow","src/components/z-stepper-item/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  width: calc(var(--space-unit) * 5);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --z-icon-width: 20px;\n  --z-icon-height: 20px;\n}\n\n:host(:not(:last-child)) {\n  flex: 1;\n}\n\n:host(:not(:last-child))::after {\n  position: absolute;\n  z-index: 1;\n  top: calc(var(--space-unit) * 4 - var(--border-size-medium) / 2);\n  right: calc(var(--space-unit) * 2);\n  left: calc(var(--space-unit) * 3);\n  display: block;\n  width: auto;\n  border-bottom: var(--border-size-medium) solid var(--color-disabled03);\n  margin: 0 calc(var(--space-unit) * -2) 0 calc(var(--space-unit) * 2);\n  content: \"\";\n}\n\n.stepper-item {\n  display: flex;\n  width: calc(var(--space-unit) * 5);\n  flex-direction: column;\n  align-items: center;\n  padding: 0;\n  border: 0;\n  appearance: none;\n  background: transparent;\n  color: inherit;\n  font-family: inherit;\n  font-size: 12px;\n  line-height: 16px;\n  outline: 0;\n  text-decoration: none;\n}\n\n.stepper-item span {\n  display: none;\n  width: calc(100% + calc(var(--space-unit) * 4));\n  color: var(--color-default-text);\n  text-align: center;\n}\n\n:host([href]:not([disabled], [pressed])) .stepper-item {\n  cursor: pointer;\n}\n\n:host([disabled]) .stepper-item {\n  pointer-events: none;\n}\n\n:host([pressed]),\n:host([pressed]) .stepper-item {\n  pointer-events: none;\n}\n\n.indicator {\n  display: flex;\n  width: calc(var(--space-unit) * 4);\n  height: calc(var(--space-unit) * 4);\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  border: var(--border-size-medium) solid var(--color-primary01);\n  margin: calc(var(--space-unit) * 2);\n  background: var(--color-surface01);\n  border-radius: 50%;\n  color: var(--color-primary01);\n  content: counter(stepper);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  line-height: 1;\n}\n\n:host([pressed]:not([disabled])) .indicator {\n  border-color: var(--color-active-primary);\n  background: var(--color-active-primary);\n  color: var(--color-text-inverse);\n}\n\n:host(:not([disabled]):focus-within) .indicator {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([href]:not([disabled], [pressed], [checked])) .indicator:hover {\n  border-color: var(--color-hover-primary);\n  color: var(--color-hover-primary);\n}\n\n:host([disabled]) .indicator {\n  border-color: var(--color-disabled02);\n  background: var(--color-disabled01);\n  color: var(--color-disabled03);\n}\n\n:host([checked]:not([disabled])) .indicator {\n  border-color: var(--color-success-default);\n  color: var(--color-success-default);\n}\n\n:host([checked]:not([disabled])) .indicator z-icon {\n  fill: var(--color-success-default);\n}\n\n:host([checked]) .indicator z-icon > svg {\n  width: 24px;\n  height: 24px;\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  .stepper-item span {\n    display: block;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host {\n    width: calc(var(--space-unit) * 10);\n\n    --z-icon-width: 24px;\n    --z-icon-height: 24px;\n  }\n\n  :host(:not(:last-child))::after {\n    top: calc(var(--space-unit) * 5 - var(--border-size-medium) / 2);\n    left: calc(var(--space-unit) * 8);\n  }\n\n  .stepper-item {\n    width: calc(var(--space-unit) * 10);\n    font-size: 18px;\n    line-height: 28px;\n  }\n\n  .indicator {\n    width: calc(var(--space-unit) * 6);\n    height: calc(var(--space-unit) * 6);\n    font-size: 16px;\n  }\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-stepper-item\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZStepperItem {\n  /**\n   * The number of the step item.\n   */\n  @Prop({attribute: \"index\"})\n  index: number;\n\n  /**\n   * The href to navigate on click.\n   */\n  @Prop({attribute: \"href\"})\n  href: string;\n\n  /**\n   * The pressed state of the item.\n   */\n  @Prop({attribute: \"pressed\"})\n  pressed: boolean;\n\n  /**\n   * The checked state of the item.\n   */\n  @Prop({attribute: \"checked\"})\n  checked: boolean;\n\n  /**\n   * The disabled state of the item.\n   */\n  @Prop({attribute: \"disabled\"})\n  disabled: boolean;\n\n  private getAttributes(): Record<string, unknown> {\n    const href =\n      this.href && !this.pressed && !this.disabled ? {onClick: () => (location.href = this.href)} : undefined;\n    const role = href ? {role: \"link\"} : undefined;\n    const current = this.pressed && !this.disabled ? {ariaCurrent: \"step\"} : undefined;\n    const tabindex = this.pressed || this.href === \"\" ? {tabindex: -1} : undefined;\n\n    return {\n      ...href,\n      ...role,\n      ...current,\n      ...tabindex,\n    };\n  }\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    return (\n      <Host role=\"listitem\">\n        <button\n          class=\"stepper-item\"\n          disabled={this.disabled}\n          {...this.getAttributes()}\n        >\n          <div class=\"indicator\">{this.checked ? <z-icon name=\"checkmark\" /> : this.index}</div>\n          <span>\n            <slot />\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mEAAA,IAAMA,UAAY,kgGAClB,IAAAC,mBAAeD,U,ICMFE,aAAY,W,sJA+BfA,EAAAC,UAAAC,cAAA,eAAAC,EAAAC,KACN,IAAMC,EACJD,KAAKC,OAASD,KAAKE,UAAYF,KAAKG,SAAW,CAACC,QAAS,kBAAOC,SAASJ,KAAOF,EAAKE,IAA5B,GAAqCK,UAChG,IAAMC,EAAON,EAAO,CAACM,KAAM,QAAUD,UACrC,IAAME,EAAUR,KAAKE,UAAYF,KAAKG,SAAW,CAACM,YAAa,QAAUH,UACzE,IAAMI,EAAWV,KAAKE,SAAWF,KAAKC,OAAS,GAAK,CAACS,UAAW,GAAKJ,UAErE,OAAAK,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACKX,GACAM,GACAC,GACAE,E,EAIPd,EAAAC,UAAAgB,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CAACT,KAAK,YACTO,EAAA,SAAAH,OAAAC,OAAA,CAAAI,IAAA,2CACEC,MAAM,eACNd,SAAUH,KAAKG,UACXH,KAAKF,iBAETgB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aAAajB,KAAKkB,QAAUJ,EAAA,UAAQK,KAAK,cAAiBnB,KAAKoB,OAC1EN,EAAA,QAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,+C,WAxDa,G","ignoreList":[]}

package/dist/esm-es5/z-stepper.entry.js

@@ -0,0 +1,2 @@
+import{r as registerInstance,h,a as Host}from"./index-ab5f1eaa.js";var stylesCss=":host{position:relative;display:-ms-flexbox;display:flex;width:100%;max-width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:row;flex-direction:row;padding:0;margin:0;font-family:var(--font-family-sans);font-weight:var(--font-rg);list-style:none}@media only screen and (min-width: 768px){:host{padding:0 calc(var(--space-unit) * 2)}}";var ZStepperStyle0=stylesCss;var ZStepper=function(){function e(e){registerInstance(this,e)}e.prototype.render=function(){return h(Host,{key:"80b89caa35e9adb82ad413783b16eae491a26f48",role:"list"},h("slot",{key:"140e35a55637873b1eee70d5a7a8c2b03af3eed7"}))};return e}();ZStepper.style=ZStepperStyle0;export{ZStepper as z_stepper};
+//# sourceMappingURL=z-stepper.entry.js.map

package/dist/esm-es5/z-stepper.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZStepperStyle0","ZStepper","prototype","render","h","Host","key","role"],"sources":["src/components/z-stepper/styles.css?tag=z-stepper&encapsulation=shadow","src/components/z-stepper/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  flex-direction: row;\n  padding: 0;\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  list-style: none;\n}\n\n@media only screen and (min-width: 768px) {\n  :host {\n    padding: 0 calc(var(--space-unit) * 2);\n  }\n}\n","import {Component, Host, h} from \"@stencil/core\";\n\n/**\n * @slot - slot for `z-stepper-item`\n */\n@Component({\n  tag: \"z-stepper\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZStepper {\n  render(): HTMLSlotElement {\n    return (\n      <Host role=\"list\">\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"mEAAA,IAAMA,UAAY,6WAClB,IAAAC,eAAeD,U,ICSFE,SAAQ,W,uCACnBA,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CAACC,KAAK,QACTH,EAAA,QAAAE,IAAA,6C,WAJa,G","ignoreList":[]}

package/dist/esm-es5/z-table.entry.js

@@ -0,0 +1,2 @@
+import{r as registerInstance,h,a as Host,g as getElement}from"./index-ab5f1eaa.js";import"./index-62dc7ee8.js";import"./index-b5bcd90e.js";import"./index-dc52118c.js";import"./index-a4f1946a.js";import"./utils-7983d02c.js";import"./index-2255c6c8.js";import"./breakpoints-680e0e56.js";import"./index-5f6d3ef8.js";import"./index-2501b2b5.js";var stylesCss=":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}.table{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}";var ZTableStyle0=stylesCss;var ZTable=function(){function e(e){registerInstance(this,e);this.bordered=false;this.expandable=false}e.prototype.updateExpandable=function(){this.expandable=this.host.querySelectorAll("z-tr[expandable]").length>0};e.prototype.componentWillLoad=function(){var e=this;this.expandableMutationObserver=new MutationObserver((function(){e.updateExpandable()}));this.expandableMutationObserver.observe(this.host,{childList:true,subtree:true,attributes:true,attributeFilter:["expandable"],attributeOldValue:false})};e.prototype.disconnectedCallback=function(){var e;(e=this.expandableMutationObserver)===null||e===void 0?void 0:e.disconnect()};e.prototype.render=function(){return h(Host,{key:"5f7370afd7912583561ac67baf5b70921c49eea2",expandable:this.expandable},h("div",{key:"8cbf774ffe599cf49ed9377c2ff3c1e0e8d14e85",class:"table",role:"table"},h("slot",{key:"318eceb0c4e486a49faab1fe7027acfa76456352"})))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();ZTable.style=ZTableStyle0;export{ZTable as z_table};
+//# sourceMappingURL=z-table.entry.js.map

package/dist/esm-es5/z-table.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZTableStyle0","ZTable","prototype","updateExpandable","this","expandable","host","querySelectorAll","length","componentWillLoad","_this","expandableMutationObserver","MutationObserver","observe","childList","subtree","attributes","attributeFilter","attributeOldValue","disconnectedCallback","_a","disconnect","render","h","Host","key","class","role"],"sources":["src/components/table/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/table/z-table/index.tsx"],"sourcesContent":[":host {\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n\n  position: relative;\n  display: block;\n  overflow: auto;\n  max-width: 100%;\n  box-sizing: border-box;\n  background-color: var(--color-surface01);\n}\n\n:host([expandable]) {\n  --z-table--expand-button-size: 40px;\n}\n\n:host([bordered]) {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\n.table {\n  min-width: max-content;\n}\n","import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/**\n * ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n * @cssprop --z-table--cells-padding - Padding of the cells.\n */\n@Component({\n  tag: \"z-table\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTable {\n  @Element() host: HTMLZTableElement;\n\n  /**\n   * Whether the table cells should show a border between them.\n   */\n  @Prop({reflect: true})\n  bordered = false;\n\n  /**\n   * Whether the table contains some expandable rows.\n   */\n  @State()\n  expandable = false;\n\n  private updateExpandable(): void {\n    this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n  }\n\n  private expandableMutationObserver: MutationObserver;\n\n  /**\n   * Setup the table creating a mutation observer for the expandable attribute.\n   */\n  componentWillLoad(): void {\n    this.expandableMutationObserver = new MutationObserver(() => {\n      this.updateExpandable();\n    });\n    this.expandableMutationObserver.observe(this.host, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: [\"expandable\"],\n      attributeOldValue: false,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.expandableMutationObserver?.disconnect();\n  }\n\n  render(): HTMLZTableElement {\n    return (\n      <Host expandable={this.expandable}>\n        <div\n          class=\"table\"\n          role=\"table\"\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qVAAA,IAAMA,UAAY,mbAClB,IAAAC,aAAeD,U,ICeFE,OAAM,W,qDAON,M,gBAME,K,CAELA,EAAAC,UAAAC,iBAAA,WACNC,KAAKC,WAAaD,KAAKE,KAAKC,iBAAiB,oBAAoBC,OAAS,C,EAQ5EP,EAAAC,UAAAO,kBAAA,eAAAC,EAAAN,KACEA,KAAKO,2BAA6B,IAAIC,kBAAiB,WACrDF,EAAKP,kB,IAEPC,KAAKO,2BAA2BE,QAAQT,KAAKE,KAAM,CACjDQ,UAAW,KACXC,QAAS,KACTC,WAAY,KACZC,gBAAiB,CAAC,cAClBC,kBAAmB,O,EAIvBjB,EAAAC,UAAAiB,qBAAA,W,OACEC,EAAAhB,KAAKO,8BAA0B,MAAAS,SAAA,SAAAA,EAAEC,Y,EAGnCpB,EAAAC,UAAAoB,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CAACpB,WAAYD,KAAKC,YACrBkB,EAAA,OAAAE,IAAA,2CACEC,MAAM,QACNC,KAAK,SAELJ,EAAA,QAAAE,IAAA,8C,kIAhDS,G","ignoreList":[]}

package/dist/esm-es5/z-tbody.entry.js

@@ -0,0 +1,2 @@
+export{Z as z_tbody}from"./index-62dc7ee8.js";import"./index-ab5f1eaa.js";
+//# sourceMappingURL=z-tbody.entry.js.map

package/dist/esm-es5/z-td.entry.js

@@ -0,0 +1,2 @@
+export{Z as z_td}from"./index-5f6d3ef8.js";import"./index-ab5f1eaa.js";import"./index-2255c6c8.js";
+//# sourceMappingURL=z-td.entry.js.map

package/dist/esm-es5/z-tfoot.entry.js

@@ -0,0 +1,2 @@
+export{Z as z_tfoot}from"./index-b5bcd90e.js";import"./index-ab5f1eaa.js";
+//# sourceMappingURL=z-tfoot.entry.js.map

package/dist/esm-es5/z-th.entry.js

@@ -0,0 +1,2 @@
+export{Z as z_th}from"./index-2501b2b5.js";import"./index-ab5f1eaa.js";import"./index-2255c6c8.js";
+//# sourceMappingURL=z-th.entry.js.map

package/dist/esm-es5/z-thead.entry.js

@@ -0,0 +1,2 @@
+export{Z as z_thead}from"./index-dc52118c.js";import"./index-ab5f1eaa.js";
+//# sourceMappingURL=z-thead.entry.js.map

package/dist/esm-es5/z-toast-notification-list.entry.js

@@ -0,0 +1,2 @@
+import{r as registerInstance,h,g as getElement}from"./index-ab5f1eaa.js";import{t as ToastNotificationPosition}from"./index-2255c6c8.js";var stylesCss=':host{position:fixed;z-index:10000;display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;margin-top:calc(var(--space-unit) * 2);margin-bottom:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host([position="bottom-centre"]),:host([position="bottom-right"]),:host([position="bottom-left"]){bottom:0;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}:host([position="top-left"]),:host([position="top-right"]),:host([position="top-centre"]){top:0;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host([position="top-centre"]){top:0;left:50%;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host([position="top-left"]){top:0;left:0;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}:host([position="top-right"]){top:0;right:0;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}:host([position="bottom-centre"]){bottom:0;left:50%;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host([position="bottom-right"]){right:0;bottom:0;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}:host([position="bottom-left"]){bottom:0;left:0;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}';var ZToastNotificationListStyle0=stylesCss;var ZToastNotificationList=function(){function t(t){registerInstance(this,t);this.position=ToastNotificationPosition.TOP_RIGHT;this.newestontop=true}t.prototype.watchPropNewestontop=function(t){var i;(i=this.hostElement).append.apply(i,this.notificationArray.reverse());if(t){this.hostElement.shadowRoot.addEventListener("slotchange",this.slotChangeHandler)}else{this.hostElement.shadowRoot.removeEventListener("slotchange",this.slotChangeHandler)}};t.prototype.componentWillLoad=function(){if(this.newestontop){this.handleNewestOnTop()}};t.prototype.handleNewestOnTop=function(){var t;this.notificationArray=Array.from(this.hostElement.children);(t=this.hostElement).append.apply(t,this.notificationArray.reverse());this.hostElement.shadowRoot.addEventListener("slotchange",this.slotChangeHandler.bind(this))};t.prototype.slotChangeHandler=function(){var t=this;var i=Array.from(this.hostElement.children).filter((function(i){return!t.notificationArray.includes(i)}));if(i){i.forEach((function(i){t.notificationArray.push(i);var e=i;i.remove();t.hostElement.prepend(e)}))}};t.prototype.render=function(){return h("slot",{key:"ead27e0dd8742e6008aa4fc6ffa4129cae868af8",name:"toasts"})};Object.defineProperty(t.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{newestontop:["watchPropNewestontop"]}},enumerable:false,configurable:true});return t}();ZToastNotificationList.style=ZToastNotificationListStyle0;export{ZToastNotificationList as z_toast_notification_list};
+//# sourceMappingURL=z-toast-notification-list.entry.js.map

package/dist/esm-es5/z-toast-notification-list.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZToastNotificationListStyle0","ZToastNotificationList","ToastNotificationPosition","TOP_RIGHT","prototype","watchPropNewestontop","newValue","_a","this","hostElement","append","apply","notificationArray","reverse","shadowRoot","addEventListener","slotChangeHandler","removeEventListener","componentWillLoad","newestontop","handleNewestOnTop","Array","from","children","bind","_this","difference","filter","elem","includes","forEach","push","newElem","remove","prepend","render","h","key","name"],"sources":["src/components/z-toast-notification-list/styles.css?tag=z-toast-notification-list&encapsulation=shadow","src/components/z-toast-notification-list/index.tsx"],"sourcesContent":[":host {\n  position: fixed;\n  z-index: 10000;\n  display: flex;\n  flex-flow: column nowrap;\n  margin-top: calc(var(--space-unit) * 2);\n  margin-bottom: calc(var(--space-unit) * 2);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n::slotted(z-toast-notification) {\n  width: 100vw;\n}\n\n::slotted(:not(:last-child)) {\n  margin-bottom: calc(var(--space-unit) * 1);\n}\n\n:host([position=\"bottom-centre\"]),\n:host([position=\"bottom-right\"]),\n:host([position=\"bottom-left\"]) {\n  bottom: 0;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n\n:host([position=\"top-left\"]),\n:host([position=\"top-right\"]),\n:host([position=\"top-centre\"]) {\n  top: 0;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host {\n    margin: calc(var(--space-unit) * 3);\n  }\n\n  :host([position=\"top-centre\"]) {\n    top: 0;\n    left: 50%;\n    align-items: center;\n    justify-content: flex-start;\n    transform: translateX(-50%);\n  }\n\n  :host([position=\"top-left\"]) {\n    top: 0;\n    left: 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n\n  :host([position=\"top-right\"]) {\n    top: 0;\n    right: 0;\n    align-items: flex-end;\n    justify-content: flex-start;\n  }\n\n  :host([position=\"bottom-centre\"]) {\n    bottom: 0;\n    left: 50%;\n    align-items: center;\n    justify-content: flex-end;\n    transform: translateX(-50%);\n  }\n\n  :host([position=\"bottom-right\"]) {\n    right: 0;\n    bottom: 0;\n    align-items: flex-end;\n    justify-content: flex-end;\n  }\n\n  :host([position=\"bottom-left\"]) {\n    bottom: 0;\n    left: 0;\n    align-items: flex-start;\n    justify-content: flex-end;\n  }\n\n  ::slotted(z-toast-notification) {\n    width: 50vw;\n  }\n}\n\n/* Wide breakpoint */\n@media only screen and (min-width: 1366px) {\n  :host {\n    margin: calc(var(--space-unit) * 4);\n  }\n\n  ::slotted(z-toast-notification) {\n    width: 33vw;\n  }\n}\n","import {Component, Element, Prop, Watch, h} from \"@stencil/core\";\nimport {ToastNotificationPosition} from \"../../beans\";\n\n@Component({\n  tag: \"z-toast-notification-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotificationList {\n  @Element() hostElement: HTMLZToastNotificationListElement;\n\n  /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */\n  @Prop({reflect: true})\n  position: ToastNotificationPosition = ToastNotificationPosition.TOP_RIGHT;\n\n  /**Set the entry position of new notification in the list */\n  @Prop()\n  newestontop?: boolean = true;\n\n  private notificationArray: Element[];\n\n  @Watch(\"newestontop\")\n  watchPropNewestontop(newValue: boolean): void {\n    this.hostElement.append(...this.notificationArray.reverse());\n    if (newValue) {\n      this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler);\n    } else {\n      this.hostElement.shadowRoot.removeEventListener(\"slotchange\", this.slotChangeHandler);\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.newestontop) {\n      this.handleNewestOnTop();\n    }\n  }\n\n  private handleNewestOnTop(): void {\n    this.notificationArray = Array.from(this.hostElement.children);\n    this.hostElement.append(...this.notificationArray.reverse());\n    this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler.bind(this));\n  }\n\n  private slotChangeHandler(): void {\n    const difference = Array.from(this.hostElement.children).filter((elem) => !this.notificationArray.includes(elem));\n    if (difference) {\n      difference.forEach((elem) => {\n        this.notificationArray.push(elem);\n        const newElem = elem;\n        elem.remove();\n        this.hostElement.prepend(newElem);\n      });\n    }\n  }\n\n  render(): HTMLSlotElement {\n    return <slot name=\"toasts\"></slot>;\n  }\n}\n"],"mappings":"yIAAA,IAAMA,UAAY,q5DAClB,IAAAC,6BAAeD,U,ICOFE,uBAAsB,W,qDAKKC,0BAA0BC,U,iBAIxC,I,CAKxBF,EAAAG,UAAAC,qBAAA,SAAqBC,G,OACnBC,EAAAC,KAAKC,aAAYC,OAAMC,MAAAJ,EAAIC,KAAKI,kBAAkBC,WAClD,GAAIP,EAAU,CACZE,KAAKC,YAAYK,WAAWC,iBAAiB,aAAcP,KAAKQ,kB,KAC3D,CACLR,KAAKC,YAAYK,WAAWG,oBAAoB,aAAcT,KAAKQ,kB,GAIvEf,EAAAG,UAAAc,kBAAA,WACE,GAAIV,KAAKW,YAAa,CACpBX,KAAKY,mB,GAIDnB,EAAAG,UAAAgB,kBAAA,W,MACNZ,KAAKI,kBAAoBS,MAAMC,KAAKd,KAAKC,YAAYc,WACrDhB,EAAAC,KAAKC,aAAYC,OAAMC,MAAAJ,EAAIC,KAAKI,kBAAkBC,WAClDL,KAAKC,YAAYK,WAAWC,iBAAiB,aAAcP,KAAKQ,kBAAkBQ,KAAKhB,M,EAGjFP,EAAAG,UAAAY,kBAAA,eAAAS,EAAAjB,KACN,IAAMkB,EAAaL,MAAMC,KAAKd,KAAKC,YAAYc,UAAUI,QAAO,SAACC,GAAS,OAACH,EAAKb,kBAAkBiB,SAASD,EAAjC,IAC1E,GAAIF,EAAY,CACdA,EAAWI,SAAQ,SAACF,GAClBH,EAAKb,kBAAkBmB,KAAKH,GAC5B,IAAMI,EAAUJ,EAChBA,EAAKK,SACLR,EAAKhB,YAAYyB,QAAQF,E,MAK/B/B,EAAAG,UAAA+B,OAAA,WACE,OAAOC,EAAA,QAAAC,IAAA,2CAAMC,KAAK,U,+QAhDa,G","ignoreList":[]}

package/dist/esm-es5/z-toast-notification.entry.js

@@ -0,0 +1,2 @@
+import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-ab5f1eaa.js";import{s as ToastNotificationTransition}from"./index-2255c6c8.js";import{m as mobileBreakpoint}from"./breakpoints-680e0e56.js";import{H as Hammer}from"./hammer-f1ed46b5.js";var stylesCss=":host{display:inline-block;width:100vw;min-width:200px;--percentuale:0}:host(.slide-in-left){-webkit-animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-in-right){-webkit-animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-in-down){-webkit-animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-in-up){-webkit-animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-left){-webkit-animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-right){-webkit-animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-down){-webkit-animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-up){-webkit-animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes slideinleft{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideinleft{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slideinright{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideinright{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slideinup{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideinup{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideindown{0%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideindown{0%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@-webkit-keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}}@-webkit-keyframes slideoutup{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes slideoutup{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@-webkit-keyframes slideoutdown{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes slideoutdown{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}:host>#external-container{display:-ms-flexbox;display:flex;min-height:52px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);border-radius:4px;-webkit-box-shadow:var(--shadow-3);box-shadow:var(--shadow-3);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px}:host>#external-container.mobile-wrapped>#icon{-ms-flex-item-align:start;align-self:flex-start}:host>#external-container.several-lines-padding{padding:calc(var(--space-unit) * 2)}:host>#external-container>#flex-container{display:-ms-flexbox;display:flex;width:100%;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host>#external-container #text{margin-right:calc(var(--space-unit) * 2);color:var(--color-white);letter-spacing:0.16px;line-height:20px;text-align:left}:host>#external-container #text>.title{margin-right:4px;font-weight:600}:host>#external-container.mobile-wrapped #button ::slotted(z-button){margin-top:calc(var(--space-unit) * 2)}:host>#external-container #icon{margin-left:calc(var(--space-unit) * 2);cursor:pointer;fill:var(--color-white)}:host>#external-container.dark{background:var(--gray800)}:host>#external-container.light{background:var(--color-background)}:host>#external-container.light #icon,:host>#external-container.warning #text,:host>#external-container.warning #icon{fill:var(--color-primary01-icon)}:host>#external-container.light #text,:host>#external-container.warning #text{color:var(--gray800)}:host>#external-container.accent{background:var(--color-primary01)}:host>#external-container.error{background:var(--color-error-default)}:host>#external-container.success{background:var(--color-success-default)}:host>#external-container.warning{background:var(--color-warning-default)}@media only screen and (min-width: 768px){:host{width:unset;max-width:50vw}:host>#external-container>#flex-container{-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host>#external-container #text{width:100%}}@media only screen and (min-width: 1366px){:host{width:unset;max-width:33vw}}";var ZToastNotificationStyle0=stylesCss;var ZToastNotification=function(){function t(t){registerInstance(this,t);this.toastClose=createEvent(this,"toastClose",7);this.isCloseEventCalled=false;this.heading=undefined;this.message=undefined;this.closebutton=undefined;this.autoclose=undefined;this.pauseonfocusloss=true;this.type=undefined;this.isdraggable=true;this.draggablepercentage=80;this.transition=undefined;this.percentage=undefined}t.prototype.watchPropIsdraggable=function(t){if(t){this.sliderManager.get("pan").set({enable:true})}else{this.sliderManager.get("pan").set({enable:false})}};t.prototype.watchPropAutoclose=function(t){clearTimeout(this.timeoutHandle);this.startClosingTimeout(t)};t.prototype.watchPropPauseonfocusloss=function(t){if(this.autoclose){if(t){document.addEventListener("visibilitychange",this.visibilityChangeEventHandler)}else{document.removeEventListener("visibilitychange",this.visibilityChangeEventHandler)}}};t.prototype.emitToastClose=function(t){this.timeoutHandle=null;this.elapsedTime=null;this.hostElement.classList.add(t);this.toastClose.emit()};t.prototype.componentWillLoad=function(){this.isMobile=window.innerWidth<=mobileBreakpoint;this.validateAutoclose();this.percentage=0};t.prototype.componentDidLoad=function(){this.isTextLong=this.detectWrap()||this.toastText.offsetHeight>20;this.startTime=Date.now();if(this.autoclose&&this.pauseonfocusloss){document.addEventListener("visibilitychange",this.visibilityChangeEventHandler)}this.isdraggable&&this.handleSlideOutDragAnimation()};t.prototype.visibilityChangeEventHandler=function(){if(document.visibilityState==="hidden"){this.timeoutHandle&&this.onBlur()}else{this.elapsedTime&&this.onFocus()}};t.prototype.validateAutoclose=function(){if(!this.autoclose&&!this.closebutton){console.error("At least one between autoclose and closebutton must be present")}};t.prototype.mapSlideOutClass=function(){switch(this.transition){case ToastNotificationTransition.SLIDE_IN_DOWN:return ToastNotificationTransition.SLIDE_OUT_UP;case ToastNotificationTransition.SLIDE_IN_UP:return ToastNotificationTransition.SLIDE_OUT_DOWN;case ToastNotificationTransition.SLIDE_IN_LEFT:return ToastNotificationTransition.SLIDE_OUT_RIGHT;case ToastNotificationTransition.SLIDE_IN_RIGHT:return ToastNotificationTransition.SLIDE_OUT_LEFT}};t.prototype.calculateDraggedPercentage=function(t){var a=this.hostElement.getBoundingClientRect();return Math.round(100*t.deltaX/a.width)};t.prototype.handleSlideOutDragAnimation=function(){var t=this;this.sliderManager=new Hammer(this.hostElement);this.sliderManager.get("pan").set({direction:Hammer.DIRECTION_HORIZONTAL});this.sliderManager.on("pan",(function(a){t.percentage=t.calculateDraggedPercentage(a);t.hostElement.style.transition="none";t.hostElement.classList.remove(t.transition);var e={translate:"translateX(".concat(t.percentage,"%)"),translateBack:"translateX(0)"};t.hostElement.style.opacity="".concat(100-Math.abs(t.percentage),"%");if(a.eventType===Hammer.DIRECTION_LEFT||a.eventType===Hammer.DIRECTION_RIGHT){t.hostElement.style.transform=e.translate;if(Math.abs(t.percentage)>t.draggablepercentage&&!t.isCloseEventCalled){t.isCloseEventCalled=true;t.emitToastClose(a.direction===Hammer.DIRECTION_LEFT?"slide-out-left":"slide-out-right")}}if(a.isFinal&&Math.abs(t.percentage)<t.draggablepercentage){t.hostElement.style.transform=e.translateBack;t.hostElement.style.transition="all 1s";t.hostElement.style.opacity="100%";t.percentage=0}}))};t.prototype.onFocus=function(){var t=this.autoclose;if(this.elapsedTime){t=this.autoclose-this.elapsedTime}if(t>0){this.startClosingTimeout(t)}};t.prototype.onBlur=function(){this.elapsedTime=Date.now()-this.startTime;clearTimeout(this.timeoutHandle)};t.prototype.startClosingTimeout=function(t){var a=this;this.timeoutHandle=window.setTimeout((function(){return a.emitToastClose(a.mapSlideOutClass())}),t)};t.prototype.detectWrap=function(){var t=this.container.offsetWidth;var a=this.container.children;var e=0;for(var i=0;i<a.length;i++){e+=a[i].offsetWidth}return e>t};t.prototype.renderText=function(){var t=this;return h("div",{id:"text",ref:function(a){return t.toastText=a}},h("span",{class:"title"},this.heading),h("span",{class:"message"},this.message))};t.prototype.renderButton=function(){return h("div",{id:"button"},h("slot",{name:"button"}))};t.prototype.renderCloseIcon=function(){var t=this;if(!this.closebutton){return}return h("div",{id:"icon"},h("z-icon",{tabIndex:0,name:"multiply-circled",width:15,height:15,onClick:function(){return t.emitToastClose(t.mapSlideOutClass())},onKeyPress:function(a){if(a.keyCode==32||a.keyCode==13){a.preventDefault();t.emitToastClose(t.mapSlideOutClass())}}}))};t.prototype.renderContainer=function(){var t;var a=this;return h("div",{tabIndex:0,id:"external-container",class:(t={},t[this.type]=!!this.type,t["several-lines-padding"]=this.isTextLong,t),ref:function(t){return a.container=t}},this.renderText(),this.renderButton(),this.renderCloseIcon())};t.prototype.renderMobileContainer=function(){var t;var a=this;return h("div",{id:"external-container",class:(t={},t[this.type]=!!this.type,t["several-lines-padding"]=this.isTextLong,t["mobile-wrapped"]=this.isTextLong,t)},h("div",{id:"flex-container",ref:function(t){return a.container=t}},this.renderText(),this.renderButton()),this.renderCloseIcon())};t.prototype.render=function(){var t=this;return h(Host,{key:"bf20c69f253b702092fe078443eedb9e86fe223a",style:{"--percentuale":"".concat(this.percentage,"%")},class:this.transition?this.transition:ToastNotificationTransition.SLIDE_IN_DOWN,onAnimationEnd:function(a){if(t.autoclose&&a.animationName.includes("slidein")){t.startClosingTimeout(t.autoclose)}if(a.animationName.includes("slideout")){t.hostElement.parentNode.removeChild(t.hostElement)}}},this.isMobile?this.renderMobileContainer():this.renderContainer())};Object.defineProperty(t.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{isdraggable:["watchPropIsdraggable"],autoclose:["watchPropAutoclose"],pauseonfocusloss:["watchPropPauseonfocusloss"]}},enumerable:false,configurable:true});return t}();ZToastNotification.style=ZToastNotificationStyle0;export{ZToastNotification as z_toast_notification};
+//# sourceMappingURL=z-toast-notification.entry.js.map

package/dist/esm-es5/z-toast-notification.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZToastNotificationStyle0","ZToastNotification","this","isCloseEventCalled","prototype","watchPropIsdraggable","newValue","sliderManager","get","set","enable","watchPropAutoclose","clearTimeout","timeoutHandle","startClosingTimeout","watchPropPauseonfocusloss","autoclose","document","addEventListener","visibilityChangeEventHandler","removeEventListener","emitToastClose","cssClass","elapsedTime","hostElement","classList","add","toastClose","emit","componentWillLoad","isMobile","window","innerWidth","mobileBreakpoint","validateAutoclose","percentage","componentDidLoad","isTextLong","detectWrap","toastText","offsetHeight","startTime","Date","now","pauseonfocusloss","isdraggable","handleSlideOutDragAnimation","visibilityState","onBlur","onFocus","closebutton","console","error","mapSlideOutClass","transition","ToastNotificationTransition","SLIDE_IN_DOWN","SLIDE_OUT_UP","SLIDE_IN_UP","SLIDE_OUT_DOWN","SLIDE_IN_LEFT","SLIDE_OUT_RIGHT","SLIDE_IN_RIGHT","SLIDE_OUT_LEFT","calculateDraggedPercentage","e","bounding","getBoundingClientRect","Math","round","deltaX","width","_this","Hammer","direction","DIRECTION_HORIZONTAL","on","style","remove","translateObj","translate","concat","translateBack","opacity","abs","eventType","DIRECTION_LEFT","DIRECTION_RIGHT","transform","draggablepercentage","isFinal","time","setTimeout","parentWidth","container","offsetWidth","children","totalWidth","i","length","renderText","h","id","ref","el","class","heading","message","renderButton","name","renderCloseIcon","tabIndex","height","onClick","onKeyPress","keyCode","preventDefault","renderContainer","_a","type","renderMobileContainer","render","Host","key","onAnimationEnd","animationName","includes","parentNode","removeChild"],"sources":["src/components/z-toast-notification/styles.css?tag=z-toast-notification&encapsulation=shadow","src/components/z-toast-notification/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100vw;\n  min-width: 200px;\n\n  --percentuale: 0;\n}\n\n:host(.slide-in-left) {\n  animation: slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-in-right) {\n  animation: slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-in-down) {\n  animation: slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-in-up) {\n  animation: slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-left) {\n  animation: slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-right) {\n  animation: slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-down) {\n  animation: slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-up) {\n  animation: slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n@keyframes slideinleft {\n  0% {\n    transform: translateX(100%);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideinright {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideinup {\n  0% {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideindown {\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideoutleft {\n  0% {\n    /* stylelint-disable-next-line alpha-value-notation */\n    opacity: calc(100% - var(--percentuale));\n    transform: translateX(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes slideoutright {\n  0% {\n    /* stylelint-disable-next-line alpha-value-notation */\n    opacity: calc(100% - var(--percentuale));\n    transform: translateX(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n}\n\n@keyframes slideoutup {\n  0% {\n    opacity: 1;\n    transform: translateY(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes slideoutdown {\n  0% {\n    opacity: 1;\n    transform: translateY(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n}\n\n:host > #external-container {\n  display: flex;\n  min-height: 52px;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: space-between;\n  padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);\n  border-radius: 4px;\n  box-shadow: var(--shadow-3);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n}\n\n:host > #external-container.mobile-wrapped > #icon {\n  align-self: flex-start;\n}\n\n:host > #external-container.several-lines-padding {\n  padding: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container > #flex-container {\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n}\n\n:host > #external-container #text {\n  margin-right: calc(var(--space-unit) * 2);\n  color: var(--color-white);\n  letter-spacing: 0.16px;\n  line-height: 20px;\n  text-align: left;\n}\n\n:host > #external-container #text > .title {\n  margin-right: 4px;\n  font-weight: 600;\n}\n\n:host > #external-container.mobile-wrapped #button ::slotted(z-button) {\n  margin-top: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container #icon {\n  margin-left: calc(var(--space-unit) * 2);\n  cursor: pointer;\n  fill: var(--color-white);\n}\n\n:host > #external-container.dark {\n  background: var(--gray800);\n}\n\n:host > #external-container.light {\n  background: var(--color-background);\n}\n\n:host > #external-container.light #icon,\n:host > #external-container.warning #text,\n:host > #external-container.warning #icon {\n  fill: var(--color-primary01-icon);\n}\n\n:host > #external-container.light #text,\n:host > #external-container.warning #text {\n  color: var(--gray800);\n}\n\n:host > #external-container.accent {\n  background: var(--color-primary01);\n}\n\n:host > #external-container.error {\n  background: var(--color-error-default);\n}\n\n:host > #external-container.success {\n  background: var(--color-success-default);\n}\n\n:host > #external-container.warning {\n  background: var(--color-warning-default);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host {\n    width: unset;\n    max-width: 50vw;\n  }\n\n  :host > #external-container > #flex-container {\n    flex-wrap: nowrap;\n  }\n\n  :host > #external-container #text {\n    width: 100%;\n  }\n}\n\n/* Wide breakpoint */\n@media only screen and (min-width: 1366px) {\n  :host {\n    width: unset;\n    max-width: 33vw;\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ToastNotification, ToastNotificationTransition} from \"../../beans\";\nimport {mobileBreakpoint} from \"../../constants/breakpoints\";\n\nimport Hammer from \"hammerjs\";\n\n@Component({\n  tag: \"z-toast-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotification {\n  @Element() hostElement: HTMLZToastNotificationElement;\n\n  /** toast notification's title */\n  @Prop()\n  heading?: string;\n\n  /** toast notification's message */\n  @Prop()\n  message: string;\n\n  /** toggles closing button rendering */\n  @Prop()\n  closebutton: boolean;\n\n  /** toast notification closing timeout (ms) */\n  @Prop()\n  autoclose?: number;\n\n  /** toast notification autoclose can be paused */\n  @Prop()\n  pauseonfocusloss?: boolean = true;\n\n  /** toast notification type: dark, light, accent, error, success, warning */\n  @Prop()\n  type?: ToastNotification;\n\n  /** toast notification can be draggable*/\n  @Prop()\n  isdraggable?: boolean = true;\n\n  /** toast notification draggable percentage*/\n  @Prop()\n  draggablepercentage?: number = 80;\n\n  /** toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up*/\n  @Prop()\n  transition?: ToastNotificationTransition;\n\n  @State()\n  percentage: number;\n\n  private isTextLong: boolean;\n\n  private container!: HTMLElement;\n\n  private toastText!: HTMLElement;\n\n  private sliderManager: HammerManager;\n\n  private elapsedTime: number;\n\n  private timeoutHandle: number;\n\n  private startTime: number;\n\n  private isMobile: boolean;\n\n  private isCloseEventCalled = false;\n\n  @Watch(\"isdraggable\")\n  watchPropIsdraggable(newValue: boolean): void {\n    if (newValue) {\n      this.sliderManager.get(\"pan\").set({enable: true});\n    } else {\n      this.sliderManager.get(\"pan\").set({enable: false});\n    }\n  }\n\n  @Watch(\"autoclose\")\n  watchPropAutoclose(newValue: number): void {\n    clearTimeout(this.timeoutHandle);\n    this.startClosingTimeout(newValue);\n  }\n\n  @Watch(\"pauseonfocusloss\")\n  watchPropPauseonfocusloss(newValue: boolean): void {\n    if (this.autoclose) {\n      if (newValue) {\n        document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      } else {\n        document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      }\n    }\n  }\n\n  /** notification close event */\n  @Event()\n  toastClose: EventEmitter;\n\n  private emitToastClose(cssClass: string): void {\n    this.timeoutHandle = null;\n    this.elapsedTime = null;\n    this.hostElement.classList.add(cssClass);\n    this.toastClose.emit();\n  }\n\n  componentWillLoad(): void {\n    this.isMobile = window.innerWidth <= mobileBreakpoint;\n    this.validateAutoclose();\n    this.percentage = 0;\n  }\n\n  componentDidLoad(): void {\n    this.isTextLong = this.detectWrap() || this.toastText.offsetHeight > 20;\n    this.startTime = Date.now();\n    if (this.autoclose && this.pauseonfocusloss) {\n      document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n    }\n\n    this.isdraggable && this.handleSlideOutDragAnimation();\n  }\n\n  private visibilityChangeEventHandler(): void {\n    if (document.visibilityState === \"hidden\") {\n      this.timeoutHandle && this.onBlur();\n    } else {\n      this.elapsedTime && this.onFocus();\n    }\n  }\n\n  private validateAutoclose(): void {\n    if (!this.autoclose && !this.closebutton) {\n      console.error(\"At least one between autoclose and closebutton must be present\");\n    }\n  }\n\n  private mapSlideOutClass(): ToastNotificationTransition {\n    switch (this.transition) {\n      case ToastNotificationTransition.SLIDE_IN_DOWN:\n        return ToastNotificationTransition.SLIDE_OUT_UP;\n      case ToastNotificationTransition.SLIDE_IN_UP:\n        return ToastNotificationTransition.SLIDE_OUT_DOWN;\n      case ToastNotificationTransition.SLIDE_IN_LEFT:\n        return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n      case ToastNotificationTransition.SLIDE_IN_RIGHT:\n        return ToastNotificationTransition.SLIDE_OUT_LEFT;\n    }\n  }\n\n  private calculateDraggedPercentage(e): number {\n    const bounding = this.hostElement.getBoundingClientRect();\n\n    return Math.round((100 * e.deltaX) / bounding.width);\n  }\n\n  private handleSlideOutDragAnimation(): void {\n    this.sliderManager = new Hammer(this.hostElement);\n    this.sliderManager.get(\"pan\").set({\n      direction: Hammer.DIRECTION_HORIZONTAL,\n    });\n\n    this.sliderManager.on(\"pan\", (e) => {\n      this.percentage = this.calculateDraggedPercentage(e);\n      this.hostElement.style.transition = \"none\";\n      this.hostElement.classList.remove(this.transition);\n      const translateObj = {\n        translate: `translateX(${this.percentage}%)`,\n        translateBack: \"translateX(0)\",\n      };\n\n      this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n      if (e.eventType === Hammer.DIRECTION_LEFT || e.eventType === Hammer.DIRECTION_RIGHT) {\n        this.hostElement.style.transform = translateObj.translate;\n        if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n          this.isCloseEventCalled = true;\n          this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\");\n        }\n      }\n\n      if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n        this.hostElement.style.transform = translateObj.translateBack;\n        this.hostElement.style.transition = \"all 1s\";\n        this.hostElement.style.opacity = \"100%\";\n        this.percentage = 0;\n      }\n    });\n  }\n\n  private onFocus(): void {\n    let time = this.autoclose;\n    if (this.elapsedTime) {\n      time = this.autoclose - this.elapsedTime;\n    }\n    if (time > 0) {\n      this.startClosingTimeout(time);\n    }\n  }\n\n  private onBlur(): void {\n    this.elapsedTime = Date.now() - this.startTime;\n    clearTimeout(this.timeoutHandle);\n  }\n\n  private startClosingTimeout(time: number): void {\n    this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);\n  }\n\n  private detectWrap(): boolean {\n    const parentWidth = this.container.offsetWidth;\n    const children = this.container.children;\n    let totalWidth = 0;\n\n    for (let i = 0; i < children.length; i++) {\n      totalWidth += (children[i] as HTMLElement).offsetWidth;\n    }\n\n    return totalWidth > parentWidth;\n  }\n\n  private renderText(): HTMLDivElement {\n    return (\n      <div\n        id=\"text\"\n        ref={(el) => (this.toastText = el as HTMLElement)}\n      >\n        <span class=\"title\">{this.heading}</span>\n        <span class=\"message\">{this.message}</span>\n      </div>\n    );\n  }\n\n  private renderButton(): HTMLDivElement {\n    return (\n      <div id=\"button\">\n        <slot name=\"button\" />\n      </div>\n    );\n  }\n\n  private renderCloseIcon(): HTMLDivElement {\n    if (!this.closebutton) {\n      return;\n    }\n\n    return (\n      <div id=\"icon\">\n        <z-icon\n          tabIndex={0}\n          name=\"multiply-circled\"\n          width={15}\n          height={15}\n          onClick={() => this.emitToastClose(this.mapSlideOutClass())}\n          onKeyPress={(e) => {\n            if (e.keyCode == 32 || e.keyCode == 13) {\n              e.preventDefault();\n              this.emitToastClose(this.mapSlideOutClass());\n            }\n          }}\n        />\n      </div>\n    );\n  }\n\n  private renderContainer(): HTMLDivElement {\n    return (\n      <div\n        tabIndex={0}\n        id=\"external-container\"\n        class={{\n          [this.type]: !!this.type,\n          \"several-lines-padding\": this.isTextLong,\n        }}\n        ref={(el) => (this.container = el as HTMLElement)}\n      >\n        {this.renderText()}\n        {this.renderButton()}\n        {this.renderCloseIcon()}\n      </div>\n    );\n  }\n\n  private renderMobileContainer(): HTMLDivElement {\n    return (\n      <div\n        id=\"external-container\"\n        class={{\n          [this.type]: !!this.type,\n          \"several-lines-padding\": this.isTextLong,\n          \"mobile-wrapped\": this.isTextLong,\n        }}\n      >\n        <div\n          id=\"flex-container\"\n          ref={(el) => (this.container = el as HTMLElement)}\n        >\n          {this.renderText()}\n          {this.renderButton()}\n        </div>\n        {this.renderCloseIcon()}\n      </div>\n    );\n  }\n\n  render(): HTMLZToastNotificationElement {\n    return (\n      <Host\n        style={{\n          \"--percentuale\": `${this.percentage}%`,\n        }}\n        class={this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN}\n        onAnimationEnd={(e: AnimationEvent) => {\n          if (this.autoclose && e.animationName.includes(\"slidein\")) {\n            this.startClosingTimeout(this.autoclose);\n          }\n          if (e.animationName.includes(\"slideout\")) {\n            this.hostElement.parentNode.removeChild(this.hostElement);\n          }\n        }}\n      >\n        {this.isMobile ? this.renderMobileContainer() : this.renderContainer()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm-es5/z-toggle-button.entry.js

@@ -0,0 +1,2 @@
+import{r as registerInstance,c as createEvent,h}from"./index-ab5f1eaa.js";var stylesCss="button{display:-ms-flexbox;display:flex;height:36px;-ms-flex-align:center;align-items:center;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--color-surface01);border-radius:var(--border-radius);-webkit-box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}button:active{border-color:var(--color-pressed-primary);-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button:disabled{color:var(--color-disabled03);fill:var(--color-disabled03)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:all 200ms linear;transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}";var ZToggleButtonStyle0=stylesCss;var ZToggleButton=function(){function r(r){registerInstance(this,r);this.toggleClick=createEvent(this,"toggleClick",7);this.label=undefined;this.isdisabled=false;this.avoidclick=undefined;this.opened=false;this.ariaLabel=""}r.prototype.emitToggleClick=function(){if(this.isdisabled){return}this.opened=!this.opened;this.toggleClick.emit(this.opened)};r.prototype.render=function(){var r=this;return h("button",{key:"809ca74c63187ce21d411516d595bda6ed5b082b",tabindex:this.avoidclick?"-1":"0",class:{isopen:this.opened,"avoid-clicks":this.avoidclick},disabled:this.isdisabled,"aria-expanded":this.opened?"true":"false","aria-label":this.ariaLabel,onClick:function(){return r.emitToggleClick()}},h("z-icon",{key:"66af2faa257599724f2506230eae3c0c612c0700",name:this.opened?"chevron-down":"chevron-up",width:16,height:16}),this.label)};return r}();ZToggleButton.style=ZToggleButtonStyle0;export{ZToggleButton as z_toggle_button};
+//# sourceMappingURL=z-toggle-button.entry.js.map

package/dist/esm-es5/z-toggle-button.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZToggleButtonStyle0","ZToggleButton","prototype","emitToggleClick","this","isdisabled","opened","toggleClick","emit","render","_this","h","key","tabindex","avoidclick","class","isopen","disabled","ariaLabel","onClick","name","width","height","label"],"sources":["src/components/z-toggle-button/styles.css?tag=z-toggle-button&encapsulation=shadow","src/components/z-toggle-button/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  height: 36px;\n  align-items: center;\n  padding-right: calc(var(--space-unit) * 2);\n  padding-left: 0;\n  border: var(--border-size-medium) solid;\n  border-color: transparent;\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  outline: none;\n  text-transform: uppercase;\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n\nbutton:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n  box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active {\n  border-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n  fill: var(--color-pressed-primary);\n}\n\nbutton:disabled {\n  color: var(--color-disabled03);\n  fill: var(--color-disabled03);\n}\n\nz-icon {\n  display: inline-block;\n  margin: 0 var(--space-unit) 0 calc(var(--space-unit) * 2);\n  transform: rotate(360deg);\n  transition: all 200ms linear;\n}\n\nbutton.isopen {\n  top: -20px;\n}\n\nbutton.avoid-clicks {\n  pointer-events: none;\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-toggle-button\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToggleButton {\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** disabled status flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** avoidclick status flag */\n  @Prop()\n  avoidclick: boolean;\n\n  /** open by default (optional) */\n  @Prop({mutable: true})\n  opened?: boolean = false;\n\n  /**  aria-label for the button */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** emitted on toggle button click, returns isOpen */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    if (this.isdisabled) {\n      return;\n    }\n\n    this.opened = !this.opened;\n    this.toggleClick.emit(this.opened);\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        tabindex={this.avoidclick ? \"-1\" : \"0\"}\n        class={{\n          \"isopen\": this.opened,\n          \"avoid-clicks\": this.avoidclick,\n        }}\n        disabled={this.isdisabled}\n        aria-expanded={this.opened ? \"true\" : \"false\"}\n        aria-label={this.ariaLabel}\n        onClick={() => this.emitToggleClick()}\n      >\n        <z-icon\n          name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n          width={16}\n          height={16}\n        />\n        {this.label}\n      </button>\n    );\n  }\n}\n"],"mappings":"0EAAA,IAAMA,UAAY,4xCAClB,IAAAC,oBAAeD,U,ICMFE,cAAa,W,+HAOD,M,sCAQJ,M,eAIP,E,CAMJA,EAAAC,UAAAC,gBAAA,WACN,GAAIC,KAAKC,WAAY,CACnB,M,CAGFD,KAAKE,QAAUF,KAAKE,OACpBF,KAAKG,YAAYC,KAAKJ,KAAKE,O,EAG7BL,EAAAC,UAAAO,OAAA,eAAAC,EAAAN,KACE,OACEO,EAAA,UAAAC,IAAA,2CACEC,SAAUT,KAAKU,WAAa,KAAO,IACnCC,MAAO,CACLC,OAAUZ,KAAKE,OACf,eAAgBF,KAAKU,YAEvBG,SAAUb,KAAKC,WAAU,gBACVD,KAAKE,OAAS,OAAS,QAAO,aACjCF,KAAKc,UACjBC,QAAS,WAAM,OAAAT,EAAKP,iBAAL,GAEfQ,EAAA,UAAAC,IAAA,2CACEQ,KAAMhB,KAAKE,OAAS,eAAiB,aACrCe,MAAO,GACPC,OAAQ,KAETlB,KAAKmB,M,WApDY,G","ignoreList":[]}