@zanichelli/albe-web-components 20.0.5 → 20.1.0

package/www/build/p-50d68051.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","htmlid","value","searchString","placeholder","searchPlaceholder","htmlAriaLabel","searchLabel","showSearchButton","searchButtonIconOnly","searchButtonLabel","undefined","preventSubmit","onSearchTyping","e","detail","renderSearchLabel","htmlFor","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","renderTopSubtitle","render","hasTopSubtitle","Host","role","ZButton","type","ButtonType","BUTTON","PRIMARY","iconPosition","IconPosition","LEFT","BIG","hasText","attributes","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","indeterminate","message","labelPosition","LabelPosition","hasclearicon","isTyping","passwordHidden","typingtimeout","inputCheckListener","data","RADIO","watchIndeterminate","syncCheckboxIndeterminate","CHECKBOX","inputRef","isChecked","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","renderIcons","renderMessage","label","renderResetIcon","renderShowHidePassword","hidden","renderTextarea","ariaAttributes","handleCheck","getCheckboxAriaChecked","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: var(--space-unit) var(--grid-margin);\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-end;\n}\n\n.heading-container > .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  align-self: self-end;\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::slotted([slot=\"top-subtitle\"]) {\n  display: -webkit-box;\n  overflow: hidden;\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\n.search-slot {\n  margin-left: auto;\n}\n\n.search-slot .z-label {\n  height: 10px;\n  padding-bottom: 0;\n  margin-bottom: -3px;\n  font-size: 10px;\n  line-height: 10px;\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.heading-block {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\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  :host([enable-offcanvas]:not([menu-length=\"0\"])) .top-subtitle {\n    padding-left: calc(var(--space-unit) * 4 + var(--space-unit));\n  }\n\n  .heading-block > .top-subtitle {\n    margin-top: calc(var(--space-unit) * 0.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\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  z-searchbar {\n    height: calc(var(--title-font-size) * var(--title-line-height));\n    margin-left: auto;\n  }\n\n  ::slotted([slot=\"top-subtitle\"]) {\n    margin-top: calc(var(--space-unit) * 0.5);\n    margin-bottom: calc(var(--space-unit) * -0.5);\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  .search-slot {\n    height: 53px;\n  }\n\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        htmlid=\"app-header-searchbar\"\n        value={this.searchString}\n        placeholder={this.searchPlaceholder}\n        htmlAriaLabel={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 renderSearchLabel(): HTMLSpanElement | undefined {\n    if (!this.isMobile && !this.isTablet && !this.enableOffcanvas) {\n      return (\n        <label\n          class=\"z-label\"\n          htmlFor=\"input-app-header-searchbar\"\n          aria-hidden={this.searchLabel ? \"false\" : \"true\"}\n        >\n          {this.searchLabel}\n        </label>\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  private renderTopSubtitle(): HTMLElement | undefined {\n    if (!this.hasSlot(\"top-subtitle\") || (this.enableSearch && this.isMobile)) {\n      return;\n    }\n\n    return (\n      <div class={{\"top-subtitle\": true, \"has-product-logo\": this.hasSlot(\"product-logo\")}}>\n        <slot name=\"top-subtitle\" />\n      </div>\n    );\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            <div class=\"heading-block\">\n              <div class=\"heading-title\">\n                <slot name=\"menu-button\">{this.renderMenuButton()}</slot>\n                {!this._stuck && this.renderProductLogos()}\n                <div class=\"title-container\">\n                  {!this.isMobile && this.renderTopSubtitle()}\n                  <slot name=\"title\" />\n                </div>\n                <div class=\"search-slot\">\n                  {this.enableSearch && this.renderSearchLabel()}\n                  {this.enableSearch && !this.isMobile && this.renderSeachbar()}\n                </div>\n              </div>\n              {this.isMobile && this.renderTopSubtitle()}\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/* stylelint-disable-next-line selector-not-notation */\n:host(:not(.active-select):not(.cursor-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  caret-color: transparent;\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-icon);\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-disabled03-icon);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\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  /** indeterminate: available for checkbox */\n  @Prop({mutable: true})\n  indeterminate?: 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  @Watch(\"indeterminate\")\n  watchIndeterminate(): void {\n    this.syncCheckboxIndeterminate();\n  }\n\n  private syncCheckboxIndeterminate(): void {\n    if (this.type !== InputType.CHECKBOX || !this.inputRef) {\n      return;\n    }\n\n    this.inputRef.indeterminate = !!this.indeterminate;\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    if (this.type === InputType.CHECKBOX && this.indeterminate) {\n      this.indeterminate = false;\n    }\n\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.emitInputCheck(this.checked);\n  }\n\n  private getCheckboxAriaChecked(): \"true\" | \"false\" | \"mixed\" {\n    if (this.indeterminate) {\n      return \"mixed\";\n    }\n\n    return this.checked ? \"true\" : \"false\";\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.indeterminate ? false : 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          aria-checked={this.getCheckboxAriaChecked()}\n          {...ariaRequired}\n          {...this.getAriaAttributes()}\n          {...this.getFocusBlurAttributes()}\n          ref={(el) => {\n            this.inputRef = el;\n            this.syncCheckboxIndeterminate();\n          }}\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.indeterminate ? \"indeterminated-checkbox\" : 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={(e: MouseEvent) => {\n          e.stopPropagation();\n          this.emitSearchItemClick(item);\n        }}\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            htmlAriaLabel={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":"iZAAA,MAAMA,EAAY,IAAM,6jQCkBxB,MAAMC,SAAuCC,uBAAyB,Y,MAczDC,EAAU,MAgHrB,OAAAC,GACE,MAAMC,EAAeC,KAAKD,aAC1B,IAAKA,EAAc,CACjB,M,CAGFC,KAAKC,SAASC,KAAKF,KAAKG,O,CAI1B,mBAAAC,GACE,GAAIJ,KAAKK,aAAaC,SAAW,EAAG,CAClC,M,CAGFN,KAAKK,aAAaE,SAASC,IACzBA,EAAQC,KAAO,MACfD,EAAQE,gBAAkBV,KAAKW,UAAU,G,CAK7C,aAAAC,G,QACE,IAAKZ,KAAKa,UAAW,CACnB,M,CAGF,GAAIb,KAAKc,MAAO,EACdC,EAAAf,KAAKgB,yBAAqB,MAAAD,SAAA,SAAAA,EAAEE,QAAQjB,KAAKa,U,KACpC,CACLb,KAAKG,OAAS,OACde,EAAAlB,KAAKgB,yBAAqB,MAAAE,SAAA,SAAAA,EAAEC,UAAUnB,KAAKa,U,EAI/C,SAAYO,G,MACV,OAAOL,EAAAf,KAAKqB,YAAYC,cAAc,qBAAiB,MAAAP,SAAA,SAAAA,EAAEQ,YAAYC,M,CAGvE,gBAAYzB,GACV,MAAM0B,EAASzB,KAAKqB,YAAYK,aAChC,GAAID,IAAWE,SAASC,MAAQH,IAAWE,SAASE,gBAAiB,CACnE,OAAOC,M,CAGT,OAAOL,C,CAGT,eAAYM,GACV,OAAQ/B,KAAKgC,iBAAmBhC,KAAKK,aAAaC,OAAS,IAAMN,KAAKiC,WAAajC,KAAKW,U,CAG1F,iBAAYuB,GACV,OAAOlC,KAAKK,aAAa8B,MAAMC,GAAOA,EAAGC,eAAiB,G,CAGpD,UAAAC,GACNtC,KAAKW,WAAa,KAClBX,KAAKK,aAAaE,SAAQ,CAACC,EAAS+B,IAAW/B,EAAQ6B,aAAeE,IAAU,EAAI,GAAI,IACxFC,YAAW,IAAMxC,KAAKK,aAAa,GAAGoC,YAAY,I,CAG5C,WAAAC,GACN1C,KAAKW,WAAa,MAClB6B,YAAW,IAAMxC,KAAK2C,aAAaC,SAAS,I,CAGtC,mBAAAC,GACN7C,KAAKK,aAAeyC,MAAMC,KAAK/C,KAAKqB,YAAY2B,iBAAiB,kBACjEhD,KAAKK,aAAaE,SAAQ,CAACC,EAAS+B,IAAW/B,EAAQ6B,aAAeE,IAAU,EAAI,GAAI,IACxFvC,KAAKiD,WAAajD,KAAKK,aAAaC,OACpC,IAAKN,KAAKgC,gBAAiB,CACzBhC,KAAKkD,UACHlD,KAAKK,aAAa8C,QAAO,CAACC,EAAKhB,IAAOgB,EAAMhB,EAAGiB,wBAAwBC,OAAO,IAC7EtD,KAAKiD,WAAa,GAAK,E,CAE5BjD,KAAKI,qB,CAIC,uBAAAmD,GACN,GAAIvD,KAAKgC,gBAAiB,CACxB,M,CAGFhC,KAAKwD,mBAAqB,IAAIC,gBAAgBC,IAC5C,GAAI1D,KAAKiC,SAAU,CACjBjC,KAAKgC,gBAAkB,KAEvB,M,CAGF,MAAM2B,EAAiBD,EAAQ,GAAGE,eAAe,GAAGC,WACpD,GAAI7D,KAAKkD,YAAc,EAAG,CACxB,M,CAGF,GAAIlD,KAAKkD,UAAYS,IAAmB3D,KAAKgC,gBAAiB,CAC5DhC,KAAKgC,gBAAkB,I,MAClB,GAAIhC,KAAKkD,WAAaS,GAAkB3D,KAAKgC,gBAAiB,CACnEhC,KAAKgC,gBAAkB,K,KAG3BhC,KAAKwD,mBAAmBvC,QAAQjB,KAAKa,U,CAG/B,OAAAiD,CAAQC,GACd,OAAO/D,KAAKqB,YAAYC,cAAc,UAAUyC,SAAkB,I,CAG5D,SAAAC,CAAUC,EAA2BC,GAC3CD,EAAQ5B,cAAe,EACvB6B,EAASzB,U,CAGH,kBAAA0B,CAAmBC,G,QACzB,GAAIA,EAAGC,MAAQC,EAAaC,MAAQvE,KAAKW,WAAY,CACnD,M,CAGF,MAAM6D,EAAeJ,EAAGK,OAAuBC,QAAQ,UACvD,GAAIF,EAAa,CACfJ,EAAGO,iBACHP,EAAGQ,kBAEHJ,EAAYnC,aAAe,EAC3BrC,KAAK6E,kBAAkBjC,O,MAClB,GAAIwB,EAAGK,SAAWzE,KAAK6E,kBAAmB,CAC/CT,EAAGO,iBACHP,EAAGQ,kBACH,GAAIR,EAAGU,SAAU,GAEd/D,EAAAf,KAAKK,aAAa0E,QAAQC,GAASA,EAAKvE,OAAMwE,SAAK,MAAAlE,SAAA,EAAAA,EAAIf,KAAKK,aAAaL,KAAKiD,WAAa,IAAIR,U,KAC3F,GAEJvB,EAAAlB,KAAKK,aAAa8B,MAAM6C,GAASA,EAAKvE,UAAK,MAAAS,SAAA,EAAAA,EAAIlB,KAAKK,aAAa,IAAIoC,U,GAQ5E,WAAAyC,CAAYd,GACV,MAAMe,EAAanF,KAAKK,aAAa8B,MAAM6C,GAASI,EAAgBJ,EAAMZ,EAAGK,UAC7E,GAAIU,EAAY,CACdnF,KAAKK,aAAaE,SAASyE,IACzB,GAAIA,IAASG,EAAY,CACvB,M,CAGFH,EAAK3C,cAAe,EACpB,IAAKrC,KAAKW,WAAY,CACpBqE,EAAKvE,KAAO,K,UAGX,IAAKT,KAAKW,WAAY,CAC3BX,KAAKK,aAAaE,SAASyE,IACzBA,EAAKvE,KAAO,KAAK,G,EAMvB,aAAA4E,CAAcjB,G,QACZ,GAAIA,EAAGC,MAAQC,EAAagB,KAAOtF,KAAKW,WAAY,CAClDX,KAAK0C,cAEL,M,CAGF,IAAK1C,KAAKK,aAAakF,MAAMC,GAASA,EAAKC,SAASrB,EAAGK,UAAyB,CAC9E,M,CAGF,MAAMR,EAAUjE,KAAKkC,cACrB,MAAMwD,EAAe1F,KAAKK,aAAasF,QAAQ1B,GAC/C,IAAIC,EACJ,GACGE,EAAGC,MAAQC,EAAasB,cAAgB3B,EAAQvD,iBAChD0D,EAAGC,MAAQC,EAAauB,YAAc5B,EAAQvD,gBAC/C,CACAwD,GAAWnD,EAAAf,KAAKK,aAAaqF,EAAe,MAAE,MAAA3E,SAAA,EAAAA,EAAIf,KAAKK,aAAa,E,MAC/D,GACJ+D,EAAGC,MAAQC,EAAawB,aAAe7B,EAAQvD,iBAC/C0D,EAAGC,MAAQC,EAAayB,UAAY9B,EAAQvD,gBAC7C,CACAwD,GAAWhD,EAAAlB,KAAKK,aAAaqF,EAAe,MAAE,MAAAxE,SAAA,EAAAA,EAAIlB,KAAKK,aAAaL,KAAKiD,WAAa,E,CAExF,IAAKiB,EAAU,CACb,M,CAGF,GAAIE,EAAGC,MAAQC,EAAayB,UAAY9B,EAAQvD,gBAAiB,CAC/D,GAAIwD,EAASzD,KAAM,CACjBwD,EAAQ5B,cAAe,EACvB6B,EAAS8B,gBAET,M,EAIJhG,KAAKgE,UAAUC,EAASC,E,CAGlB,cAAA+B,GACN,GAAIjG,KAAKiC,WAAajC,KAAKkG,eAAiBlG,KAAKG,OAAQ,CACvD,M,CAGF,GAAIH,KAAKkG,gBAAkBlG,KAAKiC,UAAYjC,KAAKmG,UAAW,CAC1D,OACEC,EAAA,YACEC,MAAM,qBACNC,QAASC,EAAcC,UACvBC,KAAMzG,KAAKkG,cACXQ,KAAK,SACLC,KAAMC,EAAYC,S,CAKxB,OACET,EAAA,eACEU,OAAO,uBACPC,MAAO/G,KAAKgH,aACZC,YAAajH,KAAKkH,kBAClBC,cAAenH,KAAKoH,YACpBC,iBAAkB,KAClBC,qBAAsBtH,KAAKiC,UAAYjC,KAAKmG,SAC5CoB,kBAAmBvH,KAAKiC,UAAYjC,KAAKmG,SAAWqB,UAAYxH,KAAKuH,kBACrEZ,KAAMC,EAAYC,QAClBP,QAASC,EAAcC,UACvBiB,cAAezH,KAAKgH,aAAa1G,OAAS,EAC1CoH,eAAiBC,GAAO3H,KAAKgH,aAAeW,EAAEC,Q,CAK5C,iBAAAC,GACN,IAAK7H,KAAKiC,WAAajC,KAAKmG,WAAanG,KAAKgC,gBAAiB,CAC7D,OACEoE,EAAA,SACEC,MAAM,UACNyB,QAAQ,6BAA4B,cACvB9H,KAAKoH,YAAc,QAAU,QAEzCpH,KAAKoH,Y,EAMN,kBAAAW,GACN,OACE3B,EAAC4B,EAAQ,KACNhI,KAAKiI,aACJ7B,EAAA,QAAMC,MAAM,UACVD,EAAA,OAAK8B,IAAI,qBAGZlI,KAAKqB,YAAYC,cAAc,0BAC9B8E,EAAA,QAAMC,MAAM,gBACVD,EAAA,QAAM+B,KAAK,kB,CAOb,gBAAAC,GACN,OACEpI,KAAKiD,WAAa,IACjBjD,KAAKgC,iBAAmBhC,KAAKG,QAAUH,KAAKiC,WAC3CmE,EAAA,UACEiC,IAAMjG,GAAQpC,KAAK2C,aAAeP,EAClCiE,MAAM,iBAAgB,aACX,YAAW,gBACR,OAAM,gBACL,GAAGrG,KAAKW,aAAY,gBACrB,iBACd2H,QAAStI,KAAKsC,YAEd8D,EAAA,UAAQ+B,KAAK,gB,CAMb,eAAAI,GACN,OACEnC,EAAA,eACEoC,GAAG,iBACHlC,QAASmC,EAAiBC,QAC1BC,oBAAqBC,EAAoBC,MACzCpI,KAAMT,KAAKW,WACXmI,0BAA4B1E,GAAQpE,KAAKW,WAAayD,EAAGwD,OACzDmB,UAAW/I,KAAKmE,oBAEhBiC,EAAA,OAAK4C,KAAK,iBACR5C,EAAA,UACEiC,IAAMjG,GAAQpC,KAAK6E,kBAAoBzC,EACvCiE,MAAM,eAAc,aACT,cACXiC,QAAStI,KAAK0C,YAAW,cACZ,IAAI1C,KAAKW,aACtBsI,UAAWjJ,KAAKW,YAEhByF,EAAA,UAAQ+B,KAAK,WAGf/B,EAAA,OACEC,MAAM,iBAAgB,cACT,IAAIrG,KAAKW,cAEtByF,EAAA,QACE+B,KAAK,OACLe,aAAclJ,KAAK6C,wB,CAQvB,WAAAsG,GACN,OACE/C,EAAA,OAAKC,MAAM,iBACTD,EAAA,OAAKC,MAAM,yBACRrG,KAAKoI,mBACNhC,EAAA,OAAKC,MAAM,iBACRrG,KAAK+H,qBACN3B,EAAA,OAAKC,MAAM,iBACTD,EAAA,QAAM+B,KAAK,iBAAiBnI,KAAKoB,SAGpCpB,KAAKoJ,cAAgBpJ,KAAKiG,kB,CAMnC,WAAAoD,CAAAC,G,6CA9bAtJ,KAAAc,MAAQ,MAMRd,KAAAgC,gBAAkB,MAMlBhC,KAAAoJ,aAAe,MAYfpJ,KAAAkH,kBAAoB,QAYpBlH,KAAAgH,aAAe,GAcfhH,KAAAiI,YAAc,KAMdjI,KAAAW,WAAa,MAYLX,KAAAG,OAAS,MASTH,KAAAiC,SAAW,KAGXjC,KAAAmG,SAAW,MAIXnG,KAAAK,aAAmC,GAUnCL,KAAAgB,sBAA+CrB,EACnD,IAAIC,sBACF,EAAE2J,MACAvJ,KAAKG,QAAUoJ,EAAMC,cAAc,GAErC,CAACC,UAAW,KAEdjC,UA0VFxH,KAAKsC,WAAatC,KAAKsC,WAAWoH,KAAK1J,MACvCA,KAAK0C,YAAc1C,KAAK0C,YAAYgH,KAAK1J,MACzCA,KAAK6C,oBAAsB7C,KAAK6C,oBAAoB6G,KAAK1J,MACzDA,KAAKmE,mBAAqBnE,KAAKmE,mBAAmBuF,KAAK1J,KACxD,CAED,iBAAA2J,GACE3J,KAAK6C,sBAGL,MAAM+G,EAAmB9H,OAAO+H,WAAW,eAAeC,EAAYC,aACtE/J,KAAKiC,SAAW2H,EAAiBI,QACjCJ,EAAiBK,iBAAiB,UAAWtC,GAAO3H,KAAKiC,SAAW0F,EAAEqC,UACtE,MAAME,EAAmBpI,OAAO+H,WAC9B,eAAeC,EAAYC,OAAS,wBAAwBD,EAAYK,aAE1EnK,KAAKmG,SAAW+D,EAAiBF,QACjCE,EAAiBD,iBAAiB,UAAWtC,GAAO3H,KAAKmG,SAAWwB,EAAEqC,S,CAGxE,gBAAAI,GACEpK,KAAKY,gBACLZ,KAAKuD,yB,CAGP,oBAAA8G,G,OACEtJ,EAAAf,KAAKwD,sBAAkB,MAAAzC,SAAA,SAAAA,EAAEuJ,Y,CAGnB,iBAAAC,GACN,IAAKvK,KAAK8D,QAAQ,iBAAoB9D,KAAKoJ,cAAgBpJ,KAAKiC,SAAW,CACzE,M,CAGF,OACEmE,EAAA,OAAKC,MAAO,CAAC,eAAgB,KAAM,mBAAoBrG,KAAK8D,QAAQ,kBAClEsC,EAAA,QAAM+B,KAAK,iB,CAKjB,MAAAqC,GACE,MAAMC,EAAiBzK,KAAK8D,QAAQ,gBAEpC,OACEsC,EAACsE,EAAI,CAAArG,IAAA,yDAAcrE,KAAKiD,YACtBmD,EAAA,OAAA/B,IAAA,2CACEgC,MAAO,CAAC,gBAAiB,KAAM,cAAerG,KAAKiD,WAAa,IAAMjD,KAAKgC,iBAC3EqG,IAAMjG,GAAQpC,KAAKa,UAAYuB,GAE/BgE,EAAA,OAAA/B,IAAA,2CAAKgC,MAAO,CAAC,oBAAqB,KAAM,mBAAoBoE,IAC1DrE,EAAA,OAAA/B,IAAA,2CAAKgC,MAAM,iBACTD,EAAA,OAAA/B,IAAA,2CAAKgC,MAAM,iBACTD,EAAA,QAAA/B,IAAA,2CAAM8D,KAAK,eAAenI,KAAKoI,qBAC7BpI,KAAKG,QAAUH,KAAK+H,qBACtB3B,EAAA,OAAA/B,IAAA,2CAAKgC,MAAM,oBACPrG,KAAKiC,UAAYjC,KAAKuK,oBACxBnE,EAAA,QAAA/B,IAAA,2CAAM8D,KAAK,WAEb/B,EAAA,OAAA/B,IAAA,2CAAKgC,MAAM,eACRrG,KAAKoJ,cAAgBpJ,KAAK6H,oBAC1B7H,KAAKoJ,eAAiBpJ,KAAKiC,UAAYjC,KAAKiG,mBAGhDjG,KAAKiC,UAAYjC,KAAKuK,qBAExBvK,KAAKoJ,cAAgBpJ,KAAKiC,UAAYjC,KAAKiG,kBAG9CG,EAAA,OAAA/B,IAAA,2CACEgC,MAAM,iBAAgB,aACVrG,KAAKoB,OAASoG,WAEzBxH,KAAK+B,aACJqE,EAAA,OAAA/B,IAAA,2CACEsG,KAAK,UAAS,aACF3K,KAAKoB,OAASoG,WAE1BpB,EAAA,QAAA/B,IAAA,2CACE8D,KAAK,OACLe,aAAclJ,KAAK6C,yBAM5B7C,KAAKuI,kBACLvI,KAAKG,QAAUH,KAAKmJ,c,kKC9jB7B,MAAMzJ,EAAY,IAAM,04H,MCaXkL,EAAO,MANpB,WAAAvB,CAAAC,G,UAmCEtJ,KAAAiJ,SAAqB,MAIrBjJ,KAAA6K,KAAoBC,EAAWC,OAI/B/K,KAAAsG,QAA0BC,EAAcyE,QAQxChL,KAAAiL,aAA8BC,EAAaC,KAI3CnL,KAAA2G,KAAkCC,EAAYwE,IAEtCpL,KAAAqL,QAAU,KAgDnB,CA9CC,iBAAA1B,G,MACE3J,KAAKqL,YAAYtK,EAAAf,KAAKqB,YAAYE,eAAW,MAAAR,SAAA,SAAAA,EAAES,O,CAGjD,cAAY8J,G,MACV,MAAO,CACL9C,GAAMxI,KAAK8G,OACXT,MAAS,CACP,sBAAuB,KACvB,qBAAsBrG,KAAKqL,SAE7B,eAActK,EAAAf,KAAKmH,iBAAa,MAAApG,SAAA,SAAAA,EAAES,SAAUgG,U,CAIxC,UAAA+D,GACN,OAAOvL,KAAK0G,MAAQN,EAAA,UAAQ+B,KAAMnI,KAAK0G,M,CAGzC,MAAA8D,GACE,GAAIxK,KAAKyG,KAAM,CACb,OACEL,EAAA,IAAAoF,OAAAC,OAAA,GACMzL,KAAKsL,WAAU,CACnB7E,KAAMzG,KAAKyG,KACXhC,OAAQzE,KAAKyE,SAEZzE,KAAKuL,aACNnF,EAAA,a,CAKN,OACEA,EAAA,SAAAoF,OAAAC,OAAA,GACMzL,KAAKsL,WAAU,CACnBnD,KAAMnI,KAAKmI,KACX0C,KAAM7K,KAAK6K,KACX5B,SAAUjJ,KAAKiJ,SACf0B,KAAM3K,KAAK0L,UAAYlE,YAEtBxH,KAAKuL,aACNnF,EAAA,a,gDC5GR,MAAM1G,EAAY,IAAM,gnB,MCQXiM,EAAQ,MANrB,WAAAtC,CAAAC,G,UASEtJ,KAAA2G,KAAqBiF,EAAYC,MAIjC7L,KAAA8L,MAAiB,UAIjB9L,KAAA+L,YAAmCC,EAAmBC,UAUvD,CARC,MAAAzB,GACE,OACEpE,EAACsE,EAAI,CAAArG,IAAA,2CACHgC,MAAO,WAAWrG,KAAK2G,gBAAgB3G,KAAK+L,cAC5CG,MAAO,CAACC,gBAAiB,SAASnM,KAAK8L,W,eCzB/C,MAAMpM,EAAY,IAAM,2YCIxB,MAAM0M,EAAyB,2C,MAWlBC,EAAK,M,yBAiCR,mBAAAC,CAAoBC,GAC1B,GAAIA,IAAS,MAATA,SAAS,SAATA,EAAWC,WAAW,KAAM,CAC9B,OAAOpG,EAAA,QAAMqG,EAAGF,G,CAGlB,OAAOnG,EAAA,WAASsG,OAAQH,G,CAG1B,qBAAYI,GACV,OAAOC,EAAsBC,SAAS7M,KAAKmI,K,CAG7C,6BAAY2E,G,MACV,MAAO,CAAC,cAAe,aAAaD,UAAS9L,EAAAf,KAAK+M,kBAAc,MAAAhM,SAAA,SAAAA,EAAEiM,c,CAQ5D,mCAAAC,G,MACN,MAAMC,GAAsBnM,EAAAf,KAAKmI,QAAI,MAAApH,SAAA,SAAAA,EAAEoM,QAAQf,EAAwB,oBACvE,IAAKpM,KAAK2M,oBAAsB3M,KAAK8M,4BAA8BM,EAAMF,GAAsB,CAC7F,OAAOlN,KAAKmI,I,CAGd,OAAO+E,C,CAOD,oBAAAG,GACN,OACEjH,EAAA,OACEC,MAAM,kBACNiH,KAAMtN,KAAK+M,gBAAkB,YAC7BQ,QAAQ,gBACRjK,MAAOtD,KAAKsD,MACZkK,OAAQxN,KAAKwN,OAAM,cACP,QAEXxN,KAAKsM,oBAAoBc,EAAM,iB,CAK9B,cAAAK,GACN,OACErH,EAAA,OACEoC,GAAIxI,KAAK0N,QAAUlG,UACnB8F,KAAMtN,KAAKsN,KAAO,SAAStN,KAAKsN,QAAU9F,UAC1C+F,QAAQ,gBACRjK,MAAOtD,KAAKsD,MACZkK,OAAQxN,KAAKwN,OAAM,cACP,QAEXxN,KAAKsM,oBAAoBc,EAAMpN,KAAKiN,wC,CAK3C,MAAAzC,GACE,OACEpE,EAACsE,EAAI,CAAArG,IAAA,yDAAa,QACfrE,KAAK2M,oBAAsB3M,KAAK8M,0BAC/B1G,EAAA,OAAKC,MAAM,gBACRrG,KAAKqN,uBACLrN,KAAKyN,kBAGRzN,KAAKyN,iB,eCzHf,MAAME,EAAmB,IAAM,8rICA/B,MAAMC,EAAgB,IAAM,myECA5B,MAAMC,EAAoB,IAAM,4VCAhC,MAAMC,EAAyB,IAAM,q9I,MCuBxBC,EAAM,MANnB,WAAA1E,CAAAC,G,sPAWEtJ,KAAA8G,OAAS,MAAMkH,MAIfhO,KAAA6K,KAAkBoD,EAAUC,KA4C5BlO,KAAAiJ,SAAqB,MAIrBjJ,KAAAmO,SAAqB,MAIrBnO,KAAAoO,SAAqB,MAIrBpO,KAAAqO,QAAoB,MAIpBrO,KAAAsO,cAA0B,MAgB1BtO,KAAAuO,QAA6B,KAI7BvO,KAAAwO,cAAgCC,EAAc5F,MAY9C7I,KAAA0O,aAAyB,KAgCzB1O,KAAA2G,KAAqBC,EAAYwE,IAGjCpL,KAAA2O,SAAW,MAGX3O,KAAA4O,eAAiB,KAIT5O,KAAA6O,cAAgB,GAmfzB,CA9eC,kBAAAC,CAAmBnH,GACjB,MAAMoH,EAAOpH,EAAEC,OACf,OAAQ5H,KAAK6K,MACX,KAAKoD,EAAUe,MACb,GAAID,EAAKlE,OAASoD,EAAUe,OAASD,EAAK5G,OAASnI,KAAKmI,MAAQ4G,EAAKvG,KAAOxI,KAAK8G,OAAQ,CACvF9G,KAAKqO,QAAU,K,CAEjB,M,CAKN,kBAAAY,GACEjP,KAAKkP,2B,CAGC,yBAAAA,GACN,GAAIlP,KAAK6K,OAASoD,EAAUkB,WAAanP,KAAKoP,SAAU,CACtD,M,CAGFpP,KAAKoP,SAASd,gBAAkBtO,KAAKsO,a,CAKvC,eAAMe,GACJ,OAAQrP,KAAK6K,MACX,KAAKoD,EAAUkB,SACf,KAAKlB,EAAUe,MACb,OAAOhP,KAAKqO,QACd,QACEiB,QAAQC,KAAK,wEAEb,OAAO,M,CAQL,eAAAC,CAAgBzI,GACtB,IAAK/G,KAAK2O,SAAU,CAClB3O,KAAKyP,iB,CAGP,IAAIC,EACJ,GAAI1P,KAAK6K,OAASoD,EAAU0B,SAAU,CACpCD,EAAW1P,KAAK4P,YAAY,W,KACvB,CACLF,EAAW1P,KAAK4P,YAAY,Q,CAE9B5P,KAAK+G,MAAQA,EACb/G,KAAK6P,YAAY3P,KAAK,CAAC6G,QAAO2I,aAE9BI,aAAa9P,KAAK+P,OAClB/P,KAAK+P,MAAQvN,YAAW,KACtBxC,KAAKgQ,eAAehQ,KAAK+G,MAAO2I,EAAS,GACxC1P,KAAK6O,c,CAOF,eAAAY,GACNzP,KAAK2O,SAAW,KAChB3O,KAAKiQ,YAAY/P,M,CAOX,cAAA8P,CAAejJ,EAAe2I,GACpC1P,KAAK2O,SAAW,MAChB3O,KAAKkQ,WAAWhQ,KAAK,CACnB6G,MAAOA,EACP2I,SAAUA,G,CAQN,cAAAS,CAAe9B,GACrBrO,KAAKoQ,WAAWlQ,KAAK,CACnBsI,GAAIxI,KAAK8G,OACTuH,QAASA,EACTxD,KAAM7K,KAAK6K,KACX1C,KAAMnI,KAAKmI,KACXpB,MAAO/G,KAAK+G,MACZ2I,SAAU1P,KAAK4P,YAAY,U,CAQvB,cAAAS,GACNrQ,KAAKsQ,WAAWpQ,KAAK,CAACsI,GAAIxI,KAAK8G,Q,CAOzB,aAAAyJ,GACNvQ,KAAKwQ,UAAUtQ,KAAK,CAACsI,GAAIxI,KAAK8G,Q,CAGxB,WAAA8I,CAAY/E,GAClB,MAAM4F,EAAQzQ,KAAKqB,YAAYC,cAAcuJ,GAE7C,OAAO4F,EAAMf,Q,CAKP,iBAAAgB,GACN,MAAO,CACLlI,GAAIxI,KAAK8G,OACTqB,KAAMnI,KAAKmI,KACXlB,YAAajH,KAAKiH,YAClBF,MAAO/G,KAAK+G,MACZkC,SAAUjJ,KAAKiJ,SACfkF,SAAUnO,KAAKmO,SACfC,SAAUpO,KAAKoO,SACfhN,MAAOpB,KAAK2Q,UACZC,UAAW5Q,KAAK4Q,UAChBC,UAAW7Q,KAAK6Q,UAChBxK,MAAO,CACL,CAAC,SAASrG,KAAK8Q,YAAa9Q,KAAK8Q,QAEnCC,aAAc/Q,KAAK+Q,aACnBC,QAAUrJ,GAAkB3H,KAAKwP,gBAAiB7H,EAAElD,OAA4BsC,O,CAI5E,mBAAAkK,CAAoBpG,GAC1B,GAAIA,GAAQoD,EAAUiD,OAAQ,CAC5B,M,CAGF,MAAO,CACLC,IAAKnR,KAAKmR,IACVC,IAAKpR,KAAKoR,IACVC,KAAMrR,KAAKqR,K,CAIP,mBAAAC,CAAoBzG,GAC1B,GACEA,GAAQoD,EAAUsD,UAClB1G,GAAQoD,EAAUC,MAClBrD,GAAQoD,EAAUuD,KAClB3G,GAAQoD,EAAUwD,QAClB5G,GAAQoD,EAAUyD,KAClB7G,GAAQoD,EAAU0D,MAClB,CACA,M,CAGF,MAAO,CACLC,QAAS5R,KAAK4R,Q,CAIV,eAAAC,GACN,UAAWC,EAAQ9R,KAAKuO,WAAa,UAAW,CAC9C,OAAO,K,CAGT,OAAO,I,CAGD,iBAAAwD,GACN,MAAO,CACLpH,KAAQ3K,KAAK0L,UAAYlE,UACzB,mBAAoBxH,KAAKgS,qBAAuBxK,UAChD,kBAAmBxH,KAAKiS,oBAAsBzK,U,CAI1C,qBAAA0K,GACN,OAAA1G,OAAAC,OAAAD,OAAAC,OAAA,GACKzL,KAAK+R,qBAAmB,CAC3B,gBAAiB/R,KAAKmS,kBAAoB3K,UAC1C,gBAAiBxH,KAAKoS,kBAAoB5K,UAC1C,oBAAqBxH,KAAKqS,sBAAwB7K,UAClD,wBAAyBxH,KAAKsS,0BAA4B9K,UAC1D,mBACExH,KAAKgS,qBAAuBhS,KAAK6R,kBAC7B7R,KAAKgS,qBAAuB,GAAGhS,KAAK8G,iBACpCU,UACN,eAAgBxH,KAAK8Q,SAAWyB,EAAYC,MAAQ,OAAShL,UAC7D,gBAAiBxH,KAAKoO,SAAW,OAAS5G,W,CAItC,sBAAAiL,GACN,MAAO,CACLC,QAAS,IAAM1S,KAAKqQ,iBACpBsC,OAAQ,IAAM3S,KAAKuQ,gB,CAIf,eAAAqC,CAAgB/H,EAAkBoD,EAAUC,MAClD,MAAM2E,EAAIrH,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACLzL,KAAK0Q,qBACL1Q,KAAKiR,oBAAoBpG,IACzB7K,KAAKsR,oBAAoBzG,IACzB7K,KAAKkS,yBACLlS,KAAKyS,0BAAwB,CAChC,aAAczS,KAAKmH,eAAiBK,YAGtCqL,EAAKxM,MAAKmF,OAAAC,OAAAD,OAAAC,OAAA,GACJoH,EAAKxM,OAAwC,CACjD,aAAcrG,KAAK0G,MAAQmE,IAASoD,EAAUsD,SAC9C,iBAAkBvR,KAAK0O,cAAgB7D,GAAQoD,EAAUiD,SAG3D,OACE9K,EAAA,OAAKC,MAAM,gBACRrG,KAAK8S,cACN1M,EAAA,WACEA,EAAA,QAAAoF,OAAAC,OAAA,GACMoH,EAAI,CACRhI,KAAMA,IAASoD,EAAUsD,WAAavR,KAAK4O,eAAiBX,EAAUC,KAAOrD,EAC7ExC,IAAMjG,GAAQpC,KAAKoP,SAAWhN,KAE/BpC,KAAK+S,eAEP/S,KAAKgT,gB,CAKJ,WAAAF,GACN,IAAK9S,KAAKiT,MAAO,CACf,M,CAGF,OACE7M,EAAA,SACEC,MAAM,oBACNmC,GAAI,GAAGxI,KAAK8G,eACZgB,QAAS9H,KAAK8G,QAEb9G,KAAKiT,M,CAKJ,WAAAF,GACN,OACE3M,EAAA,QAAMC,MAAM,iBACTrG,KAAKkT,kBACLlT,KAAKuL,a,CAKJ,UAAAA,GACN,GAAIvL,KAAK6K,OAASoD,EAAUsD,SAAU,CACpC,OAAOvR,KAAKmT,wB,CAGd,IAAKnT,KAAK0G,KAAM,CACd,M,CAGF,OACEN,EAAA,UACE+B,KAAMnI,KAAK0G,KACXL,MAAO,CAAC,CAACrG,KAAK2G,MAAO,KAAM,aAAc,O,CAKvC,eAAAuM,GACN,IAAIE,EAAS,MACb,IAAKpT,KAAK0O,eAAiB1O,KAAK+G,OAAS/G,KAAKiJ,UAAYjJ,KAAKmO,UAAYnO,KAAK6K,MAAQoD,EAAUiD,OAAQ,CACxGkC,EAAS,I,CAGX,OACEhN,EAAA,UACEyE,KAAK,SACLxE,MAAO,CAAC,aAAc,KAAM,aAAc,KAAM+M,UAAO,aAC5C,mCACX9K,QAAS,KACPtI,KAAKoP,SAASrI,MAAQ,GACtB/G,KAAKwP,gBAAgB,IACrBxP,KAAKoP,SAASxM,OAAO,GAGvBwD,EAAA,UACE+B,KAAK,WACL9B,MAAOrG,KAAK2G,O,CAMZ,sBAAAwM,GACN,OACE/M,EAAA,UACEyE,KAAK,SACLxE,MAAM,kCACN4C,SAAUjJ,KAAKiJ,SAAQ,aACZ,kBAAiB,gBACbjJ,KAAK4O,eAAiB,OAAS,QAC9CtG,QAAS,IAAOtI,KAAK4O,gBAAkB5O,KAAK4O,gBAE5CxI,EAAA,UACE+B,KAAMnI,KAAK4O,eAAiB,cAAgB,kBAC5CvI,MAAOrG,KAAK2G,O,CAMZ,aAAAqM,GACN,GAAIlB,EAAQ9R,KAAKuO,WAAa,MAAO,CACnC,M,CAGF,OACEnI,EAAA,6BACW,GAAGpG,KAAK8G,iBACjByH,QAASuD,EAAQ9R,KAAKuO,WAAa,KAAO/G,UAAaxH,KAAKuO,QAC5DuC,OAAQ9Q,KAAK8Q,OACbzK,MAAOrG,KAAK2G,KACZsC,SAAUjJ,KAAKiJ,U,CASb,cAAAoK,GACN,MAAM/H,EAAatL,KAAK0Q,oBACxB,MAAM4C,EAAiBtT,KAAKkS,wBAE5B,OACE9L,EAAC4B,EAAQ,KACNhI,KAAK8S,cACN1M,EAAA,OACEC,MAAKmF,OAAAC,OAAAD,OAAAC,OAAA,GACCH,EAAWjF,OAAwC,CACvD,mBAAoB,KACpB8H,WAAc7C,EAAW6C,YAG3B/H,EAAA,WAAAoF,OAAAC,OAAA,GACMH,EACAgI,EAAc,CAClBjN,MAAKmF,OAAAC,OAAAD,OAAAC,OAAA,GACCH,EAAWjF,OAAwC,CACvD,cAAe,OAAI,aAETrG,KAAKmH,eAAiBK,cAGrCxH,KAAKgT,gB,CAOJ,WAAAO,CAAYnP,GAClB,GAAIpE,KAAK6K,OAASoD,EAAUkB,UAAYnP,KAAKsO,cAAe,CAC1DtO,KAAKsO,cAAgB,K,CAGvBtO,KAAKqO,QAAWjK,EAAGK,OAA4B4J,QAC/CrO,KAAKmQ,eAAenQ,KAAKqO,Q,CAGnB,sBAAAmF,GACN,GAAIxT,KAAKsO,cAAe,CACtB,MAAO,O,CAGT,OAAOtO,KAAKqO,QAAU,OAAS,O,CAIzB,cAAAoF,GACN,MAAMC,EAAe1T,KAAKoO,SAAW,CAAC,gBAAiB,QAAU,GAEjE,OACEhI,EAAA,OAAKC,MAAM,oBACTD,EAAA,QAAAoF,OAAAC,OAAA,CACEjD,GAAIxI,KAAK8G,OACT+D,KAAK,WACL1C,KAAMnI,KAAKmI,KACXkG,QAASrO,KAAKsO,cAAgB,MAAQtO,KAAKqO,QAC3CpF,SAAUjJ,KAAKiJ,SACfkF,SAAUnO,KAAKmO,SACfC,SAAUpO,KAAKoO,SACfuF,SAAU3T,KAAKuT,YAAY7J,KAAK1J,MAChC+G,MAAO/G,KAAK+G,MAAK,eACH/G,KAAKwT,0BACfE,EACA1T,KAAK+R,oBACL/R,KAAKyS,yBAAwB,CACjCpK,IAAMjG,IACJpC,KAAKoP,SAAWhN,EAChBpC,KAAKkP,2BAA2B,KAIpC9I,EAAA,SACE0B,QAAS9H,KAAK8G,OACdT,MAAO,CACL,iBAAkB,KAClBuN,MAAS5T,KAAKwO,gBAAkBC,EAAc5F,MAC9CgL,OAAU7T,KAAKwO,gBAAkBC,EAActD,OAGjD/E,EAAA,UACE+B,KAAMnI,KAAKsO,cAAgB,0BAA4BtO,KAAKqO,QAAU,mBAAqB,WAC3FhI,MAAOrG,KAAK2G,OAEb3G,KAAKiT,OAAS7M,EAAA,QAAM0N,UAAW9T,KAAKiT,S,CASrC,WAAAc,GACN,MAAML,EAAe1T,KAAKoO,SAAW,CAAC,gBAAiB,QAAU,GAEjE,OACEhI,EAAA,OAAKC,MAAM,iBACTD,EAAA,QAAAoF,OAAAC,OAAA,CACEjD,GAAIxI,KAAK8G,OACT+D,KAAK,QACL1C,KAAMnI,KAAKmI,KACXkG,QAASrO,KAAKqO,QACdpF,SAAUjJ,KAAKiJ,SACfkF,SAAUnO,KAAKmO,SACfC,SAAUpO,KAAKoO,SACfuF,SAAU3T,KAAKuT,YAAY7J,KAAK1J,MAChC+G,MAAO/G,KAAK+G,OACR/G,KAAK+R,oBACL/R,KAAKyS,yBACLiB,IAGNtN,EAAA,SACE0B,QAAS9H,KAAK8G,OACdT,MAAO,CACL,cAAe,KACfuN,MAAS5T,KAAKwO,gBAAkBC,EAAc5F,MAC9CgL,OAAU7T,KAAKwO,gBAAkBC,EAActD,OAGjD/E,EAAA,UACE+B,KAAMnI,KAAKqO,QAAU,uBAAyB,eAC9ChI,MAAOrG,KAAK2G,OAEb3G,KAAKiT,OAAS7M,EAAA,QAAM0N,UAAW9T,KAAKiT,S,CAO7C,MAAAzI,GACE,OAAQxK,KAAK6K,MACX,KAAKoD,EAAU0B,SACb,OAAO3P,KAAKqT,iBACd,KAAKpF,EAAUkB,SACb,OAAOnP,KAAKyT,iBACd,KAAKxF,EAAUe,MACb,OAAOhP,KAAK+T,cACd,KAAK9F,EAAUC,KACf,QACE,OAAOlO,KAAK4S,gBAAgB5S,KAAK6K,M,qICtpBzC,MAAMnL,EAAY,IAAM,+6B,MCSXsU,EAAa,MAL1B,WAAA3K,CAAAC,G,UAYEtJ,KAAAiU,OAAU,MAAMjG,MAIhBhO,KAAA0L,SAA0B,QAUlB1L,KAAAkU,YAAc,CACpBC,QAAS,mBACTC,MAAO,mBACPC,QAAS,qBAcZ,CAXC,MAAA7J,GACE,OACEpE,EAACsE,EAAI,CAAArG,IAAA,2CACHsG,KAAM3K,KAAK0L,UAAY1L,KAAKuO,SAAWvO,KAAK8Q,OAAS9Q,KAAK0L,SAAWlE,UACrEgB,GAAIxI,KAAKiU,QAERjU,KAAKkU,YAAYlU,KAAK8Q,SAAW9Q,KAAKuO,SAAWnI,EAAA,UAAA/B,IAAA,2CAAQ8D,KAAMnI,KAAKkU,YAAYlU,KAAK8Q,UACtF1K,EAAA,QAAA/B,IAAA,2CAAMyP,UAAW9T,KAAKuO,U,eC3C9B,MAAM7O,EAAY,IAAM,2G,MCQX4U,EAAK,MALlB,WAAAjL,CAAAC,G,UAYEtJ,KAAA2G,KAAkB4N,EAASC,OAM3BxU,KAAAyU,SAAsBC,EAASC,KAG/B3U,KAAA0L,SAAW,MA2BZ,CAvBC,YAAAkJ,CAAaC,GACX7U,KAAK0L,SAAWmJ,C,CAKlB,gBAAAC,GACEhS,MAAMC,KAAK/C,KAAK+U,KAAKC,UAClBjQ,QAAQkQ,GAA4CA,EAAMC,QAAQlI,gBAAkB,mBACpFzM,SAAQ,CAAC0U,EAAOE,KACfF,EAAMtO,KAAO3G,KAAK2G,KAClBsO,EAAMR,SAAWzU,KAAKyU,SACtBQ,EAAMG,oBAAsB,GAAGD,EAAI,GAAG,G,CAI5C,MAAA3K,GACE,OACEpE,EAACsE,EAAI,CAAArG,IAAA,2CAACsG,KAAM3K,KAAK0L,UACftF,EAAA,QAAA/B,IAAA,6C,2JC/CR,MAAM3E,EAAY,IAAM,0mE,MC4BX2V,EAAY,MA+BvB,sBAAAC,CAAuB3N,GACrB,GAAI3H,KAAKuV,gBAAkB5N,EAAEC,OAAQ,CACnC,MAAM4N,EAAUxV,KAAK+U,KAAKU,WAAWC,eAAe,qBAAqB/N,EAAEC,UAC3E4N,EAAQ5S,O,EAgHZ,WAAAyG,CAAAC,G,yJAxGAtJ,KAAA2V,YAA0CC,EAA0BzK,KAMpEnL,KAAA6V,UAAsB,MAMtB7V,KAAA8V,aAAwB,kBAMxB9V,KAAA+V,YAAgCC,EAAgBrB,KAMhD3U,KAAAiW,YAA4BrK,EAAYC,MAMxC7L,KAAAkW,WAAuB,MAMvBlW,KAAAmW,gBAAwCC,EAAoBC,UAY5DrW,KAAA2G,KAAkB4N,EAASC,OAM3BxU,KAAA8L,MAAiB,OAMjB9L,KAAAiJ,SAAqB,MAMrBjJ,KAAAoV,oBAA+B,IAM/BpV,KAAAyU,SAAsBC,EAASC,KAU/B3U,KAAAqC,aAA+B,EAG/BrC,KAAAsW,iBAAmB,MAGnBtW,KAAA0L,SAAW,WAEH1L,KAAAuW,kBAAoB,CAC1BC,UAAW,CACT/V,KAAM,gBACNgW,MAAO,gBAETzR,KAAM,CACJvE,KAAM,aACNgW,MAAO,iBAQTzW,KAAK0W,YAAc1W,KAAK0W,YAAYhN,KAAK1J,MACzCA,KAAK2W,cAAgB3W,KAAK2W,cAAcjN,KAAK1J,KAC9C,CAKO,WAAA0W,GACN,GAAI1W,KAAKiJ,SAAU,CACjB,M,CAGFjJ,KAAK4W,UAAU1W,KAAKF,KAAKuV,eACzB,IAAKvV,KAAKkW,WAAY,CACpB,M,CAEFlW,KAAKsW,kBAAoBtW,KAAKsW,gB,CAGxB,aAAAK,CAAcE,GACpB,MAAMC,EAAcD,EAAME,OAASzS,EAAa0S,MAChD,OAAQH,EAAME,MACZ,KAAKzS,EAAauB,WAChBgR,EAAMlS,iBACN3E,KAAKiX,gBAAgB/W,KAAKF,KAAKuV,cAAgB,GAC/C,MACF,KAAKjR,EAAayB,SAChB8Q,EAAMlS,iBACN3E,KAAKiX,gBAAgB/W,KAAKF,KAAKuV,cAAgB,GAC/C,MACF,KAAKjR,EAAa0S,MAChBH,EAAMlS,iBACN3E,KAAK4W,UAAU1W,KAAKF,KAAKuV,eACzB,MAKJ,IAAKvV,KAAKkW,aAAeY,EAAa,CACpC,M,CAEF9W,KAAKsW,kBAAoBtW,KAAKsW,gB,CAIhC,YAAA1B,CAAaC,GACX7U,KAAK0L,SAAWmJ,C,CAMV,sBAAAqC,GACN,IAAKlX,KAAKkW,WAAY,CACpB,OAAO,I,CAGT,OACE9P,EAAA,UACE+B,KACEnI,KAAKsW,iBACDtW,KAAKuW,kBAAkBvW,KAAKmW,iBAAiB1V,KAC7CT,KAAKuW,kBAAkBvW,KAAKmW,iBAAiBM,O,CASjD,qBAAAU,GACN,IAAKnX,KAAKkW,WAAY,CACpB,OAAO,I,CAGT,OACE9P,EAAA,OACEC,MAAO,CACL,iCAAkC,KAClC+Q,SAAYpX,KAAKsW,mBAGnBlQ,EAAA,QAAM+B,KAAK,kB,CAQT,aAAAkP,GACN,GAAIrX,KAAKyU,WAAaC,EAASC,KAAM,CACnC,OAAOvO,EAAA,Y,CAGT,GAAIpG,KAAKyU,WAAaC,EAAS4C,QAAS,CACtC,OACElR,EAAA,OAAKC,MAAM,4BACTD,EAAA,WAAMpG,KAAKoV,oBAAiC,MAC5ChP,EAAA,a,CAKN,GAAIpG,KAAKyU,WAAaC,EAAS6C,UAAW,CACxC,OACEnR,EAAA,OAAKC,MAAM,4BACTD,EAAA,kBACAA,EAAA,a,EAMR,MAAAoE,GACE,OACEpE,EAACsE,EAAI,CAAArG,IAAA,2DACYrE,KAAKkW,WAAalW,KAAKsW,iBAAmB,KACzDhO,QAAStI,KAAK0W,YACdhE,QAAS,IAAM1S,KAAKwX,oBAAoBtX,KAAKF,KAAKuV,eAClDxM,UAAW/I,KAAK2W,cAChBd,UAAW7V,KAAK6V,YAAc7V,KAAKiJ,SACnCwO,SAAUzX,KAAK0X,aAAelQ,UAAYxH,KAAKqC,aAC/CsI,KAAM3K,KAAK0X,aAAe,OAAS1X,KAAK0L,UAExCtF,EAAA,OAAA/B,IAAA,2CACEgC,MAAOrG,KAAK0X,aAAe,yBAA2B,YACtDxL,OAAQlM,KAAKiJ,UAAY,CAAC6C,MAAO,SAAS9L,KAAK8L,UAC/C6L,SAAS,KACTnP,GAAI,qBAAqBxI,KAAKuV,gBAC9BqC,KAAK,uBAELxR,EAAA,OAAA/B,IAAA,2CAAKgC,MAAM,4BACRrG,KAAKkX,yBACLlX,KAAKqX,iBAEPrX,KAAKmX,yBAEPnX,KAAK+V,cAAgBC,EAAgB6B,SACpCzR,EAAA,aAAA/B,IAAA,2CACEgC,MAAO,CAAC,sBAAuBrG,KAAK0X,cACpC5L,MAAO9L,KAAK8V,aACZnP,KAAM3G,KAAKiW,c,+FC9TvB,MAAMvW,GAAY,IAAM,wiB,MCQXoY,GAAU,MALvB,WAAAzO,CAAAC,G,UAYEtJ,KAAA2G,KAAkB4N,EAASC,OAM3BxU,KAAA+V,YAAgCC,EAAgBrB,KAMhD3U,KAAAiW,YAA4BrK,EAAYC,MAMxC7L,KAAA8V,aAAwB,UAMxB9V,KAAAyU,SAAsBC,EAASC,KAS/B3U,KAAA0L,SAAW,OAuDZ,CAlDC,YAAAkJ,CAAaC,GACX7U,KAAK0L,SAAWmJ,C,CAQlB,gBAAAC,GACEhS,MAAMC,KAAK/C,KAAK+U,KAAKC,UAClBjQ,QAAQkQ,GAA4CA,EAAMC,QAAQlI,gBAAkB,mBACpFzM,SAAQ,CAAC0U,EAAOE,EAAGH,KAClBC,EAAMtO,KAAO3G,KAAK2G,KAClBsO,EAAMR,SAAWzU,KAAKyU,SACtBQ,EAAMG,oBAAsBD,EAAE4C,WAC9B,GAAI5C,EAAIH,EAAS1U,OAAS,EAAG,CAC3B2U,EAAMc,YAAc/V,KAAK+V,YACzBd,EAAMgB,YAAcjW,KAAKiW,YACzBhB,EAAMa,aAAe9V,KAAK8V,Y,KAKlC,iBAAAnM,GACE3J,KAAKgY,YAAchY,KAAK+U,KAAKzT,cAAc,wB,CAG7C,MAAAkJ,GACE,OACEpE,EAACsE,EAAI,CAAArG,IAAA,2CAACsG,KAAM3K,KAAK0L,UACftF,EAAA,OAAA/B,IAAA,2CACEgC,MAAO,CACL,gCAAiC,KACjC,aAAcrG,KAAKgY,YAAchY,KAAK0X,aACtC,2BAA4B1X,KAAK0X,eAGnCtR,EAAA,QAAA/B,IAAA,2CAAM8D,KAAK,iBACVnI,KAAK+V,cAAgBC,EAAgBiC,QACpC7R,EAAA,aAAA/B,IAAA,2CACEyH,MAAO9L,KAAK8V,aACZnP,KAAM3G,KAAKiW,eAIjB7P,EAAA,QAAA/B,IAAA,6C,uQCnGR,MAAM3E,GAAY,IAAM,6oF,MCeXwY,GAAW,cAAQC,E,kGAW9BnY,KAAAsG,QAA6BmC,EAAiB2P,YAI9CpY,KAAAS,KAAO,MAOPT,KAAA2I,oBAA4CC,EAAoBuC,KAQhEnL,KAAAqY,kBAAoB,MAIpBrY,KAAAsY,aAAe,KAQPtY,KAAAuY,cAAgB,MAIhBvY,KAAAwY,oBAAsB,IAAIC,EAAoBzY,KAAM,CAC1D0Y,cAAe,IAAM1Y,KAAK2Y,cAC1BC,SAAU,IAAM5Y,KAAKS,MAAQT,KAAKsG,UAAYmC,EAAiBC,S,CAOjE,aAAAiO,CAAcE,GACZ,IAAK7W,KAAKS,MAAQT,KAAKsG,UAAYmC,EAAiBC,QAAS,CAC3D,M,CAGF,GAAImO,EAAMxS,MAAQC,EAAagB,IAAK,CAClCuR,EAAMlS,iBACN3E,KAAKS,KAAO,MAEZ,M,CAGFT,KAAKwY,oBAAoBK,cAAchC,E,CAOjC,gBAAAiC,GACN,MAAMC,EACJ/Y,KAAKsG,UAAYmC,EAAiBC,SAAW1I,KAAK2I,sBAAwBC,EAAoBoQ,GAC1F,aACA,aAENhZ,KAAK+U,KAAKkE,cAAcrX,KAAKsK,MAAM6M,GAAY/Y,KAAKS,KAAO,SAAW,E,CAIxE,aAAAyY,GACElZ,KAAKmZ,wBAAwBjZ,KAAKF,KAAKS,MAEvCT,KAAK8Y,mBACL9Y,KAAKwY,oBAAoBY,M,CAG3B,iBAAAzP,GACE,GAAI3J,KAAKS,KAAM,CACbT,KAAKuY,cAAgB,I,CAGvB,OAAOc,MAAM1P,mB,CAGf,kBAAA2P,GACEtZ,KAAKuY,cAAgB,K,CAGvB,gBAAAnO,GACE,GAAIpK,KAAKS,KAAM,CACbT,KAAKkZ,e,EAIT,oBAAA7O,GACErK,KAAK8Y,mBACLO,MAAMhP,sB,CAGR,MAAAG,GACE,OACEpE,EAACsE,EAAI,CAAArG,IAAA,4DACarE,KAAKuY,cAAa,eACpBvY,KAAKS,KAAO,OAAS,KAAI,aAC3BT,KAAKS,MAAQT,KAAKsG,UAAYmC,EAAiBC,QAAU,OAAS,KAC9EiC,KAAM3K,KAAKS,MAAQT,KAAKsG,UAAYmC,EAAiBC,QAAU,SAAW,MAE1EtC,EAAA,OAAA/B,IAAA,2CAAKgC,MAAM,oBACTD,EAAA,OAAA/B,IAAA,2CACEgC,MAAM,6BACNgC,IAAMjG,GAAQpC,KAAK2Y,cAAgBvW,EACnCqV,SAAU8B,EAAoBvZ,KAAK+U,MAAMzU,OAASkH,WAAY,GAE9DpB,EAAA,QAAA/B,IAAA,2CAAM8D,KAAK,qBAGbnI,KAAKsG,SAAWmC,EAAiBC,SAAW1I,KAAK2I,sBAAwBC,EAAoBoQ,KAC7FhZ,KAAKsY,cACHlS,EAAA,OAAA/B,IAAA,2CACEgC,MAAM,WACNiC,QAAUlE,IACRA,EAAGO,iBACHP,EAAGQ,kBACH5E,KAAKS,KAAO,KAAK,I,iICzJjC,MAAMf,GAAY,IAAM,2+GCAxB,MAAMA,GAAY,IAAM,gOCAxB,MAAMA,GAAY,IAAM,s+BCAxB,MAAM8Z,GAAgB,IAAM,k8X,MCiCfC,GAAU,MAVvB,WAAApQ,CAAAC,G,iJAeEtJ,KAAA8G,OAAS,aAAakH,MAItBhO,KAAAyH,cAA0B,MAoB1BzH,KAAA+Q,aAAyB,MAIzB/Q,KAAA0Z,qBAAgC,EAQhC1Z,KAAA2Z,kBAA6B,uBAQ7B3Z,KAAA4Z,iBAA6B,MAI7B5Z,KAAAqH,iBAA6B,MAI7BrH,KAAAsH,qBAAiC,MAIjCtH,KAAAuH,kBAA6B,QAI7BvH,KAAA2G,KAAqBC,EAAYwE,IAIjCpL,KAAAsG,QAA0BC,EAAcyE,QAGxChL,KAAAgH,aAAehH,KAAK+G,MAGpB/G,KAAA6Z,iBAAuC7Z,KAAK8Z,aAG5C9Z,KAAA+Z,YAAc,MAGd/Z,KAAAiC,SAAW,MAKHjC,KAAAga,iBAAgD,IAoazD,CA9YS,mBAAAC,CAAoBC,GAC1Bla,KAAKma,gBAAgBja,KAAKga,GAC1Bla,KAAKoa,aAAeF,EACpBla,KAAKgH,aAAe,E,CAGd,gBAAAqT,GACNra,KAAKsa,aAAapa,KAAKF,KAAKoP,SAASrI,M,CAIvC,UAAAwT,GACEva,KAAKga,iBAAmBha,KAAKwa,qB,CAI/B,iBAAAC,GACEza,KAAK6Z,iBAAmB7Z,KAAK8Z,Y,CAI/B,UAAAY,GACE1a,KAAKgH,aAAehH,KAAK+G,K,CAI3B,iBAAA4T,GACE3a,KAAK4a,aAAa1a,KAAKF,KAAKgH,cAC5B,IAAKhH,KAAKgH,aAAc,CACtBhH,KAAK6Z,iBAAmB7Z,KAAK8Z,Y,EAIzB,mBAAAU,GACN,cAAcxa,KAAK6a,eAAiB,SAAWC,KAAKC,MAAM/a,KAAK6a,cAAgB7a,KAAK6a,Y,CAG9E,eAAAG,GACN,MAAMC,EAAe,GACrBjb,KAAKga,iBAAiBzZ,SAAS2Z,I,MAC7B,MAAM7V,EAAM,GAAG6V,IAAI,MAAJA,SAAI,SAAJA,EAAMgB,WAAWhB,IAAI,MAAJA,SAAI,SAAJA,EAAMiB,cACtCF,EAAa5W,IAAOtD,EAAAka,EAAa5W,MAAI,MAAAtD,SAAA,EAAAA,EAAI,CACvCma,SAAUhB,IAAI,MAAJA,SAAI,SAAJA,EAAMgB,SAChBC,YAAajB,IAAI,MAAJA,SAAI,SAAJA,EAAMiB,YACnBC,MAAO,IAETH,EAAa5W,GAAK,SAASgX,KAAKnB,EAAK,IAGvC,GAAIla,KAAK4Z,iBAAkB,CACzB,OAAOpO,OAAO8P,KAAKL,GAChBM,OACApY,QAAO,CAACqY,EAAKnX,KACZmX,EAAInX,GAAImH,OAAAC,OAAAD,OAAAC,OAAA,GACHwP,EAAa5W,IAAI,CACpB+W,MAAOH,EAAa5W,GAAK,SAASkX,MAAK,CAACE,EAAkBC,KACxD,MAAMC,EAAQF,EAAExI,MAAM2I,cACtB,MAAMC,EAAQH,EAAEzI,MAAM2I,cACtB,GAAID,EAAQE,EAAO,CACjB,OAAO,C,CAET,GAAIF,EAAQE,EAAO,CACjB,OAAO,C,CAGT,OAAO,CAAC,MAIZ,OAAOL,CAAG,GACT,G,CAGP,OAAOP,C,CAGD,iBAAAa,CAAkBnU,EAAkBuS,GAC1C,GAAIvS,EAAEtD,MAAQC,EAAa0S,MAAO,CAChCrP,EAAEhD,iBACF3E,KAAKia,oBAAoBC,GAEzB,M,CAGFla,KAAK+b,uBAAuBpU,E,CAGtB,qBAAAqU,CAAsBrU,GAC5B,GAAIA,EAAEtD,MAAQC,EAAa0S,MAAO,CAChCrP,EAAEhD,iBACF3E,KAAKqa,mBAEL,M,CAGFra,KAAK+b,uBAAuBpU,E,CAGtB,sBAAAoU,CAAuBpU,G,gBAC7B,IAAK,CAACrD,EAAauB,WAAYvB,EAAayB,UAAU8G,SAASlF,EAAEtD,KAAsB,CACrF,M,CAGF,MAAM4X,EAAiBtU,EAAElD,OACzB,MAAM2W,EAAQtY,MAAMC,MAAK7B,GAAAH,EAAAf,KAAK+U,KAAKU,cAAU,MAAA1U,SAAA,SAAAA,EAAEiC,iBAAiB,wBAAoB,MAAA9B,SAAA,EAAAA,EAAI,IACxF,MAAMwE,EAAe0V,EAAMzV,QAAQsW,GAEnC,GAAItU,EAAEtD,MAAQC,EAAauB,WAAY,CACrC8B,EAAEhD,iBACF,MAAMuX,EAAYxW,EAAe,EACjC,GAAIwW,EAAYd,EAAM9a,OAAQ,CAC3B8a,EAAMc,GAA2BtZ,O,EAItC,GAAI+E,EAAEtD,MAAQC,EAAayB,SAAU,CACnC4B,EAAEhD,iBACF,MAAMwX,EAAYzW,EAAe,EACjC,GAAIyW,EAAY,EAAG,EACjBC,GAAAC,EAAArc,KAAK+U,KAAKU,cAAU,MAAA4G,SAAA,SAAAA,EAAE/a,cAAc,YAAQ,MAAA8a,SAAA,SAAAA,EAAExZ,SAC9C0Z,GAAAC,EAAAvc,KAAK+U,KAAKU,cAAU,MAAA8G,SAAA,SAAAA,EAChBjb,cAAc,YAAQ,MAAAgb,SAAA,SAAAA,EACtBE,kBAAkBxc,KAAKoP,SAASrI,MAAMzG,OAAQN,KAAKoP,SAASrI,MAAMzG,O,CAExE,GAAI6b,GAAa,EAAG,CACjBf,EAAMe,GAA2BvZ,O,GAKhC,gBAAA6Z,CAAiB9U,GACvBA,EAAE/C,kBACF5E,KAAKgH,aAAeW,EAAEC,OAAOb,MAC7B/G,KAAKoa,aAAe5S,S,CAGd,YAAAkV,GACN,GAAI1c,KAAKyH,cAAe,CACtB,M,CAGFzH,KAAKqa,kB,CAIC,kBAAAsC,CAAmBhV,GACzB,MAAMiV,EAAKjV,EAAEkV,eACb,GAAID,EAAG/P,SAAS7M,KAAK+U,MAAO,CAC1B,M,CAGF/U,KAAK+Z,YAAc,K,CAGrB,iBAAApQ,GACE3J,KAAKga,iBAAmBha,KAAKwa,sBAE7Bxa,KAAK8c,IAAMjT,WAAW,sBACtB7J,KAAK+c,mBAAsBpV,GAA4B3H,KAAKiC,SAAW0F,EAAEqC,QACzEhK,KAAK8c,IAAI7S,iBAAiB,SAAUjK,KAAK+c,oBACzC/c,KAAKiC,SAAWjC,KAAK8c,IAAI9S,O,CAG3B,oBAAAK,G,OACEtJ,EAAAf,KAAK8c,OAAG,MAAA/b,SAAA,SAAAA,EAAEic,oBAAoB,SAAUhd,KAAK+c,mB,CAGvC,eAAAE,CAAgBhK,GACtB,IAAKjT,KAAKgH,aAAc,CACtB,OAAOiM,C,CAGT,OAAOA,EAAM9F,QACX,IAAI+P,OAAOld,KAAKgH,aAAamG,QAAQ,sBAAuB,QAAS,QACpEgQ,GAAU,SAASA,Y,CAIhB,UAAAC,CAAWlD,EAAqB3X,G,MACtC,OACE6D,EAAA,kBACEoC,GAAI,aAAaxI,KAAK8G,UAAUvE,IAChCoI,KAAK,eACLtI,cAAc,EACd0G,UAAYpB,GAAqB3H,KAAK8b,kBAAkBnU,EAAGuS,GAC3D5R,QAAUX,IACRA,EAAE/C,kBACF5E,KAAKia,oBAAoBC,EAAK,GAGhC9T,EAAA,OACEC,MAAM,qBACNsE,KAAK,SACLgN,SAAU,MAEPuC,IAAI,MAAJA,SAAI,SAAJA,EAAMxT,OACPN,EAAA,UACEC,MAAM,YACN8B,KAAM+R,EAAKxT,OAIfN,EAAA,OACEC,MAAM,kCACNjF,MAAO8Y,EAAKjH,MACZa,UAAW9T,KAAKid,gBAAgB/C,EAAKjH,YAEpCiH,IAAI,MAAJA,SAAI,SAAJA,EAAMmD,MAAOjX,EAAA,SAAOM,KAAMwT,EAAKmD,IAAI3W,OAAQ1G,KAAKiC,SAAWiY,EAAKmD,IAAIC,KAAO,SAE7Evc,EAAAmZ,EAAKlF,YAAQ,MAAAjU,SAAA,SAAAA,EAAET,SAChB8F,EAAA,UACEC,MAAM,WACNsE,KAAK,QAAO,aACAuP,EAAKjH,OAASzL,WAEzB0S,EAAKlF,SAASuI,KAAI,CAACtI,EAAO1S,IAAUvC,KAAKod,WAAWnI,EAAO1S,M,CAU9D,gBAAAib,G,MACN,MAAKzc,EAAAf,KAAKga,oBAAgB,MAAAjZ,SAAA,SAAAA,EAAET,QAAQ,CAClC,M,CAGF,MAAM2a,EAAezP,OAAOiS,OAAOzd,KAAKgb,mBACxC,MAAM0C,EAAsC,GAC5C,MAAMC,IAAoB3d,KAAK6Z,iBAC/B,IAAI+D,EAAgB,EAEpB,IAAK,MAAMC,KAAa5C,EAAc,CACpC,MAAM6C,EAAYH,EAAkB3d,KAAK6Z,iBAAmB+D,EAAgBC,EAAUzC,MAAM9a,OAC5F,GAAIwd,GAAa,EAAG,CAClB,K,CAGF,MAAMC,EAAeF,EAAUzC,MAAM4C,MAAM,EAAGF,GAC9C,MAAMG,EAAyCF,EAAaR,KAAI,CAACrD,EAAqBgE,IACpFle,KAAKod,WAAWlD,EAAMgE,KAExBN,GAAiBK,EAAmB3d,OAEpC,IAAK2d,EAAmB3d,OAAQ,CAC9B,Q,CAGF,MAAM6d,EAAY,CAACN,EAAU3C,SAAU2C,EAAU1C,aAAapW,OAAOqZ,SAASC,KAAK,KAEnFX,EAAWrC,KACTjV,EAAA,6BAA0B+X,GAAa3W,WACpCqW,EAAU3C,UACT9U,EAAA,kBACEC,MAAM,wCACN2C,KAAK,eACL2B,KAAK,eACLtI,cAAc,GAEd+D,EAAA,OAAKC,MAAM,YAAYwX,EAAU3C,UAChC2C,EAAU1C,aAAe/U,EAAA,OAAKC,MAAM,eAAewX,EAAU1C,cAIjE8C,G,CAKP,OAAOP,C,CAGT,MAAAlT,G,cACE,OACEpE,EAACsE,EAAI,CAAArG,IAAA,2CACHqO,QAAS,IAAO1S,KAAK+Z,YAAc,KACnCzR,QAAUX,GAAkB3H,KAAK2c,mBAAmBhV,GACpDtB,MAAO,CAAC,eAAgBrG,KAAKqH,iBAAkB,gBAAiBrH,KAAK+Q,eAErE3K,EAAA,OAAA/B,IAAA,2CAAKgC,MAAM,mBACTD,EAAA,WAAA/B,IAAA,2CACEgE,IAAMjG,GAAQpC,KAAKoP,SAAWhN,EAC9B0E,OAAQ,SAAS9G,KAAK8G,SACtByH,QAAS,MACTtH,YAAajH,KAAKiH,YAClBqX,aAAe3W,GAAmB3H,KAAKyc,iBAAiB9U,GACxD4W,QAAU5W,IACR6W,EAAsB7W,GAAG,IAAM3H,KAAK0c,iBACpC1c,KAAK+b,uBAAuBpU,EAAE,EAEhC+K,QAAS,IAAO1S,KAAK+Z,YAAc,KACnChT,MAAO/G,KAAKgH,gBAAgBjG,EAAAf,KAAKoa,gBAAY,MAAArZ,SAAA,SAAAA,EAAEkS,OAC/CtM,KAAM3G,KAAK2G,KACXsM,MAAOjT,KAAKiT,MACZ9L,cAAenH,KAAKmH,eAAiBnH,KAAKiH,aAAeO,eAIzDxH,KAAK+Z,aACL/Z,KAAK+Q,cACL/Q,KAAKgH,cACLhH,KAAKgH,aAAa1G,QAAUN,KAAK0Z,sBACjC1Z,KAAKga,mBAEL5T,EAAA,OAAA/B,IAAA,2CAAKgC,MAAM,uBACRrG,KAAKyH,kBAAkBvG,EAAAlB,KAAKga,oBAAgB,MAAA9Y,SAAA,SAAAA,EAAEZ,QAC7C8F,EAAA,OAAKC,MAAM,wCAAsC,qCACbD,EAAA,SAAIpG,KAAKgH,cAC3CZ,EAAA,WACAA,EAAA,WAAM,kBAENA,EAAA,UACEA,EAAA,6CACAA,EAAA,+CACAA,EAAA,0DAIJA,EAAA,UACEuE,KAAK,UACLnC,GAAI,QAAQxI,KAAK8G,SAAQ,aACb9G,KAAKmH,eAAiBnH,KAAKiT,OAASzL,WAE/CxH,KAAK+Q,eAAiB/Q,KAAKyH,iBAAmBzH,KAAKgH,cAClDZ,EAAA,kBACEuE,KAAK,eACLtI,cAAc,EACdmG,GAAI,aAAaxI,KAAK8G,gBACtBiC,UAAYpB,GAAqB3H,KAAKgc,sBAAsBrU,GAC5DW,QAAS,IAAMtI,KAAKqa,oBAEpBjU,EAAA,OACEC,MAAM,wBACNsE,KAAK,SACLgN,SAAU,GAEVvR,EAAA,UACEC,MAAM,cACN8B,KAAK,0BAEP/B,EAAA,OACEC,MAAM,kCACNyN,WAAWuI,EAAArc,KAAK2Z,qBAAiB,MAAA0C,SAAA,SAAAA,EAAElP,QACjC,iBACA,SAASnN,KAAKgH,2BAOvBhH,KAAKwd,sBAGJxd,KAAKgH,gBACLoV,EAAApc,KAAKga,oBAAgB,MAAAoC,SAAA,SAAAA,EAAE9b,SACvBN,KAAK6Z,kBACL7Z,KAAK6Z,mBAAmB0C,EAAAvc,KAAKga,oBAAgB,MAAAuC,SAAA,SAAAA,EAAEjc,UAE/C8F,EAAA,kBACEuE,KAAK,eACLtI,cAAc,EACdmG,GAAI,aAAaxI,KAAK8G,mBAEtBV,EAAA,OACEuE,KAAK,SACLtE,MAAM,qCACNsR,SAAU,EACVrP,QAAS,IAAOtI,KAAK6Z,iBAAmBrS,WAAU,8BAYjExH,KAAKqH,kBACJjB,EAAA,YAAA/B,IAAA,2CACEqC,KAAM1G,KAAKsH,qBAAuB,SAAWE,UAAS,aAC1CxH,KAAKsH,qBAAuBtH,KAAKuH,kBAAkB/F,QAAU,QAAUgG,UACnFyB,WAAYjJ,KAAKyH,cACjBnB,QAAStG,KAAKsG,QACdK,KAAM3G,KAAK2G,KACX2B,QAAS,IAAMtI,KAAK0c,gBAEnB1c,KAAKsH,qBAAuB,GAAKtH,KAAKuH,kBAAkB/F,QAAU,S,2NCrhB/E,MAAM9B,GAAY,IAAM,k6B,MCYX+e,GAAI,M,yBAWf,MAAAjU,GACE,OACEpE,EAACsE,EAAI,CAAArG,IAAA,2CACHgC,MAAO,CACL6P,WAAclW,KAAKkW,cAAgBlW,KAAK0G,KACxC,aAAc1G,KAAK+U,KAAKxT,YAAYC,SAGrCxB,KAAK0G,MAAQN,EAAA,UAAA/B,IAAA,2CAAQ8D,KAAMnI,KAAK0G,OACjCN,EAAA,OAAA/B,IAAA,4CACE+B,EAAA,QAAA/B,IAAA,8C","ignoreList":[]}

package/www/build/p-57ba851d.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as e,H as s,d as o}from"./p-BcDWN4F1.js";import{W as r,X as n,p as a,g as l,P as h,i as p}from"./p-DdetsoIY.js";import{g as c,h as d}from"./p-DPrEzmhI.js";import"./p-Q-tWjk7P.js";const u=()=>`:host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}*{box-sizing:border-box}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;align-items:center}ol{display:flex;align-items:center;padding:0;margin:0;column-gap:var(--space-unit);list-style:none}li{display:flex;align-items:center;justify-content:flex-start;column-gap:var(--space-unit)}ol li>a,ol li>button{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}a:focus,button:focus{box-shadow:var(--shadow-focus-primary);outline:none}a{color:var(--color-text-link-blue);white-space:nowrap}a.missing-path{color:var(--color-default-text)}.text-ellipsis{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:initial}nav.semibold>ol>li>a:not(.missing-path),nav.semibold>ol>li>button{font-weight:var(--font-sb);text-decoration:none}nav.underlined a,nav.underlined button{text-decoration:underline}z-icon{--z-icon-width:16px;--z-icon-height:16px;display:block;fill:var(--color-text-link-blue)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-text-link-blue);cursor:pointer}.hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}.hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}.hidden-paths-popover{--z-popover-theme--surface:var(--color-background);--z-popover-padding:0;--background-color-list-element:var(--color-background)}.hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}.full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}.tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover);line-clamp:var(--line-clamp-popover)}}@media (max-width: 767px){li a{display:flex;align-items:center;column-gap:var(--space-unit)}}`;const f=class{constructor(e){i(this,e);this.clickOnNode=t(this,"clickOnNode",7);this.pathStyle=r.UNDERLINED;this.homepageVariant=n.ICON;this.maxNodesToShow=5;this.preventFollowUrl=false;this.overflowMenuItemRows=0;this.truncateChar=30;this.hasOverflow=false;this.popoverEllipsisOpen=false;this.collapsedElements=[];this.currentIndex=0;this.truncatePosition=null}handleResize(){this.viewPortWidth=c();if(this.viewPortWidth!==a.MOBILE&&this.wrapElement&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}handlePropChange(){this.initializeBreadcrumb()}handleResizeUp(i,t){if(i===a.MOBILE||t===a.MOBILE&&i===a.TABLET||t===a.MOBILE&&i===a.DESKTOP||t===a.MOBILE&&i===a.DESKTOP_WIDE||t===a.TABLET&&i===a.DESKTOP||t===a.TABLET&&i===a.DESKTOP_WIDE||t===a.DESKTOP&&i===a.DESKTOP_WIDE){this.initializeBreadcrumb()}}componentWillLoad(){this.viewPortWidth=c();this.initializeBreadcrumb()}componentWillRender(){if(this.viewPortWidth!==a.MOBILE&&this.hasOverflow){this.checkEllipsisOrOverflowMenu();this.hasOverflow=false}}componentDidRender(){if(this.collapsedElementsRef){this.anchorElements=Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"))}if(this.viewPortWidth!==a.MOBILE){requestAnimationFrame((()=>{if(this.wrapElement.scrollWidth>this.wrapElement.clientWidth){if(!this.hasOverflow){this.hasOverflow=true}}}))}}initializeBreadcrumb(){if(this.viewPortWidth===a.MOBILE){this.pathsList=this.getPathsItemsList().filter((i=>!!i.path))}else{this.pathsList=this.getPathsItemsList()}this.homepageNode=this.pathsList.shift();this.pathListCopy=[...this.pathsList];this.collapsedElements=[];if(this.pathsList.length>this.maxNodesToShow){this.collapsedElements=this.pathsList.splice(0,this.pathsList.length-2)}}checkEllipsisOrOverflowMenu(){for(let i=0;i<this.pathsList.length;i++){if(this.pathsList[i].text.length<=this.truncateChar){continue}if(this.truncatePosition>0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition));this.pathsList.splice(0,this.truncatePosition);this.truncatePosition=0;return}else if(this.truncatePosition===0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition+1));this.pathsList.splice(0,this.truncatePosition+1);this.truncatePosition=null;return}if(i!==this.pathsList.length-1){const t=this.truncateWithEllipsis(this.pathsList[i].text,this.truncateChar);this.currentEllipsisText=this.pathsList[i].text;this.pathsList[i].text=t;this.pathsList[i].hasTooltip=true;this.truncatePosition=i;return}}}truncateWithEllipsis(i,t){if(i.length<=t){return i}return i.substring(0,t-1)+"&mldr;"}getPathsItemsList(){return Array.from(this.hostElement.children).map((i=>({text:i.textContent,path:i.href,hasTooltip:false})))}renderHomepageNode(){return e("li",null,e("a",{class:{"homepage-text":this.homepageVariant===n.TEXT},href:this.homepageNode.path,onClick:i=>this.handlePreventFollowUrl(i,this.homepageNode),innerHTML:this.homepageVariant===n.ICON?`<z-icon name="home" />`:this.homepageNode.text||"Home"}),this.pathsList.length>0&&e("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))}togglePopover(){if(!this.collapsedElementsRef.open){this.collapsedElementsRef.open=true}}handlePreventFollowUrl(i,t){if(this.preventFollowUrl){i.preventDefault();this.clickOnNode.emit(t.path)}}handleOverflowMenuAccessibility(i){const t=this.anchorElements.length;if(i.key===l.TAB){i.preventDefault();return}i.stopPropagation();const e=[l.ARROW_DOWN,l.ARROW_UP];if(e.includes(i.key)){i.preventDefault();if(i.key===l.ARROW_DOWN){this.currentIndex=t===this.currentIndex+1?0:this.currentIndex+1}if(i.key===l.ARROW_UP){this.currentIndex=this.currentIndex<=0?t-1:this.currentIndex-1}this.anchorElements[this.currentIndex].focus()}if(i.key===l.ESC){this.triggerButton.focus()}}renderOverflowMenu(){return e("li",null,e("z-popover",{class:"hidden-paths-popover",ref:i=>this.collapsedElementsRef=i,bindTo:this.triggerButton,position:h.BOTTOM_RIGHT,closable:true,showArrow:true},e("div",{class:"popover-content"},e("z-list",null,e("z-list-group",{size:p.SMALL},this.collapsedElements.map(((i,t,s)=>e("div",null,e("z-list-element",{clickable:true},e("a",{class:"text-ellipsis",href:i.path,onClick:t=>this.handlePreventFollowUrl(t,i),onKeyDown:i=>this.handleOverflowMenuAccessibility(i),innerHTML:i.text})),t<s.length-1&&e("z-divider",{color:"color-surface03"})))))))),e("button",{class:"dots",ref:i=>this.triggerButton=i,"aria-label":"Mostra più breadcrumb","aria-haspopup":"true",onClick:()=>{this.togglePopover()},onKeyDown:i=>{d(i,this.togglePopover.bind(this));setTimeout((()=>{this.anchorElements[0].focus()}),100)},innerHTML:"&mldr;"}),this.pathsList.length>0&&e("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))}renderMobileItems(){const i=this.pathsList[this.pathsList.length-1];if(!i){return}return e("li",null,e("a",{"aria-current":i.path?undefined:"page",href:i.path,onClick:t=>this.handlePreventFollowUrl(t,i)},e("z-icon",{name:"chevron-left"}),e("span",{class:{"missing-path":!i.path,"text-ellipsis":true}},i.text)))}renderItems(){let i;return[this.renderHomepageNode(),this.collapsedElements.length>0&&this.renderOverflowMenu(),...this.pathsList.map(((t,s)=>e("li",null,t.hasTooltip&&e("z-popover",{class:"full-path-tooltip",bindTo:i,open:this.popoverEllipsisOpen,position:h.BOTTOM_RIGHT,closable:false,showArrow:true},e("span",{class:"tooltip-content"},this.currentEllipsisText)),e("a",{class:{"missing-path":!t.path},ref:t=>i=t,"aria-current":t.path?undefined:"page",href:t.path,onClick:i=>this.handlePreventFollowUrl(i,t),onMouseOver:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=true}},onMouseLeave:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=false}},innerHTML:t.text}),s!==this.pathsList.length-1&&e("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))))]}render(){return e(s,{key:"21c4307fce9f47f07e2f981f6aa6a6c55c93bd52",style:{"--line-clamp-popover":`${this.overflowMenuItemRows}`}},e("nav",{key:"8e9e10a75e0659967e06479e62bdbb16585d41b9",ref:i=>this.wrapElement=i,"aria-label":"Breadcrumb",class:{semibold:this.pathStyle===r.SEMIBOLD,underlined:this.pathStyle===r.UNDERLINED}},e("ol",{key:"c34f110b205428e846187ece3fb1bece26b9a808"},this.viewPortWidth===a.MOBILE?this.renderMobileItems():this.renderItems())))}get hostElement(){return o(this)}static get watchers(){return{maxNodesToShow:[{handlePropChange:0}],viewPortWidth:[{handleResizeUp:0}]}}};f.style=u();export{f as z_breadcrumb};
-//# sourceMappingURL=p-57ba851d.entry.js.map

