@zanichelli/albe-web-components 19.5.0 → 19.6.0

package/www/build/p-eb22ba82.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZSelect","constructor","hostRef","this","htmlid","randomId","items","ariaLabel","disabled","readonly","message","autocomplete","noresultslabel","isfixed","size","ControlSize","BIG","isOpen","selectedItem","itemsList","toggleSelectUl","bind","handleSelectFocus","watchItems","getInitialItemsArray","findSelectedItem","getSelectedItem","getValue","getSelectedValue","setValue","value","values","push","length","updateSelection","emitOptionSelect","optionSelect","emit","id","selected","emitResetSelect","resetSelect","componentWillLoad","componentWillRender","filterItems","searchString","JSON","parse","mapSelectedItemToItemsArray","initialItemsList","_a","getOptionId","item","encodeString","name","getResetOptionId","getGroupedItems","Object","entries","reduce","group","category","prevList","map","assign","getPlainText","hasTreeItems","filterTree","filter","toUpperCase","includes","getHighlightedText","matchingParent","match","newItem","children","showChildrenOfMatchingParent","text","search","upperText","upperSearch","start","indexOf","end","substring","hasAutocomplete","boolean","handleInputChange","e","detail","selectedId","forEach","found","selectItem","handleResetClick","focusedItemId","handleInputKeyDown","code","KeyboardCode","ENTER","SPACE","find","ARROW_DOWN","ARROW_UP","arrowsSelectNav","arrows","key","preventDefault","stopPropagation","currElem","host","querySelector","options","Array","from","querySelectorAll","currElemIndex","firstElemIndex","lastElemIndex","focusSelectItem","nextElem","optionId","elem","scrollIntoView","block","container","selfFocusOnClose","document","addEventListener","removeEventListener","focus","handleInputClick","target","closest","KeyboardEvent","ESC","TAB","clickedElement","getClickedElement","hasAttribute","getElementTree","nodeName","toLowerCase","zSelect","scrollToLetter","letter","foundItem","charAt","renderInput","undefined","h","class","placeholder","label","icon","hasclearicon","status","role","onClick","onKeyDown","onInputChange","onKeyPress","renderSelectUl","fixed","tabindex","listSizeType","resetItem","renderResetItem","renderSelectUlItems","hidden","hide","hasGroupItems","clickable","dividerType","ListDividerType","ELEMENT","htmlTabindex","ListSize","MEDIUM","onClickItem","active","renderItem","lastItem","HEADER","innerHTML","NONE","SMALL","X_SMALL","renderNoSearchResults","renderGroupedTree","renderSelectGroupItems","index","array","isLastItem","parentHasSiblings","renderTreeItems","isLastChild","isTopLevel","disabledAncestor","isDisabled","hasDivider","_b","title","child","arr","groupedItems","some","groupItems","slot","i","style","zIndex","height","isLastGroup","subindex","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-form-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 > z-input .input-icon {\n  cursor: pointer;\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  border-top: none;\n  background: var(--color-form-background);\n  box-shadow: var(--shadow-2);\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 z-list {\n  --background-color-list-element: var(--color-form-background);\n  --background-hover-color-list-element: var(--color-surface02);\n  --background-active-color-list-element: var(--color-surface02);\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list {\n  position: relative;\n  overflow: auto;\n  max-height: 240px;\n  padding: var(--space-unit) calc(var(--space-unit) * 1.5);\n  margin: 0;\n  outline: none;\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element[disabled] {\n  color: var(--color-form-disabled03);\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: calc(var(--space-unit) / 2) var(--space-unit);\n  column-gap: var(--space-unit);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container.active {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content {\n  margin-right: auto;\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon + .list-element-content {\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: var(--font-sb);\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(--color-form-default-text);\n}\n\n.reset-item {\n  color: var(--color-form-active-primary);\n  fill: var(--color-form-active-primary);\n}\n\n.reset-item-content {\n  display: flex;\n  align-items: center;\n}\n\n.reset-item .reset-item-content.active {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.reset-item.reset-item-margin .reset-item-content {\n  margin-left: 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\n.tree-list-reset-item {\n  padding: var(--space-unit) 0;\n}\n\nz-list-element {\n  position: relative;\n  display: block;\n}\n\nz-list z-list-element::before {\n  position: absolute;\n  z-index: 100;\n  top: 3px;\n  left: -8px;\n  width: 8px;\n  height: 1em;\n  border-bottom: 1px solid var(--color-form-disabled01-icon);\n  border-left: 1px solid var(--color-form-disabled01-icon);\n  content: \"\";\n  cursor: pointer;\n}\n\nz-list z-list-element::after {\n  position: absolute;\n  z-index: 100;\n  top: 5px;\n  left: -8px;\n  width: 8px;\n  height: 100%;\n  border-left: 1px solid var(--color-form-disabled01-icon);\n  content: \"\";\n  cursor: pointer;\n}\n\nz-list z-list-element:last-child::after {\n  display: none;\n}\n\nz-list > z-list-element::before,\nz-list > z-list-element::after,\nz-list > z-list-group > z-list-element::before,\nz-list > z-list-group > z-list-element::after {\n  display: none;\n}\n\nz-list > div.children-node {\n  padding-left: calc(var(--space-unit) * 2);\n}\n\nz-list-element > .list-element {\n  display: flex;\n  justify-content: space-between;\n  padding: calc(var(--space-unit) * 1.5) var(--space-unit);\n  cursor: pointer;\n}\n\nz-list-element > .list-element.active {\n  box-shadow: var(--shadow-focus-primary);\n}\n\nz-list-element:not([disabled]) > .list-element:hover,\nz-list-element:not([disabled]) > .list-element:hover::after {\n  background-color: var(--background-hover-color-list-element, var(--color-background));\n}\n\nz-list-element > .list-element .item.ellipsis {\n  overflow: hidden;\n}\n\nz-list-element .list-element::after {\n  position: absolute;\n  top: 0;\n  right: -1px;\n  display: block;\n  width: 100%;\n  height: 45px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\nz-list-element.tree-search-item {\n  padding-top: 0;\n}\n\nz-list-element.tree-search-item .list-element::after {\n  position: absolute;\n  right: -25px;\n  display: block;\n  width: 100%;\n  height: 45px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\nz-list-element.grouped-tree-parent-node .list-element::after {\n  position: absolute;\n  right: -25px;\n  display: block;\n  width: 100%;\n  height: 45px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\n.item-label.selected {\n  font-weight: bold;\n}\n\n.item.ellipsis {\n  display: inline-block;\n  overflow: hidden;\n  max-width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nz-list > z-list-element.grouped-tree-parent-node > .list-element:hover::after,\nz-list-element.tree-search-item .list-element:hover::after,\nz-list > z-list-group > z-list-element.grouped-tree-parent-node > .list-element:hover::after {\n  position: absolute;\n  z-index: -1;\n  right: -18px;\n  display: block;\n  width: 100%;\n  height: 45px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\nz-list-element > .list-element:hover::after {\n  position: absolute;\n  z-index: -1;\n  top: 0;\n  right: 0;\n  display: block;\n  width: 100%;\n  height: 45px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\n.children-node z-list-element::before,\n.children-node z-list-element::after {\n  left: -8px;\n}\n\n.children-node .children-node z-list-element::before,\n.children-node .children-node z-list-element::after {\n  left: -8px;\n}\n\n.children-node > z-list-element {\n  padding: 0;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {ControlSize, InputStatus, KeyboardCode, ListDividerType, ListSize, SelectItem} from \"../../beans\";\nimport {boolean, encodeString, getClickedElement, getElementTree, getPlainText, 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 implements ComponentInterface {\n  @Element() host: 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  /** */\n  @Prop()\n  hasTreeItems?: boolean;\n\n  /** If true and an item matches the search string, children of matching item are shown even if they don't match the search string  */\n  @Prop()\n  showChildrenOfMatchingParent?: 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.handleSelectFocus = this.handleSelectFocus.bind(this);\n  }\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.itemsList = this.getInitialItemsArray();\n\n    this.selectedItem = this.findSelectedItem(this.itemsList);\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.itemsList = this.getInitialItemsArray();\n    if (values.length) {\n      this.updateSelection(this.itemsList, values[0]);\n    }\n    this.selectedItem = this.findSelectedItem(this.itemsList);\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    this.updateSelection(initialItemsList, this.selectedItem?.id);\n\n    return initialItemsList;\n  }\n\n  private getSelectedValue(): string {\n    return this.selectedItem?.id;\n  }\n\n  private getOptionId(item: SelectItem): string {\n    return `${this.htmlid}_key_${item.id ? encodeString(`${item.id}`) : encodeString(`${item.name}`)}`;\n  }\n\n  private getResetOptionId(): string {\n    return `${this.htmlid}_key_reset`;\n  }\n\n  private getGroupedItems(): [string, SelectItem[]][] {\n    if (!this.itemsList.length) {\n      return [];\n    }\n\n    return Object.entries(\n      this.itemsList.reduce(\n        (group, item) => {\n          const category = item.category || \"Altra categoria\";\n          group[category] = group[category] || [];\n          group[category].push(item);\n\n          return group;\n        },\n        {} as Record<string, SelectItem[]>\n      )\n    );\n  }\n\n  private filterItems(searchString: string): void {\n    let prevList = this.mapSelectedItemToItemsArray();\n\n    if (!searchString?.length) {\n      this.itemsList = prevList;\n\n      return;\n    }\n\n    prevList = prevList.map((item) => ({...item, name: getPlainText(item.name)}));\n\n    if (this.hasTreeItems) {\n      this.itemsList = this.filterTree(prevList, searchString, false);\n    } else {\n      this.itemsList = prevList\n        .filter((item: SelectItem) => item.name.toUpperCase().includes(searchString.toUpperCase()))\n        .map((item: SelectItem) => {\n          item.name = this.getHighlightedText(item.name, searchString);\n\n          return item;\n        });\n    }\n  }\n\n  private filterTree(items: SelectItem[], searchString: string, matchingParent: boolean): SelectItem[] {\n    if (!items) {\n      return [];\n    }\n\n    return items\n      .map((item) => {\n        const match = item.name.toUpperCase().includes(searchString.toUpperCase());\n\n        const newItem: SelectItem = {...item};\n        if (newItem.children && newItem.children.length > 0) {\n          newItem.children = this.filterTree(\n            newItem.children.map((item) => ({...item, name: getPlainText(item.name)})),\n            searchString,\n            match\n          );\n        }\n\n        if (match) {\n          newItem.name = this.getHighlightedText(newItem.name, searchString);\n        }\n        if (\n          match ||\n          (newItem.children && newItem.children.length > 0) ||\n          (this.showChildrenOfMatchingParent && matchingParent)\n        ) {\n          return newItem;\n        }\n\n        return null;\n      })\n      .filter((item) => item !== null) as SelectItem[];\n  }\n\n  private getHighlightedText(text: string, search: string): string {\n    const upperText = text.toUpperCase();\n    const upperSearch = search.toUpperCase();\n    const start = upperText.indexOf(upperSearch);\n\n    if (start === -1) {\n      return text;\n    }\n\n    const end = start + search.length;\n\n    return text.substring(0, start) + `<strong>${text.substring(start, end)}</strong>` + text.substring(end);\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 updateSelection(items: SelectItem[], selectedId: string): void {\n    if (items) {\n      items.forEach((item) => {\n        item.selected = item.id === selectedId;\n        if (item.children && item.children.length > 0) {\n          this.updateSelection(item.children, selectedId);\n        }\n      });\n    }\n  }\n\n  private findSelectedItem(items: SelectItem[]): SelectItem | null {\n    if (items) {\n      for (const item of items) {\n        if (item.selected) {\n          return item;\n        }\n        if (item.children && item.children.length > 0) {\n          const found = this.findSelectedItem(item.children);\n          if (found) {\n            return found;\n          }\n        }\n      }\n    }\n\n    return null;\n  }\n\n  private selectItem(selected: null | SelectItem): void {\n    if (selected?.disabled) {\n      return;\n    }\n\n    this.itemsList = this.getInitialItemsArray();\n\n    if (selected) {\n      this.updateSelection(this.itemsList, selected.id);\n    }\n\n    this.selectedItem = this.findSelectedItem(this.itemsList);\n    this.emitOptionSelect();\n    this.toggleSelectUl();\n    if (this.searchString) {\n      this.searchString = null;\n    }\n  }\n\n  private handleResetClick(): void {\n    this.selectedItem = null;\n    this.searchString = null;\n    this.focusedItemId = \"\";\n    this.emitResetSelect();\n    this.toggleSelectUl();\n  }\n\n  private handleInputKeyDown(e: KeyboardEvent): void {\n    switch (e.code as KeyboardCode) {\n      case KeyboardCode.ENTER:\n      case KeyboardCode.SPACE:\n        if (this.focusedItemId) {\n          if (this.focusedItemId === this.getResetOptionId()) {\n            this.handleResetClick();\n          } else {\n            const item = this.itemsList.find((e) => this.getOptionId(e) === this.focusedItemId) || null;\n            if (item) {\n              this.selectedItem = item;\n              this.emitOptionSelect();\n              this.toggleSelectUl();\n            }\n          }\n        }\n        break;\n      case KeyboardCode.ARROW_DOWN:\n      case KeyboardCode.ARROW_UP:\n        this.arrowsSelectNav(e);\n        break;\n    }\n  }\n\n  private arrowsSelectNav(e: KeyboardEvent): void {\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n\n    if (!arrows.includes(e.key as KeyboardCode)) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    const currElem = this.focusedItemId ? this.host.querySelector(`#${this.focusedItemId}`) : null;\n    const options = Array.from(this.host.querySelectorAll('[role=\"option\"]'));\n\n    if (!options.length) {\n      return;\n    }\n\n    const currElemIndex = currElem ? options.indexOf(currElem) : null;\n    const firstElemIndex = 0;\n    const lastElemIndex = options.length - 1;\n\n    if (!this.isOpen) {\n      this.toggleSelectUl();\n\n      if (this.selectedItem) {\n        this.focusSelectItem(this.getOptionId(this.selectedItem));\n\n        return;\n      }\n    }\n\n    let nextElem = null;\n    if (e.code === KeyboardCode.ARROW_DOWN) {\n      nextElem =\n        currElemIndex === null ? options[firstElemIndex] : options[currElemIndex + 1] || options[lastElemIndex];\n    } else if (e.code === KeyboardCode.ARROW_UP) {\n      nextElem =\n        currElemIndex === null ? options[lastElemIndex] : options[currElemIndex - 1] || options[firstElemIndex];\n    }\n\n    this.focusSelectItem(nextElem.id);\n  }\n\n  private focusSelectItem(optionId: string): void {\n    this.focusedItemId = optionId;\n    const elem = this.host.querySelector(`#${optionId}`);\n    // @ts-expect-error 'container' does not exist in type 'ScrollIntoViewOptions'\n    elem.scrollIntoView({block: \"nearest\", container: \"nearest\"});\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.host.querySelector(`#${this.htmlid}_select_input`) as HTMLInputElement)?.focus();\n      }\n\n      if (this.selectedItem && this.searchString) {\n        this.searchString = null;\n        this.filterItems(this.searchString);\n      }\n    }\n\n    this.focusedItemId = \"\";\n    this.isOpen = !this.isOpen;\n  }\n\n  private handleInputClick(e: MouseEvent | KeyboardEvent): void {\n    if ((e.target as HTMLElement).closest(\".reset-icon\")) {\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) {\n      return;\n    }\n\n    const clickedElement = getClickedElement();\n    if (clickedElement?.hasAttribute(\"disabled\")) {\n      return;\n    }\n\n    if (\n      !getElementTree(clickedElement).find(\n        (elem: HTMLElement) => elem.nodeName.toLowerCase() === \"z-input\" && elem.id === `${this.htmlid}_input`\n      )\n    ) {\n      const zSelect = getElementTree(clickedElement).find((e) => e.nodeName === \"Z-SELECT\");\n      this.toggleSelectUl(zSelect === this.host);\n    }\n  }\n\n  private scrollToLetter(letter: string): void {\n    if (!this.itemsList.length) {\n      return;\n    }\n\n    const foundItem = this.itemsList.find(\n      (item: SelectItem) => item.name.toLowerCase().charAt(0) === letter.toLowerCase()\n    );\n    if (foundItem) {\n      if (!this.isOpen) {\n        this.toggleSelectUl();\n      }\n      this.focusSelectItem(this.getOptionId(foundItem));\n    }\n  }\n\n  private renderInput(): HTMLElement[] {\n    let value = null;\n    if (this.selectedItem) {\n      value = getPlainText(this.selectedItem.name);\n    }\n    if (this.isOpen && this.searchString !== undefined) {\n      value = this.searchString;\n    }\n\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={value}\n        label={this.label}\n        autocomplete=\"off\"\n        aria-label={this.ariaLabel}\n        icon={this.isOpen ? \"caret-up\" : \"caret-down\"}\n        hasclearicon={false}\n        message={false}\n        name={this.name}\n        disabled={this.disabled}\n        readonly={this.readonly || (!this.hasAutocomplete() && this.isOpen)}\n        status={this.isOpen ? undefined : this.status}\n        size={this.size}\n        role=\"combobox\"\n        html-aria-expanded={this.isOpen ? \"true\" : \"false\"}\n        html-aria-controls={`${this.htmlid}_list`}\n        html-aria-activedescendant={this.isOpen ? this.focusedItemId : \"\"}\n        html-aria-autocomplete={this.hasAutocomplete() ? \"list\" : undefined}\n        onClick={(e: MouseEvent) => this.handleInputClick(e)}\n        onKeyDown={(e: KeyboardEvent) => this.handleInputKeyDown(e)}\n        onInputChange={(e: CustomEvent) => this.handleInputChange(e)}\n        onKeyPress={(e: KeyboardEvent) => {\n          if (!this.hasAutocomplete()) {\n            e.preventDefault();\n            this.scrollToLetter(e.key);\n          }\n        }}\n      />,\n    ];\n  }\n\n  private renderSelectUl(): HTMLDivElement {\n    return (\n      <div class={this.isOpen ? \"open\" : \"closed\"}>\n        <div\n          class={{\n            \"ul-scroll-wrapper\": true,\n            \"fixed\": this.isfixed,\n          }}\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              [`input-${this.status}`]: !this.isOpen && !!this.status,\n              \"z-scrollbar\": true,\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    const hidden = !this.selectedItem || !this.resetItem;\n\n    return (\n      <z-list-element\n        class={{\n          \"hide\": hidden,\n          \"reset-item\": true,\n          \"reset-item-margin\": !this.hasGroupItems,\n        }}\n        clickable={true}\n        disabled={false}\n        dividerType={ListDividerType.ELEMENT}\n        role={hidden ? \"presentation\" : \"option\"}\n        htmlTabindex={this.isOpen ? 0 : null}\n        aria-selected=\"false\"\n        aria-label={hidden ? undefined : this.resetItem}\n        id={this.getResetOptionId()}\n        size={this.hasTreeItems ? ListSize.MEDIUM : this.listSizeType()}\n        onClickItem={() => this.handleResetClick()}\n      >\n        <div\n          class={{\n            \"reset-item-content\": true,\n            \"tree-list-reset-item\": this.hasTreeItems,\n            \"active\": this.focusedItemId === this.getResetOptionId(),\n          }}\n          aria-hidden=\"true\"\n        >\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, 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={item.disabled ? \"presentation\" : \"option\"}\n        htmlTabindex={-1}\n        aria-selected={item.selected ? \"true\" : \"false\"}\n        aria-label={item.disabled ? undefined : getPlainText(item.name)}\n        id={this.getOptionId(item)}\n        size={this.listSizeType()}\n        onClickItem={() => this.selectItem(item)}\n      >\n        <div\n          class={{\n            \"list-element-container\": true,\n            \"active\": this.focusedItemId === this.getOptionId(item),\n          }}\n          aria-hidden=\"true\"\n        >\n          <div\n            class={{\n              \"selected\": !!item.selected,\n              \"list-element-content\": true,\n            }}\n            innerHTML={item.name}\n          />\n          {item.icon && <z-tag icon={item.icon}></z-tag>}\n        </div>\n      </z-list-element>\n    );\n  }\n\n  private listSizeType(): ListSize {\n    if (this.hasTreeItems) {\n      return ListSize.NONE;\n    }\n\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():\n    | HTMLZListElementElement\n    | (HTMLZListElementElement | HTMLZListElementElement[])[]\n    | HTMLZListGroupElement[] {\n    if (!this.itemsList.length) {\n      return this.renderNoSearchResults();\n    }\n\n    if (this.hasGroupItems) {\n      if (this.hasTreeItems) {\n        return this.renderGroupedTree();\n      }\n\n      return this.renderSelectGroupItems();\n    }\n\n    return this.itemsList.map((item: SelectItem, index, array) => {\n      const isLastItem = index === array.length - 1;\n      const parentHasSiblings = array.length > 1;\n\n      if (this.hasTreeItems) {\n        return this.renderTreeItems(item, isLastItem, parentHasSiblings, true, item.disabled);\n      }\n\n      return this.renderItem(item, isLastItem);\n    });\n  }\n\n  private renderTreeItems(\n    item: SelectItem,\n    isLastChild: boolean,\n    parentHasSiblings: boolean,\n    isTopLevel?: boolean,\n    disabledAncestor?: boolean\n  ): HTMLZListElementElement[] {\n    const isDisabled = item.disabled || disabledAncestor;\n\n    const hasDivider = this.hasGroupItems\n      ? undefined\n      : this.hasGroupItems\n        ? isLastChild && !parentHasSiblings\n          ? ListDividerType.ELEMENT\n          : undefined\n        : isTopLevel && parentHasSiblings && !isLastChild\n          ? ListDividerType.ELEMENT\n          : undefined;\n\n    return (\n      <z-list-element\n        clickable={!item.disabled}\n        disabled={isDisabled}\n        class={{\n          \"grouped-tree-parent-node\": this.hasGroupItems && !!item.children?.length,\n          \"tree-search-item\": this.hasGroupItems && isTopLevel && !item.children?.length && !!this.searchString,\n        }}\n        size={this.listSizeType()}\n        dividerType={hasDivider}\n        hasTreeItems={this.hasTreeItems}\n        htmlTabindex={null}\n        role=\"presentation\"\n      >\n        <div\n          id={this.getOptionId(item)}\n          role={isDisabled ? \"presentation\" : \"option\"}\n          aria-label={isDisabled ? undefined : getPlainText(item.name)}\n          class={{\"list-element\": true, \"active\": this.focusedItemId === this.getOptionId(item)}}\n          onClick={() => this.selectItem(item)}\n        >\n          <span\n            class=\"item ellipsis\"\n            aria-hidden=\"true\"\n          >\n            <span\n              class={{\n                \"item-label\": true,\n                \"selected\": !!item.selected,\n              }}\n              title={item.name}\n              innerHTML={item.name}\n            />\n          </span>\n          {item.icon && <z-tag icon={item.icon}></z-tag>}\n        </div>\n        {item.children && item.children.length > 0 ? (\n          <z-list role=\"presentation\">\n            <div class=\"children-node\">\n              {item.children.map((child, index, arr) =>\n                this.renderTreeItems(\n                  child,\n                  index === arr.length - 1,\n                  arr.length > 1,\n                  false, // isTopLevel = false for children\n                  isDisabled\n                )\n              )}\n            </div>\n          </z-list>\n        ) : null}\n      </z-list-element>\n    );\n  }\n\n  private renderGroupedTree(): HTMLZListGroupElement[] {\n    const groupedItems = this.getGroupedItems();\n\n    return groupedItems.map(([category, items], index, entries) => {\n      const parentHasSiblings = Object.values(groupedItems).some((groupItems) => groupItems.length > 1);\n\n      return (\n        <z-list-group\n          divider-type={index === entries.length - 1 ? undefined : ListDividerType.ELEMENT}\n          hasTreeItems={true}\n          aria-labelledby={`${this.htmlid}_tree_${index}`}\n        >\n          <span\n            class=\"body-3-sb z-list-group-title\"\n            slot=\"header-title\"\n            id={`${this.htmlid}_tree_${index}`}\n            aria-hidden=\"true\"\n          >\n            {category}\n          </span>\n          <z-list role=\"presentation\">\n            {items.map((item, i, arr) => [\n              this.renderTreeItems(item, i === arr.length - 1, parentHasSiblings, true, item.disabled),\n              i < arr.length - 1 ? (\n                <z-divider\n                  key={`divider-${i}`}\n                  style={{zIndex: \"100\", height: \"var(--border-size-small)\"}}\n                />\n              ) : null,\n            ])}\n          </z-list>\n          {index !== entries.length - 1 && <z-divider style={{zIndex: \"100\", height: \"var(--border-size-small)\"}} />}\n        </z-list-group>\n      );\n    });\n  }\n\n  private renderSelectGroupItems(): HTMLZListElementElement[] {\n    const groupedItems = this.getGroupedItems();\n\n    return groupedItems.map(([key, items], index) => {\n      const isLastGroup = groupedItems.length === index + 1;\n\n      return (\n        <z-list-group\n          divider-type={ListDividerType.ELEMENT}\n          aria-labelledby={`${this.htmlid}_group_${index}`}\n        >\n          <span\n            class=\"body-3-sb z-list-group-title\"\n            slot=\"header-title\"\n            id={`${this.htmlid}_group_${index}`}\n            aria-hidden=\"true\"\n          >\n            {key}\n          </span>\n          {items.map((item, subindex) => {\n            const isLastItem = items.length === subindex + 1;\n\n            return this.renderItem(item, isLastGroup && isLastItem);\n          })}\n        </z-list-group>\n      );\n    });\n  }\n\n  private renderNoSearchResults(): HTMLZListElementElement {\n    return (\n      <z-list-element\n        class=\"no-results\"\n        size={this.hasTreeItems ? ListSize.MEDIUM : this.listSizeType()}\n        htmlTabindex={null}\n        role=\"presentation\"\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        disabled={this.disabled}\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/www/build/p-f9e5a0aa.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZToggleButton","constructor","hostRef","this","isdisabled","opened","ariaLabel","emitToggleClick","toggleClick","emit","render","h","key","tabindex","avoidclick","class","isopen","disabled","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: var(--shadow-2);\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, ComponentInterface, 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 implements ComponentInterface {\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":"6CAAA,MAAMA,EAAY,IAAM,kiC,MCOXC,EAAa,MAL1B,WAAAC,CAAAC,G,mDAYEC,KAAAC,WAAuB,MAQvBD,KAAAE,OAAmB,MAInBF,KAAAG,UAAY,EAqCb,CA/BS,eAAAC,GACN,GAAIJ,KAAKC,WAAY,CACnB,M,CAGFD,KAAKE,QAAUF,KAAKE,OACpBF,KAAKK,YAAYC,KAAKN,KAAKE,O,CAG7B,MAAAK,GACE,OACEC,EAAA,UAAAC,IAAA,2CACEC,SAAUV,KAAKW,WAAa,KAAO,IACnCC,MAAO,CACLC,OAAUb,KAAKE,OACf,eAAgBF,KAAKW,YAEvBG,SAAUd,KAAKC,WAAU,gBACVD,KAAKE,OAAS,OAAS,QAAO,aACjCF,KAAKG,UACjBY,QAAS,IAAMf,KAAKI,mBAEpBI,EAAA,UAAAC,IAAA,2CACEO,KAAMhB,KAAKE,OAAS,eAAiB,aACrCe,MAAO,GACPC,OAAQ,KAETlB,KAAKmB,M","ignoreList":[]}