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

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

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

package/www/build/p-657802ce.entry.js

@@ -0,0 +1,2 @@
+import{r as a,c as o,h as r,d as i}from"./p-BcDWN4F1.js";import{e as s,a0 as e}from"./p-DdetsoIY.js";const t=()=>`:host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);--z-accordion-label-color:var(--color-default-text);--z-accordion-disabled-label-color:var(--color-text03);--z-accordion-content-bg:var(--color-surface01);--z-accordion-content-fg:var(--color-default-text);--z-accordion-hover-color:var(--color-surface02);--z-accordion-left-padding:calc(var(--space-unit) * 2);--z-accordion-right-padding:var(--space-unit);--z-accordion-label-font-weight:var(--font-sb);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([variant="background"]){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}:host([variant="background"][shadow]){box-shadow:var(--shadow-2)}details{background-color:transparent}summary{--summary-x-small-height:32px;--summary-small-height:36px;--summary-big-height:44px;--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit);position:relative;display:flex;min-height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)     var(--z-accordion-left-padding);background-color:var(--z-accordion-bg);column-gap:var(--space-unit);cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}:host([size="x-small"]) summary{--summary-height:var(--summary-x-small-height)}:host([size="small"]) summary{--summary-height:var(--summary-small-height)}:host(:is([size="x-small"],[size="small"])) summary{--summary-y-padding:calc(var(--space-unit) / 2)}:host([variant="background"]) summary{padding-right:calc(var(--space-unit) * 2);border-radius:calc(var(--border-radius) - var(--border-size-small))}:host([variant="background"][open]) summary{border-bottom-left-radius:0;border-bottom-right-radius:0}:host([is-disabled]) summary{cursor:default}summary:focus:focus-visible{background-color:var(--z-accordion-hover-color);box-shadow:var(--shadow-focus-primary);outline:none}summary::before,:host([highlight][variant="background"]) .z-accordion-content::before{position:absolute;top:0;left:0;display:block;width:var(--space-unit);height:100%;content:""}:host([highlight][variant="background"]) summary::before{border-top-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight][variant="background"]:not([open])) summary::before,:host([highlight][variant="background"][open]) .z-accordion-content::before{border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight]) summary::before,:host([highlight][variant="background"]) .z-accordion-content::before{background-color:var(--z-accordion-highlight-color, transparent)}:host([is-disabled][highlight]) summary::before,:host([is-disabled][highlight][variant="background"]) .z-accordion-content::before{background-color:var(--z-accordion-disabled-label-color)}summary>z-icon{fill:var(--z-accordion-label-color)}:host([is-disabled]) summary>z-icon{fill:var(--z-accordion-disabled-label-color)}.z-accordion-label{color:var(--z-accordion-label-color);font-size:var(--font-size-3);font-weight:var(--z-accordion-label-font-weight)}:host([size="x-small"]) .z-accordion-label{font-size:var(--font-size-2)}:host([size="x-small"]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:16px;--z-icon-height:16px}.z-accordion-tags{display:flex;align-items:center;column-gap:calc(var(--space-unit) / 2)}summary z-icon.z-accordion-chevron{margin-left:auto}.z-accordion-content{position:relative;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);background-color:var(--z-accordion-content-bg);color:var(--z-accordion-content-fg);font-size:var(--font-size-2);}:host(:is([size="x-small"],[size="small"])) .z-accordion-content{padding-bottom:var(--space-unit)}:host([size="x-small"]) .z-accordion-content{font-size:var(--font-size-1)}:host([variant="background"]) .z-accordion-content{padding-right:calc(var(--space-unit) * 2);border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small));border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}:host([is-disabled]) .z-accordion-label{color:var(--z-accordion-disabled-label-color)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot="tag"]){--z-tag-bg:var(--z-accordion-disabled-label-color) !important;--z-tag-text-color:var(--color-text-inverse) !important}@media (hover: hover){summary:focus:focus-visible{position:relative;z-index:1}:host(:not([is-disabled])) summary:hover{background-color:var(--z-accordion-hover-color)}:host(:not([is-disabled])) summary:hover .z-accordion-label{text-decoration:underline}}@media (hover: none){:host([size]) summary{--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit)}:host([size]) .z-accordion-label{font-size:var(--font-size-3)}:host([size]) .z-accordion-content{font-size:var(--font-size-2)}:host([size]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:18px;--z-icon-height:18px}}`;const c=class{constructor(r){a(this,r);this.toggled=o(this,"toggled",7);this.size=s.BIG;this.isDisabled=false;this.open=false;this.highlight=false;this.variant=e.DEFAULT;this.shadow=true;this.hasSlottedTags=false}onDisabledChange(){if(this.isDisabled){this.open=false}}checkSlottedTags(){this.hasSlottedTags=!!this.host.querySelector('[slot="tag"]')}onDetailsToggle(){if(this.isDisabled){this.open=false;this.detailsElm.open=false;return}this.open=this.detailsElm.open;this.toggled.emit(this.open)}componentWillLoad(){this.checkSlottedTags()}render(){return r("details",{key:"0400f292718d11e914939c7276fff21a8d07b5a3",ref:a=>this.detailsElm=a,onToggle:this.onDetailsToggle.bind(this),open:this.open},r("summary",{key:"215728fe582184bb8f39815e96fdc4a34f983ea6",tabIndex:this.isDisabled?-1:null,part:"summary"},this.icon&&r("z-icon",{key:"05e95bad3e66ab3730711a9f5cd1077015ef48d7",class:"z-accordion-label-icon",name:this.icon}),r("span",{key:"babacc83020de2cdf14588e184d8834d0eb87029",class:"z-accordion-label"},this.label),this.hasSlottedTags&&r("span",{key:"01ba1004d19c5e9b394f286f2efb0112f4c70e1f",class:"z-accordion-tags"},r("slot",{key:"e6a74b5c588056f46dd07b28e24f4cd9b10cea8a",name:"tag",onSlotchange:()=>this.checkSlottedTags()})),r("z-icon",{key:"c71ca8f7f20de925508801cffe7cdb690a21dc4b",class:"z-accordion-chevron",name:this.open?"chevron-up":"chevron-down"})),!this.isDisabled&&r("div",{key:"96abd1bf924f77162cee791269701180f22f096e",class:"z-accordion-content",part:"content"},r("slot",{key:"8a1618b8228c985ad7d229ca78f056af6c2dd469"})))}get host(){return i(this)}static get watchers(){return{isDisabled:[{onDisabledChange:0}]}}};c.style=t();export{c as z_accordion};
+//# sourceMappingURL=p-657802ce.entry.js.map