package/www/build/p-57ba851d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZBreadcrumb","constructor","hostRef","this","pathStyle","BreadcrumbPathStyle","UNDERLINED","homepageVariant","BreadcrumbHomepageVariant","ICON","maxNodesToShow","preventFollowUrl","overflowMenuItemRows","truncateChar","hasOverflow","popoverEllipsisOpen","collapsedElements","currentIndex","truncatePosition","handleResize","viewPortWidth","getDevice","Device","MOBILE","wrapElement","scrollWidth","clientWidth","handlePropChange","initializeBreadcrumb","handleResizeUp","newValue","oldValue","TABLET","DESKTOP","DESKTOP_WIDE","componentWillLoad","componentWillRender","checkEllipsisOrOverflowMenu","componentDidRender","collapsedElementsRef","anchorElements","Array","from","hostElement","shadowRoot","querySelectorAll","requestAnimationFrame","pathsList","getPathsItemsList","filter","item","path","homepageNode","shift","pathListCopy","length","splice","i","text","push","truncatedString","truncateWithEllipsis","currentEllipsisText","hasTooltip","str","maxLength","substring","children","map","textContent","href","renderHomepageNode","h","class","TEXT","onClick","e","handlePreventFollowUrl","innerHTML","name","togglePopover","open","preventDefault","clickOnNode","emit","handleOverflowMenuAccessibility","anchorElementsLenght","key","KeyboardCode","TAB","stopPropagation","arrows","ARROW_DOWN","ARROW_UP","includes","focus","ESC","triggerButton","renderOverflowMenu","ref","val","bindTo","position","PopoverPosition","BOTTOM_RIGHT","closable","showArrow","size","ListSize","SMALL","index","array","clickable","onKeyDown","color","el","handleKeyboardSubmit","bind","setTimeout","renderMobileItems","secondToLastPath","undefined","renderItems","trigger","onMouseOver","onMouseLeave","render","Host","style","semibold","SEMIBOLD","underlined"],"sources":["src/components/z-breadcrumb/styles.css?tag=z-breadcrumb&encapsulation=shadow","src/components/z-breadcrumb/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --line-clamp-popover: 0;\n  --line-clamp-mobile: 1;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\nnav {\n  display: flex;\n  align-items: center;\n}\n\nol {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n  column-gap: var(--space-unit);\n  list-style: none;\n}\n\nli {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  column-gap: var(--space-unit);\n}\n\nol li > a,\nol li > button {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\na:focus,\nbutton:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\na {\n  color: var(--color-text-link-blue);\n  white-space: nowrap;\n}\n\na.missing-path {\n  color: var(--color-default-text);\n}\n\n.text-ellipsis {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--line-clamp-mobile);\n  line-clamp: var(--line-clamp-mobile);\n  text-overflow: ellipsis;\n  white-space: initial;\n}\n\nnav.semibold > ol > li > a:not(.missing-path),\nnav.semibold > ol > li > button {\n  font-weight: var(--font-sb);\n  text-decoration: none;\n}\n\nnav.underlined a,\nnav.underlined button {\n  text-decoration: underline;\n}\n\nz-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n\n  display: block;\n  fill: var(--color-text-link-blue);\n}\n\nz-icon.separator {\n  --z-icon-width: 10px;\n  --z-icon-height: 10px;\n\n  fill: var(--gray500);\n}\n\nbutton.dots {\n  display: inline-block;\n  color: var(--color-text-link-blue);\n  cursor: pointer;\n}\n\n.hidden-paths-popover .popover-content {\n  max-width: 302px;\n  padding: calc(var(--space-unit) / 2) var(--space-unit);\n  text-align: left;\n}\n\n.hidden-paths-popover .popover-content a {\n  font-weight: var(--font-rg);\n  text-decoration: none;\n}\n\n.hidden-paths-popover {\n  --z-popover-theme--surface: var(--color-background);\n  --z-popover-padding: 0;\n  --background-color-list-element: var(--color-background);\n}\n\n.hidden-paths-popover::before,\n.full-path-tooltip::before {\n  --arrow-edge-offset: calc(100% - (var(--space-unit) * 2.55));\n}\n\n.full-path-tooltip {\n  --z-popover-theme--surface: var(--color-surface05);\n  --z-popover-theme--text: var(--color-text-inverse);\n  --z-popover-padding: 0;\n}\n\n.tooltip-content {\n  padding: 0 var(--space-unit);\n  font-size: var(--font-size-2);\n}\n\n@media (min-width: 768px) {\n  .text-ellipsis {\n    -webkit-line-clamp: var(--line-clamp-popover);\n    line-clamp: var(--line-clamp-popover);\n  }\n}\n\n@media (max-width: 767px) {\n  li a {\n    display: flex;\n    align-items: center;\n    column-gap: var(--space-unit);\n  }\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  BreadcrumbHomepageVariant,\n  BreadcrumbPath,\n  BreadcrumbPathStyle,\n  Device,\n  KeyboardCode,\n  ListSize,\n  PopoverPosition,\n} from \"../../beans\";\nimport {getDevice, handleKeyboardSubmit} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-breadcrumb\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBreadcrumb implements ComponentInterface {\n  /* Accessibility references */\n  /* Overflow-menu: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */\n  /* Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ */\n  /* Focus on multiline link: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html */\n\n  @Element() hostElement: HTMLZBreadcrumbElement;\n\n  /** [optional] Sets the path style */\n  @Prop({reflect: true})\n  pathStyle?: BreadcrumbPathStyle = BreadcrumbPathStyle.UNDERLINED;\n\n  /** [optional] Variant of first node */\n  @Prop()\n  homepageVariant?: BreadcrumbHomepageVariant = BreadcrumbHomepageVariant.ICON;\n\n  /** [optional] Sets max number of element to show */\n  @Prop()\n  maxNodesToShow? = 5;\n\n  /** [optional] Controls the behaviour on <a> tag click/enter */\n  @Prop()\n  preventFollowUrl? = false;\n\n  /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */\n  @Prop()\n  overflowMenuItemRows? = 0;\n\n  /** [optional] Sets the maximun number of chars per single node */\n  @Prop()\n  truncateChar? = 30;\n\n  /** Handle mobile */\n  @State()\n  viewPortWidth: Device;\n\n  /** Detect whether the length of the nodes shown exceeds the container length */\n  @State()\n  hasOverflow = false;\n\n  @State()\n  popoverEllipsisOpen = false;\n\n  /** Emitted when preventFollowUrl=true to handle custom page transition */\n  @Event()\n  clickOnNode: EventEmitter<BreadcrumbPath[\"path\"]>;\n\n  private pathsList: BreadcrumbPath[];\n\n  private pathListCopy: BreadcrumbPath[];\n\n  private collapsedElements: BreadcrumbPath[] = [];\n\n  private collapsedElementsRef: HTMLZPopoverElement;\n\n  private triggerButton: HTMLButtonElement;\n\n  private wrapElement: HTMLElement;\n\n  private currentIndex = 0;\n\n  private homepageNode: BreadcrumbPath;\n\n  private anchorElements;\n\n  private currentEllipsisText: string;\n\n  private truncatePosition = null;\n\n  @Listen(\"resize\", {target: \"window\"})\n  handleResize(): void {\n    this.viewPortWidth = getDevice();\n    if (\n      this.viewPortWidth !== Device.MOBILE &&\n      this.wrapElement &&\n      this.wrapElement.scrollWidth > this.wrapElement.clientWidth\n    ) {\n      this.hasOverflow = true;\n    }\n  }\n  // eslint-disable-next-line lines-between-class-members\n  @Watch(\"maxNodesToShow\")\n  handlePropChange(): void {\n    this.initializeBreadcrumb();\n  }\n\n  @Watch(\"viewPortWidth\")\n  handleResizeUp(newValue: Device, oldValue: Device): void {\n    if (\n      newValue === Device.MOBILE ||\n      (oldValue === Device.MOBILE && newValue === Device.TABLET) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)\n    ) {\n      this.initializeBreadcrumb();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.viewPortWidth = getDevice();\n    this.initializeBreadcrumb();\n  }\n\n  componentWillRender(): void {\n    if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {\n      this.checkEllipsisOrOverflowMenu();\n      this.hasOverflow = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.collapsedElementsRef) {\n      this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll(\"z-list-group a\"));\n    }\n\n    if (this.viewPortWidth !== Device.MOBILE) {\n      requestAnimationFrame(() => {\n        if (this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n          if (!this.hasOverflow) {\n            this.hasOverflow = true;\n          }\n        }\n      });\n    }\n  }\n\n  private initializeBreadcrumb(): void {\n    if (this.viewPortWidth === Device.MOBILE) {\n      this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);\n    } else {\n      this.pathsList = this.getPathsItemsList();\n    }\n    this.homepageNode = this.pathsList.shift();\n    this.pathListCopy = [...this.pathsList];\n    this.collapsedElements = [];\n    if (this.pathsList.length > this.maxNodesToShow) {\n      this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);\n    }\n  }\n\n  private checkEllipsisOrOverflowMenu(): void {\n    for (let i = 0; i < this.pathsList.length; i++) {\n      if (this.pathsList[i].text.length <= this.truncateChar) {\n        continue;\n      }\n\n      if (this.truncatePosition > 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition));\n        this.pathsList.splice(0, this.truncatePosition);\n        this.truncatePosition = 0;\n\n        return;\n      } else if (this.truncatePosition === 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition + 1));\n        this.pathsList.splice(0, this.truncatePosition + 1);\n        this.truncatePosition = null;\n\n        return;\n      }\n\n      if (i !== this.pathsList.length - 1) {\n        const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);\n        this.currentEllipsisText = this.pathsList[i].text;\n        this.pathsList[i].text = truncatedString;\n        this.pathsList[i].hasTooltip = true;\n        this.truncatePosition = i;\n\n        return;\n      }\n    }\n  }\n\n  private truncateWithEllipsis(str: string, maxLength: number): string {\n    if (str.length <= maxLength) {\n      return str;\n    }\n\n    return str.substring(0, maxLength - 1) + \"&mldr;\";\n  }\n\n  private getPathsItemsList(): BreadcrumbPath[] {\n    return Array.from(this.hostElement.children).map((item: HTMLAnchorElement) => {\n      return {\n        text: item.textContent,\n        path: item.href,\n        hasTooltip: false,\n      };\n    });\n  }\n\n  private renderHomepageNode(): HTMLLIElement {\n    return (\n      <li>\n        <a\n          class={{\n            \"homepage-text\": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,\n          }}\n          href={this.homepageNode.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, this.homepageNode)}\n          innerHTML={\n            this.homepageVariant === BreadcrumbHomepageVariant.ICON\n              ? `<z-icon name=\"home\" />`\n              : this.homepageNode.text || \"Home\"\n          }\n        />\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private togglePopover(): void {\n    if (!this.collapsedElementsRef.open) {\n      this.collapsedElementsRef.open = true;\n    }\n  }\n\n  private handlePreventFollowUrl(e: MouseEvent, item): void {\n    if (this.preventFollowUrl) {\n      e.preventDefault();\n      this.clickOnNode.emit(item.path);\n    }\n  }\n\n  private handleOverflowMenuAccessibility(e: KeyboardEvent): void {\n    const anchorElementsLenght = this.anchorElements.length;\n    if (e.key === KeyboardCode.TAB) {\n      e.preventDefault();\n\n      return;\n    }\n    e.stopPropagation();\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (arrows.includes(e.key as KeyboardCode)) {\n      e.preventDefault();\n\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;\n      }\n      if (e.key === KeyboardCode.ARROW_UP) {\n        this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;\n      }\n\n      this.anchorElements[this.currentIndex].focus();\n    }\n\n    if (e.key === KeyboardCode.ESC) {\n      this.triggerButton.focus();\n    }\n  }\n\n  private renderOverflowMenu(): HTMLLIElement {\n    return (\n      <li>\n        <z-popover\n          class=\"hidden-paths-popover\"\n          ref={(val) => (this.collapsedElementsRef = val as HTMLZPopoverElement)}\n          bindTo={this.triggerButton}\n          position={PopoverPosition.BOTTOM_RIGHT}\n          closable\n          showArrow\n        >\n          <div class=\"popover-content\">\n            <z-list>\n              <z-list-group size={ListSize.SMALL}>\n                {this.collapsedElements.map((item, index, array) => {\n                  return (\n                    <div>\n                      <z-list-element clickable>\n                        <a\n                          class=\"text-ellipsis\"\n                          href={item.path}\n                          onClick={(e) => this.handlePreventFollowUrl(e, item)}\n                          onKeyDown={(e) => this.handleOverflowMenuAccessibility(e)}\n                          innerHTML={item.text}\n                        />\n                      </z-list-element>\n                      {index < array.length - 1 && <z-divider color=\"color-surface03\"></z-divider>}\n                    </div>\n                  );\n                })}\n              </z-list-group>\n            </z-list>\n          </div>\n        </z-popover>\n        <button\n          class=\"dots\"\n          ref={(el) => (this.triggerButton = el)}\n          aria-label=\"Mostra più breadcrumb\"\n          aria-haspopup=\"true\"\n          onClick={() => {\n            this.togglePopover();\n          }}\n          onKeyDown={(e) => {\n            handleKeyboardSubmit(e, this.togglePopover.bind(this));\n            setTimeout(() => {\n              this.anchorElements[0].focus();\n            }, 100);\n          }}\n          innerHTML=\"&mldr;\"\n        ></button>\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private renderMobileItems(): HTMLLIElement {\n    // show only the second to last element\n    const secondToLastPath = this.pathsList[this.pathsList.length - 1];\n\n    if (!secondToLastPath) {\n      return;\n    }\n\n    return (\n      <li>\n        <a\n          aria-current={secondToLastPath.path ? undefined : \"page\"}\n          href={secondToLastPath.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, secondToLastPath)}\n        >\n          <z-icon name=\"chevron-left\" />\n          <span\n            class={{\n              \"missing-path\": !secondToLastPath.path,\n              \"text-ellipsis\": true,\n            }}\n          >\n            {secondToLastPath.text}\n          </span>\n        </a>\n      </li>\n    );\n  }\n\n  private renderItems(): HTMLElement[] {\n    let trigger;\n\n    return [\n      this.renderHomepageNode(),\n      this.collapsedElements.length > 0 && this.renderOverflowMenu(),\n      ...this.pathsList.map((item, index) => (\n        <li>\n          {item.hasTooltip && (\n            <z-popover\n              class=\"full-path-tooltip\"\n              bindTo={trigger}\n              open={this.popoverEllipsisOpen}\n              position={PopoverPosition.BOTTOM_RIGHT}\n              closable={false}\n              showArrow\n            >\n              <span class=\"tooltip-content\">{this.currentEllipsisText}</span>\n            </z-popover>\n          )}\n          <a\n            class={{\"missing-path\": !item.path}}\n            ref={(val) => (trigger = val)}\n            aria-current={item.path ? undefined : \"page\"}\n            href={item.path}\n            onClick={(e) => this.handlePreventFollowUrl(e, item)}\n            onMouseOver={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = true;\n              }\n            }}\n            onMouseLeave={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = false;\n              }\n            }}\n            innerHTML={item.text}\n          />\n          {index !== this.pathsList.length - 1 && (\n            <z-icon\n              class=\"separator\"\n              name=\"chevron-right\"\n              aria-hidden=\"true\"\n            />\n          )}\n        </li>\n      )),\n    ];\n  }\n\n  render(): HTMLZBreadcrumbElement {\n    return (\n      <Host style={{\"--line-clamp-popover\": `${this.overflowMenuItemRows}`}}>\n        <nav\n          ref={(val) => (this.wrapElement = val)}\n          aria-label=\"Breadcrumb\"\n          class={{\n            semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n            underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n          }}\n        >\n          <ol>{this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()}</ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/www/build/p-5ecdc465.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as t,h as e}from"./p-BcDWN4F1.js";import{P as r}from"./p-DdetsoIY.js";const s=()=>`:host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-default-text);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));--z-tooltip-padding:var(--space-unit)}z-popover{--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-padding:var(--z-tooltip-padding);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}`;const p=class{constructor(e){o(this,e);this.openChange=t(this,"openChange",7);this.position=r.AUTO;this.dark=false;this.open=false;this.closable=true}onPopoverOpenChange(){this.open=this.popoverEl.open}render(){return e("z-popover",{key:"b462c3e9652960d90fa6f5d00bd56077b17e1142",ref:o=>this.popoverEl=o,bindTo:this.bindTo,open:this.open,position:this.position,closable:this.closable,center:true,showArrow:true,onOpenChange:o=>this.openChange.emit(o.detail)},e("slot",{key:"bdfad2da721028ad38032fc20bd478655227f08d"}))}};p.style=s();export{p as z_tooltip};
-//# sourceMappingURL=p-5ecdc465.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZTooltip","constructor","hostRef","this","position","PopoverPosition","AUTO","dark","open","closable","onPopoverOpenChange","popoverEl","render","h","key","ref","el","bindTo","center","showArrow","onOpenChange","event","openChange","emit","detail"],"sources":["src/components/z-tooltip/styles.css?tag=z-tooltip&encapsulation=shadow","src/components/z-tooltip/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-tooltip-theme--surface: Background color of the popover.\n   * @prop --z-tooltip-theme--text: Foreground color of the popover.\n   * @prop --z-tooltip-shadow-filter: Drop-shadow filter of the popover.\n   * @prop --z-tooltip-padding: Padding of the popover. The default is `8px` (`--space-unit`).\n   */\n  --z-tooltip-theme--surface: var(--color-surface01);\n  --z-tooltip-theme--text: var(--color-default-text);\n  --z-tooltip-shadow-filter: drop-shadow(0 1px 2px var(--shadow-color-base));\n  --z-tooltip-padding: var(--space-unit);\n}\n\nz-popover {\n  --z-popover-theme--surface: var(--z-tooltip-theme--surface);\n  --z-popover-theme--text: var(--z-tooltip-theme--text);\n  --z-popover-padding: var(--z-tooltip-padding);\n  --z-popover-shadow-filter: var(--z-tooltip-shadow-filter);\n}\n\n:host([dark]) z-popover {\n  --z-popover-theme--surface: var(--color-surface05);\n  --z-popover-theme--text: var(--color-text-inverse);\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Listen, Prop, h} from \"@stencil/core\";\nimport {PopoverPosition} from \"../../beans\";\n\n/**\n * Tooltip component.\n * It is basically a wrapper for the `<z-popover>` component with custom configuration.\n */\n@Component({\n  tag: \"z-tooltip\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTooltip implements ComponentInterface {\n  /** Tooltip position. */\n  @Prop({reflect: true})\n  position: PopoverPosition = PopoverPosition.AUTO;\n\n  /** Enable tooltip dark mode. */\n  @Prop({reflect: true})\n  dark = false;\n\n  /**\n   * The open state of the tooltip.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * The selector or the element bound with the tooltip.\n   */\n  @Prop()\n  bindTo?: string | HTMLElement;\n\n  /**\n   * Reflects `closable` prop of the popover.\n   * \"If true, the popover can be closed by clicking outside of it or pressing the escape key.\n   * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\"\n   */\n  @Prop()\n  closable = true;\n\n  /**\n   * Propagation of the `openChange` event from the internal `z-popover` to allow listening to it directly on `z-tooltip`.\n   * This is necessary to keep the internal state of the `open` prop in sync when the popover is closed by user interaction instead of programmatically.\n   */\n  @Event()\n  openChange: EventEmitter<{open: boolean}>;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  @Listen(\"openChange\")\n  onPopoverOpenChange(): void {\n    this.open = this.popoverEl.open;\n  }\n\n  render(): HTMLZPopoverElement {\n    return (\n      <z-popover\n        ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n        bindTo={this.bindTo}\n        open={this.open}\n        position={this.position}\n        closable={this.closable}\n        center\n        showArrow\n        onOpenChange={(event) => this.openChange.emit(event.detail)}\n      >\n        <slot></slot>\n      </z-popover>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,IAAM,yjB,MCYXC,EAAQ,MALrB,WAAAC,CAAAC,G,iDAQEC,KAAAC,SAA4BC,EAAgBC,KAI5CH,KAAAI,KAAO,MAMPJ,KAAAK,KAAO,MAcPL,KAAAM,SAAW,IAgCZ,CApBC,mBAAAC,GACEP,KAAKK,KAAOL,KAAKQ,UAAUH,I,CAG7B,MAAAI,GACE,OACEC,EAAA,aAAAC,IAAA,2CACEC,IAAMC,GAAQb,KAAKQ,UAAYK,EAC/BC,OAAQd,KAAKc,OACbT,KAAML,KAAKK,KACXJ,SAAUD,KAAKC,SACfK,SAAUN,KAAKM,SACfS,OAAM,KACNC,UAAS,KACTC,aAAeC,GAAUlB,KAAKmB,WAAWC,KAAKF,EAAMG,SAEpDX,EAAA,QAAAC,IAAA,6C","ignoreList":[]}