@zanichelli/albe-web-components 20.0.0-RC1 → 20.0.1

package/www/build/p-5a43af47.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","SUPPORT_INTERSECTION_OBSERVER","IntersectionObserver","ZAppHeader","onStuck","scrollParent","this","sticking","emit","_stuck","setMenuFloatingMode","menuElements","length","forEach","element","open","verticalContext","drawerOpen","onStuckChange","container","stuck","_a","stuckIntersecObserver","observe","_b","unobserve","title","hostElement","querySelector","textContent","trim","parent","offsetParent","document","body","documentElement","window","canShowMenu","enableOffcanvas","isMobile","focusableMenu","find","el","htmlTabindex","openDrawer","index","setTimeout","setFocus","closeDrawer","burgerButton","focus","collectMenuElements","Array","from","querySelectorAll","menuLength","menuWidth","reduce","acc","getBoundingClientRect","width","setupMenuResizeObserver","menuResizeObserver","ResizeObserver","entries","containerWidth","contentBoxSize","inlineSize","hasSlot","slotName","moveFocus","current","receiver","onOffcanvasKeydown","ev","key","KeyboardCode","TAB","closestMenu","target","closest","preventDefault","stopPropagation","closeDrawerButton","shiftKey","filter","menu","pop","manageMenus","targetMenu","containsElement","handleKeydown","ESC","some","elem","contains","currentIndex","indexOf","ARROW_RIGHT","ARROW_DOWN","ARROW_LEFT","ARROW_UP","focusLastItem","renderSeachbar","searchPageUrl","isTablet","h","class","variant","ButtonVariant","SECONDARY","href","icon","size","ControlSize","X_SMALL","searchLabel","value","searchString","placeholder","searchPlaceholder","label","showSearchButton","searchButtonIconOnly","searchButtonLabel","undefined","preventSubmit","onSearchTyping","e","detail","renderProductLogos","Fragment","enableZLogo","alt","name","renderMenuButton","ref","onClick","renderOffcanvas","id","OffCanvasVariant","OVERLAY","transitiondirection","TransitionDirection","RIGHT","onCanvasOpenStatusChanged","onKeyDown","slot","disabled","onSlotchange","renderStuck","enableSearch","constructor","hostRef","entry","isIntersecting","threshold","bind","componentWillLoad","mobileMediaQuery","matchMedia","Breakpoints","MOBILE","matches","addEventListener","tabletMediaQuery","TABLET","componentDidLoad","disconnectedCallback","disconnect","render","hasTopSubtitle","Host","role","ZButton","type","ButtonType","BUTTON","PRIMARY","iconPosition","IconPosition","LEFT","BIG","hasText","attributes","htmlid","htmlAriaLabel","renderIcon","Object","assign","htmlRole","ZDivider","DividerSize","SMALL","color","orientation","DividerOrientation","HORIZONTAL","style","backgroundColor","ICON_NAME_SUFFIX_REGEX","ZIcon","selectPathOrPolygon","iconValue","startsWith","d","points","hasColorIndicator","COLOR_INDICATOR_ICONS","includes","needsTransparentIndicator","indicatorColor","toLowerCase","getTransparentIndicatorIconIfNeeded","transparentIconName","replace","ICONS","renderColorIndicator","fill","viewBox","height","renderBaseIcon","iconid","stylesGeneralCss","stylesTextCss","stylesTextareaCss","stylesCheckboxRadioCss","ZInput","randomId","InputType","TEXT","readonly","required","checked","message","labelPosition","LabelPosition","hasclearicon","isTyping","passwordHidden","typingtimeout","inputCheckListener","data","RADIO","isChecked","CHECKBOX","console","warn","emitInputChange","emitStartTyping","validity","TEXTAREA","getValidity","inputChange","clearTimeout","timer","emitStopTyping","startTyping","stopTyping","emitInputCheck","inputCheck","emitInputFocus","inputFocus","emitInputBlur","inputBlur","input","getTextAttributes","htmltitle","minlength","maxlength","status","autocomplete","onInput","getNumberAttributes","NUMBER","min","max","step","getPatternAttribute","PASSWORD","TEL","SEARCH","URL","EMAIL","pattern","inputHasMessage","boolean","getAriaAttributes","htmlAriaDescribedby","htmlAriaLabelledby","getTextAriaAttributes","htmlAriaExpanded","htmlAriaControls","htmlAriaAutocomplete","htmlAriaActivedescendant","InputStatus","ERROR","getFocusBlurAttributes","onFocus","onBlur","renderInputText","attr","renderLabel","inputRef","renderIcons","renderMessage","htmlFor","renderResetIcon","renderShowHidePassword","hidden","renderTextarea","ariaAttributes","handleCheck","renderCheckbox","ariaRequired","onChange","after","before","innerHTML","renderRadio","ZInputMessage","htmlId","statusIcons","success","error","warning","ZList","ListSize","MEDIUM","listType","ListType","NONE","onRoleChange","newValue","setChildrenProps","host","children","child","tagName","i","listElementPosition","ZListElement","accessibleFocusHandler","listElementId","toFocus","shadowRoot","getElementById","alignButton","ExpandableListButtonAlign","clickable","dividerColor","dividerType","ListDividerType","dividerSize","expandable","expandableStyle","ExpandableListStyle","ACCORDION","showInnerContent","openElementConfig","accordion","close","handleClick","handleKeyDown","clickItem","event","expandByKey","code","ENTER","accessibleFocus","renderExpandableButton","renderExpandedContent","expanded","renderContent","ORDERED","UNORDERED","ariaDescendantFocus","tabIndex","hasTreeItems","tabindex","part","ELEMENT","ZListGroup","toString","hasHeader","HEADER","ZOffcanvas","ReactiveControllerHost","PUSHCONTENT","skipLoadAnimation","showBackdrop","skipAnimation","focusTrapController","FocusTrapController","fallbackFocus","canvasContent","isActive","handleWrapTab","handlePageScroll","overflow","UP","ownerDocument","onOpenChanged","canvasOpenStatusChanged","sync","super","componentDidRender","getTabbableElements","typographyCss","ZSearchbar","autocompleteMinChars","searchHelperLabel","sortResultsItems","currResultsCount","resultsCount","showResults","resultsItemsList","emitSearchItemClick","item","searchItemClick","selectedItem","emitSearchSubmit","searchSubmit","watchItems","getResultsItemsList","watchResultsCount","watchValue","watchSearchString","searchTyping","resultsItems","JSON","parse","getGroupedItems","groupedItems","category","subcategory","items","push","keys","sort","obj","a","b","nameA","toUpperCase","nameB","onListItemKeyDown","handleArrowsNavigation","onSearchHelperKeyDown","currentElement","nextIndex","prevIndex","_d","_c","_f","_e","setSelectionRange","handleStopTyping","handleSubmit","handleOutsideClick","cp","composedPath","mql","onMobileViewChange","removeEventListener","renderItemLabel","RegExp","found","renderItem","tag","text","map","renderItemGroups","values","listGroups","hasResultsLimit","renderedCount","groupItem","remaining","visibleItems","slice","listGroupsElements","subindex","ariaLabel","Boolean","join","onStopTyping","onKeyUp","handleEnterKeydSubmit","ZTag"],"sources":["src/components/z-app-header/styles.css?tag=z-app-header&encapsulation=shadow","src/components/z-app-header/index.tsx","src/components/z-button/styles.css?tag=z-button&encapsulation=scoped","src/components/z-button/index.tsx","src/components/z-divider/styles.css?tag=z-divider&encapsulation=scoped","src/components/z-divider/index.tsx","src/components/z-icon/styles.css?tag=z-icon&encapsulation=shadow","src/components/z-icon/index.tsx","src/components/z-input/styles-general.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-text.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-textarea.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-checkbox-radio.css?tag=z-input&encapsulation=scoped","src/components/z-input/index.tsx","src/components/z-input-message/styles.css?tag=z-input-message&encapsulation=shadow","src/components/z-input-message/index.tsx","src/components/list/z-list/styles.css?tag=z-list&encapsulation=shadow","src/components/list/z-list/index.tsx","src/components/list/z-list-element/styles.css?tag=z-list-element&encapsulation=shadow","src/components/list/z-list-element/index.tsx","src/components/list/z-list-group/styles.css?tag=z-list-group&encapsulation=shadow","src/components/list/z-list-group/index.tsx","src/components/z-offcanvas/styles.css?tag=z-offcanvas&encapsulation=scoped","src/components/z-offcanvas/index.tsx","src/components/z-searchbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/css-components/z-label/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/css-components/z-scrollbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/tokens/typography.css?tag=z-searchbar&encapsulation=shadow","src/components/z-searchbar/index.tsx","src/components/z-tag/styles.css?tag=z-tag&encapsulation=scoped","src/components/z-tag/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --app-header-content-max-width: Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n   * @prop --app-header-top-offset: Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n   * @prop --app-header-bg: Header background color. Defaults to `--color-surface01`.\n   * @prop --app-header-text-color: Header text color. Defaults to `--color-default-text`.\n   * @prop --app-header-stucked-bg: Stuck header background color. Defaults to `--color-surface01`.\n   * @prop --app-header-stucked-text-color: Stuck header text color. Defaults to `--color-default-text`.\n   */\n  --app-header-content-max-width: ;\n  --app-header-top-offset: ;\n  --app-header-bg: ;\n  --app-header-text-color: ;\n  --app-header-stucked-bg: ;\n  --app-header-stucked-text-color: ;\n\n  position: relative;\n  display: block;\n  box-shadow: var(--shadow-2);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n.heading-panel {\n  --title-line-height: 1.333;\n  --title-font-size: var(--font-size-6);\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  max-width: var(--app-header-content-max-width, 100%);\n  flex-direction: column;\n  flex-grow: 0;\n  flex-shrink: 0;\n  align-items: baseline;\n  padding: calc(var(--space-unit) * 2);\n  margin: 0 auto;\n  background: var(--app-header-bg, var(--color-surface01));\n}\n\n:host(:empty) .heading-panel {\n  padding: 0;\n}\n\n.heading-container {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n\n.heading-panel.has-menubar {\n  padding-bottom: 0;\n}\n\n.heading-panel .heading-container {\n  flex-direction: column-reverse;\n}\n\n:host([enable-search]) .heading-panel .heading-container {\n  flex-direction: column;\n}\n\n:host([enable-search][search-page-url]) .heading-panel .heading-container {\n  flex-direction: row;\n}\n\n.heading-title {\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.heading-title:not(:last-child) {\n  margin-right: var(--space-unit);\n}\n\n.z-logo,\n.search-page-button {\n  display: flex;\n  height: calc(var(--title-font-size) * var(--title-line-height));\n  align-items: center;\n}\n\n.z-logo img {\n  height: 24px;\n  margin: 0 var(--space-unit) 0 0;\n  content: url('data:image/svg+xml,<svg width=\"61\" height=\"32\" viewBox=\"0 0 61 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z\" fill=\"%23E2011A\"/><path d=\"M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z\" fill=\"white\"/><path d=\"M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z\" fill=\"%23E2011A\"/><path d=\"M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z\" fill=\"white\"/><path d=\"M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z\" fill=\"white\"/></svg>');\n}\n\n.product-logo {\n  display: none;\n}\n\n.product-logo ::slotted([slot=\"product-logo\"]) {\n  width: 32px;\n  height: 32px;\n  margin-right: var(--space-unit);\n}\n\n.product-logo ::slotted([slot=\"product-logo\"]) img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n::slotted([slot=\"title\"]),\n::slotted([slot=\"stucked-title\"]),\n.stucked-title {\n  margin: 0;\n  color: var(--app-header-text-color, var(--color-default-text));\n  font-family: var(--font-family-serif);\n  font-weight: var(--font-sb);\n}\n\n::slotted([slot=\"title\"]) {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  font-size: var(--title-font-size);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: var(--title-line-height);\n  text-overflow: ellipsis;\n}\n\n::slotted(a:is([slot=\"title\"], [slot=\"stucked-title\"])) {\n  text-decoration: none;\n}\n\n:host([enable-search]) ::slotted([slot=\"title\"]) + * {\n  margin-left: calc(var(--space-unit) * 2);\n}\n\n:host([enable-offcanvas]:not([menu-length=\"0\"])) .top-subtitle {\n  padding-left: calc(var(--space-unit) * 4 + var(--space-unit));\n}\n\n::slotted([slot=\"top-subtitle\"]) {\n  display: -webkit-box;\n  overflow: hidden;\n  max-width: 80%;\n  margin: 0;\n  -webkit-box-orient: vertical;\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-2);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n\n.search-page-button {\n  margin-left: auto;\n}\n\n.menu-container {\n  display: flex;\n  flex: 1 auto;\n  column-gap: calc(var(--space-unit) * 4);\n}\n\n.menu-container:focus:focus-visible {\n  outline: none;\n}\n\n:host([menu-length=\"0\"]) .menu-container,\n.menu-container:empty {\n  display: none;\n}\n\n.menu-container ::slotted([open]) {\n  position: relative;\n  z-index: 3;\n}\n\n.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after {\n  position: absolute;\n  top: calc(1.5em / 2); /* half the line-height of the label */\n  right: calc(var(--space-unit) * -2);\n  width: var(--border-size-small);\n  height: 1em;\n  background-color: var(--color-default-icon);\n  content: \"\";\n  font-size: var(--font-size-3);\n  transform: translateY(-50%);\n}\n\nz-searchbar {\n  z-index: 0;\n  display: flex;\n  width: 100%;\n  align-items: center;\n}\n\nz-searchbar.has-label {\n  align-items: flex-end;\n}\n\n.heading-stuck {\n  position: fixed;\n  z-index: 20;\n  top: var(--app-header-top-offset, 48px);\n  left: 0;\n  width: 100%;\n  max-width: 100%;\n  animation: slide-stuck-heading-in 250ms ease-out;\n  background: var(--app-header-stucked-bg, var(--color-surface01));\n  box-shadow: var(--shadow-2);\n  color: var(--app-header-stucked-text-color, var(--color-default-text));\n}\n\n.heading-stuck-content {\n  display: flex;\n  max-width: var(--app-header-content-max-width, 100%);\n  align-items: center;\n  padding: var(--space-unit) var(--grid-margin);\n  margin: 0 auto;\n}\n\n.heading-stuck .heading-title {\n  --title-font-size: var(--font-size-5);\n  --title-line-height: 1.4;\n\n  overflow: hidden;\n  align-items: center;\n}\n\n.heading-stuck .stucked-title {\n  overflow: hidden;\n  font-size: var(--title-font-size);\n  line-height: var(--title-line-height);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.drawer-trigger,\n::slotted([slot=\"menu-button\"]) {\n  display: flex;\n  height: calc(var(--title-font-size) * var(--title-line-height));\n  align-items: center;\n  padding: 0;\n  border: 0;\n  margin-right: var(--space-unit);\n  appearance: none;\n  background: none;\n  border-radius: 0;\n  color: inherit;\n  cursor: pointer;\n  outline: none;\n}\n\n.drawer-trigger:focus:focus-visible z-icon {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.drawer-trigger z-icon {\n  --z-icon-width: calc(var(--space-unit) * 4);\n  --z-icon-height: calc(var(--space-unit) * 4);\n\n  fill: var(--color-default-icon);\n}\n\n.drawer-content {\n  display: none;\n}\n\nz-offcanvas {\n  --z-offcanvas--top-space: var(--app-header-top-offset);\n}\n\nz-offcanvas[open] .drawer-content {\n  display: flex;\n  width: 100%;\n  flex: 1 auto;\n  flex-direction: column;\n}\n\nz-offcanvas[open] .drawer-content ::slotted(z-menu) {\n  width: 100%;\n}\n\n.drawer-close {\n  --z-icon-width: calc(var(--space-unit) * 4);\n  --z-icon-height: calc(var(--space-unit) * 4);\n\n  padding: 0;\n  border: 0;\n  margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);\n  appearance: none;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  outline: none;\n}\n\n.drawer-close z-icon {\n  fill: var(--color-default-icon);\n}\n\n.drawer-close:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n@media (max-width: 767px) {\n  :host([enable-search]) .heading-panel .heading-container {\n    row-gap: calc(var(--space-unit) * 1.5);\n  }\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  .heading-panel {\n    --title-font-size: var(--font-size-9);\n\n    padding: calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25);\n  }\n\n  :host([enable-search][search-page-url]) .heading-panel .heading-container {\n    flex-direction: column;\n  }\n\n  .heading-panel .heading-container {\n    flex-direction: column;\n    margin-right: auto;\n  }\n\n  .z-logo img {\n    height: 32px;\n  }\n\n  .product-logo {\n    display: flex;\n    height: calc(var(--title-font-size) * var(--title-line-height));\n    align-items: center;\n  }\n\n  .has-top-subtitle .z-logo {\n    display: none;\n  }\n\n  .top-subtitle.has-product-logo {\n    padding-left: calc(32px + var(--space-unit));\n  }\n\n  z-searchbar {\n    width: 30%;\n    height: calc(var(--title-font-size) * var(--title-line-height));\n    margin-left: auto;\n  }\n\n  .menu-container {\n    flex: initial;\n  }\n\n  .menu-container > [role=\"menubar\"] {\n    display: contents;\n  }\n\n  :host(:not([enable-offcanvas])) .menu-container {\n    margin-top: calc((var(--space-unit) * 1.75));\n  }\n\n  :host(:not([enable-offcanvas])) .heading-container .drawer-trigger {\n    display: none;\n  }\n\n  .heading-stuck .heading-title {\n    --title-font-size: var(--font-size-8);\n    --title-line-height: 1.5;\n  }\n\n  .heading-stuck-content {\n    padding: 6px var(--grid-margin);\n  }\n\n  :host(:not([enable-offcanvas], [menu-length=\"0\"])) {\n    padding-left: 0;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  z-searchbar {\n    min-width: calc(var(--space-unit) * 45);\n  }\n}\n\n@keyframes slide-stuck-heading-in {\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n\n  100% {\n    transform: none;\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/**\n * @slot menu-button - Slot for a custom menu button. It will replace the default burger icon.\n * @slot title - Slot for the main title\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @slot product-logo - To insert the product logo, it should be used with an img tag.\n */\n@Component({\n  tag: \"z-app-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAppHeader implements ComponentInterface {\n  @Element() hostElement: HTMLZAppHeaderElement;\n\n  /**\n   * Stuck mode for the header.\n   * You can programmatically set it using an IntersectionObserver.\n   */\n  @Prop({reflect: true})\n  stuck = false;\n\n  /**\n   * When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.\n   */\n  @Prop({reflect: true, mutable: true})\n  enableOffcanvas = false;\n\n  /**\n   * Enable the search bar.\n   */\n  @Prop({reflect: true})\n  enableSearch = false;\n\n  /**\n   * Visible label for the search bar.\n   */\n  @Prop()\n  searchLabel?: string;\n\n  /**\n   * Placeholder text for the search bar.\n   */\n  @Prop()\n  searchPlaceholder = \"Cerca\";\n\n  /**\n   * Label of the search button.\n   */\n  @Prop()\n  searchButtonLabel?: string;\n\n  /**\n   * Search string for the search bar.\n   */\n  @Prop({mutable: true})\n  searchString = \"\";\n\n  /**\n   * Url to the search page.\n   * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n   * The link will also appear on the sticky header.\n   */\n  @Prop()\n  searchPageUrl: string;\n\n  /**\n   * Enable laZ logo.\n   */\n  @Prop({reflect: true})\n  enableZLogo = true;\n\n  /**\n   * The opening state of the drawer.\n   */\n  @Prop({mutable: true})\n  drawerOpen = false;\n\n  /**\n   * Emitted when the `stuck` state of the header changes\n   */\n  @Event()\n  sticking: EventEmitter;\n\n  /**\n   * The stuck state of the bar.\n   */\n  @State()\n  private _stuck = false;\n\n  /**\n   * Current count of menu items.\n   */\n  @State()\n  private menuLength: number;\n\n  @State()\n  private isMobile = true;\n\n  @State()\n  private isTablet = false;\n\n  private container?: HTMLDivElement;\n\n  private menuElements: HTMLZMenuElement[] = [];\n\n  private menuWidth: number;\n\n  private closeDrawerButton: HTMLButtonElement;\n\n  private burgerButton: HTMLButtonElement;\n\n  private menuResizeObserver: ResizeObserver;\n\n  private stuckIntersecObserver?: IntersectionObserver = SUPPORT_INTERSECTION_OBSERVER\n    ? new IntersectionObserver(\n        ([entry]) => {\n          this._stuck = !entry.isIntersecting;\n        },\n        {threshold: 0.5}\n      )\n    : undefined;\n\n  @Watch(\"_stuck\")\n  onStuck(): void {\n    const scrollParent = this.scrollParent;\n    if (!scrollParent) {\n      return;\n    }\n\n    this.sticking.emit(this._stuck);\n  }\n\n  @Watch(\"drawerOpen\")\n  setMenuFloatingMode(): void {\n    if (this.menuElements.length === 0) {\n      return;\n    }\n\n    this.menuElements.forEach((element) => {\n      element.open = false;\n      element.verticalContext = this.drawerOpen;\n    });\n  }\n\n  @Watch(\"stuck\")\n  onStuckChange(): void {\n    if (!this.container) {\n      return;\n    }\n\n    if (this.stuck) {\n      this.stuckIntersecObserver?.observe(this.container);\n    } else {\n      this._stuck = false;\n      this.stuckIntersecObserver?.unobserve(this.container);\n    }\n  }\n\n  private get title(): string {\n    return this.hostElement.querySelector('[slot=\"title\"]')?.textContent.trim();\n  }\n\n  private get scrollParent(): Window | Element {\n    const parent = this.hostElement.offsetParent;\n    if (parent === document.body || parent === document.documentElement) {\n      return window;\n    }\n\n    return parent;\n  }\n\n  private get canShowMenu(): boolean {\n    return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;\n  }\n\n  private get focusableMenu(): HTMLZMenuElement {\n    return this.menuElements.find((el) => el.htmlTabindex === 0);\n  }\n\n  private openDrawer(): void {\n    this.drawerOpen = true;\n    this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n    setTimeout(() => this.menuElements[0].setFocus(), 400); /* wait for the 400ms offcanvas transition */\n  }\n\n  private closeDrawer(): void {\n    this.drawerOpen = false;\n    setTimeout(() => this.burgerButton.focus(), 100);\n  }\n\n  private collectMenuElements(): void {\n    this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n    this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n    this.menuLength = this.menuElements.length;\n    if (!this.enableOffcanvas) {\n      this.menuWidth =\n        this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +\n        (this.menuLength - 1) * 32 /* 32px is the gap between each menu item */;\n    }\n    this.setMenuFloatingMode();\n  }\n\n  /** Automatically use offcanvas mode when the menubar doesn't fit in the header. */\n  private setupMenuResizeObserver(): void {\n    if (this.enableOffcanvas) {\n      return;\n    }\n\n    this.menuResizeObserver = new ResizeObserver((entries) => {\n      if (this.isMobile) {\n        this.enableOffcanvas = true;\n\n        return;\n      }\n\n      const containerWidth = entries[0].contentBoxSize[0].inlineSize;\n      if (this.menuWidth === 0) {\n        return;\n      }\n\n      if (this.menuWidth > containerWidth && !this.enableOffcanvas) {\n        this.enableOffcanvas = true;\n      } else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {\n        this.enableOffcanvas = false;\n      }\n    });\n    this.menuResizeObserver.observe(this.container);\n  }\n\n  private hasSlot(slotName: string): boolean {\n    return this.hostElement.querySelector(`[slot=\"${slotName}\"]`) !== null;\n  }\n\n  private moveFocus(current: HTMLZMenuElement, receiver: HTMLZMenuElement): void {\n    current.htmlTabindex = -1;\n    receiver.setFocus();\n  }\n\n  private onOffcanvasKeydown(ev: KeyboardEvent): void {\n    if (ev.key !== KeyboardCode.TAB || !this.drawerOpen) {\n      return;\n    }\n\n    const closestMenu = (ev.target as HTMLElement).closest(\"z-menu\");\n    if (closestMenu) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      // restore tabindex to the zmenu containing the focused element\n      closestMenu.htmlTabindex = 0;\n      this.closeDrawerButton.focus();\n    } else if (ev.target === this.closeDrawerButton) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      if (ev.shiftKey) {\n        // give focus to the last open menu if any or the last menu otherwhise\n        (this.menuElements.filter((menu) => menu.open).pop() ?? this.menuElements[this.menuLength - 1]).setFocus();\n      } else {\n        // give focus to the first open menu if any or the first menu otherwhise\n        (this.menuElements.find((menu) => menu.open) ?? this.menuElements[0]).setFocus();\n      }\n    }\n  }\n\n  /** Close each menu except the one receiving focus/click, if any */\n  @Listen(\"focusin\", {target: \"document\", passive: true})\n  @Listen(\"click\", {target: \"document\", passive: true})\n  manageMenus(ev: FocusEvent | PointerEvent): void {\n    const targetMenu = this.menuElements.find((menu) => containsElement(menu, ev.target as Element));\n    if (targetMenu) {\n      this.menuElements.forEach((menu) => {\n        if (menu === targetMenu) {\n          return;\n        }\n\n        menu.htmlTabindex = -1;\n        if (!this.drawerOpen) {\n          menu.open = false;\n        }\n      });\n    } else if (!this.drawerOpen) {\n      this.menuElements.forEach((menu) => {\n        menu.open = false;\n      });\n    }\n  }\n\n  @Listen(\"keydown\", {passive: true})\n  handleKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ESC && this.drawerOpen) {\n      this.closeDrawer();\n\n      return;\n    }\n\n    if (!this.menuElements.some((elem) => elem.contains(ev.target as HTMLElement))) {\n      return;\n    }\n\n    const current = this.focusableMenu;\n    const currentIndex = this.menuElements.indexOf(current);\n    let receiver: HTMLZMenuElement;\n    if (\n      (ev.key === KeyboardCode.ARROW_RIGHT && !current.verticalContext) ||\n      (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)\n    ) {\n      receiver = this.menuElements[currentIndex + 1] ?? this.menuElements[0];\n    } else if (\n      (ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) ||\n      (ev.key === KeyboardCode.ARROW_UP && current.verticalContext)\n    ) {\n      receiver = this.menuElements[currentIndex - 1] ?? this.menuElements[this.menuLength - 1];\n    }\n    if (!receiver) {\n      return;\n    }\n\n    if (ev.key === KeyboardCode.ARROW_UP && current.verticalContext) {\n      if (receiver.open) {\n        current.htmlTabindex = -1;\n        receiver.focusLastItem();\n\n        return;\n      }\n    }\n\n    this.moveFocus(current, receiver);\n  }\n\n  private renderSeachbar(): HTMLZButtonElement | HTMLZSearchbarElement | undefined {\n    if (this.isMobile && !this.searchPageUrl && this._stuck) {\n      return;\n    }\n\n    if (this.searchPageUrl && (this.isMobile || this.isTablet)) {\n      return (\n        <z-button\n          class=\"search-page-button\"\n          variant={ButtonVariant.SECONDARY}\n          href={this.searchPageUrl}\n          icon=\"search\"\n          size={ControlSize.X_SMALL}\n        />\n      );\n    }\n\n    return (\n      <z-searchbar\n        class={{\"has-label\": !!this.searchLabel}}\n        value={this.searchString}\n        placeholder={this.searchPlaceholder}\n        label={this.searchLabel}\n        showSearchButton={true}\n        searchButtonIconOnly={this.isMobile || this.isTablet}\n        searchButtonLabel={this.isMobile || this.isTablet ? undefined : this.searchButtonLabel}\n        size={ControlSize.X_SMALL}\n        variant={ButtonVariant.SECONDARY}\n        preventSubmit={this.searchString.length < 3}\n        onSearchTyping={(e) => (this.searchString = e.detail)}\n      />\n    );\n  }\n\n  private renderProductLogos(): HTMLElement | null {\n    return (\n      <Fragment>\n        {this.enableZLogo && (\n          <span class=\"z-logo\">\n            <img alt=\"Logo Zanichelli\" />\n          </span>\n        )}\n        {this.hostElement.querySelector(\"[slot='product-logo']\") && (\n          <span class=\"product-logo\">\n            <slot name=\"product-logo\" />\n          </span>\n        )}\n      </Fragment>\n    );\n  }\n\n  private renderMenuButton(): HTMLButtonElement {\n    return (\n      this.menuLength > 0 &&\n      (this.enableOffcanvas || this._stuck || this.isMobile) && (\n        <button\n          ref={(el) => (this.burgerButton = el as HTMLButtonElement)}\n          class=\"drawer-trigger\"\n          aria-label=\"Apri menu\"\n          aria-haspopup=\"menu\"\n          aria-expanded={`${this.drawerOpen}`}\n          aria-controls=\"offcanvas-menu\"\n          onClick={this.openDrawer}\n        >\n          <z-icon name=\"burger-menu\" />\n        </button>\n      )\n    );\n  }\n\n  private renderOffcanvas(): HTMLZOffcanvasElement {\n    return (\n      <z-offcanvas\n        id=\"offcanvas-menu\"\n        variant={OffCanvasVariant.OVERLAY}\n        transitiondirection={TransitionDirection.RIGHT}\n        open={this.drawerOpen}\n        onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n        onKeyDown={this.onOffcanvasKeydown}\n      >\n        <div slot=\"canvasContent\">\n          <button\n            ref={(el) => (this.closeDrawerButton = el)}\n            class=\"drawer-close\"\n            aria-label=\"Chiudi menu\"\n            onClick={this.closeDrawer}\n            aria-hidden={`${!this.drawerOpen}`}\n            disabled={!this.drawerOpen}\n          >\n            <z-icon name=\"close\" />\n          </button>\n\n          <div\n            class=\"drawer-content\"\n            aria-hidden={`${!this.drawerOpen}`}\n          >\n            <slot\n              name=\"menu\"\n              onSlotchange={this.collectMenuElements}\n            />\n          </div>\n        </div>\n      </z-offcanvas>\n    );\n  }\n\n  private renderStuck(): HTMLElement {\n    return (\n      <div class=\"heading-stuck\">\n        <div class=\"heading-stuck-content\">\n          {this.renderMenuButton()}\n          <div class=\"heading-title\">\n            {this.renderProductLogos()}\n            <div class=\"stucked-title\">\n              <slot name=\"stucked-title\">{this.title}</slot>\n            </div>\n          </div>\n          {this.enableSearch && this.renderSeachbar()}\n        </div>\n      </div>\n    );\n  }\n\n  constructor() {\n    this.openDrawer = this.openDrawer.bind(this);\n    this.closeDrawer = this.closeDrawer.bind(this);\n    this.collectMenuElements = this.collectMenuElements.bind(this);\n    this.onOffcanvasKeydown = this.onOffcanvasKeydown.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.collectMenuElements();\n\n    // mobile and tablet media queries listeners\n    const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n    this.isMobile = mobileMediaQuery.matches;\n    mobileMediaQuery.addEventListener(\"change\", (e) => (this.isMobile = e.matches));\n    const tabletMediaQuery = window.matchMedia(\n      `(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${Breakpoints.TABLET}px)`\n    );\n    this.isTablet = tabletMediaQuery.matches;\n    tabletMediaQuery.addEventListener(\"change\", (e) => (this.isTablet = e.matches));\n  }\n\n  componentDidLoad(): void {\n    this.onStuckChange();\n    this.setupMenuResizeObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.menuResizeObserver?.disconnect();\n  }\n\n  render(): HTMLZAppHeaderElement {\n    const hasTopSubtitle = this.hasSlot(\"top-subtitle\");\n\n    return (\n      <Host menu-length={this.menuLength}>\n        <div\n          class={{\"heading-panel\": true, \"has-menubar\": this.menuLength > 0 && !this.enableOffcanvas}}\n          ref={(el) => (this.container = el)}\n        >\n          <div class={{\"heading-container\": true, \"has-top-subtitle\": hasTopSubtitle}}>\n            {((!this.enableSearch && this.isMobile) || !this.isMobile) && (\n              <div class={{\"top-subtitle\": true, \"has-product-logo\": hasTopSubtitle && this.hasSlot(\"product-logo\")}}>\n                <slot name=\"top-subtitle\" />\n              </div>\n            )}\n            <div class=\"heading-title\">\n              <slot name=\"menu-button\">{this.renderMenuButton()}</slot>\n              {!this._stuck && this.renderProductLogos()}\n              <slot name=\"title\" />\n              {this.enableSearch && !this.isMobile && this.renderSeachbar()}\n            </div>\n            {this.enableSearch && this.isMobile && this.renderSeachbar()}\n          </div>\n\n          <nav\n            class=\"menu-container\"\n            aria-label={this.title || undefined}\n          >\n            {this.canShowMenu && (\n              <div\n                role=\"menubar\"\n                aria-label={this.title || undefined}\n              >\n                <slot\n                  name=\"menu\"\n                  onSlotchange={this.collectMenuElements}\n                />\n              </div>\n            )}\n          </nav>\n        </div>\n        {this.renderOffcanvas()}\n        {this._stuck && this.renderStuck()}\n      </Host>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n  --z-icon-right-margin: 0;\n  --z-icon-left-margin: 0;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n  pointer-events: none;\n}\n\n:host .z-button--container {\n  display: inline-flex;\n  width: 100%;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border-width: var(--border-size-medium);\n  border-style: solid;\n  border-radius: var(--border-radius);\n  column-gap: var(--space-unit);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.3px;\n  line-height: 1;\n  outline: none;\n  text-decoration: none;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n:host .z-button--container:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host .z-button--container.z-button--has-text {\n  min-width: calc(var(--space-unit) * 8);\n  padding: 0 calc(var(--space-unit) * 2);\n}\n\n:host([icon-position=\"right\"]) .z-button--container.z-button--has-text {\n  flex-direction: row-reverse;\n}\n\n:host([size=\"big\"]) .z-button--container {\n  min-width: 44px;\n  height: 44px;\n}\n\n:host([size=\"small\"]) .z-button--container {\n  min-width: 36px;\n  height: 36px;\n}\n\n:host([size=\"x-small\"]) .z-button--container {\n  min-width: 32px;\n  height: 32px;\n}\n\n:host([variant=\"primary\"]) .z-button--container {\n  border-color: var(--color-primary01);\n  background-color: var(--color-primary01);\n  color: var(--color-text-inverse);\n}\n\n@media (hover: hover) {\n  :host([variant=\"primary\"]) .z-button--container:hover {\n    border-color: var(--color-hover-primary);\n    background-color: var(--color-hover-primary);\n    color: var(--color-text-inverse);\n  }\n}\n\n:host([variant=\"primary\"]) .z-button--container:active {\n  border-color: var(--color-pressed-primary);\n  background-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-text-inverse);\n}\n\n:host([variant=\"primary\"][disabled]:not([disabled=\"false\"])) .z-button--container {\n  border-color: var(--color-disabled01);\n  background-color: var(--color-disabled01);\n  color: var(--color-disabled03);\n}\n\n:host([variant=\"secondary\"]) .z-button--container {\n  border-color: var(--color-primary01);\n  background-color: var(--color-button-secondary);\n  color: var(--color-primary01);\n}\n\n@media (hover: hover) {\n  :host([variant=\"secondary\"]) .z-button--container:hover {\n    border-color: var(--color-hover-primary);\n    background-color: var(--color-button-secondary);\n    color: var(--color-hover-primary);\n  }\n}\n\n:host([variant=\"secondary\"]) .z-button--container:active {\n  border-color: var(--color-pressed-primary);\n  background-color: var(--color-button-secondary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n}\n\n:host([variant=\"secondary\"][disabled]:not([disabled=\"false\"])) .z-button--container {\n  border-color: var(--color-disabled01);\n  background-color: var(--color-button-secondary);\n  color: var(--color-disabled03);\n}\n\n:host([variant=\"tertiary\"]) .z-button--container {\n  border-color: var(--color-primary02);\n  background-color: var(--color-primary02);\n  color: var(--color-primary01);\n}\n\n@media (hover: hover) {\n  :host([variant=\"tertiary\"]) .z-button--container:hover {\n    border-color: var(--color-primary03);\n    background-color: var(--color-primary03);\n    color: var(--color-hover-primary);\n  }\n}\n\n:host([variant=\"tertiary\"]) .z-button--container:focus:focus-visible {\n  border-color: var(--color-primary02);\n  background-color: var(--color-primary02);\n  color: var(--color-primary01);\n}\n\n:host([variant=\"tertiary\"]) .z-button--container:active {\n  border-color: var(--color-primary02);\n  background-color: var(--color-primary02);\n  box-shadow: var(--shadow-2);\n  color: var(--color-primary01);\n}\n\n:host([variant=\"tertiary\"][disabled]:not([disabled=\"false\"])) .z-button--container {\n  border-color: var(--color-disabled01);\n  background-color: var(--color-disabled01);\n  color: var(--color-disabled03);\n}\n","import {Component, ComponentInterface, Element, Prop, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {ButtonSize, ButtonType, ButtonVariant, ControlSize, IconPosition} from \"../../beans\";\n\n/**\n * @slot - button label\n */\n@Component({\n  tag: \"z-button\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZButton implements ComponentInterface {\n  @Element() hostElement: HTMLZButtonElement;\n\n  /** `aria-label` for the internal button element. Mostly needed when no text is present, like for an icon-only button. */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** `role` attribute for the internal button element. Used for accessibility. */\n  @Prop()\n  htmlRole?: string;\n\n  /** HTML <a> href attribute. If it is set, it renders an HTML <a> tag. */\n  @Prop()\n  href?: string;\n\n  /** HTML a target attribute. */\n  @Prop()\n  target?: string;\n\n  /** Identifier, should be unique. */\n  @Prop()\n  htmlid?: string;\n\n  /** HTML button name attribute. */\n  @Prop()\n  name?: string;\n\n  /** HTML button disabled attribute. */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** HTML button type attribute. */\n  @Prop()\n  type?: ButtonType = ButtonType.BUTTON;\n\n  /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */\n  @Prop({reflect: true})\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  /** `z-icon` name to use (optional). */\n  @Prop()\n  icon?: string;\n\n  /** the button icon position. Defaults to `left` */\n  @Prop({reflect: true})\n  iconPosition?: IconPosition = IconPosition.LEFT;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop({reflect: true})\n  size?: ButtonSize | ControlSize = ControlSize.BIG;\n\n  private hasText = false;\n\n  componentWillLoad() {\n    this.hasText = !!this.hostElement.textContent?.trim();\n  }\n\n  private get attributes(): JSXBase.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {\n    return {\n      \"id\": this.htmlid,\n      \"class\": {\n        \"z-button--container\": true,\n        \"z-button--has-text\": this.hasText,\n      },\n      \"aria-label\": this.htmlAriaLabel?.trim() || undefined,\n    };\n  }\n\n  private renderIcon(): HTMLZIconElement | undefined {\n    return this.icon && <z-icon name={this.icon} />;\n  }\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    if (this.href) {\n      return (\n        <a\n          {...this.attributes}\n          href={this.href}\n          target={this.target}\n        >\n          {this.renderIcon()}\n          <slot />\n        </a>\n      );\n    }\n\n    return (\n      <button\n        {...this.attributes}\n        name={this.name}\n        type={this.type}\n        disabled={this.disabled}\n        role={this.htmlRole || undefined}\n      >\n        {this.renderIcon()}\n        <slot />\n      </button>\n    );\n  }\n}\n",":host {\n  display: block;\n  padding: 0;\n  margin: 0;\n}\n\n:host.divider-horizontal {\n  width: 100%;\n}\n\n:host.divider-vertical {\n  height: 100%;\n}\n\n:host.divider-small.divider-horizontal {\n  height: var(--border-size-small);\n}\n\n:host.divider-medium.divider-horizontal {\n  height: var(--border-size-medium);\n}\n\n:host.divider-large.divider-horizontal {\n  height: var(--border-size-large);\n}\n\n:host.divider-small.divider-vertical {\n  width: var(--border-size-small);\n}\n\n:host.divider-medium.divider-vertical {\n  width: var(--border-size-medium);\n}\n\n:host.divider-large.divider-vertical {\n  width: var(--border-size-large);\n}\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {DividerOrientation, DividerSize} from \"../../beans\";\n@Component({\n  tag: \"z-divider\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZDivider implements ComponentInterface {\n  /** [optional] Divider size */\n  @Prop()\n  size?: DividerSize = DividerSize.SMALL;\n\n  /** [optional] Divider color */\n  @Prop()\n  color?: string = \"gray200\";\n\n  /** [optional] Divider orintation */\n  @Prop()\n  orientation?: DividerOrientation = DividerOrientation.HORIZONTAL;\n\n  render(): HTMLZDividerElement {\n    return (\n      <Host\n        class={`divider-${this.size} divider-${this.orientation}`}\n        style={{backgroundColor: `var(--${this.color})`}}\n      />\n    );\n  }\n}\n",":host {\n  /**\n   * @prop --z-icon-width: Width of the icon. Default is 1.125rem (18px).\n   * @prop --z-icon-height: Height of the icon. Default is 1.125rem (18px).\n   * @prop --z-icon-left-margin: Left margin of the icon. Default is 0.\n   * @prop --z-icon-right-margin: Right margin of the icon. Default is 0.\n   */\n  display: inline;\n  margin-right: var(--z-icon-right-margin, 0);\n  margin-left: var(--z-icon-left-margin, 0);\n  line-height: 0;\n  vertical-align: middle;\n}\n\n.icon-wrapper {\n  position: relative;\n  z-index: 0;\n  display: inline-block;\n}\n\nsvg:not([width]) {\n  width: var(--z-icon-width, 1.125rem);\n}\n\nsvg:not([height]) {\n  height: var(--z-icon-height, 1.125rem);\n}\n\n.icon-wrapper svg.color-indicator {\n  position: absolute;\n  z-index: -1;\n  bottom: 0;\n  left: 0;\n}\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {COLOR_INDICATOR_ICONS, ICONS} from \"../../constants/iconset\";\n\n// https://regex101.com/r/ZnoZQ5/3\nconst ICON_NAME_SUFFIX_REGEX = /^(.+?)(-transparent)?(-filled|-button)?$/;\n\n/**\n * Component to render an SVG icon from the internal icon set, selected by `name`.\n * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.\n */\n@Component({\n  tag: \"z-icon\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZIcon implements ComponentInterface {\n  /** Icon name */\n  @Prop()\n  name: string;\n\n  /** Icon height (optional) */\n  @Prop()\n  height?: number | string;\n\n  /** Icon width (optional) */\n  @Prop()\n  width?: number | string;\n\n  /** HTML `id` attribute (optional) */\n  @Prop()\n  iconid?: string;\n\n  /** Name of the CSS color token to use for the icon fill color (e.g. `blue500`). */\n  @Prop()\n  fill?: string;\n\n  /**\n   * Color to use to fill the icon's color indicator, if it has one.\n   * Can be any valid value for the `fill` svg attribute.\n   * If the icon passed through the `name` prop doesn't have a color indicator, this prop has no effect.\n   */\n  @Prop()\n  indicatorColor?: string;\n\n  /**\n   * Selects either a `<path>` or `<polygon>` element based on the format of the icon data.\n   * @param iconValue The SVG path data or polygon points from the ICONS set.\n   */\n  private selectPathOrPolygon(iconValue: string): SVGPathElement | SVGPolygonElement {\n    if (iconValue?.startsWith(\"M\")) {\n      return <path d={iconValue}></path>;\n    }\n\n    return <polygon points={iconValue}></polygon>;\n  }\n\n  private get hasColorIndicator(): boolean {\n    return COLOR_INDICATOR_ICONS.includes(this.name);\n  }\n\n  private get needsTransparentIndicator(): boolean {\n    return [\"transparent\", \"#ffffff00\"].includes(this.indicatorColor?.toLowerCase());\n  }\n\n  /**\n   * For icons with a color indicator, if `indicatorColor` is set to transparent, use a specific icon version without the color indicator.\n   * Using the icon without the color indicator prevents visual ambiguity between a transparent indicator and one filled with the background color.\n   * @returns The name of the corresponding icon without the indicator, or the original icon name if no transparent version is needed or available.\n   */\n  private getTransparentIndicatorIconIfNeeded(): string {\n    const transparentIconName = this.name?.replace(ICON_NAME_SUFFIX_REGEX, \"$1-transparent$3\");\n    if (!this.hasColorIndicator || !this.needsTransparentIndicator || !ICONS[transparentIconName]) {\n      return this.name;\n    }\n\n    return transparentIconName;\n  }\n\n  /**\n   * Render the icon with the color indicator.\n   * The indicator is rendered as a separate SVG element behind the main icon, filled with the `indicatorColor`.\n   */\n  private renderColorIndicator(): SVGElement {\n    return (\n      <svg\n        class=\"color-indicator\"\n        fill={this.indicatorColor || \"#FFFFFF00\"}\n        viewBox=\"0 0 1000 1000\"\n        width={this.width}\n        height={this.height}\n        aria-hidden=\"true\"\n      >\n        {this.selectPathOrPolygon(ICONS[\"picker-color\"])}\n      </svg>\n    );\n  }\n\n  private renderBaseIcon(): SVGElement {\n    return (\n      <svg\n        id={this.iconid || undefined}\n        fill={this.fill ? `var(--${this.fill})` : undefined}\n        viewBox=\"0 0 1000 1000\"\n        width={this.width}\n        height={this.height}\n        aria-hidden=\"true\"\n      >\n        {this.selectPathOrPolygon(ICONS[this.getTransparentIndicatorIconIfNeeded()])}\n      </svg>\n    );\n  }\n\n  render(): HTMLZIconElement {\n    return (\n      <Host aria-hidden=\"true\">\n        {this.hasColorIndicator && !this.needsTransparentIndicator ? (\n          <div class=\"icon-wrapper\">\n            {this.renderColorIndicator()}\n            {this.renderBaseIcon()}\n          </div>\n        ) : (\n          this.renderBaseIcon()\n        )}\n      </Host>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n  width: inherit;\n}\n\n:host * {\n  box-sizing: border-box;\n}\n\n/* GENERAL */\ninput::-ms-clear,\ninput::-ms-reveal {\n  display: none;\n}\n\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n  display: none;\n}\n\ninput,\ntextarea {\n  background: var(--color-form-background);\n  fill: var(--color-form-default-icon);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  outline: none;\n}\n\ninput,\n.textarea-wrapper {\n  border: var(--border-size-small) solid var(--color-form-surface04);\n  border-radius: var(--border-radius-small);\n  color: var(--color-form-default-text);\n}\n\n:host([size=\"small\"]) input,\n:host([size=\"small\"]) textarea,\n:host([size=\"x-small\"]) input,\n:host([size=\"x-small\"]) textarea {\n  font-size: var(--font-size-2);\n}\n\n:host.cursor-select input {\n  cursor: pointer;\n}\n\n/* HOVER */\ninput:not([readonly]):hover,\n.textarea-wrapper:not(.readonly):hover {\n  outline: var(--border-size-medium) solid var(--color-surface04);\n  outline-offset: -2px;\n}\n\n/* FOCUS */\n:host:not(.active-select) input:focus:focus-visible,\n:host:not([readonly=\"true\"]) .textarea-wrapper:focus-within {\n  border-color: var(--color-form-active-primary);\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-form-active-primary);\n}\n\n:host input:focus:focus-visible:hover,\n.textarea-wrapper:not(.readonly):focus-within:hover {\n  outline-color: var(--color-form-active-primary);\n}\n\n:host input:focus:focus-visible + .icons-wrapper {\n  fill: var(--color-form-active-primary);\n}\n\n:host.active-select input {\n  border: var(--border-size-small) solid var(--color-form-active-primary);\n}\n\n:host.cursor-select input:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host input[readonly]:focus:focus-visible {\n  border-color: var(--color-form-surface03);\n  box-shadow: none;\n}\n\n/* STATUSES (success, warning, error) */\n.input-success {\n  border-color: var(--color-form-success01);\n  background: var(--color-form-inverse-success);\n}\n\n.input-success:focus:focus-visible + .icons-wrapper,\n.input-success + .icons-wrapper {\n  fill: var(--color-form-success01);\n}\n\n.input-error {\n  border-color: var(--color-form-hover-error);\n  background: var(--color-form-inverse-error);\n}\n\n.input-error:focus:focus-visible + .icons-wrapper,\n.input-error + .icons-wrapper {\n  fill: var(--color-form-hover-error);\n}\n\n.input-warning {\n  border-color: var(--color-form-hover-warning);\n  background: var(--color-form-inverse-warning);\n}\n\n.input-warning:focus:focus-visible + .icons-wrapper,\n.input-warning + .icons-wrapper {\n  fill: var(--color-form-hover-warning);\n}\n\n:is(.input-success, .input-error, .input-warning):focus:focus-visible {\n  color: var(--color-form-default-text);\n}\n\n/* READONLY */\n:host:not(.active-select) input[readonly],\n.textarea-wrapper.readonly {\n  border-color: var(--color-form-surface03);\n  fill: var(--color-form-disabled01-icon);\n  pointer-events: none;\n}\n\n/* DISABLED */\n:host([disabled]:not([disabled=\"false\"])) input,\n:host([disabled]:not([disabled=\"false\"])) .textarea-wrapper,\n:host([disabled]:not([disabled=\"false\"])) z-icon {\n  border-color: var(--color-form-disabled03);\n  box-shadow: none;\n  color: var(--color-form-disabled-text);\n  fill: var(--color-form-disabled01-icon);\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) input:hover {\n  border-width: var(--border-size-small);\n}\n\n/* PLACEHOLDER */\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-form-placeholder-text);\n}\n\n::-webkit-textarea-placeholder {\n  color: var(--color-form-placeholder-text);\n}\n\n:-ms-textarea-placeholder {\n  color: var(--color-form-placeholder-text);\n}\n\n::placeholder {\n  color: var(--color-form-placeholder-text);\n}\n\n:host([disabled]:not([disabled=\"false\"])) label.z-label {\n  color: var(--color-disabled03);\n}\n",".text-wrapper > div {\n  position: relative;\n  z-index: 1;\n  fill: var(--color-form-default-icon);\n}\n\n.text-wrapper > div > input {\n  width: 100%;\n  height: calc(var(--space-unit) * 5.5);\n  box-sizing: border-box;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  margin: 0;\n}\n\n:host([size=\"small\"]) .text-wrapper > div > input {\n  height: calc(var(--space-unit) * 4.5);\n}\n\n:host([size=\"x-small\"]) .text-wrapper > div > input {\n  height: calc(var(--space-unit) * 4);\n}\n\n.text-wrapper > div > input.has-icon,\n.text-wrapper > div > input.has-clear-icon {\n  padding-right: calc(var(--space-unit) * 5.25);\n}\n\n.text-wrapper > div > input.has-icon.has-clear-icon {\n  padding-right: calc(var(--space-unit) * 8);\n}\n\n.text-wrapper .icons-wrapper {\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  right: calc(var(--space-unit) * 1.5);\n  display: flex;\n  pointer-events: none;\n  transform: translateY(-50%);\n}\n\n.text-wrapper .icons-wrapper > button.input-icon {\n  display: flex;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  pointer-events: initial;\n}\n\n.text-wrapper .icons-wrapper > .input-icon + .input-icon {\n  margin-left: calc(var(--space-unit) * 0.5);\n}\n\n.text-wrapper .icons-wrapper > button.input-icon.hidden {\n  display: none;\n}\n\n.text-wrapper .icons-wrapper > button.reset-icon,\n.text-wrapper .icons-wrapper > button.toggle-password-icon {\n  display: flex;\n  min-width: 24px;\n  min-height: 24px;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n\n.text-wrapper .icons-wrapper > .input-icon {\n  --z-icon-width: 18px;\n  --z-icon-height: 18px;\n\n  display: block;\n}\n\n.text-wrapper .icons-wrapper > .input-icon.small,\n.text-wrapper .icons-wrapper > .input-icon.x-small {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n.text-wrapper .icons-wrapper > button.input-icon:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n/* stylelint-disable property-no-vendor-prefix */\n.text-wrapper > div > input:-webkit-autofill {\n  -webkit-box-shadow: 0 0 0 1000px #fff inset;\n  -webkit-text-fill-color: currentcolor;\n}\n",".textarea-wrapper {\n  width: 100%;\n  height: 100%;\n  padding: calc(var(--space-unit) * 1.5);\n}\n\n.textarea-wrapper:not(.input-error, .input-success, .input-warning) {\n  background-color: var(--color-form-background);\n}\n\ntextarea {\n  width: 100%;\n  min-height: 132px;\n  padding: 0;\n  border: none;\n  margin: 0;\n  color: currentcolor;\n  resize: none;\n}\n",".radio-wrapper,\n.checkbox-wrapper {\n  position: relative;\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  color: var(--color-default-text);\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n}\n\n.radio-wrapper:hover,\n.checkbox-wrapper:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary-icon);\n}\n\n.radio-wrapper > input,\n.checkbox-wrapper > input {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.radio-wrapper .radio-label,\n.checkbox-wrapper .checkbox-label {\n  display: inline-flex;\n  min-height: 24px;\n  align-items: center;\n  padding: 3px 0;\n  margin: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 1;\n  text-transform: inherit;\n}\n\n.radio-wrapper input:not(:disabled) + .radio-label,\n.checkbox-wrapper input:not(:disabled) + .checkbox-label {\n  cursor: pointer;\n}\n\n.radio-wrapper .radio-label z-icon,\n.checkbox-wrapper .checkbox-label z-icon {\n  cursor: pointer;\n  fill: inherit;\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label z-icon,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .radio-wrapper .radio-label z-icon,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n:host([size=\"x-small\"]) .radio-wrapper .radio-label,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label {\n  font-size: var(--font-size-1);\n}\n\n.radio-wrapper .radio-label.after,\n.checkbox-wrapper .checkbox-label.after {\n  flex-direction: row;\n}\n\n.radio-wrapper .radio-label.before,\n.checkbox-wrapper .checkbox-label.before {\n  flex-direction: row-reverse;\n}\n\n.radio-wrapper .radio-label.after > span,\n.checkbox-wrapper .checkbox-label.after > span {\n  margin-left: var(--space-unit);\n}\n\n.radio-wrapper .radio-label.before > span,\n.checkbox-wrapper .checkbox-label.before > span {\n  margin-right: var(--space-unit);\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label.after > span,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label.after > span,\n:host([size=\"x-small\"]) .radio-wrapper .radio-label.after > span,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label.after > span {\n  margin-left: calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label.before > span,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label.before > span,\n:host([size=\"x-small\"]) .radio-wrapper .radio-label.before > span,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label.before > span {\n  margin-right: calc(var(--space-unit) * 0.5);\n}\n\n/* focus */\n.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon {\n  border-radius: 50%;\n}\n\n.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {\n  border-radius: var(--border-radius-small);\n}\n\n.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,\n.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n/* disabled */\n.radio-wrapper > input:disabled + .radio-label,\n.checkbox-wrapper > input:disabled + .checkbox-label {\n  color: var(--color-disabled03);\n}\n\n.radio-wrapper > input:disabled + .radio-label > z-icon,\n.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {\n  cursor: default;\n  fill: var(--color-disabled01);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Method,\n  Prop,\n  State,\n  h,\n} from \"@stencil/core\";\nimport {Fragment, JSXBase} from \"@stencil/core/internal\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport {boolean, randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-input\",\n  styleUrls: [\"styles-general.css\", \"styles-text.css\", \"styles-textarea.css\", \"styles-checkbox-radio.css\"],\n  shadow: false,\n  scoped: true,\n})\nexport class ZInput implements ComponentInterface {\n  @Element() hostElement: HTMLZInputElement;\n\n  /** the id of the input element */\n  @Prop()\n  htmlid = `id-${randomId()}`;\n\n  /** Input type */\n  @Prop()\n  type: InputType = InputType.TEXT;\n\n  /** the input `name` attribute */\n  @Prop()\n  name?: string;\n\n  /** the input label */\n  @Prop()\n  label?: string;\n\n  /** the input `aria-label` */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** the input `aria-expanded`: available for text, password, number, email */\n  @Prop()\n  htmlAriaExpanded?: string;\n\n  /** the input `aria-controls` (optional): available for text, password, number, email */\n  @Prop()\n  htmlAriaControls?: string;\n\n  /** the input `aria-autocomplete` (optional): available for text, password, number, email */\n  @Prop()\n  htmlAriaAutocomplete?: string;\n\n  /** the input `aria-activedescendant` (optional): available for text, password, number, email */\n  @Prop()\n  htmlAriaActivedescendant?: string;\n\n  /** the input `aria-describedby` (optional) */\n  @Prop()\n  htmlAriaDescribedby?: string;\n\n  /** the input `aria-labelledby` (optional) */\n  @Prop()\n  htmlAriaLabelledby?: string;\n\n  /** the input value */\n  @Prop({mutable: true})\n  value?: string;\n\n  /** the input is disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** the input is readonly */\n  @Prop()\n  readonly?: boolean = false;\n\n  /** the input is required (optional): available for text, password, number, email, textarea, checkbox */\n  @Prop()\n  required?: boolean = false;\n\n  /** checked: available for checkbox, radio */\n  @Prop({mutable: true})\n  checked?: 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): available for text, password, number, email, textarea */\n  @Prop()\n  status?: InputStatus;\n\n  /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */\n  @Prop()\n  message?: string | boolean = true;\n\n  /** the input label position: available for checkbox, radio */\n  @Prop()\n  labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n  /** the input has autocomplete option (optional): available for text, password, number, email */\n  @Prop()\n  autocomplete?: string;\n\n  /** the input `role` */\n  @Prop()\n  htmlRole?: string;\n\n  /** render clear icon when typing (optional): available for text */\n  @Prop()\n  hasclearicon?: boolean = true;\n\n  /** render icon (optional): available for text */\n  @Prop()\n  icon?: string;\n\n  /** min number value (optional): available for number */\n  @Prop()\n  min?: number;\n\n  /** Min length value (optional): available for text */\n  @Prop()\n  minlength?: number;\n\n  /** max number value (optional): available for number */\n  @Prop()\n  max?: number;\n\n  /** Max length value (optional): available for text */\n  @Prop()\n  maxlength?: number;\n\n  /** step number value (optional): available for number */\n  @Prop()\n  step?: number;\n\n  /** pattern value (optional): available for tel, text, search, url, email, password*/\n  @Prop()\n  pattern?: string;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  isTyping = false;\n\n  @State()\n  passwordHidden = true;\n\n  private timer;\n\n  private typingtimeout = 300;\n\n  private inputRef: HTMLInputElement;\n\n  @Listen(\"inputCheck\", {target: \"document\"})\n  inputCheckListener(e: CustomEvent): void {\n    const data = e.detail;\n    switch (this.type) {\n      case InputType.RADIO:\n        if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n          this.checked = false;\n        }\n        break;\n    }\n  }\n\n  /** get checked status */\n  @Method()\n  async isChecked(): Promise<boolean> {\n    switch (this.type) {\n      case InputType.CHECKBOX:\n      case InputType.RADIO:\n        return this.checked;\n      default:\n        console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n        return false;\n    }\n  }\n\n  /** Emitted on input value change, returns value, validity */\n  @Event()\n  inputChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    if (!this.isTyping) {\n      this.emitStartTyping();\n    }\n\n    let validity: ValidityState;\n    if (this.type === InputType.TEXTAREA) {\n      validity = this.getValidity(\"textarea\");\n    } else {\n      validity = this.getValidity(\"input\");\n    }\n    this.value = value;\n    this.inputChange.emit({value, validity});\n\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => {\n      this.emitStopTyping(this.value, validity);\n    }, this.typingtimeout);\n  }\n\n  /** Emitted when user starts typing */\n  @Event()\n  startTyping: EventEmitter;\n\n  private emitStartTyping(): void {\n    this.isTyping = true;\n    this.startTyping.emit();\n  }\n\n  /** Emitted when user stops typing, returns value, validity */\n  @Event()\n  stopTyping: EventEmitter;\n\n  private emitStopTyping(value: string, validity: ValidityState): void {\n    this.isTyping = false;\n    this.stopTyping.emit({\n      value: value,\n      validity: validity,\n    });\n  }\n\n  /** Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity */\n  @Event()\n  inputCheck: EventEmitter;\n\n  private emitInputCheck(checked: boolean): void {\n    this.inputCheck.emit({\n      id: this.htmlid,\n      checked: checked,\n      type: this.type,\n      name: this.name,\n      value: this.value,\n      validity: this.getValidity(\"input\"),\n    });\n  }\n\n  /** Emitted on input focus */\n  @Event()\n  inputFocus: EventEmitter;\n\n  private emitInputFocus(): void {\n    this.inputFocus.emit({id: this.htmlid});\n  }\n\n  /** Emitted on input blur */\n  @Event()\n  inputBlur: EventEmitter;\n\n  private emitInputBlur(): void {\n    this.inputBlur.emit({id: this.htmlid});\n  }\n\n  private getValidity(type: string): ValidityState {\n    const input = this.hostElement.querySelector(type) as HTMLInputElement;\n\n    return input.validity;\n  }\n\n  /* START text/password/email/number */\n\n  private getTextAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n    return {\n      id: this.htmlid,\n      name: this.name,\n      placeholder: this.placeholder,\n      value: this.value,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      required: this.required,\n      title: this.htmltitle,\n      minlength: this.minlength,\n      maxlength: this.maxlength,\n      class: {\n        [`input-${this.status}`]: !!this.status,\n      },\n      autocomplete: this.autocomplete,\n      onInput: (e: InputEvent) => this.emitInputChange((e.target as HTMLInputElement).value),\n    };\n  }\n\n  private getNumberAttributes(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n    if (type != InputType.NUMBER) {\n      return;\n    }\n\n    return {\n      min: this.min,\n      max: this.max,\n      step: this.step,\n    };\n  }\n\n  private getPatternAttribute(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n    if (\n      type != InputType.PASSWORD &&\n      type != InputType.TEXT &&\n      type != InputType.TEL &&\n      type != InputType.SEARCH &&\n      type != InputType.URL &&\n      type != InputType.EMAIL\n    ) {\n      return;\n    }\n\n    return {\n      pattern: this.pattern,\n    };\n  }\n\n  private inputHasMessage(): boolean {\n    if (typeof boolean(this.message) === \"boolean\") {\n      return false;\n    }\n\n    return true;\n  }\n\n  private getAriaAttributes(): Record<string, string | undefined> {\n    return {\n      \"role\": this.htmlRole || undefined,\n      \"aria-describedby\": this.htmlAriaDescribedby || undefined,\n      \"aria-labelledby\": this.htmlAriaLabelledby || undefined,\n    };\n  }\n\n  private getTextAriaAttributes(): Record<string, string | undefined> {\n    return {\n      ...this.getAriaAttributes(),\n      \"aria-expanded\": this.htmlAriaExpanded || undefined,\n      \"aria-controls\": this.htmlAriaControls || undefined,\n      \"aria-autocomplete\": this.htmlAriaAutocomplete || undefined,\n      \"aria-activedescendant\": this.htmlAriaActivedescendant || undefined,\n      \"aria-describedby\":\n        this.htmlAriaDescribedby || this.inputHasMessage()\n          ? this.htmlAriaDescribedby || `${this.htmlid}-message`\n          : undefined,\n      \"aria-invalid\": this.status === InputStatus.ERROR ? \"true\" : undefined,\n      \"aria-required\": this.required ? \"true\" : undefined,\n    };\n  }\n\n  private getFocusBlurAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n    return {\n      onFocus: () => this.emitInputFocus(),\n      onBlur: () => this.emitInputBlur(),\n    };\n  }\n\n  private renderInputText(type: InputType = InputType.TEXT): HTMLDivElement {\n    const attr = {\n      ...this.getTextAttributes(),\n      ...this.getNumberAttributes(type),\n      ...this.getPatternAttribute(type),\n      ...this.getTextAriaAttributes(),\n      ...this.getFocusBlurAttributes(),\n      \"aria-label\": this.htmlAriaLabel || undefined,\n    };\n\n    attr.class = {\n      ...(attr.class as {[className: string]: boolean}),\n      \"has-icon\": !!this.icon || type === InputType.PASSWORD,\n      \"has-clear-icon\": this.hasclearicon && type != InputType.NUMBER,\n    };\n\n    return (\n      <div class=\"text-wrapper\">\n        {this.renderLabel()}\n        <div>\n          <input\n            {...attr}\n            type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n            ref={(el) => (this.inputRef = el)}\n          />\n          {this.renderIcons()}\n        </div>\n        {this.renderMessage()}\n      </div>\n    );\n  }\n\n  private renderLabel(): HTMLLabelElement {\n    if (!this.label) {\n      return;\n    }\n\n    return (\n      <label\n        class=\"z-label body-5-sb\"\n        id={`${this.htmlid}_label`}\n        htmlFor={this.htmlid}\n      >\n        {this.label}\n      </label>\n    );\n  }\n\n  private renderIcons(): HTMLSpanElement {\n    return (\n      <span class=\"icons-wrapper\">\n        {this.renderResetIcon()}\n        {this.renderIcon()}\n      </span>\n    );\n  }\n\n  private renderIcon(): HTMLButtonElement {\n    if (this.type === InputType.PASSWORD) {\n      return this.renderShowHidePassword();\n    }\n\n    if (!this.icon) {\n      return;\n    }\n\n    return (\n      <z-icon\n        name={this.icon}\n        class={{[this.size]: true, \"input-icon\": true}}\n      />\n    );\n  }\n\n  private renderResetIcon(): HTMLButtonElement {\n    let hidden = false;\n    if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {\n      hidden = true;\n    }\n\n    return (\n      <button\n        type=\"button\"\n        class={{\"reset-icon\": true, \"input-icon\": true, hidden}}\n        aria-label=\"cancella il contenuto dell'input\"\n        onClick={() => {\n          this.inputRef.value = \"\";\n          this.emitInputChange(\"\");\n          this.inputRef.focus();\n        }}\n      >\n        <z-icon\n          name=\"multiply\"\n          class={this.size}\n        />\n      </button>\n    );\n  }\n\n  private renderShowHidePassword(): HTMLButtonElement {\n    return (\n      <button\n        type=\"button\"\n        class=\"input-icon toggle-password-icon\"\n        disabled={this.disabled}\n        aria-label=\"mostra password\"\n        aria-pressed={!this.passwordHidden ? \"true\" : \"false\"}\n        onClick={() => (this.passwordHidden = !this.passwordHidden)}\n      >\n        <z-icon\n          name={this.passwordHidden ? \"view-filled\" : \"view-off-filled\"}\n          class={this.size}\n        />\n      </button>\n    );\n  }\n\n  private renderMessage(): HTMLZInputMessageElement {\n    if (boolean(this.message) === false) {\n      return;\n    }\n\n    return (\n      <z-input-message\n        html-id={`${this.htmlid}-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  /* END text/password/email/number */\n\n  /* START textarea */\n\n  private renderTextarea(): HTMLDivElement {\n    const attributes = this.getTextAttributes();\n    const ariaAttributes = this.getTextAriaAttributes();\n\n    return (\n      <Fragment>\n        {this.renderLabel()}\n        <div\n          class={{\n            ...(attributes.class as {[className: string]: boolean}),\n            \"textarea-wrapper\": true,\n            \"readonly\": !!attributes.readonly,\n          }}\n        >\n          <textarea\n            {...attributes}\n            {...ariaAttributes}\n            class={{\n              ...(attributes.class as {[className: string]: boolean}),\n              \"z-scrollbar\": true,\n            }}\n            aria-label={this.htmlAriaLabel || undefined}\n          ></textarea>\n        </div>\n        {this.renderMessage()}\n      </Fragment>\n    );\n  }\n\n  /* END textarea */\n\n  private handleCheck(ev: Event): void {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.emitInputCheck(this.checked);\n  }\n\n  /* START checkbox */\n  private renderCheckbox(): HTMLDivElement {\n    const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\n    return (\n      <div class=\"checkbox-wrapper\">\n        <input\n          id={this.htmlid}\n          type=\"checkbox\"\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          required={this.required}\n          onChange={this.handleCheck.bind(this)}\n          value={this.value}\n          {...ariaRequired}\n          {...this.getAriaAttributes()}\n          {...this.getFocusBlurAttributes()}\n        />\n\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            \"checkbox-label\": true,\n            \"after\": this.labelPosition === LabelPosition.RIGHT,\n            \"before\": this.labelPosition === LabelPosition.LEFT,\n          }}\n        >\n          <z-icon\n            name={this.checked ? \"checkbox-checked\" : \"checkbox\"}\n            class={this.size}\n          />\n          {this.label && <span innerHTML={this.label}></span>}\n        </label>\n      </div>\n    );\n  }\n\n  /* END checkbox */\n\n  /* START radio */\n  private renderRadio(): HTMLDivElement {\n    const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\n    return (\n      <div class=\"radio-wrapper\">\n        <input\n          id={this.htmlid}\n          type=\"radio\"\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          required={this.required}\n          onChange={this.handleCheck.bind(this)}\n          value={this.value}\n          {...this.getAriaAttributes()}\n          {...this.getFocusBlurAttributes()}\n          {...ariaRequired}\n        />\n\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            \"radio-label\": true,\n            \"after\": this.labelPosition === LabelPosition.RIGHT,\n            \"before\": this.labelPosition === LabelPosition.LEFT,\n          }}\n        >\n          <z-icon\n            name={this.checked ? \"radio-button-checked\" : \"radio-button\"}\n            class={this.size}\n          />\n          {this.label && <span innerHTML={this.label} />}\n        </label>\n      </div>\n    );\n  }\n  /* END radio */\n\n  render(): HTMLInputElement | HTMLDivElement {\n    switch (this.type) {\n      case InputType.TEXTAREA:\n        return this.renderTextarea();\n      case InputType.CHECKBOX:\n        return this.renderCheckbox();\n      case InputType.RADIO:\n        return this.renderRadio();\n      case InputType.TEXT:\n      default:\n        return this.renderInputText(this.type);\n    }\n  }\n}\n",":host {\n  display: flex;\n  min-height: calc(var(--space-unit) * 2.5);\n  align-items: start;\n  margin-top: var(--space-unit);\n  color: var(--color-default-text);\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n}\n\n:host(.small),\n:host(.x-small) {\n  margin-top: calc(var(--space-unit) * 0.5);\n  font-size: var(--font-size-1);\n}\n\n:host([status=\"success\"]) {\n  color: var(--color-hover-success);\n}\n\n:host([status=\"error\"]) {\n  color: var(--color-hover-error);\n}\n\n:host([status=\"warning\"]) {\n  color: var(--color-hover-warning);\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n:host > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n  --z-icon-right-margin: var(--space-unit);\n\n  margin-top: calc(var(--space-unit) * 0.25);\n}\n\n:host(.small) > z-icon,\n:host(.x-small) > z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n  --z-icon-right-margin: calc(var(--space-unit) * 0.5);\n}\n\n:host([disabled]) {\n  color: var(--color-disabled03);\n  fill: var(--color-disabled03);\n}\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-input-message\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInputMessage implements ComponentInterface {\n  /** input helper message */\n  @Prop()\n  message: string;\n\n  /** the id of the message element (optional) */\n  @Prop()\n  htmlId? = `id-${randomId()}`;\n\n  /** the role to set when both the message and the status are populated (optional) */\n  @Prop()\n  htmlRole: null | string = \"alert\";\n\n  /** input status (optional) */\n  @Prop({reflect: true})\n  status?: InputStatus;\n\n  /** input disabled status (optional) */\n  @Prop({reflect: true})\n  disabled?: boolean;\n\n  private statusIcons = {\n    success: \"checkmark-circle\",\n    error: \"multiply-circled\",\n    warning: \"exclamation-circle\",\n  };\n\n  render(): HTMLZInputMessageElement {\n    return (\n      <Host\n        role={this.htmlRole && this.message && this.status ? this.htmlRole : undefined}\n        id={this.htmlId}\n      >\n        {this.statusIcons[this.status] && this.message && <z-icon name={this.statusIcons[this.status]}></z-icon>}\n        <span innerHTML={this.message} />\n      </Host>\n    );\n  }\n}\n",":host {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZList implements ComponentInterface {\n  @Element() host: HTMLZListElement;\n\n  /**\n   * [optional] Size of the list elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Type of the list marker for each element.\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  @State()\n  htmlRole = \"list\";\n\n  /** Watch for changes in the role native attribute */\n  @Watch(\"role\", {immediate: true})\n  onRoleChange(newValue: string): void {\n    this.htmlRole = newValue;\n  }\n\n  @Watch(\"size\", {immediate: true})\n  @Watch(\"listType\", {immediate: true})\n  setChildrenProps(): void {\n    Array.from(this.host.children)\n      .filter((child): child is HTMLZListElementElement => child.tagName.toLowerCase() === \"z-list-element\")\n      .forEach((child, i) => {\n        child.size = this.size;\n        child.listType = this.listType;\n        child.listElementPosition = `${i + 1}`;\n      });\n  }\n\n  render(): HTMLZListElement {\n    return (\n      <Host role={this.htmlRole}>\n        <slot />\n      </Host>\n    );\n  }\n}\n",":host {\n  outline: none;\n}\n\n:host > .container {\n  --background-color-list-element: ;\n  --background-hover-color-list-element: ;\n  --background-active-color-list-element: ;\n\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: center;\n  background-color: var(--background-color-list-element, var(--color-surface01));\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  outline: none;\n}\n\n/* z-list-element size */\n\n:host([size=\"small\"]) > .container {\n  min-height: calc(var(--space-unit) * 4);\n  padding: calc(var(--space-unit) / 2) 0;\n}\n\n:host([size=\"medium\"]) > .container {\n  min-height: calc(var(--space-unit) * 5);\n  padding: var(--space-unit) 0;\n}\n\n:host([size=\"medium\"]) > .tree-element-container {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n:host([size=\"large\"]) > .container {\n  min-height: calc(var(--space-unit) * 7);\n  padding: calc(var(--space-unit) * 2) 0;\n}\n\n:host([size=\"x-large\"]) > .container {\n  min-height: calc(var(--space-unit) * 9);\n  padding: calc(var(--space-unit) * 3) 0;\n}\n\n/* ----------------- */\n\n:host([expandable]) > .container,\n:host([clickable]) > .container {\n  cursor: pointer;\n}\n\n:host([expandable]:hover) > .container,\n:host([clickable]:hover) > .container {\n  background-color: var(--background-hover-color-list-element, var(--color-background));\n}\n\n:host([expandable]:focus:focus-visible) > .container,\n:host([clickable]:focus:focus-visible) > .container {\n  position: relative;\n  z-index: 1;\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([expandable]:active) > .container,\n:host([clickable]:active) > .container {\n  background-color: var(--background-active-color-list-element, var(--color-background));\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container {\n  display: flex;\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container > z-icon {\n  margin-right: var(--space-unit);\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container > z-icon {\n  margin-left: var(--space-unit);\n}\n\n:host > .container > .z-list-element-inner-container {\n  display: none;\n}\n\n:host > .container > .z-list-element-inner-container.expanded {\n  display: block;\n}\n\n.z-list-content-container {\n  display: flex;\n  align-items: center;\n}\n\n:host .z-tree-list-divider {\n  position: absolute;\n  z-index: 100;\n  left: 0;\n}\n\n:host([disabled]) > .container {\n  color: var(--color-form-disabled03);\n  cursor: default;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  DividerSize,\n  ExpandableListButtonAlign,\n  ExpandableListStyle,\n  KeyboardCode,\n  ListDividerType,\n  ListSize,\n  ListType,\n} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-element\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListElement implements ComponentInterface {\n  @Element() host: HTMLZListElementElement;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"accessibleFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  accessibleFocus: EventEmitter<number>;\n\n  /** set parent aria-activedescendant on focus event, returns filterid */\n  @Event({\n    eventName: \"ariaDescendantFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  ariaDescendantFocus: EventEmitter<number>;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"clickItem\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  clickItem: EventEmitter;\n\n  @Listen(\"accessibleFocus\", {target: \"document\"})\n  accessibleFocusHandler(e: CustomEvent): void {\n    if (this.listElementId === e.detail) {\n      const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n      toFocus.focus();\n    }\n  }\n\n  /**\n   * [optional] Align expandable button left or right.\n   */\n  @Prop({reflect: true})\n  alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n  /**\n   * [optional] Sets element clickable.\n   */\n  @Prop({reflect: true})\n  clickable?: boolean = false;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop()\n  dividerColor?: string = \"color-surface03\";\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop()\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop()\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets element as expandable.\n   */\n  @Prop({reflect: true})\n  expandable?: boolean = false;\n\n  /**\n   * [optional] Sets expandable style to element.\n   */\n  @Prop()\n  expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n  /**\n   * [optional] List element id.\n   */\n  @Prop({reflect: true})\n  listElementId?: number;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets text color of the element.\n   */\n  @Prop({reflect: true})\n  color?: string = \"none\";\n\n  /**\n   * [optional] Sets disabled style of the element.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * [optional] position of the list element inside the list or the group\n   */\n  @Prop({reflect: true})\n  listElementPosition?: string = \"0\";\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * [optional] Sets element as tree item.\n   */\n  @Prop()\n  hasTreeItems?: boolean;\n\n  /** set tabindex to Host tag (optional). Defaults to 0. */\n  @Prop()\n  htmlTabindex?: number | null = 0;\n\n  @State()\n  showInnerContent = false;\n\n  @State()\n  htmlRole = \"listitem\";\n\n  private openElementConfig = {\n    accordion: {\n      open: \"minus-circled\",\n      close: \"plus-circled\",\n    },\n    menu: {\n      open: \"chevron-up\",\n      close: \"chevron-down\",\n    },\n  };\n\n  /**\n   * Constructor.\n   */\n  constructor() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  /**\n   * Handler for click on element. If element is expandable, change state.\n   */\n  private handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.clickItem.emit(this.listElementId);\n    if (!this.expandable) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  private handleKeyDown(event): void {\n    const expandByKey = event.code === KeyboardCode.ENTER;\n    switch (event.code) {\n      case KeyboardCode.ARROW_DOWN:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId + 1);\n        break;\n      case KeyboardCode.ARROW_UP:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId - 1);\n        break;\n      case KeyboardCode.ENTER:\n        event.preventDefault();\n        this.clickItem.emit(this.listElementId);\n        break;\n      default:\n        break;\n    }\n\n    if (!this.expandable || !expandByKey) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  @Watch(\"role\", {immediate: true})\n  onRoleChange(newValue: string): void {\n    this.htmlRole = newValue;\n  }\n\n  /**\n   * Renders button to expand element.\n   */\n  private renderExpandableButton(): HTMLZIconElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <z-icon\n        name={\n          this.showInnerContent\n            ? this.openElementConfig[this.expandableStyle].open\n            : this.openElementConfig[this.expandableStyle].close\n        }\n      />\n    );\n  }\n\n  /**\n   * Renders expanded content if element is expandable.\n   */\n  private renderExpandedContent(): HTMLDivElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <div\n        class={{\n          \"z-list-element-inner-container\": true,\n          \"expanded\": this.showInnerContent,\n        }}\n      >\n        <slot name=\"inner-content\" />\n      </div>\n    );\n  }\n\n  /**\n   * Renders content of the z-list-element\n   */\n  private renderContent(): HTMLDivElement {\n    if (this.listType === ListType.NONE) {\n      return <slot />;\n    }\n\n    if (this.listType === ListType.ORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <div>{this.listElementPosition}.&emsp;</div>\n          <slot />\n        </div>\n      );\n    }\n\n    if (this.listType === ListType.UNORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <span>&bull;&emsp;</span>\n          <slot />\n        </div>\n      );\n    }\n  }\n\n  render(): HTMLZListElementElement {\n    return (\n      <Host\n        aria-expanded={this.expandable ? this.showInnerContent : null}\n        onClick={this.handleClick}\n        onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n        onKeyDown={this.handleKeyDown}\n        clickable={this.clickable && !this.disabled}\n        tabIndex={this.hasTreeItems ? undefined : this.htmlTabindex}\n        role={this.hasTreeItems ? \"none\" : this.htmlRole}\n      >\n        <div\n          class={this.hasTreeItems ? \"tree-element-container\" : \"container\"}\n          style={!this.disabled && {color: `var(--${this.color})`}}\n          tabindex=\"-1\"\n          id={`z-list-element-id-${this.listElementId}`}\n          part=\"list-item-container\"\n        >\n          <div class=\"z-list-element-container\">\n            {this.renderExpandableButton()}\n            {this.renderContent()}\n          </div>\n          {this.renderExpandedContent()}\n        </div>\n        {this.dividerType === ListDividerType.ELEMENT && (\n          <z-divider\n            class={{\"z-tree-list-divider\": this.hasTreeItems}}\n            color={this.dividerColor}\n            size={this.dividerSize}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n",":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > .z-list-group-header-container {\n  color: var(--gray700);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb) !important;\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n:host > .z-list-group-header-container.has-header {\n  padding-top: calc(var(--space-unit) * 1.5);\n  padding-bottom: var(--space-unit);\n}\n\n:host > .z-list-group-header-container.has-header > z-divider {\n  margin-top: var(--space-unit);\n}\n\n:host > .grouped-tree-list-header {\n  padding-top: calc(var(--space-unit) * 1.5);\n  padding-bottom: var(--space-unit);\n}\n","import {Component, ComponentInterface, Element, h, Host, Prop, State, Watch} from \"@stencil/core\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-group\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListGroup implements ComponentInterface {\n  @Element() host: HTMLZListGroupElement;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop({reflect: true})\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop({reflect: true})\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop({reflect: true})\n  dividerColor?: string = \"gray200\";\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * [optional] check for tree items in grouped lists\n   */\n  @Prop()\n  hasTreeItems?: boolean;\n\n  @State()\n  htmlRole = \"group\";\n\n  private hasHeader: boolean;\n\n  @Watch(\"role\", {immediate: true})\n  onRoleChange(newValue: string): void {\n    this.htmlRole = newValue;\n  }\n\n  @Watch(\"size\", {immediate: true})\n  @Watch(\"listType\", {immediate: true})\n  @Watch(\"dividerType\", {immediate: true})\n  @Watch(\"dividerSize\", {immediate: true})\n  @Watch(\"dividerColor\", {immediate: true})\n  setChildrenProps(): void {\n    Array.from(this.host.children)\n      .filter((child): child is HTMLZListElementElement => child.tagName.toLowerCase() === \"z-list-element\")\n      .forEach((child, i, children) => {\n        child.size = this.size;\n        child.listType = this.listType;\n        child.listElementPosition = i.toString();\n        if (i < children.length - 1) {\n          child.dividerType = this.dividerType;\n          child.dividerSize = this.dividerSize;\n          child.dividerColor = this.dividerColor;\n        }\n      });\n  }\n\n  componentWillLoad(): void {\n    this.hasHeader = !!this.host.querySelector('[slot=\"header-title\"]');\n  }\n\n  render(): HTMLZListGroupElement {\n    return (\n      <Host role={this.htmlRole}>\n        <div\n          class={{\n            \"z-list-group-header-container\": true,\n            \"has-header\": this.hasHeader && !this.hasTreeItems,\n            \"grouped-tree-list-header\": this.hasTreeItems,\n          }}\n        >\n          <slot name=\"header-title\" />\n          {this.dividerType === ListDividerType.HEADER && (\n            <z-divider\n              color={this.dividerColor}\n              size={this.dividerSize}\n            />\n          )}\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n",":host {\n  /**\n   * @prop --z-offcanvas--top-space: Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.\n   * @prop --z-offcanvas--container-width: Width of the offcanvas for `left` and `right` direction. Default: `375px`.\n   * @prop --z-offcanvas--container-height: Height of the offcanvas for `up` direction. Default: `90%`.\n   */\n  --z-offcanvas--container-width: ;\n  --z-offcanvas--container-height: ;\n  --z-offcanvas--top-space: ;\n\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host([variant=\"pushcontent\"]:not([transitiondirection=\"up\"])) {\n  overflow: hidden;\n}\n\n.canvas-container {\n  display: flex;\n  overflow: hidden;\n  min-width: 100%;\n  height: 100%;\n  background: var(--color-surface01);\n  transform: translateX(0);\n  transition: transform 0.4s ease-out;\n}\n\n:host > * {\n  position: fixed;\n  top: var(--z-offcanvas--top-space, 0);\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n:host([open]) > * {\n  height: calc(100% - var(--z-offcanvas--top-space, 0px));\n}\n\n:host([transitiondirection=\"right\"]) > .canvas-container {\n  transform: translateX(-100%);\n}\n\n:host([transitiondirection=\"left\"]) > .canvas-container {\n  transform: translateX(100%);\n}\n\n:host([open][transitiondirection=\"right\"]) > .canvas-container,\n:host([open][transitiondirection=\"left\"]) > .canvas-container {\n  transform: translateX(0);\n}\n\n:host([transitiondirection=\"up\"]) > .canvas-container {\n  top: auto;\n  bottom: 0;\n  height: var(--z-offcanvas--container-height, 90%);\n  transform: translateY(100%);\n}\n\n:host([transitiondirection=\"up\"], [variant=\"overlay\"]) > .canvas-container {\n  z-index: 1001;\n}\n\n:host([open][transitiondirection=\"up\"]) > .canvas-container {\n  transform: translateY(0);\n}\n\n:host([variant=\"pushcontent\"]:not([transitiondirection=\"up\"])) > .canvas-container {\n  position: relative;\n  height: 100%;\n}\n\n:host([variant=\"pushcontent\"]:not([open])) {\n  display: none;\n}\n\n:host([skip-animation]) > .canvas-container {\n  transition: none;\n}\n\n.backdrop {\n  z-index: 1000;\n  width: 100%;\n  height: 100%;\n  background-color: var(--gray900);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.4s ease-out;\n}\n\n:host([open]) > .backdrop {\n  opacity: 0.7;\n  pointer-events: unset;\n}\n\n.canvas-container > .canvas-content {\n  overflow: hidden auto;\n  flex: 1 auto;\n  padding: 0 calc(var(--space-unit) * 2);\n  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;\n  outline: none;\n}\n\n/* Tablet / Desktop */\n@media (min-width: 768px) {\n  :host([variant=\"pushcontent\"]:not([transitiondirection=\"up\"])) {\n    flex: none; /* Prevent unwanted width changes in flex containers */\n  }\n\n  .canvas-container {\n    width: var(--z-offcanvas--container-width, 375px);\n    min-width: var(--z-offcanvas--container-width, 375px);\n  }\n\n  :host([transitiondirection=\"up\"]) > .canvas-container {\n    width: 100%;\n  }\n\n  :host([transitiondirection=\"right\"]) > .canvas-container {\n    right: auto;\n    left: 0;\n  }\n\n  :host([transitiondirection=\"left\"]) > .canvas-container {\n    right: 0;\n    left: auto;\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {FocusTrapController} from \"../../utils/focus-trap-controller\";\nimport {ReactiveControllerHost} from \"../../utils/reactive-controller\";\nimport {getTabbableElements} from \"../../utils/utils\";\n\n/**\n * @slot canvasContent - Slot for the offcanvas content.\n */\n@Component({\n  tag: \"z-offcanvas\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZOffcanvas extends ReactiveControllerHost {\n  @Element() host: HTMLZOffcanvasElement;\n\n  /**\n   * Offcanvas variant.\n   * - `overlay`: The offcanvas covers the page content putting an overlay.\n   * - `pushcontent`: The offcanvas isn't absolutely positioned and \"pushes\" the page content.\n   * > NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.\n   * Also, the `pushcontent` variant doesn't have the open/close transition.\n   */\n  @Prop({reflect: true})\n  variant?: OffCanvasVariant = OffCanvasVariant.PUSHCONTENT;\n\n  /** Whether the offcanvas is open. Default: false */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Open the content transitioning to a specified direction.\n   * The `up` direction always show the `overlay`, also when the variant is `pushcontent`.\n   */\n  @Prop({reflect: true})\n  transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n  /**\n   * Skip the opening transition when the offcanvas is already open at the first render.\n   * @deprecated This prop is not needed anymore, the component will automatically skip the transition\n   * when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.\n   */\n  @Prop()\n  skipLoadAnimation = false;\n\n  /** Whether to show the backdrop when the offcanvas is open and variant is not `pushcontent`. Default: `true` */\n  @Prop()\n  showBackdrop = true;\n\n  /** emitted when `open` prop changes */\n  @Event()\n  canvasOpenStatusChanged: EventEmitter<boolean>;\n\n  /** Used to skip the opening transition when the offcanvas is already open at the first render. */\n  @State()\n  private skipAnimation = false;\n\n  private canvasContent: HTMLElement;\n\n  private focusTrapController = new FocusTrapController(this, {\n    fallbackFocus: () => this.canvasContent,\n    isActive: () => this.open && this.variant === OffCanvasVariant.OVERLAY,\n  });\n\n  /**\n   * Handles Escape and wrap-around Tab navigation at the focus boundaries.\n   */\n  @Listen(\"keydown\", {target: \"document\"})\n  handleKeyDown(event: KeyboardEvent): void {\n    if (!this.open || this.variant !== OffCanvasVariant.OVERLAY) {\n      return;\n    }\n\n    if (event.key === KeyboardCode.ESC) {\n      event.preventDefault();\n      this.open = false;\n\n      return;\n    }\n\n    this.focusTrapController.handleWrapTab(event);\n  }\n\n  /**\n   * Lock the page scroll when the offcanvas is open and unlock it when the offcanvas is closed.\n   */\n  @Watch(\"variant\", {immediate: true})\n  private handlePageScroll(): void {\n    const overflow =\n      this.variant === OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP\n        ? \"overflow-y\"\n        : \"overflow-x\";\n\n    this.host.ownerDocument.body.style[overflow] = this.open ? \"hidden\" : \"\";\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    this.canvasOpenStatusChanged.emit(this.open);\n\n    this.handlePageScroll();\n    this.focusTrapController.sync();\n  }\n\n  componentWillLoad() {\n    if (this.open) {\n      this.skipAnimation = true; // TODO: remove this line when `skipLoadAnimation` prop is removed.\n    }\n\n    return super.componentWillLoad();\n  }\n\n  componentDidRender() {\n    this.skipAnimation = false; // TODO: remove this line when `skipLoadAnimation` prop is removed.\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      this.onOpenChanged();\n    }\n  }\n\n  disconnectedCallback() {\n    this.handlePageScroll();\n    super.disconnectedCallback();\n  }\n\n  render(): HTMLZOffcanvasElement {\n    return (\n      <Host\n        skip-animation={this.skipAnimation}\n        aria-hidden={!this.open ? \"true\" : null}\n        aria-modal={this.open && this.variant === OffCanvasVariant.OVERLAY ? \"true\" : null}\n        role={this.open && this.variant === OffCanvasVariant.OVERLAY ? \"dialog\" : null}\n      >\n        <div class=\"canvas-container\">\n          <div\n            class=\"canvas-content z-scrollbar\"\n            ref={(el) => (this.canvasContent = el)}\n            tabIndex={getTabbableElements(this.host).length ? undefined : -1} // allows the div to programmatically receive focus when there are no focusable elements inside, necessary for the focus trap to work properly\n          >\n            <slot name=\"canvasContent\"></slot>\n          </div>\n        </div>\n        {(this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&\n          this.showBackdrop && (\n            <div\n              class=\"backdrop\"\n              onClick={(ev) => {\n                ev.preventDefault();\n                ev.stopPropagation();\n                this.open = false;\n              }}\n            ></div>\n          )}\n      </Host>\n    );\n  }\n}\n",":host {\n  /**\n   * @prop --z-searchbar-results-height: Max height of the results container (default: 540px)\n   * @prop --z-searchbar-tag-text-color: Color of tag's text (default --color-primary03);\n   * @prop --z-searchbar-tag-bg: Color of tag's background (default --color-hover-primary);\n   */\n  --z-searchbar-tag-text-color: var(--color-primary03);\n  --z-searchbar-tag-bg: var(--color-hover-primary);\n  --z-searchbar-item-height: 2.75rem;\n\n  z-index: 15;\n  display: flex;\n  align-items: flex-end;\n  column-gap: calc(var(--space-unit) * 2);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host,\n*,\n::after,\n::before {\n  box-sizing: border-box;\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.input-container z-input {\n  z-index: 1;\n}\n\n.results {\n  --item-icon-size: 1rem;\n  --z-icon-height: var(--item-icon-size);\n  --z-icon-width: var(--item-icon-size);\n  --item-inline-padding: calc(var(--space-unit) * 1.5);\n  --item-col-gap: var(--space-unit);\n\n  position: absolute;\n  top: calc(100% - 1px);\n  left: 0;\n  overflow: auto;\n  width: 100%;\n  max-height: var(--z-searchbar-results-height, 540px);\n  border: var(--border-size-small) solid var(--color-form-surface03);\n  border-top: none;\n  background: var(--color-form-background);\n}\n\n.results z-list-element {\n  --background-color-list-element: var(--color-form-background);\n\n  position: relative;\n  display: block;\n}\n\n.results > z-list > z-list-element::part(list-item-container) {\n  padding: 0 var(--item-inline-padding);\n}\n\n.results z-list-element > .list-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);\n  background-color: transparent;\n  color: var(--color-form-default-text);\n  fill: var(--color-form-default-icon);\n  gap: var(--item-col-gap);\n}\n\n.results z-list-element > .list-item:hover {\n  background-color: var(--gray100); /* TODO: use correct form-related token when available */\n  cursor: pointer;\n}\n\n.results z-list-element > .list-item:focus-visible {\n  z-index: 1;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n/* list elements separator */\n.results > z-list > z-list-element:not(:last-child) > .list-item,\n.results z-list-group:not(:last-child) > z-list-element:not(.category-heading) {\n  border-bottom: 1px solid var(--color-form-surface03);\n}\n\n.results z-list-group {\n  padding: 0 var(--item-inline-padding);\n}\n\n.results z-list-group > z-list-element::part(list-item-container) {\n  padding: 0;\n}\n\n.results .sub-list {\n  padding-left: calc(var(--item-icon-size) + var(--item-col-gap));\n}\n\n.results .sub-list z-list-element::part(list-item-container) {\n  padding: 0;\n}\n\n.results .sub-list z-list-element > .list-item {\n  position: relative;\n}\n\n/* tree indicators */\n.results .sub-list > z-list-element:not(:last-child)::before,\n.results .sub-list > z-list-element > .list-item::before {\n  position: absolute;\n  top: 0;\n  left: calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);\n  border-left: 1px solid var(--color-form-surface03);\n  content: \"\";\n}\n\n/* \"|\" tree indicator */\n.results .sub-list > z-list-element:not(:last-child)::before {\n  top: -4px;\n  height: calc(100% + 4px);\n}\n\n/* \"—\" tree indicator */\n.results .sub-list z-list-element > .list-item::before {\n  width: 14px;\n  height: calc(var(--z-searchbar-item-height) / 2);\n  border-bottom: 1px solid var(--color-form-surface03);\n}\n\n.results .category-heading > .category {\n  font-style: italic;\n}\n\n.results .category-heading > .subcategory {\n  text-transform: uppercase;\n}\n\n.results z-list-element > .list-item .ellipsis {\n  overflow: hidden;\n}\n\n.results .ellipsis > .item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.results .item-label mark {\n  background: var(--color-primary03);\n  color: var(--color-default-text);\n}\n\n.results .list-item > z-tag {\n  --z-tag-bg: var(--z-searchbar-tag-bg);\n  --z-tag-text-color: var(--z-searchbar-tag-text-color);\n\n  margin-left: auto;\n  white-space: nowrap;\n}\n\n.results .item-show-all {\n  width: 100%;\n  color: var(--color-primary01);\n  cursor: pointer;\n  text-align: center;\n}\n\n.results .item-no-results {\n  display: block;\n  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n  font-style: italic;\n}\n\n.results .item-no-results > ul {\n  padding-left: calc(var(--space-unit) * 2);\n  margin: var(--space-unit);\n}\n\n@media (min-width: 768px) {\n  .results {\n    --item-icon-size: 1.125rem;\n  }\n}\n",".z-label {\n  display: block;\n  padding-bottom: var(--space-unit);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  text-align: left;\n  text-transform: uppercase;\n}\n","/* Webkit Scrollbar */\n.z-scrollbar::-webkit-scrollbar {\n  width: 6px;\n  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary01);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n:host([theme=\"dark\"]) .z-scrollbar,\n.z-scrollbar--dark {\n  --z-scrollbar-track-gradient: linear-gradient(\n    to right,\n    transparent 0 1px,\n    var(--gray600) 1px 5px,\n    transparent 5px 6px\n  );\n  --z-scrollbar-track-color: var(--gray600);\n  --z-scrollbar-thumb-color: var(--color-primary03);\n  --z-scrollbar-thumb-hover-color: var(--color-hover-primary);\n  --z-scrollbar-corner-color: transparent;\n}\n\n/* Firefox scrollbar */\n@supports not selector(.z-scrollbar::-webkit-scrollbar-track) {\n  .z-scrollbar {\n    scrollbar-color: var(--color-primary01) transparent;\n  }\n\n  :host([theme=\"dark\"]) .z-scrollbar,\n  .z-scrollbar--dark {\n    scrollbar-color: var(--z-scrollbar-thumb-color, var(--color-primary03))\n      var(--z-scrollbar-track-color, var(--gray600));\n  }\n}\n",":root {\n  /* font-family */\n  --font-family-sans: \"IBM Plex Sans\", sans-serif;\n  --font-family-serif: \"IBM Plex Serif\", serif;\n\n  /* font-weight */\n  --font-lt: 300;\n  --font-rg: 400;\n  --font-sb: 600;\n  --font-bd: 700;\n\n  /* font-size type scale */\n  --font-size-1: 0.75rem; /* 12px */\n  --font-size-2: 0.875rem; /* 14px */\n  --font-size-3: 1rem; /* assuming 16px */\n  --font-size-4: 1.125rem; /* 18px */\n  --font-size-5: 1.25rem; /* 20px */\n  --font-size-6: 1.5rem; /* 24px */\n  --font-size-7: 1.75rem; /* 28px */\n  --font-size-8: 2rem; /* 32px */\n  --font-size-9: 2.25rem; /* 36px */\n  --font-size-10: 2.625rem; /* 42px */\n  --font-size-11: 3rem; /* 48px */\n  --font-size-12: 3.375rem; /* 54px */\n  --font-size-13: 3.75rem; /* 60px */\n  --font-size-14: 4.25rem; /* 68px */\n  --font-size-15: 4.75rem; /* 76px */\n  --font-size-16: 5.25rem; /* 84px */\n  --font-size-17: 5.75rem; /* 92px */\n\n  /* cssprops to use with `font` shorthand property */\n  --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n  font-size: var(--font-size-7);\n  font-weight: var(--font-rg);\n  line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n  font-size: var(--font-size-1);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n  font: var(--section-title-1);\n}\n\n.section-title-2 {\n  font: var(--section-title-2);\n}\n\n.section-title-3 {\n  font: var(--section-title-3);\n}\n\n.section-title-4 {\n  font: var(--section-title-4);\n}\n\n.section-title-5 {\n  font: var(--section-title-5);\n}\n\n.section-title-6 {\n  font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n  .heading-1,\n  .heading-1-sb,\n  .heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .heading-2,\n  .heading-2-sb,\n  .heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n  .mobile-heading-1,\n  .mobile-heading-1-sb,\n  .mobile-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .mobile-heading-2,\n  .mobile-heading-2-sb,\n  .mobile-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-3,\n  .mobile-heading-3-sb,\n  .mobile-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-4,\n  .mobile-heading-4-sb,\n  .mobile-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-1,\n  .mobile-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-2,\n  .mobile-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-3,\n  .mobile-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-4,\n  .mobile-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-body-5,\n  .mobile-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-interactive-1,\n  .mobile-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-interactive-2,\n  .mobile-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-interactive-3,\n  .mobile-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .mobile-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .mobile-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .mobile-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .mobile-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .mobile-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  .tablet-heading-1,\n  .tablet-heading-1-sb,\n  .tablet-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .tablet-heading-2,\n  .tablet-heading-2-sb,\n  .tablet-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-3,\n  .tablet-heading-3-sb,\n  .tablet-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-4,\n  .tablet-heading-4-sb,\n  .tablet-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-1,\n  .tablet-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-2,\n  .tablet-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-3,\n  .tablet-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-4,\n  .tablet-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-body-5,\n  .tablet-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-interactive-1,\n  .tablet-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-interactive-2,\n  .tablet-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-interactive-3,\n  .tablet-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .tablet-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .tablet-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .tablet-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .tablet-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .tablet-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  .desktop-heading-1,\n  .desktop-heading-1-sb,\n  .desktop-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .desktop-heading-2,\n  .desktop-heading-2-sb,\n  .desktop-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .desktop-heading-3,\n  .desktop-heading-3-sb,\n  .desktop-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .desktop-heading-4,\n  .desktop-heading-4-sb,\n  .desktop-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-1,\n  .desktop-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-2,\n  .desktop-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-3,\n  .desktop-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-4,\n  .desktop-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-body-5,\n  .desktop-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-interactive-1,\n  .desktop-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-interactive-2,\n  .desktop-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-interactive-3,\n  .desktop-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .desktop-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .desktop-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .desktop-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .desktop-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .desktop-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1366px) {\n  .wide-heading-1,\n  .wide-heading-1-sb,\n  .wide-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .wide-heading-2,\n  .wide-heading-2-sb,\n  .wide-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .wide-heading-3,\n  .wide-heading-3-sb,\n  .wide-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .wide-heading-4,\n  .wide-heading-4-sb,\n  .wide-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-1,\n  .wide-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-2,\n  .wide-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-3,\n  .wide-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-4,\n  .wide-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-body-5,\n  .wide-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-interactive-1,\n  .wide-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-interactive-2,\n  .wide-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-interactive-3,\n  .wide-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .wide-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .wide-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .wide-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .wide-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .wide-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n  font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n  font-weight: var(--font-sb);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {\n  ButtonVariant,\n  ControlSize,\n  KeyboardCode,\n  SearchbarGroup,\n  SearchbarGroupedItem,\n  SearchbarItem,\n} from \"../../beans\";\nimport {handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-searchbar\",\n  styleUrls: [\n    \"styles.css\",\n    \"../css-components/z-label/styles.css\",\n    \"../css-components/z-scrollbar/styles.css\",\n    \"../../tokens/typography.css\",\n  ],\n  shadow: true,\n})\nexport class ZSearchbar implements ComponentInterface {\n  @Element() host: HTMLZSearchbarElement;\n\n  /** The id of the searchbar element */\n  @Prop({reflect: true})\n  htmlid = `searchbar-${randomId()}`;\n\n  /** Prevent submit action */\n  @Prop()\n  preventSubmit?: boolean = false;\n\n  /** The input label */\n  @Prop()\n  label?: string;\n\n  /** The input aria-label */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Input search string */\n  @Prop()\n  value?: string;\n\n  /** Search input placeholder */\n  @Prop()\n  placeholder?: string;\n\n  /** Show autocomplete results */\n  @Prop()\n  autocomplete?: boolean = false;\n\n  /** Minimun number of characters to dispatch typing event */\n  @Prop()\n  autocompleteMinChars?: number = 3;\n\n  /** Number of results shown. Default: all */\n  @Prop()\n  resultsCount?: number;\n\n  /** Search helper text */\n  @Prop()\n  searchHelperLabel?: string = \"Cerca {searchString}\";\n\n  /** Autocomplete results items */\n  @Prop()\n  resultsItems?: SearchbarItem[] | string;\n\n  /** Sort autocomplete results items */\n  @Prop()\n  sortResultsItems?: boolean = false;\n\n  /** Show submit button */\n  @Prop()\n  showSearchButton?: boolean = false;\n\n  /** Hide the label of the submit button, showing only the icon */\n  @Prop()\n  searchButtonIconOnly?: boolean = false;\n\n  /** The label of the submit button */\n  @Prop()\n  searchButtonLabel?: string = \"CERCA\";\n\n  /** Size of the `z-input` and submit `z-button` */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Submit `z-button` variant */\n  @Prop()\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  @State()\n  searchString = this.value;\n\n  @State()\n  currResultsCount: number | undefined = this.resultsCount;\n\n  @State()\n  showResults = false;\n\n  @State()\n  isMobile = false;\n\n  @State()\n  selectedItem?: SearchbarItem;\n\n  private resultsItemsList: SearchbarItem[] | undefined = null;\n\n  private inputRef: HTMLZInputElement;\n\n  /** Media query list for detecting mobile view. */\n  private mql?: MediaQueryList;\n\n  /** Listener for changes in the mobile view media query. */\n  private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n  /** Emitted on search submit, return search string */\n  @Event()\n  searchSubmit: EventEmitter<string>;\n\n  /** Emitted on search typing, return search string */\n  @Event()\n  searchTyping: EventEmitter<string>;\n\n  /** Emitted on search result click, return item */\n  @Event()\n  searchItemClick: EventEmitter<SearchbarItem>;\n\n  private emitSearchItemClick(item: SearchbarItem): void {\n    this.searchItemClick.emit(item);\n    this.selectedItem = item;\n    this.searchString = \"\";\n  }\n\n  private emitSearchSubmit(): void {\n    this.searchSubmit.emit(this.inputRef.value);\n  }\n\n  @Watch(\"resultsItems\")\n  watchItems(): void {\n    this.resultsItemsList = this.getResultsItemsList();\n  }\n\n  @Watch(\"resultsCount\")\n  watchResultsCount(): void {\n    this.currResultsCount = this.resultsCount;\n  }\n\n  @Watch(\"value\")\n  watchValue(): void {\n    this.searchString = this.value;\n  }\n\n  @Watch(\"searchString\")\n  watchSearchString(): void {\n    this.searchTyping.emit(this.searchString);\n    if (!this.searchString) {\n      this.currResultsCount = this.resultsCount;\n    }\n  }\n\n  private getResultsItemsList(): SearchbarItem[] | undefined {\n    return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n  }\n\n  private getGroupedItems(): SearchbarGroupedItem {\n    const groupedItems = {};\n    this.resultsItemsList.forEach((item: SearchbarItem) => {\n      const key = `${item?.category}${item?.subcategory}`;\n      groupedItems[key] = groupedItems[key] ?? {\n        category: item?.category,\n        subcategory: item?.subcategory,\n        items: [],\n      };\n      groupedItems[key][\"items\"].push(item);\n    });\n\n    if (this.sortResultsItems) {\n      return Object.keys(groupedItems)\n        .sort()\n        .reduce((obj, key) => {\n          obj[key] = {\n            ...groupedItems[key],\n            items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n              const nameA = a.label.toUpperCase();\n              const nameB = b.label.toUpperCase();\n              if (nameA < nameB) {\n                return -1;\n              }\n              if (nameA > nameB) {\n                return 1;\n              }\n\n              return 0;\n            }),\n          };\n\n          return obj;\n        }, {});\n    }\n\n    return groupedItems;\n  }\n\n  private onListItemKeyDown(e: KeyboardEvent, item: SearchbarItem): void {\n    if (e.key === KeyboardCode.ENTER) {\n      e.preventDefault();\n      this.emitSearchItemClick(item);\n\n      return;\n    }\n\n    this.handleArrowsNavigation(e);\n  }\n\n  private onSearchHelperKeyDown(e: KeyboardEvent): void {\n    if (e.key === KeyboardCode.ENTER) {\n      e.preventDefault();\n      this.emitSearchSubmit();\n\n      return;\n    }\n\n    this.handleArrowsNavigation(e);\n  }\n\n  private handleArrowsNavigation(e: KeyboardEvent): void {\n    if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode)) {\n      return;\n    }\n\n    const currentElement = e.target as HTMLElement;\n    const items = Array.from(this.host.shadowRoot?.querySelectorAll(\"z-list .list-item\") ?? []);\n    const currentIndex = items.indexOf(currentElement);\n\n    if (e.key === KeyboardCode.ARROW_DOWN) {\n      e.preventDefault();\n      const nextIndex = currentIndex + 1;\n      if (nextIndex < items.length) {\n        (items[nextIndex] as HTMLElement).focus();\n      }\n    }\n\n    if (e.key === KeyboardCode.ARROW_UP) {\n      e.preventDefault();\n      const prevIndex = currentIndex - 1;\n      if (prevIndex < 0) {\n        this.host.shadowRoot?.querySelector(\"input\")?.focus();\n        this.host.shadowRoot\n          ?.querySelector(\"input\")\n          ?.setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);\n      }\n      if (prevIndex >= 0) {\n        (items[prevIndex] as HTMLElement).focus();\n      }\n    }\n  }\n\n  private handleStopTyping(e: CustomEvent): void {\n    e.stopPropagation();\n    this.searchString = e.detail.value;\n    this.selectedItem = undefined;\n  }\n\n  private handleSubmit(): void {\n    if (this.preventSubmit) {\n      return;\n    }\n\n    this.emitSearchSubmit();\n  }\n\n  @Listen(\"click\", {target: \"document\"})\n  private handleOutsideClick(e: MouseEvent): void {\n    const cp = e.composedPath();\n    if (cp.includes(this.host)) {\n      return;\n    }\n\n    this.showResults = false;\n  }\n\n  componentWillLoad(): void {\n    this.resultsItemsList = this.getResultsItemsList();\n\n    this.mql = matchMedia(\"(max-width: 767px)\");\n    this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n    this.mql.addEventListener(\"change\", this.onMobileViewChange);\n    this.isMobile = this.mql.matches;\n  }\n\n  disconnectedCallback(): void {\n    this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n  }\n\n  private renderItemLabel(label: string): string {\n    if (!this.searchString) {\n      return label;\n    }\n\n    return label.replace(\n      new RegExp(this.searchString.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n      (found) => `<mark>${found}</mark>`\n    );\n  }\n\n  private renderItem(item: SearchbarItem, index: number): HTMLZListElementElement {\n    return (\n      <z-list-element\n        id={`list-item-${this.htmlid}-${index}`}\n        role=\"presentation\"\n        htmlTabindex={-1}\n        onKeyDown={(e: KeyboardEvent) => this.onListItemKeyDown(e, item)}\n        onClick={() => this.emitSearchItemClick(item)}\n      >\n        <div\n          class=\"list-item ellipsis\"\n          role=\"option\"\n          tabindex={0}\n        >\n          {!!item?.icon && (\n            <z-icon\n              class=\"item-icon\"\n              name={item.icon}\n            />\n          )}\n\n          <div\n            class=\"item-label body-3 mobile-body-4\"\n            title={item.label}\n            innerHTML={this.renderItemLabel(item.label)}\n          />\n          {!!item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n        </div>\n        {!!item.children?.length && (\n          <z-list\n            class=\"sub-list\"\n            role=\"group\"\n            aria-label={item.label || undefined}\n          >\n            {item.children.map((child, index) => this.renderItem(child, index))}\n          </z-list>\n        )}\n      </z-list-element>\n    );\n  }\n\n  /**\n   * Renders the item grouped by category and subcategory. If `resultsCount` is set, it limits the number of rendered items.\n   */\n  private renderItemGroups(): HTMLZListGroupElement[] | undefined {\n    if (!this.resultsItemsList?.length) {\n      return;\n    }\n\n    const groupedItems = Object.values(this.getGroupedItems()) as SearchbarGroup[];\n    const listGroups: HTMLZListGroupElement[] = [];\n    const hasResultsLimit = !!this.currResultsCount;\n    let renderedCount = 0;\n\n    for (const groupItem of groupedItems) {\n      const remaining = hasResultsLimit ? this.currResultsCount - renderedCount : groupItem.items.length;\n      if (remaining <= 0) {\n        break;\n      }\n\n      const visibleItems = groupItem.items.slice(0, remaining);\n      const listGroupsElements: HTMLZListElement[] = visibleItems.map((item: SearchbarItem, subindex: number) =>\n        this.renderItem(item, subindex)\n      );\n      renderedCount += listGroupsElements.length;\n\n      if (!listGroupsElements.length) {\n        continue;\n      }\n\n      const ariaLabel = [groupItem.category, groupItem.subcategory].filter(Boolean).join(\" \");\n\n      listGroups.push(\n        <z-list-group aria-label={ariaLabel || undefined}>\n          {groupItem.category && (\n            <z-list-element\n              class=\"category-heading body-3 mobile-body-4\"\n              slot=\"header-title\"\n              role=\"presentation\"\n              htmlTabindex={-1}\n            >\n              <div class=\"category\">{groupItem.category}</div>\n              {groupItem.subcategory && <div class=\"subcategory\">{groupItem.subcategory}</div>}\n            </z-list-element>\n          )}\n\n          {listGroupsElements}\n        </z-list-group>\n      );\n    }\n\n    return listGroups;\n  }\n\n  render(): HTMLZSearchbarElement {\n    return (\n      <Host\n        onFocus={() => (this.showResults = true)}\n        onClick={(e: MouseEvent) => this.handleOutsideClick(e)}\n        class={{\"has-submit\": !!this.showSearchButton, \"has-results\": !!this.autocomplete}}\n      >\n        <div class=\"input-container\">\n          <z-input\n            ref={(el) => (this.inputRef = el)}\n            htmlid={`input-${this.htmlid}`}\n            message={false}\n            placeholder={this.placeholder}\n            onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n            onKeyUp={(e: KeyboardEvent) => {\n              handleEnterKeydSubmit(e, () => this.handleSubmit());\n              this.handleArrowsNavigation(e);\n            }}\n            onFocus={() => (this.showResults = true)}\n            value={this.searchString || this.selectedItem?.label}\n            size={this.size}\n            label={this.label}\n            aria-label={this.htmlAriaLabel || this.placeholder || undefined}\n          />\n\n          {!!(\n            this.showResults &&\n            this.autocomplete &&\n            this.searchString &&\n            this.searchString.length >= this.autocompleteMinChars &&\n            this.resultsItemsList\n          ) && (\n            <div class=\"results z-scrollbar\">\n              {this.preventSubmit && !this.resultsItemsList?.length ? (\n                <div class=\"item-no-results body-3 mobile-body-4\">\n                  Non abbiamo trovato risultati per <b>{this.searchString}</b>\n                  <br />\n                  <br />\n                  Cosa puoi fare?\n                  <ul>\n                    <li>Verificare di aver scritto bene</li>\n                    <li>Provare a cercare un'altra parola</li>\n                    <li>Provare a cercare qualcosa di più generico</li>\n                  </ul>\n                </div>\n              ) : (\n                <z-list\n                  role=\"listbox\"\n                  id={`list-${this.htmlid}`}\n                  aria-label={this.htmlAriaLabel || this.label || undefined}\n                >\n                  {this.autocomplete && !this.preventSubmit && !!this.searchString && (\n                    <z-list-element\n                      role=\"presentation\"\n                      htmlTabindex={-1}\n                      id={`list-item-${this.htmlid}-search`}\n                      onKeyDown={(e: KeyboardEvent) => this.onSearchHelperKeyDown(e)}\n                      onClick={() => this.emitSearchSubmit()}\n                    >\n                      <div\n                        class=\"list-item item-search\"\n                        role=\"option\"\n                        tabindex={0}\n                      >\n                        <z-icon\n                          class=\"search-icon\"\n                          name=\"left-magnifying-glass\"\n                        />\n                        <div\n                          class=\"item-label body-3 mobile-body-4\"\n                          innerHTML={this.searchHelperLabel?.replace(\n                            \"{searchString}\",\n                            `<mark>${this.searchString}</mark>`\n                          )}\n                        />\n                      </div>\n                    </z-list-element>\n                  )}\n\n                  {this.renderItemGroups()}\n\n                  {!!(\n                    this.searchString &&\n                    this.resultsItemsList?.length &&\n                    this.currResultsCount &&\n                    this.currResultsCount < this.resultsItemsList?.length\n                  ) && (\n                    <z-list-element\n                      role=\"presentation\"\n                      htmlTabindex={-1}\n                      id={`list-item-${this.htmlid}-show-all`}\n                    >\n                      <div\n                        role=\"option\"\n                        class=\"item-show-all body-3 mobile-body-4\"\n                        tabindex={0}\n                        onClick={() => (this.currResultsCount = undefined)}\n                      >\n                        Vedi tutti i risultati\n                      </div>\n                    </z-list-element>\n                  )}\n                </z-list>\n              )}\n            </div>\n          )}\n        </div>\n\n        {this.showSearchButton && (\n          <z-button\n            icon={this.searchButtonIconOnly ? \"search\" : undefined}\n            aria-label={this.searchButtonIconOnly ? this.searchButtonLabel.trim() || \"CERCA\" : undefined}\n            disabled={!!this.preventSubmit}\n            variant={this.variant}\n            size={this.size}\n            onClick={() => this.handleSubmit()}\n          >\n            {this.searchButtonIconOnly ? \"\" : this.searchButtonLabel.trim() || \"CERCA\"}\n          </z-button>\n        )}\n      </Host>\n    );\n  }\n}\n",":host {\n  /**\n   * @prop --z-tag-text-color: text and icon color using tokens.\n   * @prop --z-tag-bg: background color of the z-tag.\n   */\n\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n\n  display: flex;\n  width: fit-content;\n  max-width: inherit;\n  height: fit-content;\n  max-height: inherit;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) / 2);\n  background-color: var(--z-tag-bg, var(--color-hover-primary));\n  border-radius: var(--border-radius);\n  color: var(--z-tag-text-color, var(--color-text-inverse));\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 14px;\n  text-transform: uppercase;\n}\n\n:host > z-icon {\n  margin-right: 0;\n  transition: margin-right 0.3s ease-out;\n}\n\n:host(.has-text):not(.expandable) > z-icon {\n  margin-right: var(--space-unit);\n}\n\n:host(.has-text).expandable:hover > z-icon {\n  margin-right: var(--space-unit);\n}\n\n:host(.expandable) > div {\n  overflow: hidden;\n  max-width: 0;\n  max-height: 0;\n}\n\n:host(.expandable:hover) > div {\n  max-width: 100%;\n  max-height: 100%;\n}\n","import {Component, ComponentInterface, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * Ztag component.\n * @slot - The text of the z-tag.\n */\n@Component({\n  tag: \"z-tag\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZTag implements ComponentInterface {\n  @Element() host: HTMLZTagElement;\n\n  /** [optional] Tag icon */\n  @Prop()\n  icon?: string;\n\n  /** [optional] Hide the text and show it on hover*/\n  @Prop()\n  expandable?: boolean;\n\n  render(): HTMLZTagElement {\n    return (\n      <Host\n        class={{\n          \"expandable\": this.expandable && !!this.icon,\n          \"has-text\": !!this.host.textContent.trim(),\n        }}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <div>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/www/build/p-8d2704ee.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,d as o}from"./p-BcDWN4F1.js";import{e as s,I as a,i as r,g as n,l}from"./p-DdetsoIY.js";import{r as c,e as h,b as d}from"./p-DPrEzmhI.js";import"./p-Q-tWjk7P.js";const p=()=>`.z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}`;const m=()=>`:host{display:block;min-width:290px;color:var(--color-form-default-text);fill:var(--color-form-default-icon);font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-form-surface04);margin:0;background-color:var(--color-form-background);border-radius:var(--border-radius-small);cursor:pointer}:host([size="small"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>span.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-form-active-primary);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>span.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div>div.open-combo-data{display:none}:host>div.open>div.open-combo-data{position:relative;z-index:12;display:block;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;padding-left:var(--space-unit);margin-left:calc(var(--space-unit) * -1);}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 calc(var(--space-unit) * 0.5);margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}:host .open-combo-data z-list-element[disabled]{pointer-events:none}:host .open-combo-data z-list-element .option-wrap{display:flex;flex-direction:row;align-items:center;cursor:pointer;gap:var(--space-unit)}:host .open-combo-data z-list-element[size="medium"] .option-wrap,:host .open-combo-data z-list-element[size="small"] .option-wrap{--z-icon-width:16px;--z-icon-height:16px;font-size:var(--font-size-2);gap:calc(var(--space-unit) / 2)}:host .open-combo-data z-list-element .option-wrap>z-icon{fill:var(--color-primary01)}:host .open-combo-data z-list-element[disabled] .option-wrap>z-icon{fill:var(--color-disabled01)}:host .open-combo-data z-list-element .option-wrap>z-icon.focused{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary);outline:none}:host .open-combo-data z-list-element .option-wrap>[role="option"]:focus,:host .open-combo-data z-list-element .option-wrap>[role="option"]:focus-visible{outline:none}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)     calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);margin-left:calc(var(--space-unit) * -1);text-align:left}:host([size="small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size="x-small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}`;const u=class{watchItems(){this.itemsList=typeof this.items==="string"?JSON.parse(this.items):this.items;this.selectedCounter=this.itemsList.filter((t=>t.checked)).length;this.updateRenderItemsList()}watchSearchValue(){this.filterItems(this.searchValue)}emitComboboxChange(){this.comboboxChange.emit({id:this.inputid,items:this.itemsList})}constructor(i){t(this,i);this.comboboxChange=e(this,"comboboxChange",7);this.inputid=`combo-${c()}`;this.disabled=false;this.hassearch=false;this.noresultslabel="Nessun risultato";this.isopen=false;this.isfixed=false;this.hascheckall=false;this.checkalltext="Seleziona tutti";this.uncheckalltext="Deseleziona tutti";this.maxcheckableitems=0;this.size=s.BIG;this.renderItemsList=[];this.focusedItemId="";this.itemsList=[];this.inputType=a.TEXT;this.toggleComboBox=this.toggleComboBox.bind(this);this.closeFilterItems=this.closeFilterItems.bind(this)}componentWillLoad(){this.watchItems()}componentWillRender(){this.selectedCounter=this.itemsList.filter((t=>t.checked)).length}getControlToListSize(){switch(this.size){case s.X_SMALL:return r.SMALL;case s.SMALL:return r.MEDIUM;default:return r.LARGE}}getOptionId(t){return`${this.inputid}-option-${t.id?h(`${t.id}`):h(`${t.name}`)}`}getCheckAllOptionId(){return`${this.inputid}-check-all`}allOptionsSelected(){return this.selectedCounter===this.itemsList.length}hasReachedMaxSelections(){return!!(this.maxcheckableitems&&this.selectedCounter>=this.maxcheckableitems)}handleHeaderKeyDown(t){if(t.code===n.ENTER&&!this.focusedItemId){this.toggleComboBox()}if(!this.isopen||this.hassearch){return}switch(t.code){case n.SPACE:case n.ENTER:if(this.focusedItemId){t.preventDefault();this.checkOption(this.focusedItemId)}break;case n.ESC:if(this.focusedItemId){this.focusedItemId=""}break;case n.ARROW_DOWN:case n.ARROW_UP:this.handleArrowsNavigation(t);break}}handleInputKeyDown(t){switch(t.code){case n.ENTER:case n.SPACE:if(this.focusedItemId){t.preventDefault();this.checkOption(this.focusedItemId);break}break;case n.ARROW_DOWN:case n.ARROW_UP:this.handleArrowsNavigation(t);break;case n.ESC:if(this.focusedItemId){this.focusedItemId="";break}this.closeFilterItems();break;case n.TAB:this.focusedItemId="";break}}checkOption(t){if(t===this.getCheckAllOptionId()){this.itemsList=this.itemsList.map((t=>Object.assign(Object.assign({},t),{checked:!this.allOptionsSelected()})));this.focusedItemId=this.getCheckAllOptionId()}else{this.itemsList=this.itemsList.map((e=>{if(t===this.getOptionId(e)){e.checked=!e.checked}return e}))}this.updateRenderItemsList();this.emitComboboxChange()}handleArrowsNavigation(t){if(![n.ARROW_DOWN,n.ARROW_UP].includes(t.code)||!this.isopen){return}t.preventDefault();t.stopPropagation();const e=this.focusedItemId?this.element.shadowRoot.querySelector(`#${this.focusedItemId}`):null;const i=Array.from(this.element.shadowRoot.querySelectorAll('[role="option"]'));if(!i.length){return}const o=e?i.indexOf(e):null;const s=0;const a=i.length-1;let r=null;if(t.code===n.ARROW_DOWN){r=o===null?i[s]:i[o+1]||i[a]}else if(t.code===n.ARROW_UP){r=o===null?i[a]:i[o-1]||i[s]}this.focusedItemId=r.id;r.scrollIntoView({block:"nearest",container:"nearest"})}updateRenderItemsList(){if(this.searchValue){this.filterItems(this.searchValue)}else{this.resetRenderItemsList()}}resetRenderItemsList(){const t=[];this.itemsList.forEach((e=>{t.push(Object.assign({},e))}));this.renderItemsList=t}filterItems(t){if(!t){return this.closeFilterItems()}this.resetRenderItemsList();this.renderItemsList=this.renderItemsList.filter((e=>{const i=e.name.toUpperCase().indexOf(t.toUpperCase());const o=i+t.length;const s=e.name.substring(0,i)+"<strong>"+e.name.substring(i,o)+"</strong>"+e.name.substring(o,e.name.length);e.name=s;return i>=0}))}closeFilterItems(){this.searchValue="";this.resetRenderItemsList()}toggleComboBox(){this.isopen=!this.isopen}getHeaderAriaLabel(){if(!this.label||this.selectedCounter<=0){return undefined}const t=this.selectedCounter===1?"elemento selezionato":"elementi selezionati";return`${this.label}: ${this.selectedCounter} ${t}`}getComboboxA11yAttributes(t){const e="combobox";const i=this.isopen?"true":"false";const o=this.isopen?this.focusedItemId:"";const s=`${this.inputid}_list`;if(t){return{role:e,"aria-label":this.htmlAriaLabel,"html-aria-expanded":i,"html-aria-activedescendant":o,"html-aria-controls":s}}return{role:e,"aria-expanded":i,"aria-activedescendant":o,"aria-controls":s}}renderHeader(){const t=!this.hassearch?this.getComboboxA11yAttributes(false):{};return i("div",Object.assign({class:"header",onClick:()=>this.toggleComboBox(),onKeyDown:t=>this.handleHeaderKeyDown(t),role:"button",tabindex:0,"aria-controls":"open-combo-data","aria-expanded":this.isopen?"true":"false","aria-label":this.getHeaderAriaLabel()},t),i("span",{class:"body-3"},this.label,i("span",null,this.selectedCounter>0&&` (${this.selectedCounter})`)),i("z-icon",{name:"caret-down",class:this.size}))}renderContent(){return i("div",{id:"open-combo-data",class:"open-combo-data"},this.hassearch&&this.renderSearchInput(),i("div",{role:"listbox","aria-label":this.label,"aria-multiselectable":"true",id:`${this.inputid}_list`,"aria-owns":`${this.hascheckall?`${this.getCheckAllOptionId()} `:``}${this.itemsList.map((t=>this.getOptionId(t))).join(" ")}`},this.renderItems()))}renderItems(){return i("div",{class:this.searchValue&&"search",tabIndex:-1,role:"presentation"},this.renderList(this.renderItemsList))}renderItem(t,e,o){const s=this.getOptionId(t);const a=!t.checked&&this.hasReachedMaxSelections();return i("z-list-element",{htmlTabindex:-1,dividerType:e!==o-1?l.ELEMENT:l.NONE,size:this.getControlToListSize(),role:"presentation",disabled:!!a},i("span",{class:"option-wrap",role:"presentation",onClick:()=>{this.focusedItemId="";this.checkOption(s)}},i("z-icon",{name:t.checked?"checkbox-checked":"checkbox",class:this.focusedItemId===s?"focused":""}),i("span",{id:s,role:a?"presentation":"option","aria-selected":t.checked?"true":"false","aria-label":a?undefined:d(t.name)},i("span",{"aria-hidden":"true",innerHTML:t.name}))))}renderList(t){if(!t){return}if(!t.length&&this.searchValue){return this.renderNoSearchResults()}if(this.hasgroupitems){return this.renderGroups(t)}return i("ul",{role:"presentation"},this.renderCheckAll(),t.map(((e,i)=>this.renderItem(e,i,t.length))))}renderGroups(t){const e=t.reduce(((e,i,o)=>{var s;const a=i.category||"Altra categoria";const r=this.renderItem(i,o,t.length);e[a]=(s=e[a])!==null&&s!==void 0?s:[];e[a].push(r);return e}),{});const o=Object.entries(e).map((([t,e],o)=>i("z-list-group",{size:this.getControlToListSize(),"divider-type":l.ELEMENT,"aria-labelledby":`${this.inputid}_list_group_${o}`},i("span",{class:"body-3-sb z-list-group-title",slot:"header-title",id:`${this.inputid}_list_group_${o}`,"aria-hidden":"true"},t),e.map((t=>t)))));return i("ul",{role:"presentation"},this.renderCheckAll(),o)}renderNoSearchResults(){return i("div",{class:"no-results"},i("span",null,this.noresultslabel))}renderSearchInput(){return i("z-input",Object.assign({htmlid:`${this.inputid}_search`,label:this.searchlabel,placeholder:this.searchplaceholder,htmltitle:this.searchtitle,type:this.inputType,value:this.searchValue,message:false,size:this.size,"html-aria-autocomplete":"list"},this.getComboboxA11yAttributes(true),{onKeyDown:t=>this.handleInputKeyDown(t),onInputChange:t=>{this.searchValue=t.detail.value;this.focusedItemId=""}}))}renderCheckAll(){if(!this.hascheckall||this.searchValue){return}const t=this.getCheckAllOptionId();const e=this.allOptionsSelected();const o=this.hasReachedMaxSelections()||this.maxcheckableitems&&this.maxcheckableitems<this.itemsList.length;return i("z-list-element",{class:"check-all-wrapper",role:"presentation",htmlTabindex:-1,dividerType:l.ELEMENT,dividerColor:"gray800",size:this.getControlToListSize(),disabled:!!o},i("span",{class:"option-wrap",role:"presentation",onClick:()=>this.checkOption(t)},i("z-icon",{name:e?"checkbox-checked":"checkbox",class:this.focusedItemId===t?"focused":""}),i("span",{id:t,role:o?"presentation":"option","aria-selected":e?"true":"false"},e?this.uncheckalltext:this.checkalltext)))}render(){return i("div",{key:"d8c312f0c68c902a7c063f5ef8bfc1429e9c0183","data-action":`combo-${this.inputid}`,class:{open:this.isopen,fixed:this.isfixed,disabled:this.disabled},id:this.inputid},this.renderHeader(),!this.disabled&&this.renderContent())}get element(){return o(this)}static get watchers(){return{items:[{watchItems:0}],searchValue:[{watchSearchValue:0}]}}};u.style=p()+m();export{u as z_combobox};
-//# sourceMappingURL=p-8d2704ee.entry.js.map

package/www/build/p-8d2704ee.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZCombobox","watchItems","this","itemsList","items","JSON","parse","selectedCounter","filter","item","checked","length","updateRenderItemsList","watchSearchValue","filterItems","searchValue","emitComboboxChange","comboboxChange","emit","id","inputid","constructor","hostRef","randomId","disabled","hassearch","noresultslabel","isopen","isfixed","hascheckall","checkalltext","uncheckalltext","maxcheckableitems","size","ControlSize","BIG","renderItemsList","focusedItemId","inputType","InputType","TEXT","toggleComboBox","bind","closeFilterItems","componentWillLoad","componentWillRender","getControlToListSize","X_SMALL","ListSize","SMALL","MEDIUM","LARGE","getOptionId","encodeString","name","getCheckAllOptionId","allOptionsSelected","hasReachedMaxSelections","handleHeaderKeyDown","e","code","KeyboardCode","ENTER","SPACE","preventDefault","checkOption","ESC","ARROW_DOWN","ARROW_UP","handleArrowsNavigation","handleInputKeyDown","TAB","optionId","map","Object","assign","i","includes","stopPropagation","currElem","element","shadowRoot","querySelector","options","Array","from","querySelectorAll","currElemIndex","indexOf","firstElemIndex","lastElemIndex","nextElem","scrollIntoView","block","container","resetRenderItemsList","forEach","push","value","start","toUpperCase","end","newName","substring","getHeaderAriaLabel","label","undefined","suffix","getComboboxA11yAttributes","isZInput","role","ariaExpanded","ariaActivedescendant","ariaControls","htmlAriaLabel","renderHeader","comboboxA11yAttributes","h","class","onClick","onKeyDown","tabindex","renderContent","renderSearchInput","join","renderItems","tabIndex","renderList","renderItem","index","isDisabled","htmlTabindex","dividerType","ListDividerType","ELEMENT","NONE","getPlainText","innerHTML","renderNoSearchResults","hasgroupitems","renderGroups","renderCheckAll","newData","reduce","group","category","zListItem","_a","listGroups","entries","key","slot","htmlid","searchlabel","placeholder","searchplaceholder","htmltitle","searchtitle","type","message","onInputChange","detail","allChecked","dividerColor","render","open","fixed"],"sources":["src/components/css-components/z-label/styles.css?tag=z-combobox&encapsulation=shadow","src/components/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/z-combobox/index.tsx"],"sourcesContent":[".z-label {\n  display: block;\n  padding-bottom: var(--space-unit);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  text-align: left;\n  text-transform: uppercase;\n}\n",":host {\n  display: block;\n  min-width: 290px;\n  color: var(--color-form-default-text);\n  fill: var(--color-form-default-icon);\n  font-family: var(--font-family-sans);\n}\n\n:host > div.fixed {\n  position: relative;\n}\n\n:host > div > .header {\n  position: relative;\n  z-index: 10;\n  display: flex;\n  min-height: 42px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  border: var(--border-size-small) solid var(--color-form-surface04);\n  margin: 0;\n  background-color: var(--color-form-background);\n  border-radius: var(--border-radius-small);\n  cursor: pointer;\n}\n\n:host([size=\"small\"]) > div > .header {\n  min-height: 34px;\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header {\n  min-height: 30px;\n  font-size: var(--font-size-2);\n}\n\n:host > div > .header:hover {\n  outline: var(--border-size-medium) solid var(--color-form-surface04);\n  outline-offset: -2px;\n}\n\n:host > div > div.header:focus:focus-visible {\n  z-index: 16;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > div > .header > span.body-3 > span {\n  font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n  fill: var(--color-form-default-icon);\n  transform: rotate(360deg);\n  transition: all 200ms linear;\n}\n\n:host > div > .header > z-icon.small,\n:host > div > .header > z-icon.x-small {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n:host > div.open > .header {\n  border: var(--border-size-small) solid var(--color-form-active-primary);\n  border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;\n}\n\n:host > div.disabled {\n  pointer-events: none;\n}\n\n:host > div.disabled .header {\n  border-color: var(--color-form-disabled03);\n  fill: var(--color-form-disabled01-icon);\n}\n\n:host > div.disabled .header > span.body-3 {\n  color: var(--color-form-disabled03);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n  fill: var(--color-form-disabled01-icon);\n}\n\n:host > div.open > .header > z-icon {\n  fill: var(--color-form-default-icon);\n  transform: rotate(180deg);\n  transition: all 200ms linear;\n}\n\n:host > div > div.open-combo-data {\n  display: none;\n}\n\n:host > div.open > div.open-combo-data {\n  position: relative;\n  z-index: 12;\n  display: block;\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n  border: var(--border-size-small) solid var(--color-form-surface03);\n  border-top: 0;\n  background-color: var(--color-form-background);\n  border-radius: 0;\n  box-shadow: var(--shadow-2);\n}\n\n:host .open .open-combo-data z-input .z-label {\n  color: var(--color-form-default-text);\n}\n\n:host > div.open > div.open-combo-data > div > div {\n  overflow: auto;\n  max-height: 235px;\n  padding: 0;\n  padding-left: var(--space-unit); /* padding left and negative margin in order to enable focus */\n  margin-left: calc(var(--space-unit) * -1); /* padding left and negative margin in order to enable focus */\n}\n\n:host > div.open > div.open-combo-data > z-input {\n  width: 100%;\n  margin-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > div.open > div.open-combo-data > div > div > ul {\n  max-height: 235px;\n  padding: 0 calc(var(--space-unit) * 0.5); /* needed for checkbox focus shadow */\n  margin: 0;\n}\n\n:host .open-combo-data z-list-element {\n  --background-color-list-element: var(--color-form-background);\n  --background-hover-color-list-element: var(--color-form-surface03);\n  --background-active-color-list-element: var(--color-form-surface03);\n}\n\n:host .open-combo-data z-list-element[disabled] {\n  pointer-events: none;\n}\n\n:host .open-combo-data z-list-element .option-wrap {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n  gap: var(--space-unit);\n}\n\n:host .open-combo-data z-list-element[size=\"medium\"] .option-wrap,\n:host .open-combo-data z-list-element[size=\"small\"] .option-wrap {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n\n  font-size: var(--font-size-2);\n  gap: calc(var(--space-unit) / 2);\n}\n\n:host .open-combo-data z-list-element .option-wrap > z-icon {\n  fill: var(--color-primary01);\n}\n\n:host .open-combo-data z-list-element[disabled] .option-wrap > z-icon {\n  fill: var(--color-disabled01);\n}\n\n:host .open-combo-data z-list-element .option-wrap > z-icon.focused {\n  border-radius: var(--border-radius-small);\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host .open-combo-data z-list-element .option-wrap > [role=\"option\"]:focus,\n:host .open-combo-data z-list-element .option-wrap > [role=\"option\"]:focus-visible {\n  outline: none;\n}\n\n::-webkit-scrollbar {\n  width: 6px;\n  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary01);\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n/* Firefox scrollbar */\n@supports not selector(::-webkit-scrollbar-track) {\n  :host {\n    scrollbar-color: var(--color-primary01) transparent;\n  }\n}\n\n:host > div.open > z-input {\n  position: relative;\n  z-index: 1;\n  width: 238px;\n  margin: 0 calc(var(--space-unit) * 2);\n  color: var(--color-form-active-primary);\n}\n\n:host > div.open > div.open-combo-data > div > div.search {\n  overflow: hidden;\n  max-height: none;\n  margin-top: 0;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > ul {\n  overflow: auto;\n  max-height: 180px;\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host .open .open-combo-data .search .no-results {\n  display: flex;\n  align-items: center;\n  column-gap: var(--space-unit);\n}\n\n:host > .open > .open-combo-data .search .close-search {\n  display: flex;\n  justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div > div.search .close-search > a {\n  display: inline-block;\n  height: 44px;\n  color: var(--color-form-active-primary);\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  line-height: 44px;\n  text-align: center;\n  text-transform: uppercase;\n}\n\n:host > div.open > div.open-combo-data > div > div.search .close-search > a:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > div.open > div.open-combo-data > div > div.check-all-wrapper {\n  /* padding left and negative margin in order to enable focus */\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)\n    calc(var(--space-unit) * 1.5);\n  border-bottom: var(--border-size-small) solid var(--gray800);\n  margin-bottom: var(--space-unit);\n  margin-left: calc(var(--space-unit) * -1);\n  text-align: left;\n}\n\n:host([size=\"small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"x-small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n  padding: var(--space-unit) calc(var(--space-unit) * 0.5);\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {encodeString, getPlainText, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n  tag: \"z-combobox\",\n  styleUrls: [\"../css-components/z-label/styles.css\", \"styles.css\"],\n  shadow: true,\n})\nexport class ZCombobox implements ComponentInterface {\n  @Element() element: HTMLZComboboxElement;\n\n  /** input unique id */\n  @Prop()\n  inputid = `combo-${randomId()}`;\n\n  /** list items array */\n  @Prop()\n  items: ComboItem[] | string;\n\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** the combobox is disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** show search input flag (optional) */\n  @Prop()\n  hassearch?: boolean = false;\n\n  /** search input label text (optional) */\n  @Prop()\n  searchlabel?: string;\n\n  /** search input placeholder text (optional) */\n  @Prop()\n  searchplaceholder?: string;\n\n  /** search input title text (optional) */\n  @Prop()\n  searchtitle?: string;\n\n  /** no result text message */\n  @Prop()\n  noresultslabel?: string = \"Nessun risultato\";\n\n  /** toggle combo list opening flag */\n  @Prop({mutable: true})\n  isopen = false;\n\n  /** fixed style flag */\n  @Prop()\n  isfixed = false;\n\n  /** show \"check all\" checkbox (optional) */\n  @Prop()\n  hascheckall?: boolean = false;\n\n  /** check all label (optional) */\n  @Prop()\n  checkalltext?: string = \"Seleziona tutti\";\n\n  /** uncheck all label (optional) */\n  @Prop()\n  uncheckalltext?: string = \"Deseleziona tutti\";\n\n  /** max number of checkable items (0 = unlimited) */\n  @Prop()\n  maxcheckableitems = 0;\n\n  /** group items by category */\n  @Prop()\n  hasgroupitems?: boolean;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  /** the combobox aria-label */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  @State()\n  searchValue: string;\n\n  @State()\n  selectedCounter: number;\n\n  @State()\n  renderItemsList: ComboItem[] = []; // used for render only\n\n  @State()\n  focusedItemId = \"\";\n\n  private itemsList: ComboItem[] = [];\n\n  private inputType: InputType = InputType.TEXT;\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n    this.updateRenderItemsList();\n  }\n\n  @Watch(\"searchValue\")\n  watchSearchValue(): void {\n    this.filterItems(this.searchValue);\n  }\n\n  /** Emitted when value is checked/unchecked. Returns id, items. */\n  @Event()\n  comboboxChange: EventEmitter;\n\n  private emitComboboxChange(): void {\n    this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n  }\n\n  constructor() {\n    this.toggleComboBox = this.toggleComboBox.bind(this);\n    this.closeFilterItems = this.closeFilterItems.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  componentWillRender(): void {\n    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n  }\n\n  private getControlToListSize(): ListSize {\n    switch (this.size) {\n      case ControlSize.X_SMALL:\n        return ListSize.SMALL;\n      case ControlSize.SMALL:\n        return ListSize.MEDIUM;\n      default:\n        return ListSize.LARGE;\n    }\n  }\n\n  private getOptionId(item: ComboItem): string {\n    return `${this.inputid}-option-${item.id ? encodeString(`${item.id}`) : encodeString(`${item.name}`)}`;\n  }\n\n  private getCheckAllOptionId(): string {\n    return `${this.inputid}-check-all`;\n  }\n\n  private allOptionsSelected(): boolean {\n    return this.selectedCounter === this.itemsList.length;\n  }\n\n  private hasReachedMaxSelections(): boolean {\n    return !!(this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems);\n  }\n\n  private handleHeaderKeyDown(e: KeyboardEvent): void {\n    if (e.code === KeyboardCode.ENTER && !this.focusedItemId) {\n      this.toggleComboBox();\n    }\n\n    if (!this.isopen || this.hassearch) {\n      return;\n    }\n\n    switch (e.code as KeyboardCode) {\n      case KeyboardCode.SPACE:\n      case KeyboardCode.ENTER:\n        if (this.focusedItemId) {\n          e.preventDefault();\n          this.checkOption(this.focusedItemId);\n        }\n        break;\n      case KeyboardCode.ESC:\n        if (this.focusedItemId) {\n          this.focusedItemId = \"\";\n        }\n        break;\n      case KeyboardCode.ARROW_DOWN:\n      case KeyboardCode.ARROW_UP:\n        this.handleArrowsNavigation(e);\n        break;\n    }\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          e.preventDefault();\n          this.checkOption(this.focusedItemId);\n          break;\n        }\n        break;\n      case KeyboardCode.ARROW_DOWN:\n      case KeyboardCode.ARROW_UP:\n        this.handleArrowsNavigation(e);\n        break;\n      case KeyboardCode.ESC:\n        if (this.focusedItemId) {\n          this.focusedItemId = \"\";\n          break;\n        }\n        this.closeFilterItems();\n        break;\n      case KeyboardCode.TAB:\n        this.focusedItemId = \"\";\n        break;\n    }\n  }\n\n  private checkOption(optionId: string): void {\n    if (optionId === this.getCheckAllOptionId()) {\n      this.itemsList = this.itemsList.map((item: ComboItem) => ({\n        ...item,\n        checked: !this.allOptionsSelected(),\n      }));\n\n      this.focusedItemId = this.getCheckAllOptionId();\n    } else {\n      this.itemsList = this.itemsList.map((i: ComboItem) => {\n        if (optionId === this.getOptionId(i)) {\n          i.checked = !i.checked;\n        }\n\n        return i;\n      });\n    }\n\n    this.updateRenderItemsList();\n    this.emitComboboxChange();\n  }\n\n  private handleArrowsNavigation(e: KeyboardEvent): void {\n    if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.code as KeyboardCode) || !this.isopen) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    const currElem = this.focusedItemId ? this.element.shadowRoot.querySelector(`#${this.focusedItemId}`) : null;\n    const options = Array.from(this.element.shadowRoot.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    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.focusedItemId = nextElem.id;\n    nextElem.scrollIntoView({block: \"nearest\", container: \"nearest\"});\n  }\n\n  private updateRenderItemsList(): void {\n    if (this.searchValue) {\n      this.filterItems(this.searchValue);\n    } else {\n      this.resetRenderItemsList();\n    }\n  }\n\n  private resetRenderItemsList(): void {\n    const renderItemsList = [];\n    this.itemsList.forEach((item: ComboItem) => {\n      renderItemsList.push({...item});\n    });\n    this.renderItemsList = renderItemsList;\n  }\n\n  private filterItems(value: string): void {\n    if (!value) {\n      return this.closeFilterItems();\n    }\n\n    this.resetRenderItemsList();\n    this.renderItemsList = this.renderItemsList.filter((item) => {\n      const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n      const end = start + value.length;\n      const newName =\n        item.name.substring(0, start) +\n        \"<strong>\" +\n        item.name.substring(start, end) +\n        \"</strong>\" +\n        item.name.substring(end, item.name.length);\n\n      item.name = newName;\n\n      return start >= 0;\n    });\n  }\n\n  private closeFilterItems(): void {\n    this.searchValue = \"\";\n    this.resetRenderItemsList();\n  }\n\n  private toggleComboBox(): void {\n    this.isopen = !this.isopen;\n  }\n\n  private getHeaderAriaLabel(): string | undefined {\n    if (!this.label || this.selectedCounter <= 0) {\n      return undefined;\n    }\n\n    const suffix = this.selectedCounter === 1 ? \"elemento selezionato\" : \"elementi selezionati\";\n\n    return `${this.label}: ${this.selectedCounter} ${suffix}`;\n  }\n\n  private getComboboxA11yAttributes(isZInput: boolean): Record<string, string> {\n    const role = \"combobox\";\n    const ariaExpanded = this.isopen ? \"true\" : \"false\";\n    const ariaActivedescendant = this.isopen ? this.focusedItemId : \"\";\n    const ariaControls = `${this.inputid}_list`;\n\n    if (isZInput) {\n      return {\n        \"role\": role,\n        \"aria-label\": this.htmlAriaLabel,\n        \"html-aria-expanded\": ariaExpanded,\n        \"html-aria-activedescendant\": ariaActivedescendant,\n        \"html-aria-controls\": ariaControls,\n      };\n    }\n\n    return {\n      \"role\": role,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-activedescendant\": ariaActivedescendant,\n      \"aria-controls\": ariaControls,\n    };\n  }\n\n  private renderHeader(): HTMLDivElement {\n    const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};\n\n    return (\n      <div\n        class=\"header\"\n        onClick={() => this.toggleComboBox()}\n        onKeyDown={(e: KeyboardEvent) => this.handleHeaderKeyDown(e)}\n        role=\"button\"\n        tabindex={0}\n        aria-controls=\"open-combo-data\"\n        aria-expanded={this.isopen ? \"true\" : \"false\"}\n        aria-label={this.getHeaderAriaLabel()}\n        {...comboboxA11yAttributes}\n      >\n        <span class=\"body-3\">\n          {this.label}\n          <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n        </span>\n        <z-icon\n          name=\"caret-down\"\n          class={this.size}\n        />\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div\n        id=\"open-combo-data\"\n        class=\"open-combo-data\"\n      >\n        {this.hassearch && this.renderSearchInput()}\n        <div\n          role=\"listbox\"\n          aria-label={this.label}\n          aria-multiselectable=\"true\"\n          id={`${this.inputid}_list`}\n          aria-owns={`${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item)).join(\" \")}`}\n        >\n          {this.renderItems()}\n        </div>\n      </div>\n    );\n  }\n\n  private renderItems(): HTMLDivElement {\n    return (\n      <div\n        class={this.searchValue && \"search\"}\n        tabIndex={-1}\n        role=\"presentation\"\n      >\n        {this.renderList(this.renderItemsList)}\n      </div>\n    );\n  }\n\n  private renderItem(item: ComboItem, index: number, length: number): HTMLZListElement {\n    const optionId = this.getOptionId(item);\n    const isDisabled = !item.checked && this.hasReachedMaxSelections();\n\n    return (\n      <z-list-element\n        htmlTabindex={-1}\n        dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n        size={this.getControlToListSize()}\n        role=\"presentation\"\n        disabled={!!isDisabled}\n      >\n        <span\n          class=\"option-wrap\"\n          role=\"presentation\"\n          onClick={() => {\n            this.focusedItemId = \"\";\n            this.checkOption(optionId);\n          }}\n        >\n          <z-icon\n            name={item.checked ? \"checkbox-checked\" : \"checkbox\"}\n            class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n          />\n          <span\n            id={optionId}\n            role={isDisabled ? \"presentation\" : \"option\"}\n            aria-selected={item.checked ? \"true\" : \"false\"}\n            aria-label={isDisabled ? undefined : getPlainText(item.name)}\n          >\n            <span\n              aria-hidden=\"true\"\n              innerHTML={item.name}\n            />\n          </span>\n        </span>\n      </z-list-element>\n    );\n  }\n\n  private renderList(items: ComboItem[]): HTMLUListElement {\n    if (!items) {\n      return;\n    }\n    if (!items.length && this.searchValue) {\n      return this.renderNoSearchResults();\n    }\n\n    if (this.hasgroupitems) {\n      return this.renderGroups(items);\n    }\n\n    return (\n      <ul role=\"presentation\">\n        {this.renderCheckAll()}\n        {items.map((item, i) => {\n          return this.renderItem(item, i, items.length);\n        })}\n      </ul>\n    );\n  }\n\n  private renderGroups(items: ComboItem[]): HTMLUListElement {\n    const newData = items.reduce((group, item, index) => {\n      const category = item.category || \"Altra categoria\";\n      const zListItem = this.renderItem(item, index, items.length);\n\n      group[category] = group[category] ?? [];\n      group[category].push(zListItem);\n\n      return group;\n    }, {});\n\n    const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(\n      ([key, value], index) => {\n        return (\n          <z-list-group\n            size={this.getControlToListSize()}\n            divider-type={ListDividerType.ELEMENT}\n            aria-labelledby={`${this.inputid}_list_group_${index}`}\n          >\n            <span\n              class=\"body-3-sb z-list-group-title\"\n              slot=\"header-title\"\n              id={`${this.inputid}_list_group_${index}`}\n              aria-hidden=\"true\"\n            >\n              {key}\n            </span>\n            {value.map((item) => item)}\n          </z-list-group>\n        );\n      }\n    );\n\n    return (\n      <ul role=\"presentation\">\n        {this.renderCheckAll()}\n        {listGroups}\n      </ul>\n    );\n  }\n\n  private renderNoSearchResults(): HTMLUListElement {\n    return (\n      <div class=\"no-results\">\n        <span>{this.noresultslabel}</span>\n      </div>\n    );\n  }\n\n  private renderSearchInput(): ZInput {\n    return (\n      <z-input\n        htmlid={`${this.inputid}_search`}\n        label={this.searchlabel}\n        placeholder={this.searchplaceholder}\n        htmltitle={this.searchtitle}\n        type={this.inputType}\n        value={this.searchValue}\n        message={false}\n        size={this.size}\n        html-aria-autocomplete=\"list\"\n        {...this.getComboboxA11yAttributes(true)}\n        onKeyDown={(e: KeyboardEvent) => this.handleInputKeyDown(e)}\n        onInputChange={(e: CustomEvent) => {\n          this.searchValue = e.detail.value;\n          this.focusedItemId = \"\";\n        }}\n      />\n    );\n  }\n\n  private renderCheckAll(): HTMLDivElement {\n    if (!this.hascheckall || this.searchValue) {\n      return;\n    }\n\n    const optionId = this.getCheckAllOptionId();\n    const allChecked = this.allOptionsSelected();\n    const isDisabled =\n      this.hasReachedMaxSelections() || (this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length);\n\n    return (\n      <z-list-element\n        class=\"check-all-wrapper\"\n        role=\"presentation\"\n        htmlTabindex={-1}\n        dividerType={ListDividerType.ELEMENT}\n        dividerColor=\"gray800\"\n        size={this.getControlToListSize()}\n        disabled={!!isDisabled}\n      >\n        <span\n          class=\"option-wrap\"\n          role=\"presentation\"\n          onClick={() => this.checkOption(optionId)}\n        >\n          <z-icon\n            name={allChecked ? \"checkbox-checked\" : \"checkbox\"}\n            class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n          />\n          <span\n            id={optionId}\n            role={isDisabled ? \"presentation\" : \"option\"}\n            aria-selected={allChecked ? \"true\" : \"false\"}\n          >\n            {allChecked ? this.uncheckalltext : this.checkalltext}\n          </span>\n        </span>\n      </z-list-element>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        data-action={`combo-${this.inputid}`}\n        class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n        id={this.inputid}\n      >\n        {this.renderHeader()}\n        {!this.disabled && this.renderContent()}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}