package/www/build/{p-5c012917.entry.js.map → p-657802ce.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZAccordion","constructor","hostRef","this","size","ControlSize","BIG","isDisabled","open","highlight","variant","AccordionVariant","DEFAULT","shadow","hasSlottedTags","onDisabledChange","checkSlottedTags","host","querySelector","onDetailsToggle","detailsElm","toggled","emit","componentWillLoad","render","h","key","ref","elm","onToggle","bind","tabIndex","part","icon","class","name","label","onSlotchange"],"sources":["src/components/z-accordion/styles.css?tag=z-accordion&encapsulation=shadow","src/components/z-accordion/index.tsx"],"sourcesContent":[":host,\n:host *,\n:host ::slotted(*) {\n  box-sizing: border-box;\n}\n\n:host {\n  /**\n   * @prop --z-accordion-highlight-color: Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n   * @prop --z-accordion-bg: Background color of the summary. Default: `--color-surface02`.\n   * @prop --z-accordion-label-color: Label color. Default: `--color-default-text`.\n   * @prop --z-accordion-disabled-label-color: Label color when disabled. Default: `--color-text03`.\n   * @prop --z-accordion-content-bg: Background color of the accordion. Default: `--color-surface02`.\n   * @prop --z-accordion-content-fg: Content text color. Default: `--color-default-text`.\n   * @prop --z-accordion-hover-color: Hover color of the summary. Default: `--color-surface03`.\n   * @prop --z-accordion-left-padding: Left padding of the summary. Default: `--space-unit` * 2.\n   * @prop --z-accordion-right-padding: Right padding of the summary. Default: `--space-unit`.\n   * @prop --z-accordion-label-font-weight: Font weight of the summary label. Default: `--font-sb`.\n   */\n  --z-accordion-highlight-color: transparent;\n  --z-accordion-bg: var(--color-surface01);\n  --z-accordion-label-color: var(--color-default-text);\n  --z-accordion-disabled-label-color: var(--color-text03);\n  --z-accordion-content-bg: var(--color-surface01);\n  --z-accordion-content-fg: var(--color-default-text);\n  --z-accordion-hover-color: var(--color-surface02);\n  --z-accordion-left-padding: calc(var(--space-unit) * 2);\n  --z-accordion-right-padding: var(--space-unit);\n  --z-accordion-label-font-weight: var(--font-sb);\n\n  display: block;\n  border-top: var(--border-size-small) solid var(--color-surface03);\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host([variant=\"background\"]) {\n  border: var(--border-size-small) solid var(--color-surface03);\n  border-radius: var(--border-radius);\n}\n\n:host([variant=\"background\"][shadow]) {\n  box-shadow: var(--shadow-2);\n}\n\ndetails {\n  background-color: transparent;\n}\n\nsummary {\n  --summary-x-small-height: 32px;\n  --summary-small-height: 36px;\n  --summary-big-height: 44px;\n  --summary-height: var(--summary-big-height);\n  --summary-y-padding: var(--space-unit);\n\n  position: relative;\n  display: flex;\n  min-height: var(--summary-height);\n  align-items: center;\n  padding: var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n    var(--z-accordion-left-padding);\n  background-color: var(--z-accordion-bg);\n  column-gap: var(--space-unit);\n  cursor: pointer;\n  list-style: none;\n}\n\n/* remove marker on safari */\nsummary::-webkit-details-marker {\n  display: none;\n}\n\n:host([size=\"x-small\"]) summary {\n  --summary-height: var(--summary-x-small-height);\n}\n\n:host([size=\"small\"]) summary {\n  --summary-height: var(--summary-small-height);\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) summary {\n  --summary-y-padding: calc(var(--space-unit) / 2);\n}\n\n:host([variant=\"background\"]) summary {\n  padding-right: calc(var(--space-unit) * 2);\n\n  /* border-radius of the accordion - width of the accordion's border */\n  border-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([variant=\"background\"][open]) summary {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n:host([is-disabled]) summary {\n  cursor: default;\n}\n\nsummary:focus:focus-visible {\n  background-color: var(--z-accordion-hover-color);\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nsummary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  width: var(--space-unit);\n  height: 100%;\n  content: \"\";\n}\n\n:host([highlight][variant=\"background\"]) summary::before {\n  /* border-radius of the accordion - width of the accordion's border */\n  border-top-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight][variant=\"background\"]:not([open])) summary::before,\n:host([highlight][variant=\"background\"][open]) .z-accordion-content::before {\n  /* border-radius of the accordion - width of the accordion's border */\n  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight]) summary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n  background-color: var(--z-accordion-highlight-color, transparent);\n}\n\n:host([is-disabled][highlight]) summary::before,\n:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before {\n  background-color: var(--z-accordion-disabled-label-color);\n}\n\nsummary > z-icon {\n  fill: var(--z-accordion-label-color);\n}\n\n:host([is-disabled]) summary > z-icon {\n  fill: var(--z-accordion-disabled-label-color);\n}\n\n.z-accordion-label {\n  color: var(--z-accordion-label-color);\n  font-size: var(--font-size-3); /* for \"small\" and \"big\" sizes */\n  font-weight: var(--z-accordion-label-font-weight);\n}\n\n:host([size=\"x-small\"]) .z-accordion-label {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n.z-accordion-tags {\n  display: flex;\n  align-items: center;\n  column-gap: calc(var(--space-unit) / 2);\n}\n\nsummary z-icon.z-accordion-chevron {\n  margin-left: auto;\n}\n\n.z-accordion-content {\n  position: relative;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);\n  background-color: var(--z-accordion-content-bg);\n  color: var(--z-accordion-content-fg);\n  font-size: var(--font-size-2); /* for \"small\" and \"big\" sizes */\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) .z-accordion-content {\n  padding-bottom: var(--space-unit);\n}\n\n:host([size=\"x-small\"]) .z-accordion-content {\n  font-size: var(--font-size-1);\n}\n\n:host([variant=\"background\"]) .z-accordion-content {\n  padding-right: calc(var(--space-unit) * 2);\n  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([is-disabled]) .z-accordion-label {\n  color: var(--z-accordion-disabled-label-color);\n}\n\n:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]) {\n  --z-tag-bg: var(--z-accordion-disabled-label-color) !important;\n  --z-tag-text-color: var(--color-text-inverse) !important;\n}\n\n@media (hover: hover) {\n  summary:focus:focus-visible {\n    /* prevents the focus shadow to be covered by the background of an hovered sibling accordion */\n    position: relative;\n    z-index: 1;\n  }\n\n  :host(:not([is-disabled])) summary:hover {\n    background-color: var(--z-accordion-hover-color);\n  }\n\n  :host(:not([is-disabled])) summary:hover .z-accordion-label {\n    text-decoration: underline;\n  }\n}\n\n/* force \"big\" variant on touch devices */\n@media (hover: none) {\n  :host([size]) summary {\n    --summary-height: var(--summary-big-height);\n    --summary-y-padding: var(--space-unit);\n  }\n\n  :host([size]) .z-accordion-label {\n    font-size: var(--font-size-3);\n  }\n\n  :host([size]) .z-accordion-content {\n    font-size: var(--font-size-2);\n  }\n\n  :host([size]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n    --z-icon-width: 18px;\n    --z-icon-height: 18px;\n  }\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/**\n * Accordion component.\n *\n * @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @part summary - The summary element that is always visible and acts as the accordion's toggle.\n * @part content - The content element that is shown or hidden when the accordion is toggled.\n */\n@Component({\n  tag: \"z-accordion\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAccordion implements ComponentInterface {\n  @Element() host: HTMLZAccordionElement;\n\n  /**\n   * Text label.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Name of the z-icon to display before the label's text.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Size of the component.\n   */\n  @Prop({reflect: true})\n  size = ControlSize.BIG;\n\n  /**\n   * Disabled state of the accordion.\n   */\n  @Prop({reflect: true})\n  isDisabled = false;\n\n  /**\n   * The open state of the accordion.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Enable highlight band on the `summary`'s left edge.\n   */\n  @Prop({reflect: true})\n  highlight = false;\n\n  /**\n   * Accordion variant.\n   */\n  @Prop({reflect: true})\n  variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n  /**\n   * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n   */\n  @Prop({reflect: true})\n  shadow = true;\n\n  @State()\n  private hasSlottedTags = false;\n\n  /**\n   * Event fired when the accordion is toggled.\n   */\n  @Event()\n  toggled: EventEmitter<boolean>;\n\n  @Watch(\"isDisabled\")\n  protected onDisabledChange(): void {\n    if (this.isDisabled) {\n      this.open = false;\n    }\n  }\n\n  private detailsElm: HTMLDetailsElement;\n\n  /** Check if there is any content in the \"tag\" slot. */\n  private checkSlottedTags(): void {\n    this.hasSlottedTags = !!this.host.querySelector('[slot=\"tag\"]');\n  }\n\n  /**\n   * Handle `details` element toggle.\n   * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n   * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n   */\n  private onDetailsToggle(): void {\n    if (this.isDisabled) {\n      this.open = false;\n      this.detailsElm.open = false;\n\n      return;\n    }\n\n    this.open = this.detailsElm.open;\n    this.toggled.emit(this.open);\n  }\n\n  componentWillLoad(): void {\n    this.checkSlottedTags();\n  }\n\n  render(): HTMLDetailsElement {\n    return (\n      <details\n        ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n        onToggle={this.onDetailsToggle.bind(this)}\n        open={this.open}\n      >\n        <summary\n          tabIndex={this.isDisabled ? -1 : null}\n          part=\"summary\"\n        >\n          {this.icon && (\n            <z-icon\n              class=\"z-accordion-label-icon\"\n              name={this.icon}\n            />\n          )}\n          <span class=\"z-accordion-label\">{this.label}</span>\n          {this.hasSlottedTags && (\n            <span class=\"z-accordion-tags\">\n              <slot\n                name=\"tag\"\n                onSlotchange={() => this.checkSlottedTags()}\n              />\n            </span>\n          )}\n          <z-icon\n            class=\"z-accordion-chevron\"\n            name={this.open ? \"chevron-up\" : \"chevron-down\"}\n          />\n        </summary>\n        {!this.isDisabled && (\n          <div\n            class=\"z-accordion-content\"\n            part=\"content\"\n          >\n            <slot />\n          </div>\n        )}\n      </details>\n    );\n  }\n}\n"],"mappings":"gGAAA,MAAMA,EAAY,IAAM,snK,MCgBXC,EAAU,MALvB,WAAAC,CAAAC,G,2CAwBEC,KAAAC,KAAOC,EAAYC,IAMnBH,KAAAI,WAAa,MAMbJ,KAAAK,KAAO,MAMPL,KAAAM,UAAY,MAMZN,KAAAO,QAA4BC,EAAiBC,QAM7CT,KAAAU,OAAS,KAGDV,KAAAW,eAAiB,KAqF1B,CA5EW,gBAAAC,GACR,GAAIZ,KAAKI,WAAY,CACnBJ,KAAKK,KAAO,K,EAOR,gBAAAQ,GACNb,KAAKW,iBAAmBX,KAAKc,KAAKC,cAAc,e,CAQ1C,eAAAC,GACN,GAAIhB,KAAKI,WAAY,CACnBJ,KAAKK,KAAO,MACZL,KAAKiB,WAAWZ,KAAO,MAEvB,M,CAGFL,KAAKK,KAAOL,KAAKiB,WAAWZ,KAC5BL,KAAKkB,QAAQC,KAAKnB,KAAKK,K,CAGzB,iBAAAe,GACEpB,KAAKa,kB,CAGP,MAAAQ,GACE,OACEC,EAAA,WAAAC,IAAA,2CACEC,IAAMC,GAA6BzB,KAAKiB,WAAaQ,EACrDC,SAAU1B,KAAKgB,gBAAgBW,KAAK3B,MACpCK,KAAML,KAAKK,MAEXiB,EAAA,WAAAC,IAAA,2CACEK,SAAU5B,KAAKI,YAAa,EAAK,KACjCyB,KAAK,WAEJ7B,KAAK8B,MACJR,EAAA,UAAAC,IAAA,2CACEQ,MAAM,yBACNC,KAAMhC,KAAK8B,OAGfR,EAAA,QAAAC,IAAA,2CAAMQ,MAAM,qBAAqB/B,KAAKiC,OACrCjC,KAAKW,gBACJW,EAAA,QAAAC,IAAA,2CAAMQ,MAAM,oBACVT,EAAA,QAAAC,IAAA,2CACES,KAAK,MACLE,aAAc,IAAMlC,KAAKa,sBAI/BS,EAAA,UAAAC,IAAA,2CACEQ,MAAM,sBACNC,KAAMhC,KAAKK,KAAO,aAAe,mBAGnCL,KAAKI,YACLkB,EAAA,OAAAC,IAAA,2CACEQ,MAAM,sBACNF,KAAK,WAELP,EAAA,QAAAC,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZAccordion","constructor","hostRef","this","size","ControlSize","BIG","isDisabled","open","highlight","variant","AccordionVariant","DEFAULT","shadow","hasSlottedTags","onDisabledChange","checkSlottedTags","host","querySelector","onDetailsToggle","detailsElm","toggled","emit","componentWillLoad","render","h","key","ref","elm","onToggle","bind","tabIndex","part","icon","class","name","label","onSlotchange"],"sources":["src/components/z-accordion/styles.css?tag=z-accordion&encapsulation=shadow","src/components/z-accordion/index.tsx"],"sourcesContent":[":host,\n:host *,\n:host ::slotted(*) {\n  box-sizing: border-box;\n}\n\n:host {\n  /**\n   * @prop --z-accordion-highlight-color: Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n   * @prop --z-accordion-bg: Background color of the summary. Default: `--color-surface02`.\n   * @prop --z-accordion-label-color: Label color. Default: `--color-default-text`.\n   * @prop --z-accordion-disabled-label-color: Label color when disabled. Default: `--color-text03`.\n   * @prop --z-accordion-content-bg: Background color of the accordion. Default: `--color-surface02`.\n   * @prop --z-accordion-content-fg: Content text color. Default: `--color-default-text`.\n   * @prop --z-accordion-hover-color: Hover color of the summary. Default: `--color-surface03`.\n   * @prop --z-accordion-left-padding: Left padding of the summary. Default: `--space-unit` * 2.\n   * @prop --z-accordion-right-padding: Right padding of the summary. Default: `--space-unit`.\n   * @prop --z-accordion-label-font-weight: Font weight of the summary label. Default: `--font-sb`.\n   */\n  --z-accordion-highlight-color: transparent;\n  --z-accordion-bg: var(--color-surface01);\n  --z-accordion-label-color: var(--color-default-text);\n  --z-accordion-disabled-label-color: var(--color-text03);\n  --z-accordion-content-bg: var(--color-surface01);\n  --z-accordion-content-fg: var(--color-default-text);\n  --z-accordion-hover-color: var(--color-surface02);\n  --z-accordion-left-padding: calc(var(--space-unit) * 2);\n  --z-accordion-right-padding: var(--space-unit);\n  --z-accordion-label-font-weight: var(--font-sb);\n\n  display: block;\n  border-top: var(--border-size-small) solid var(--color-surface03);\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host([variant=\"background\"]) {\n  border: var(--border-size-small) solid var(--color-surface03);\n  border-radius: var(--border-radius);\n}\n\n:host([variant=\"background\"][shadow]) {\n  box-shadow: var(--shadow-2);\n}\n\ndetails {\n  background-color: transparent;\n}\n\nsummary {\n  --summary-x-small-height: 32px;\n  --summary-small-height: 36px;\n  --summary-big-height: 44px;\n  --summary-height: var(--summary-big-height);\n  --summary-y-padding: var(--space-unit);\n\n  position: relative;\n  display: flex;\n  min-height: var(--summary-height);\n  align-items: center;\n  padding: var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n    var(--z-accordion-left-padding);\n  background-color: var(--z-accordion-bg);\n  column-gap: var(--space-unit);\n  cursor: pointer;\n  list-style: none;\n}\n\n/* remove marker on safari */\nsummary::-webkit-details-marker {\n  display: none;\n}\n\n:host([size=\"x-small\"]) summary {\n  --summary-height: var(--summary-x-small-height);\n}\n\n:host([size=\"small\"]) summary {\n  --summary-height: var(--summary-small-height);\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) summary {\n  --summary-y-padding: calc(var(--space-unit) / 2);\n}\n\n:host([variant=\"background\"]) summary {\n  padding-right: calc(var(--space-unit) * 2);\n\n  /* border-radius of the accordion - width of the accordion's border */\n  border-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([variant=\"background\"][open]) summary {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n:host([is-disabled]) summary {\n  cursor: default;\n}\n\nsummary:focus:focus-visible {\n  background-color: var(--z-accordion-hover-color);\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nsummary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  width: var(--space-unit);\n  height: 100%;\n  content: \"\";\n}\n\n:host([highlight][variant=\"background\"]) summary::before {\n  /* border-radius of the accordion - width of the accordion's border */\n  border-top-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight][variant=\"background\"]:not([open])) summary::before,\n:host([highlight][variant=\"background\"][open]) .z-accordion-content::before {\n  /* border-radius of the accordion - width of the accordion's border */\n  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight]) summary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n  background-color: var(--z-accordion-highlight-color, transparent);\n}\n\n:host([is-disabled][highlight]) summary::before,\n:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before {\n  background-color: var(--z-accordion-disabled-label-color);\n}\n\nsummary > z-icon {\n  fill: var(--z-accordion-label-color);\n}\n\n:host([is-disabled]) summary > z-icon {\n  fill: var(--z-accordion-disabled-label-color);\n}\n\n.z-accordion-label {\n  color: var(--z-accordion-label-color);\n  font-size: var(--font-size-3); /* for \"small\" and \"big\" sizes */\n  font-weight: var(--z-accordion-label-font-weight);\n}\n\n:host([size=\"x-small\"]) .z-accordion-label {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n.z-accordion-tags {\n  display: flex;\n  align-items: center;\n  column-gap: calc(var(--space-unit) / 2);\n}\n\nsummary z-icon.z-accordion-chevron {\n  margin-left: auto;\n}\n\n.z-accordion-content {\n  position: relative;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);\n  background-color: var(--z-accordion-content-bg);\n  color: var(--z-accordion-content-fg);\n  font-size: var(--font-size-2); /* for \"small\" and \"big\" sizes */\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) .z-accordion-content {\n  padding-bottom: var(--space-unit);\n}\n\n:host([size=\"x-small\"]) .z-accordion-content {\n  font-size: var(--font-size-1);\n}\n\n:host([variant=\"background\"]) .z-accordion-content {\n  padding-right: calc(var(--space-unit) * 2);\n  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([is-disabled]) .z-accordion-label {\n  color: var(--z-accordion-disabled-label-color);\n}\n\n:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]) {\n  --z-tag-bg: var(--z-accordion-disabled-label-color) !important;\n  --z-tag-text-color: var(--color-text-inverse) !important;\n}\n\n@media (hover: hover) {\n  summary:focus:focus-visible {\n    /* prevents the focus shadow to be covered by the background of an hovered sibling accordion */\n    position: relative;\n    z-index: 1;\n  }\n\n  :host(:not([is-disabled])) summary:hover {\n    background-color: var(--z-accordion-hover-color);\n  }\n\n  :host(:not([is-disabled])) summary:hover .z-accordion-label {\n    text-decoration: underline;\n  }\n}\n\n/* force \"big\" variant on touch devices */\n@media (hover: none) {\n  :host([size]) summary {\n    --summary-height: var(--summary-big-height);\n    --summary-y-padding: var(--space-unit);\n  }\n\n  :host([size]) .z-accordion-label {\n    font-size: var(--font-size-3);\n  }\n\n  :host([size]) .z-accordion-content {\n    font-size: var(--font-size-2);\n  }\n\n  :host([size]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n    --z-icon-width: 18px;\n    --z-icon-height: 18px;\n  }\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/**\n * Accordion component.\n *\n * @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @part summary - The summary element that is always visible and acts as the accordion's toggle.\n * @part content - The content element that is shown or hidden when the accordion is toggled.\n */\n@Component({\n  tag: \"z-accordion\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAccordion implements ComponentInterface {\n  @Element() host: HTMLZAccordionElement;\n\n  /**\n   * Text label.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Name of the z-icon to display before the label's text.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Size of the component.\n   */\n  @Prop({reflect: true})\n  size = ControlSize.BIG;\n\n  /**\n   * Disabled state of the accordion.\n   */\n  @Prop({reflect: true})\n  isDisabled = false;\n\n  /**\n   * The open state of the accordion.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Enable highlight band on the `summary`'s left edge.\n   */\n  @Prop({reflect: true})\n  highlight = false;\n\n  /**\n   * Accordion variant.\n   */\n  @Prop({reflect: true})\n  variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n  /**\n   * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n   */\n  @Prop({reflect: true})\n  shadow = true;\n\n  @State()\n  private hasSlottedTags = false;\n\n  /**\n   * Event fired when the accordion is toggled.\n   */\n  @Event()\n  toggled: EventEmitter<boolean>;\n\n  @Watch(\"isDisabled\")\n  protected onDisabledChange(): void {\n    if (this.isDisabled) {\n      this.open = false;\n    }\n  }\n\n  private detailsElm: HTMLDetailsElement;\n\n  /** Check if there is any content in the \"tag\" slot. */\n  private checkSlottedTags(): void {\n    this.hasSlottedTags = !!this.host.querySelector('[slot=\"tag\"]');\n  }\n\n  /**\n   * Handle `details` element toggle.\n   * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n   * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n   */\n  private onDetailsToggle(): void {\n    if (this.isDisabled) {\n      this.open = false;\n      this.detailsElm.open = false;\n\n      return;\n    }\n\n    this.open = this.detailsElm.open;\n    this.toggled.emit(this.open);\n  }\n\n  componentWillLoad(): void {\n    this.checkSlottedTags();\n  }\n\n  render(): HTMLDetailsElement {\n    return (\n      <details\n        ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n        onToggle={this.onDetailsToggle.bind(this)}\n        open={this.open}\n      >\n        <summary\n          tabIndex={this.isDisabled ? -1 : null}\n          part=\"summary\"\n        >\n          {this.icon && (\n            <z-icon\n              class=\"z-accordion-label-icon\"\n              name={this.icon}\n            />\n          )}\n          <span class=\"z-accordion-label\">{this.label}</span>\n          {this.hasSlottedTags && (\n            <span class=\"z-accordion-tags\">\n              <slot\n                name=\"tag\"\n                onSlotchange={() => this.checkSlottedTags()}\n              />\n            </span>\n          )}\n          <z-icon\n            class=\"z-accordion-chevron\"\n            name={this.open ? \"chevron-up\" : \"chevron-down\"}\n          />\n        </summary>\n        {!this.isDisabled && (\n          <div\n            class=\"z-accordion-content\"\n            part=\"content\"\n          >\n            <slot />\n          </div>\n        )}\n      </details>\n    );\n  }\n}\n"],"mappings":"qGAAA,MAAMA,EAAY,IAAM,snK,MCgBXC,EAAU,MALvB,WAAAC,CAAAC,G,2CAwBEC,KAAAC,KAAOC,EAAYC,IAMnBH,KAAAI,WAAa,MAMbJ,KAAAK,KAAO,MAMPL,KAAAM,UAAY,MAMZN,KAAAO,QAA4BC,EAAiBC,QAM7CT,KAAAU,OAAS,KAGDV,KAAAW,eAAiB,KAqF1B,CA5EW,gBAAAC,GACR,GAAIZ,KAAKI,WAAY,CACnBJ,KAAKK,KAAO,K,EAOR,gBAAAQ,GACNb,KAAKW,iBAAmBX,KAAKc,KAAKC,cAAc,e,CAQ1C,eAAAC,GACN,GAAIhB,KAAKI,WAAY,CACnBJ,KAAKK,KAAO,MACZL,KAAKiB,WAAWZ,KAAO,MAEvB,M,CAGFL,KAAKK,KAAOL,KAAKiB,WAAWZ,KAC5BL,KAAKkB,QAAQC,KAAKnB,KAAKK,K,CAGzB,iBAAAe,GACEpB,KAAKa,kB,CAGP,MAAAQ,GACE,OACEC,EAAA,WAAAC,IAAA,2CACEC,IAAMC,GAA6BzB,KAAKiB,WAAaQ,EACrDC,SAAU1B,KAAKgB,gBAAgBW,KAAK3B,MACpCK,KAAML,KAAKK,MAEXiB,EAAA,WAAAC,IAAA,2CACEK,SAAU5B,KAAKI,YAAa,EAAK,KACjCyB,KAAK,WAEJ7B,KAAK8B,MACJR,EAAA,UAAAC,IAAA,2CACEQ,MAAM,yBACNC,KAAMhC,KAAK8B,OAGfR,EAAA,QAAAC,IAAA,2CAAMQ,MAAM,qBAAqB/B,KAAKiC,OACrCjC,KAAKW,gBACJW,EAAA,QAAAC,IAAA,2CAAMQ,MAAM,oBACVT,EAAA,QAAAC,IAAA,2CACES,KAAK,MACLE,aAAc,IAAMlC,KAAKa,sBAI/BS,EAAA,UAAAC,IAAA,2CACEQ,MAAM,sBACNC,KAAMhC,KAAKK,KAAO,aAAe,mBAGnCL,KAAKI,YACLkB,EAAA,OAAAC,IAAA,2CACEQ,MAAM,sBACNF,KAAK,WAELP,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

package/{dist/web-components-library/p-7b4f5936.entry.js → www/build/p-6de548e3.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as i,H as t,d as o}from"./p-BcDWN4F1.js";import{M as r,e as a}from"./p-DdetsoIY.js";const n=()=>`:host{--z-info-reveal-panel-width:384px;--trigger-size:44px;position:relative}:host *{box-sizing:border-box}button{--trigger-icon-size:calc(var(--trigger-size) / 2);display:flex;align-items:center;justify-content:center;padding:0;border:none;background-color:transparent;cursor:pointer;font-family:inherit;letter-spacing:inherit}button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-info-reveal-trigger{min-width:var(--trigger-size);height:var(--trigger-size);padding:calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);background-color:var(--color-surface05);border-radius:var(--border-radius);color:var(--color-text-inverse);column-gap:var(--space-unit);font-weight:var(--font-sb);line-height:1rem}:host([size="big"]) .z-info-reveal-trigger{font-size:var(--font-size-2)}:host([size="small"]) .z-info-reveal-trigger{--trigger-size:36px;font-size:var(--font-size-2)}:host([size="x-small"]) .z-info-reveal-trigger{--trigger-size:32px;padding:var(--space-unit);font-size:var(--font-size-1)}:host>.z-info-reveal-trigger z-icon{--z-icon-width:var(--trigger-icon-size);--z-icon-height:var(--trigger-icon-size);display:flex;fill:var(--color-inverse-icon)}:host([size="small"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:var(--trigger-icon-size-small, 18px)}:host([size="x-small"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:var(--trigger-icon-size-x-small, 16px)}.z-info-reveal-panel{position:absolute;z-index:19;display:flex;width:var(--z-info-reveal-panel-width);height:fit-content;align-items:flex-start;padding:calc(var(--space-unit) * 1.5);background-color:var(--color-surface05);border-radius:var(--border-radius);box-shadow:var(--shadow-4);color:var(--color-text-inverse);column-gap:var(--space-unit)}.z-info-reveal-panel[hidden]{display:none}:host([position="top_left"]) .z-info-reveal-panel,:host([position="top_right"]) .z-info-reveal-panel{top:0}:host([position="bottom_left"]) .z-info-reveal-panel,:host([position="bottom_right"]) .z-info-reveal-panel{bottom:0}:host([position="top_right"]) .z-info-reveal-panel,:host([position="bottom_right"]) .z-info-reveal-panel{right:0}:host([position="top_left"]) .z-info-reveal-panel,:host([position="bottom_left"]) .z-info-reveal-panel{left:0}.z-info-reveal-panel .z-info-reveal-close{margin-left:auto}.z-info-reveal-panel z-icon{fill:var(--color-inverse-icon)}@media (max-width: 767px){.z-info-reveal-panel{top:auto !important;bottom:auto !important;width:calc(var(--z-info-reveal-panel-width) - (var(--grid-margin) * 4)) !important;margin-top:calc(var(--trigger-size) * -1)}}`;const s=class{constructor(i){e(this,i);this.icon="informationsource";this.position=r.BOTTOM_RIGHT;this.ariaLabel="Apri pannello informazioni";this.size=a.BIG;this.open=false}adjustPanelPosition(){if(!this.open||!this.panel){return}const e=this.host.getBoundingClientRect();const i=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--grid-margin"),10);const t=document.documentElement.offsetWidth;const o=Math.round((this.position.includes("left")?t-e.left:e.right)-i);this.panel.style.maxWidth=`${o}px`}togglePanel(){this.open=!this.open}closePanel(){this.open=false}handleEscapeKey(e){if(e.key==="Escape"&&this.open){this.closePanel()}}render(){return i(t,{key:"062623399b8e6d19274dd482570f4ae1649ef23b",open:this.open},i("button",{key:"1fc4f3951ad4055943e7ef8fc61d94cc425e70c2",class:"z-info-reveal-trigger",type:"button",onClick:this.togglePanel.bind(this),"aria-label":!this.label?this.ariaLabel:undefined,"aria-expanded":this.open?"true":"false","aria-controls":"z-info-reveal-panel"},this.icon&&i("z-icon",{key:"67d263d17b3a238af33c7fd5785a4409b3817eb7",name:this.icon}),this.label&&i("span",{key:"8de421e649b240588bd11a87a4f241ddd7bee004",class:"z-info-reveal-label"},this.label)),i("div",{key:"d588ee526e87e72712a00b78c9090ed40b6473c9",class:"z-info-reveal-panel",id:"z-info-reveal-panel",ref:e=>this.panel=e,hidden:!this.open},i("slot",{key:"d6739b3a91ba44106ee1f72abd185bf2a7bc5727"}),i("button",{key:"978742081a1d1f51b0e05d99989e0bfc5c7cf276",class:"z-info-reveal-close",type:"button",onClick:this.closePanel.bind(this),"aria-label":"Chiudi pannello informazioni"},i("z-icon",{key:"bef98b8858f38d06099d94a33bb8b97c588a8465",name:"multiply"}))))}get host(){return o(this)}static get watchers(){return{position:[{adjustPanelPosition:0}],open:[{adjustPanelPosition:0}]}}};s.style=n();export{s as z_info_reveal};
-//# sourceMappingURL=p-7b4f5936.entry.js.map
+import{r as e,h as i,H as t,d as o}from"./p-BcDWN4F1.js";import{M as a,e as r}from"./p-DdetsoIY.js";const n=()=>`:host{--z-info-reveal-panel-width:384px;--trigger-size:44px;position:relative}:host *{box-sizing:border-box}button{--trigger-icon-size:calc(var(--trigger-size) / 2);display:flex;align-items:center;justify-content:center;padding:0;border:none;background-color:transparent;cursor:pointer;font-family:inherit;letter-spacing:inherit}button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-info-reveal-trigger{min-width:var(--trigger-size);height:var(--trigger-size);padding:calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);background-color:var(--color-surface05);border-radius:var(--border-radius);color:var(--color-text-inverse);column-gap:var(--space-unit);font-weight:var(--font-sb);line-height:1rem}:host([size="big"]) .z-info-reveal-trigger{font-size:var(--font-size-2)}:host([size="small"]) .z-info-reveal-trigger{--trigger-size:36px;font-size:var(--font-size-2)}:host([size="x-small"]) .z-info-reveal-trigger{--trigger-size:32px;padding:var(--space-unit);font-size:var(--font-size-1)}:host>.z-info-reveal-trigger z-icon{--z-icon-width:var(--trigger-icon-size);--z-icon-height:var(--trigger-icon-size);display:flex;fill:var(--color-inverse-icon)}:host([size="small"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:var(--trigger-icon-size-small, 18px)}:host([size="x-small"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:var(--trigger-icon-size-x-small, 16px)}.z-info-reveal-panel{position:absolute;z-index:19;display:flex;width:var(--z-info-reveal-panel-width);height:fit-content;align-items:flex-start;padding:calc(var(--space-unit) * 1.5);background-color:var(--color-surface05);border-radius:var(--border-radius);box-shadow:var(--shadow-4);color:var(--color-text-inverse);column-gap:var(--space-unit)}.z-info-reveal-panel[hidden]{display:none}:host([position="top_left"]) .z-info-reveal-panel,:host([position="top_right"]) .z-info-reveal-panel{top:0}:host([position="bottom_left"]) .z-info-reveal-panel,:host([position="bottom_right"]) .z-info-reveal-panel{bottom:0}:host([position="top_right"]) .z-info-reveal-panel,:host([position="bottom_right"]) .z-info-reveal-panel{right:0}:host([position="top_left"]) .z-info-reveal-panel,:host([position="bottom_left"]) .z-info-reveal-panel{left:0}.z-info-reveal-panel .z-info-reveal-close{margin-left:auto}.z-info-reveal-panel z-icon{fill:var(--color-inverse-icon)}@media (max-width: 767px){.z-info-reveal-panel{top:auto !important;bottom:auto !important;width:calc(var(--z-info-reveal-panel-width) - (var(--grid-margin) * 4)) !important;margin-top:calc(var(--trigger-size) * -1)}}`;const s=class{constructor(i){e(this,i);this.icon="informationsource";this.position=a.BOTTOM_RIGHT;this.htmlAriaLabel="Apri pannello informazioni";this.size=r.BIG;this.open=false}adjustPanelPosition(){if(!this.open||!this.panel){return}const e=this.host.getBoundingClientRect();const i=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--grid-margin"),10);const t=document.documentElement.offsetWidth;const o=Math.round((this.position.includes("left")?t-e.left:e.right)-i);this.panel.style.maxWidth=`${o}px`}togglePanel(){this.open=!this.open}closePanel(){this.open=false}handleEscapeKey(e){if(e.key==="Escape"&&this.open){this.closePanel()}}render(){return i(t,{key:"a22a540c0df59b75d4b370404df70d37103929dc",open:this.open},i("button",{key:"598227d587b1ff22723db6f5213bbd9747bc2f3b",class:"z-info-reveal-trigger",type:"button",onClick:this.togglePanel.bind(this),"aria-label":!this.label?this.htmlAriaLabel||undefined:undefined,"aria-expanded":this.open?"true":"false","aria-controls":"z-info-reveal-panel"},this.icon&&i("z-icon",{key:"28f2d30a031423a803e9d7692b2303c627dabb77",name:this.icon}),this.label&&i("span",{key:"3902d42ce7f4d265b298ab52bb448b93d42ec7a7",class:"z-info-reveal-label"},this.label)),i("div",{key:"f8750e21dfd80927ad78dc3fcf1e97b7a7298308",class:"z-info-reveal-panel",id:"z-info-reveal-panel",ref:e=>this.panel=e,hidden:!this.open},i("slot",{key:"d844cc6197c5459fde0c725670fa8a2f28fb7c01"}),i("button",{key:"67891868418b95d9de7f9ffee578ba58df9d0eef",class:"z-info-reveal-close",type:"button",onClick:this.closePanel.bind(this),"aria-label":"Chiudi pannello informazioni"},i("z-icon",{key:"66a137e3737db5bad4ca9acdc41d3bdcb7ab089f",name:"multiply"}))))}get host(){return o(this)}static get watchers(){return{position:[{adjustPanelPosition:0}],open:[{adjustPanelPosition:0}]}}};s.style=n();export{s as z_info_reveal};
+//# sourceMappingURL=p-6de548e3.entry.js.map

package/www/build/p-6de548e3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZInfoReveal","constructor","hostRef","this","icon","position","InfoRevealPosition","BOTTOM_RIGHT","htmlAriaLabel","size","ControlSize","BIG","open","adjustPanelPosition","panel","rect","host","getBoundingClientRect","gridMargin","parseInt","getComputedStyle","document","documentElement","getPropertyValue","pageWidth","offsetWidth","availableSpace","Math","round","includes","left","right","style","maxWidth","togglePanel","closePanel","handleEscapeKey","event","key","render","h","Host","class","type","onClick","bind","label","undefined","name","id","ref","el","hidden"],"sources":["src/components/z-info-reveal/styles.css?tag=z-info-reveal&encapsulation=shadow","src/components/z-info-reveal/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-info-reveal-panel-width: Width of the info panel.\n   * @prop --trigger-icon-size: Size of the trigger icon for big size.\n   * @prop --trigger-icon-size-small: Size of the trigger icon for small size.\n   * @prop --trigger-icon-size-x-small: Size of the trigger icon for x-small size.\n   */\n  --z-info-reveal-panel-width: 384px; /* defaults to half the maximum size of the mobile breakpoint */\n  --trigger-size: 44px;\n\n  position: relative;\n}\n\n:host * {\n  box-sizing: border-box;\n}\n\nbutton {\n  --trigger-icon-size: calc(var(--trigger-size) / 2);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  font-family: inherit;\n  letter-spacing: inherit;\n}\n\nbutton:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-info-reveal-trigger {\n  min-width: var(--trigger-size);\n  height: var(--trigger-size);\n  padding: calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n  font-weight: var(--font-sb);\n  line-height: 1rem;\n}\n\n:host([size=\"big\"]) .z-info-reveal-trigger {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .z-info-reveal-trigger {\n  --trigger-size: 36px;\n\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .z-info-reveal-trigger {\n  --trigger-size: 32px;\n\n  padding: var(--space-unit);\n  font-size: var(--font-size-1);\n}\n\n:host > .z-info-reveal-trigger z-icon {\n  --z-icon-width: var(--trigger-icon-size);\n  --z-icon-height: var(--trigger-icon-size);\n\n  display: flex;\n  fill: var(--color-inverse-icon);\n}\n\n:host([size=\"small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: var(--trigger-icon-size-small, 18px);\n}\n\n:host([size=\"x-small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: var(--trigger-icon-size-x-small, 16px);\n}\n\n.z-info-reveal-panel {\n  position: absolute;\n  z-index: 19;\n  display: flex;\n  width: var(--z-info-reveal-panel-width);\n  height: fit-content;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 1.5);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-4);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n}\n\n.z-info-reveal-panel[hidden] {\n  display: none;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"top_right\"]) .z-info-reveal-panel {\n  top: 0;\n}\n\n:host([position=\"bottom_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  bottom: 0;\n}\n\n:host([position=\"top_right\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  right: 0;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_left\"]) .z-info-reveal-panel {\n  left: 0;\n}\n\n.z-info-reveal-panel .z-info-reveal-close {\n  margin-left: auto;\n}\n\n.z-info-reveal-panel z-icon {\n  fill: var(--color-inverse-icon);\n}\n\n@media (max-width: 767px) {\n  .z-info-reveal-panel {\n    top: auto !important;\n    bottom: auto !important;\n    width: calc(var(--z-info-reveal-panel-width) - (var(--grid-margin) * 4)) !important;\n    margin-top: calc(var(--trigger-size) * -1);\n  }\n}\n","import {Component, ComponentInterface, Element, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../beans\";\n\n/**\n * Info reveal component.\n *\n * @slot - content of the info panel.\n */\n@Component({\n  tag: \"z-info-reveal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoReveal implements ComponentInterface {\n  /** Name of the icon for the trigger button */\n  @Prop()\n  icon? = \"informationsource\";\n\n  /**\n   * The position of the z-info-reveal in the page. This helps to correctly place the info panel.\n   * The panel will grow in the opposite direction of the position.\n   * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.\n   */\n  @Prop({reflect: true})\n  position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n  /** Label of the trigger button. */\n  @Prop()\n  label?: string;\n\n  /** `aria-label` of the trigger button. It will be used only when the `label` prop is empty. */\n  @Prop()\n  htmlAriaLabel = \"Apri pannello informazioni\";\n\n  /** Size of the trigger button */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Whether the info panel is open. */\n  @State()\n  open = false;\n\n  @Element() host: HTMLZInfoRevealElement;\n\n  private panel: HTMLDivElement;\n\n  /**\n   * Adjust the position of the info panel to prevent exiting the viewport.\n   */\n  @Watch(\"position\")\n  @Watch(\"open\")\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  adjustPanelPosition(): void {\n    if (!this.open || !this.panel) {\n      return;\n    }\n\n    const rect = this.host.getBoundingClientRect();\n    const gridMargin = parseInt(getComputedStyle(document.documentElement).getPropertyValue(\"--grid-margin\"), 10);\n    const pageWidth = document.documentElement.offsetWidth;\n    // Available space for the info panel to grow towards the edge of the page, based on the `position` prop.\n    const availableSpace = Math.round(\n      (this.position.includes(\"left\") ? pageWidth - rect.left : rect.right) - gridMargin\n    );\n    this.panel.style.maxWidth = `${availableSpace}px`;\n  }\n\n  /**\n   * Toggle the open state of the info panel.\n   */\n  private togglePanel(): void {\n    this.open = !this.open;\n  }\n\n  /**\n   * Close the info panel.\n   */\n  private closePanel(): void {\n    this.open = false;\n  }\n\n  @Listen(\"keydown\", {target: \"window\", capture: true})\n  handleEscapeKey(event: KeyboardEvent): void {\n    if (event.key === \"Escape\" && this.open) {\n      this.closePanel();\n    }\n  }\n\n  render(): HTMLZInfoRevealElement {\n    return (\n      <Host open={this.open}>\n        <button\n          class=\"z-info-reveal-trigger\"\n          type=\"button\"\n          onClick={this.togglePanel.bind(this)}\n          aria-label={!this.label ? this.htmlAriaLabel || undefined : undefined}\n          aria-expanded={this.open ? \"true\" : \"false\"}\n          aria-controls=\"z-info-reveal-panel\"\n        >\n          {this.icon && <z-icon name={this.icon} />}\n          {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n        </button>\n        <div\n          class=\"z-info-reveal-panel\"\n          id=\"z-info-reveal-panel\"\n          ref={(el) => (this.panel = el)}\n          hidden={!this.open}\n        >\n          <slot></slot>\n          <button\n            class=\"z-info-reveal-close\"\n            type=\"button\"\n            onClick={this.closePanel.bind(this)}\n            aria-label=\"Chiudi pannello informazioni\"\n          >\n            <z-icon name=\"multiply\" />\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,IAAM,ghF,MCaXC,EAAW,MALxB,WAAAC,CAAAC,G,UAQEC,KAAAC,KAAQ,oBAQRD,KAAAE,SAAgCC,EAAmBC,aAQnDJ,KAAAK,cAAgB,6BAIhBL,KAAAM,KAAqBC,EAAYC,IAIjCR,KAAAS,KAAO,KAiFR,CArEC,mBAAAC,GACE,IAAKV,KAAKS,OAAST,KAAKW,MAAO,CAC7B,M,CAGF,MAAMC,EAAOZ,KAAKa,KAAKC,wBACvB,MAAMC,EAAaC,SAASC,iBAAiBC,SAASC,iBAAiBC,iBAAiB,iBAAkB,IAC1G,MAAMC,EAAYH,SAASC,gBAAgBG,YAE3C,MAAMC,EAAiBC,KAAKC,OACzBzB,KAAKE,SAASwB,SAAS,QAAUL,EAAYT,EAAKe,KAAOf,EAAKgB,OAASb,GAE1Ef,KAAKW,MAAMkB,MAAMC,SAAW,GAAGP,K,CAMzB,WAAAQ,GACN/B,KAAKS,MAAQT,KAAKS,I,CAMZ,UAAAuB,GACNhC,KAAKS,KAAO,K,CAId,eAAAwB,CAAgBC,GACd,GAAIA,EAAMC,MAAQ,UAAYnC,KAAKS,KAAM,CACvCT,KAAKgC,Y,EAIT,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAH,IAAA,2CAAC1B,KAAMT,KAAKS,MACf4B,EAAA,UAAAF,IAAA,2CACEI,MAAM,wBACNC,KAAK,SACLC,QAASzC,KAAK+B,YAAYW,KAAK1C,MAAK,cACvBA,KAAK2C,MAAQ3C,KAAKK,eAAiBuC,UAAYA,UAAS,gBACtD5C,KAAKS,KAAO,OAAS,QAAO,gBAC7B,uBAEbT,KAAKC,MAAQoC,EAAA,UAAAF,IAAA,2CAAQU,KAAM7C,KAAKC,OAChCD,KAAK2C,OAASN,EAAA,QAAAF,IAAA,2CAAMI,MAAM,uBAAuBvC,KAAK2C,QAEzDN,EAAA,OAAAF,IAAA,2CACEI,MAAM,sBACNO,GAAG,sBACHC,IAAMC,GAAQhD,KAAKW,MAAQqC,EAC3BC,QAASjD,KAAKS,MAEd4B,EAAA,QAAAF,IAAA,6CACAE,EAAA,UAAAF,IAAA,2CACEI,MAAM,sBACNC,KAAK,SACLC,QAASzC,KAAKgC,WAAWU,KAAK1C,MAAK,aACxB,gCAEXqC,EAAA,UAAAF,IAAA,2CAAQU,KAAK,e","ignoreList":[]}