@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.4

package/www/build/p-96e61363.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZAppHeaderStyle0","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","value","searchString","placeholder","searchPlaceholder","showSearchButton","searchButtonIconOnly","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","undefined","bind","componentWillLoad","mobileMediaQuery","matchMedia","Breakpoints","MOBILE","matches","addEventListener","tabletMediaQuery","TABLET","componentDidLoad","disconnectedCallback","disconnect","render","hasTopSubtitle","Host","role","ZButtonStyle0","ZButton","ButtonType","BUTTON","PRIMARY","IconPosition","LEFT","BIG","getAttributes","htmlid","renderIcon","Object","assign","ariaLabel","type","htmlrole","ZDividerStyle0","ZDivider","DividerSize","SMALL","DividerOrientation","HORIZONTAL","orientation","style","backgroundColor","color","ZIconStyle0","ZIcon","selectPathOrPolygon","iconValue","startsWith","d","points","renderBaseIcon","iconid","fill","viewBox","height","ICONS","COLOR_INDICATOR_ICONS","includes","indicatorColor","ZInputStyle0","ZInput","typingtimeout","randomId","LabelPosition","inputCheckListener","data","InputType","RADIO","checked","isChecked","CHECKBOX","console","warn","emitInputChange","isTyping","emitStartTyping","validity","TEXTAREA","getValidity","inputChange","clearTimeout","timer","emitStopTyping","startTyping","stopTyping","emitInputCheck","inputCheck","emitInputFocus","inputFocus","emitInputBlur","inputBlur","input","getTextAttributes","readonly","required","htmltitle","minlength","maxlength","status","autocomplete","onInput","getNumberAttributes","NUMBER","min","max","step","getPatternAttribute","PASSWORD","TEXT","TEL","SEARCH","URL","EMAIL","pattern","getRoleAttribute","inputHasMessage","boolean","message","getAriaAttrubutes","expanded","htmlAriaExpanded","controls","htmlAriaControls","htmlAriaAutocomplete","activedescendant","htmlAriaActivedescendant","ariaDescribedby","htmlAriaDescribedBy","ariaInvalid","InputStatus","ERROR","getFocusBlurAttributes","onFocus","onBlur","renderInputText","attr","hasclearicon","renderLabel","passwordHidden","inputRef","renderIcons","renderMessage","label","htmlFor","renderResetIcon","renderShowHidePassword","hidden","renderTextarea","attributes","ariaAttributes","handleCheck","renderCheckbox","onChange","after","labelPosition","before","innerHTML","renderRadio","ZInputMessageStyle0","ZInputMessage","statusIcons","success","error","warning","onMessageChange","statusRole","htmlRole","htmlId","ZListStyle0","ZList","ListSize","MEDIUM","ListType","NONE","setChildrenSizeType","children","host","i","setAttribute","listType","toString","ZListElementStyle0","ZListElement","accessibleFocusHandler","listElementId","toFocus","shadowRoot","getElementById","openElementConfig","accordion","close","ExpandableListButtonAlign","ListDividerType","ExpandableListStyle","ACCORDION","handleClick","handleKeyDown","clickItem","expandable","showInnerContent","event","expandByKey","code","ENTER","accessibleFocus","renderExpandableButton","expandableStyle","renderExpandedContent","renderContent","ORDERED","listElementPosition","UNORDERED","ariaDescendantFocus","clickable","tabIndex","hasTreeItems","tabindex","part","dividerType","ELEMENT","dividerColor","dividerSize","ZListGroupStyle0","ZListGroup","hasHeader","HEADER","ZOffcanvasStyle0","ZOffcanvas","allFocusableElements","previouslyFocusedElement","PUSHCONTENT","getFocusableElements","canvasContent","all","getAttribute","isDisabled","hasAttribute","isHidden","trapFocus","first","last","active","activeElement","stopEvent","handlePageOverflow","overflow","UP","onOpenChanged","canvasOpenStatusChanged","listenerCallback","canvasContainer","removeEventListener","_c","skipAnimation","componentDidRender","connectedCallback","showBackdrop","ZSearchbarStyle0","ZSearchbarStyle1","ZSearchbar","resultsItemsList","items","emitSearchSubmit","searchSubmit","emitSearchTyping","search","searchTyping","emitSearchItemClick","item","searchItemClick","selectedItem","watchItems","getResultsItemsList","watchResultsCount","currResultsCount","resultsCount","watchValue","watchSearchString","watchShowResults","showResults","resizeObserver","getDevice","Device","resultsItems","JSON","parse","getGroupedItems","groupedItems","category","subcategory","push","sortResultsItems","keys","sort","obj","a","b","nameA","toUpperCase","nameB","checkResultsCount","counter","handleStopTyping","handleSubmit","handleOutsideClick","cp","composedPath","searchbar","nodeName","classList","renderInput","val","onStopTyping","onKeyUp","handleEnterKeydSubmit","handleArrowsNavigation","htmlAriaLabel","renderButton","iconProp","buttonLabel","defaultProps","renderResults","autocompleteMinChars","renderResultsList","renderSearchHelper","renderItems","renderShowAllResults","listGroups","values","groupItem","array","listGroupsElements","subindex","subarray","isLast","renderItem","renderItemCategory","currentElement","arrows","list","remove","nextIndex","add","prevIndex","setSelectionRange","divider","onMouseEnter","onMouseLeave","renderItemLabel","tag","text","map","child","replace","RegExp","found","hasDivider","searchHelperLabel","onClickItem","ZTagStyle0","ZTag","hasText"],"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.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/z-searchbar/index.tsx","src/components/z-tag/styles.css?tag=z-tag&encapsulation=scoped","src/components/z-tag/index.tsx"],"sourcesContent":[":host {\n  --app-header-content-max-width: ;\n\n  /* Variable to set stuck header and drawer's top offset.\n  Useful when something is absolutely positioned above the header. */\n  --app-header-top-offset: ;\n\n  /* Variable to customize header background color. */\n  --app-header-bg: ;\n\n  /* Variable to customize text and icon color. */\n  --app-header-text-color: ;\n\n  /* Variable to customize stuck header background color. */\n  --app-header-stucked-bg: ;\n\n  /* Variable to customize stuck header's text and icon color. */\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's line height. */\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\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 {Component, Element, Event, EventEmitter, Fragment, Host, Listen, Prop, State, Watch, h} 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 * @cssprop --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 * @cssprop --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 * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.\n * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.\n */\n@Component({\n  tag: \"z-app-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAppHeader {\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   * Placeholder text for the search bar.\n   */\n  @Prop()\n  searchPlaceholder = \"Cerca\";\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        value={this.searchString}\n        placeholder={this.searchPlaceholder}\n        showSearchButton={true}\n        searchButtonIconOnly={this.isMobile || this.isTablet}\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, 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 {\n  @Element() hostElement: HTMLZButtonElement;\n\n  /** defines a string value that labels the internal interactive element. Used for accessibility. */\n  @Prop()\n  ariaLabel: string | undefined = undefined;\n\n  /**\n   * **Deprecated:** Use `htmlrole` instead.\n   * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.\n   */\n  @Prop()\n  role = \"\";\n\n  /** defines role attribute, 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 getAttributes(): JSXBase.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {\n    return {\n      id: this.htmlid,\n      class: {\n        \"z-button--container\": true,\n        \"z-button--has-text\": !!this.hostElement.textContent.trim(),\n      },\n    };\n  }\n\n  private renderIcon(): JSX.Element | 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.getAttributes()}\n          aria-label={this.ariaLabel || undefined}\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.getAttributes()}\n        aria-label={this.ariaLabel || undefined}\n        name={this.name}\n        type={this.type}\n        disabled={this.disabled}\n        role={this.htmlrole || this.role || 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, 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 {\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  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, Host, Prop, h} from \"@stencil/core\";\nimport {COLOR_INDICATOR_ICONS, ICONS} from \"../../constants/iconset\";\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 {\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 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      >\n        {this.selectPathOrPolygon(ICONS[this.name])}\n      </svg>\n    );\n  }\n\n  render(): HTMLZIconElement {\n    return (\n      <Host aria-hidden=\"true\">\n        {COLOR_INDICATOR_ICONS.includes(this.name) ? (\n          <div class=\"icon-wrapper\">\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            >\n              {this.selectPathOrPolygon(ICONS[\"picker-color\"])}\n            </svg>\n\n            {this.renderBaseIcon()}\n          </div>\n        ) : (\n          this.renderBaseIcon()\n        )}\n      </Host>\n    );\n  }\n}\n","@import \"styles-general.css\";\n@import \"styles-text.css\";\n@import \"styles-textarea.css\";\n@import \"styles-checkbox-radio.css\";\n","import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {Fragment, Host, 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  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZInput {\n  @Element() hostElement: HTMLZInputElement;\n\n  /** the id of the input element */\n  @Prop()\n  htmlid = `id-${randomId()}`;\n\n  /** input types */\n  @Prop()\n  type: InputType;\n\n  /** the input name */\n  @Prop()\n  name?: string;\n\n  /** the input label */\n  @Prop()\n  label?: string;\n\n  /** the input aria-label */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** the input aria-expaded: available for text, password, number, email */\n  @Prop()\n  htmlAriaExpanded = \"\";\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 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  /** input helper message id (optional): available for text, password, number, email, textarea - if set, it will be used to populate the aria-describedby attribute, otherwise the attribute (if present) will be populated with an auto-generated value */\n  @Prop()\n  htmlAriaDescribedBy?: string;\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  role = \"\";\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 getRoleAttribute(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n    return this.role ? {role: this.role} : {};\n  }\n\n  private inputHasMessage(): boolean {\n    if (boolean(this.message) === false || boolean(this.message) === true) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private getAriaAttrubutes(): Record<string, unknown> {\n    const expanded = this.htmlAriaExpanded ? {\"aria-expanded\": this.htmlAriaExpanded} : {};\n    const controls = this.htmlAriaControls ? {\"aria-controls\": this.htmlAriaControls} : {};\n    const autocomplete = this.htmlAriaAutocomplete ? {\"aria-autocomplete\": this.htmlAriaAutocomplete} : {};\n    const activedescendant = this.htmlAriaActivedescendant\n      ? {\"aria-activedescendant\": this.htmlAriaActivedescendant}\n      : {};\n    const ariaDescribedby =\n      this.htmlAriaDescribedBy || this.inputHasMessage()\n        ? {\"aria-describedby\": this.htmlAriaDescribedBy || `${this.htmlid}-message`}\n        : {};\n\n    const ariaInvalid = this.status === InputStatus.ERROR ? {\"aria-invalid\": \"true\"} : {};\n\n    return {\n      ...expanded,\n      ...controls,\n      ...autocomplete,\n      ...activedescendant,\n      ...ariaDescribedby,\n      ...ariaInvalid,\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 ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n    const attr = {\n      ...this.getTextAttributes(),\n      ...this.getNumberAttributes(type),\n      ...this.getPatternAttribute(type),\n      ...ariaLabel,\n      ...this.getRoleAttribute(),\n      ...this.getAriaAttrubutes(),\n      ...this.getFocusBlurAttributes(),\n    };\n    if (this.icon || type === InputType.PASSWORD) {\n      Object.assign(attr.class, {\"has-icon\": true});\n    }\n    if (this.hasclearicon && type != InputType.NUMBER) {\n      Object.assign(attr.class, {\"has-clear-icon\": true});\n    }\n\n    return (\n      <div class=\"text-wrapper\">\n        {this.renderLabel()}\n        <div>\n          <input\n            type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n            {...attr}\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        }}\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={this.passwordHidden ? \"mostra password\" : \"nascondi password\"}\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.getAriaAttrubutes();\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.ariaLabel || undefined}\n            {...this.getRoleAttribute()}\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    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          {...this.getRoleAttribute()}\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    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          onChange={this.handleCheck.bind(this)}\n          value={this.value}\n          {...this.getRoleAttribute()}\n          {...this.getFocusBlurAttributes()}\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    let input;\n    switch (this.type) {\n      case InputType.TEXTAREA:\n        input = this.renderTextarea();\n        break;\n      case InputType.CHECKBOX:\n        input = this.renderCheckbox();\n        break;\n      case InputType.RADIO:\n        input = this.renderRadio();\n        break;\n      default:\n        input = this.renderInputText(this.type);\n    }\n\n    return <Host>{input}</Host>;\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, Host, Prop, State, Watch, 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 {\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  @State()\n  statusRole = {};\n\n  @Watch(\"message\")\n  @Watch(\"status\")\n  @Watch(\"htmlRole\")\n  onMessageChange(): void {\n    this.statusRole = this.htmlRole && this.message && this.status ? {role: this.htmlRole} : {};\n  }\n\n  componentWillLoad(): void {\n    this.onMessageChange();\n  }\n\n  render(): HTMLZInputMessageElement {\n    return (\n      <Host {...this.statusRole}>\n        {this.statusIcons[this.status] && this.message && <z-icon name={this.statusIcons[this.status]}></z-icon>}\n        <span\n          id={this.htmlId}\n          innerHTML={this.message}\n        />\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, Element, Host, Prop, 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 {\n  @Element() host: HTMLZListElement;\n\n  /**\n   * [optional] Sets size of inside 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  /**\n   * Sets role of the element.\n   */\n  @Prop({reflect: true})\n  role = \"list\";\n\n  private setChildrenSizeType(): void {\n    const children = this.host.children;\n    for (let i = 0; i < children.length; i++) {\n      children[i].setAttribute(\"size\", this.size);\n      children[i].setAttribute(\"list-type\", this.listType);\n      children[i].setAttribute(\"list-element-position\", (i + 1).toString());\n    }\n  }\n\n  componentDidLoad(): void {\n    this.setChildrenSizeType();\n  }\n\n  render(): HTMLZListElement {\n    return (\n      <Host>\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 {Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State} 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 {\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  /**\n   * Sets element role.\n   */\n  @Prop({reflect: true})\n  role = \"listitem\";\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  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   * @returns void\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  /**\n   * Renders button to expand element.\n   * @returns expadable button\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   * @returns expanded content\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   * @returns list content\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.role}\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, Element, h, Host, Prop} 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 {\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  /**\n   * Sets element role.\n   */\n  @Prop({reflect: true})\n  role = \"group\";\n\n  private hasHeader: boolean;\n\n  componentDidLoad(): void {\n    const children = this.host.children;\n    for (let i = 0; i < children.length; i++) {\n      if (children.length - 1 > i) {\n        children[i].setAttribute(\"divider-type\", this.dividerType);\n        children[i].setAttribute(\"divider-size\", this.dividerSize);\n        children[i].setAttribute(\"divider-color\", this.dividerColor);\n      }\n      children[i].setAttribute(\"size\", this.size);\n      children[i].setAttribute(\"list-type\", this.listType);\n      children[i].setAttribute(\"list-element-position\", i.toString());\n    }\n  }\n\n  componentWillLoad(): void {\n    this.hasHeader = !!this.host.querySelector('[slot=\"header-title\"]');\n  }\n\n  render(): HTMLZListGroupElement {\n    return (\n      <Host>\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  --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}\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, Event, EventEmitter, h, Host, Listen, Prop, State, Watch} from \"@stencil/core\";\nimport {KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\n\n/**\n * @slot canvasContent - Slot for the offcanvas content.\n * @cssprop --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 * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.\n * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.\n */\n@Component({\n  tag: \"z-offcanvas\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZOffcanvas {\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. Default: true */\n  @Prop()\n  showBackdrop = true;\n\n  /** emitted when `open` prop changes */\n  @Event()\n  canvasOpenStatusChanged: EventEmitter;\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 canvasContainer: HTMLElement;\n\n  private canvasContent: HTMLElement;\n\n  private allFocusableElements: HTMLElement[] = [];\n\n  private previouslyFocusedElement: HTMLElement | null = null;\n\n  /**\n   * Returns all focusable elements inside the offcanvas content.\n   * Elements are considered focusable if:\n   * - They are not disabled\n   * - They are visible in the layout\n   * - They have a non-negative tabIndex or an explicit tabindex=\"0\"\n   */\n  private getFocusableElements(): HTMLElement[] {\n    if (!this.canvasContent) {\n      return [];\n    }\n\n    const all = Array.from(this.canvasContent.querySelectorAll<HTMLElement>(\"*\"));\n\n    return all.filter((el) => {\n      const tabindex = el.getAttribute(\"tabindex\");\n      const isDisabled = el.hasAttribute(\"disabled\");\n      const isHidden = el.offsetParent === null;\n\n      return !isDisabled && !isHidden && (el.tabIndex >= 0 || tabindex === \"0\");\n    });\n  }\n\n  /**\n   * Keeps keyboard navigation trapped inside the offcanvas when it is open.\n   * Implements circular tab navigation:\n   * - If Shift + Tab is pressed on the first focusable element, move focus to the last.\n   * - If Tab is pressed on the last focusable element, move focus to the first.\n   */\n  private trapFocus(event: KeyboardEvent): void {\n    if (!this.allFocusableElements.length) {\n      return;\n    }\n\n    const first = this.allFocusableElements[0];\n    const last = this.allFocusableElements[this.allFocusableElements.length - 1];\n    const active = document.activeElement as HTMLElement;\n\n    if (event.shiftKey && active === first) {\n      event.preventDefault();\n      last.focus();\n    }\n\n    if (!event.shiftKey && active === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n\n  /**\n   * Handles keyboard interactions when the offcanvas is open.\n   * - Closes the offcanvas when the Escape key is pressed.\n   * - Traps focus inside the component when the Tab key is used.\n   */\n  @Listen(\"keydown\", {target: \"document\"})\n  handleKeyDown(event: KeyboardEvent): void {\n    if (!this.open) {\n      return;\n    }\n\n    if (event.key === KeyboardCode.ESC) {\n      event.preventDefault();\n      this.open = false;\n\n      return;\n    }\n\n    if (event.key === KeyboardCode.TAB) {\n      this.trapFocus(event);\n    }\n  }\n\n  /**\n   * Stop the event default behavior and propagation when the offcanvas is closed.\n   */\n  @Listen(\"click\", {capture: true})\n  @Listen(\"focusin\", {capture: true})\n  stopEvent(event: Event): void {\n    if (this.open) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  /**\n   * Hide the body overflow when the offcanvas is open.\n   */\n  @Watch(\"variant\")\n  private handlePageOverflow(): void {\n    const overflow =\n      this.variant === OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP\n        ? \"overflow-y\"\n        : \"overflow-x\";\n\n    document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    this.canvasOpenStatusChanged.emit(this.open);\n\n    if (this.open) {\n      // Store the element that was focused before the offcanvas opens, this allows restoring the focus when the offcanvas closes.\n      this.previouslyFocusedElement = document.activeElement as HTMLElement;\n\n      // Move focus inside the offcanvas once it is rendered.\n      if (this.allFocusableElements.length > 0) {\n        this.allFocusableElements[0].focus();\n      } else {\n        this.canvasContent?.focus();\n      }\n\n      this.handlePageOverflow();\n    } else {\n      // Restore focus to the element that was focused before the offcanvas was opened.\n      this.previouslyFocusedElement?.focus();\n\n      // When the offcanvas is closing, wait for the transitionend event before restoring the page overflow.\n      const listenerCallback = (): void => {\n        this.handlePageOverflow();\n        this.canvasContainer.removeEventListener(\"transitionend\", listenerCallback);\n      };\n\n      this.canvasContainer?.addEventListener(\"transitionend\", listenerCallback);\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.open) {\n      this.skipAnimation = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.handlePageOverflow();\n  }\n\n  componentDidRender(): void {\n    this.skipAnimation = false;\n    this.allFocusableElements = this.getFocusableElements();\n  }\n\n  connectedCallback(): void {\n    this.handlePageOverflow();\n  }\n\n  disconnectedCallback(): void {\n    this.open = false;\n  }\n\n  render(): HTMLZOffcanvasElement {\n    return (\n      <Host\n        skip-animation={this.skipAnimation}\n        aria-hidden={!this.open ? \"true\" : null}\n      >\n        <div\n          class=\"canvas-container\"\n          role=\"presentation\"\n          ref={(el) => (this.canvasContainer = el)}\n        >\n          <div\n            class=\"canvas-content z-scrollbar\"\n            role=\"presentation\"\n            ref={(el) => (this.canvasContent = el)}\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={() => (this.open = false)}\n            ></div>\n          )}\n      </Host>\n    );\n  }\n}\n",":host {\n  --z-searchbar-tag-text-color: var(--color-primary03);\n  --z-searchbar-tag-bg: var(--color-hover-primary);\n  --z-searchbar-item-height: 44px;\n\n  z-index: 15;\n  display: flex;\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  box-sizing: border-box;\n}\n\n:host::part(list-item-container) {\n  display: block;\n  min-height: unset;\n  padding: 0;\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.results-wrapper {\n  position: absolute;\n  top: calc(100% - 1px);\n  left: 0;\n  width: 100%;\n  padding: calc(var(--space-unit) / 4);\n  border: var(--border-size-small) solid var(--color-surface03);\n  border-top: none;\n  background: var(--color-surface01);\n}\n\n.results {\n  overflow: auto;\n  max-height: var(--z-searchbar-results-height, 540px);\n  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);\n}\n\n.results::-webkit-scrollbar {\n  width: 6px;\n  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n.results::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary01);\n}\n\n.results::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n/* Firefox scrollbar */\n@supports not selector(.results::-webkit-scrollbar-track) {\n  .results {\n    scrollbar-color: var(--color-primary01) transparent;\n  }\n}\n\n.results .category-heading {\n  display: block;\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  line-height: var(--font-size-3);\n}\n\n.results .category-heading > * {\n  display: block;\n}\n\n.results .category-heading > .category {\n  color: var(--color-text05);\n  font-style: italic;\n}\n\n.results .category-heading > .subcategory {\n  margin-top: var(--space-unit);\n  color: var(--color-default-text);\n  text-transform: uppercase;\n}\n\n.results z-list-element {\n  position: relative;\n  display: block;\n}\n\nz-list-element > .item-search {\n  padding: var(--space-unit) 0;\n}\n\nz-list z-list-element::before {\n  position: absolute;\n  z-index: 100;\n  top: 5px;\n  left: -20px;\n  width: 8px;\n  height: 1em;\n  border-bottom: 1px solid var(--color-disabled01-icon);\n  border-left: 1px solid var(--color-disabled01-icon);\n  content: \"\";\n  cursor: pointer;\n}\n\nz-list z-list-element::after {\n  position: absolute;\n  z-index: 100;\n  top: 5px;\n  left: -20px;\n  width: 8px;\n  height: 100%;\n  border-left: 1px solid var(--color-disabled01-icon);\n  content: \"\";\n  cursor: pointer;\n}\n\nz-list z-list-element:last-child::after {\n  display: none;\n}\n\nz-list > z-list-element::before,\nz-list > z-list-element::after,\nz-list > z-list-group > z-list-element::before,\nz-list > z-list-group > z-list-element::after {\n  display: none;\n}\n\nz-list > div.children-node {\n  padding-left: calc(var(--space-unit) * 3);\n}\n\n.results z-list-element > .list-element {\n  display: flex;\n  justify-content: space-between;\n  padding: calc(var(--space-unit) * 1.25) 0;\n  cursor: pointer;\n}\n\n.results z-list-element > .list-element:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.results z-list-element > .list-element .item.ellipsis {\n  overflow: hidden;\n}\n\n.results z-list-element .list-element::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: block;\n  width: 100%;\n  height: 44px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\n.results z-list-element .list-element.focused.hovered::after {\n  padding-left: 6px;\n}\n\n.results z-list-element > .list-element:hover,\n.results z-list-element > .list-element:hover::after {\n  background-color: var(--color-background);\n  cursor: pointer;\n}\n\n.results z-list-element > .list-element > z-tag {\n  border: 1px solid var(--gray800);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n\n  --z-tag-bg: var(--z-searchbar-tag-bg);\n  --z-tag-text-color: var(--z-searchbar-tag-text-color);\n}\n\n.results .item {\n  --z-icon-height: 12px;\n  --z-icon-width: 12px;\n\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  color: var(--color-default-text);\n  column-gap: calc(var(--space-unit) * 1.5);\n  fill: var(--color-default-icon);\n  font-size: var(--font-size-2);\n  line-height: var(--font-size-6);\n}\n\n.results .item.ellipsis > .item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.results .item > .item-label mark {\n  background: var(--color-primary03);\n}\n\n.results .item.item-search {\n  --z-icon-height: 16px;\n  --z-icon-width: 16px;\n}\n\n.results .item-show-all {\n  text-align: center;\n}\n\n.results .item-no-results {\n  display: block;\n  font-size: var(--font-size-2);\n  font-style: italic;\n  line-height: var(--font-size-5);\n}\n\n.results .item-no-results > ul {\n  padding-left: calc(var(--space-unit) * 2);\n  margin: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  .results .category-heading {\n    font-size: var(--font-size-3);\n    line-height: var(--font-size-6);\n  }\n\n  .results .item {\n    font-size: var(--font-size-3);\n    line-height: var(--font-size-6);\n  }\n\n  .results .item.item-search {\n    --z-icon-height: 18px;\n    --z-icon-width: 18px;\n  }\n\n  .results .item.ellipsis > .item-label {\n    height: 1.5rem;\n  }\n\n  .results z-list-element > .list-element > z-tag {\n    min-width: max-content;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  .results .item {\n    cursor: pointer;\n  }\n\n  .results .item-no-results {\n    cursor: default;\n    font-size: var(--font-size-3);\n    line-height: var(--font-size-6);\n  }\n}\n\n:host([size=\"small\"]) .results :is(.item, .category-heading),\n:host([size=\"x-small\"]) .results :is(.item, .category-heading) {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .results .item:not(.has-category),\n:host([size=\"x-small\"]) .results .item:not(.has-category) {\n  --z-icon-height: 16px;\n  --z-icon-width: 16px;\n}\n\n:host([size=\"small\"]) z-list-element > .list-element,\n:host([size=\"small\"]) z-list-element > .item-search {\n  padding: calc(var(--space-unit) * 0.75) 0;\n}\n\n:host([size=\"x-small\"]) z-list-element > .list-element,\n:host([size=\"x-small\"]) z-list-element > .item-search {\n  padding: calc(var(--space-unit) / 2) 0;\n}\n\n:host([size=\"small\"]) z-list-element .list-element::after {\n  height: 36px;\n}\n\n:host([size=\"x-small\"]) z-list-element .list-element::after {\n  height: 32px;\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","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {\n  ButtonVariant,\n  ControlSize,\n  Device,\n  KeyboardCode,\n  ListDividerType,\n  SearchbarGroup,\n  SearchbarGroupedItem,\n  SearchbarItem,\n} from \"../../beans\";\nimport {getDevice, handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n/**\n * @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)\n * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);\n * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);\n */\n@Component({\n  tag: \"z-searchbar\",\n  styleUrls: [\"styles.css\", \"../css-components/z-label/styles.css\"],\n  shadow: true,\n})\nexport class ZSearchbar {\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  /** Set button icon without label*/\n  @Prop()\n  searchButtonIconOnly?: boolean = false;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */\n  @Prop()\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  @State()\n  searchString = this.value;\n\n  @State()\n  currResultsCount = 0;\n\n  @State()\n  showResults = false;\n\n  @State()\n  isMobile = false;\n\n  @State()\n  selectedItem?: SearchbarItem;\n\n  @Element() element: HTMLZSearchbarElement;\n\n  private resultsItemsList: SearchbarItem[] | undefined = null;\n\n  private inputRef: HTMLZInputElement;\n\n  private resizeObserver: ResizeObserver;\n\n  private items: HTMLElement[] = [];\n\n  /** Emitted on search submit, return search string */\n  @Event()\n  searchSubmit: EventEmitter<string>;\n\n  private emitSearchSubmit(): void {\n    this.searchSubmit.emit(this.inputRef.value);\n  }\n\n  /** Emitted on search typing, return search string */\n  @Event()\n  searchTyping: EventEmitter<string>;\n\n  private emitSearchTyping(search: string): void {\n    this.searchTyping.emit(search);\n  }\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  @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.emitSearchTyping(this.searchString);\n    this.items = [];\n    if (!this.searchString) {\n      this.currResultsCount = this.resultsCount;\n    }\n  }\n\n  @Watch(\"showResults\")\n  watchShowResults(): void {\n    if (!this.showResults) {\n      this.items = [];\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentDidLoad(): void {\n    this.resizeObserver = new ResizeObserver(() => {\n      if (getDevice() === Device.MOBILE && !this.isMobile) {\n        this.isMobile = true;\n      }\n      if (getDevice() !== Device.MOBILE && this.isMobile) {\n        this.isMobile = false;\n      }\n    });\n    this.resizeObserver.observe(this.element);\n  }\n\n  componentWillLoad(): void {\n    this.resultsItemsList = this.getResultsItemsList();\n    this.currResultsCount = this.resultsCount;\n  }\n\n  private getResultsItemsList(): SearchbarItem[] | undefined {\n    return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n  }\n\n  private getGroupedItems(items: SearchbarItem[]): SearchbarGroupedItem {\n    const groupedItems = {};\n    items.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 checkResultsCount(counter: number): boolean {\n    if (!this.currResultsCount || counter < this.currResultsCount) {\n      return true;\n    }\n\n    return false;\n  }\n\n  private handleStopTyping(e: CustomEvent): void {\n    e.stopPropagation();\n    this.searchString = e.detail.value;\n    if (this.selectedItem) {\n      this.selectedItem = undefined;\n    }\n  }\n\n  private handleSubmit(): void {\n    if (this.preventSubmit) {\n      return;\n    }\n    this.emitSearchSubmit();\n  }\n\n  @Listen(\"click\", {target: \"document\"})\n  private handleOutsideClick(e: MouseEvent): void {\n    const cp = e.composedPath();\n\n    const searchbar = cp.find((elem: HTMLElement) => elem.nodeName === \"Z-SEARCHBAR\");\n    if (!searchbar || (searchbar as HTMLZSearchbarElement).htmlid !== this.htmlid) {\n      this.showResults = false;\n\n      return;\n    }\n\n    if (cp.find((elem: HTMLElement) => elem?.nodeName === \"Z-INPUT\" || elem?.classList?.contains(\"results\"))) {\n      this.showResults = true;\n\n      return;\n    }\n\n    this.showResults = false;\n  }\n\n  private renderInput(): HTMLZInputElement {\n    return (\n      <z-input\n        ref={(val) => {\n          this.inputRef = val;\n        }}\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        value={this.searchString || this.selectedItem?.label}\n        size={this.size}\n        label={this.label}\n        aria-label={this.htmlAriaLabel || this.placeholder}\n      />\n    );\n  }\n\n  private renderButton(): HTMLZButtonElement | null {\n    if (!this.showSearchButton) {\n      return null;\n    }\n\n    const iconProp = this.searchButtonIconOnly ? {icon: \"search\"} : null;\n    const buttonLabel = this.searchButtonIconOnly ? \"\" : \"CERCA\";\n    const ariaLabel = this.searchButtonIconOnly ? {\"aria-label\": \"CERCA\"} : null;\n    const defaultProps = {\n      disabled: this.preventSubmit,\n      variant: this.variant,\n      size: this.size,\n      onClick: () => this.handleSubmit(),\n      ...iconProp,\n      ...ariaLabel,\n    };\n\n    return <z-button {...defaultProps}>{buttonLabel}</z-button>;\n  }\n\n  private renderResults(): HTMLDivElement | null {\n    if (\n      !this.showResults ||\n      !this.autocomplete ||\n      !this.searchString ||\n      this.searchString.length < this.autocompleteMinChars ||\n      !this.resultsItemsList\n    ) {\n      return null;\n    }\n\n    return (\n      <div class=\"results-wrapper\">\n        <div class=\"results\">{this.renderResultsList()}</div>\n      </div>\n    );\n  }\n\n  private renderResultsList(): HTMLZListElement | HTMLSpanElement {\n    if (this.preventSubmit && !this.resultsItemsList?.length) {\n      return (\n        <span class=\"item item-no-results\">\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        </span>\n      );\n    }\n\n    return (\n      <z-list\n        role=\"listbox\"\n        id={`list-${this.htmlid}`}\n        aria-label={this.htmlAriaLabel || this.label}\n      >\n        {this.renderSearchHelper(!!this.resultsItemsList?.length)}\n        {this.renderItems()}\n        {this.renderShowAllResults()}\n      </z-list>\n    );\n  }\n\n  private renderItems(): HTMLZListGroupElement[] {\n    if (!this.resultsItemsList?.length) {\n      return [];\n    }\n\n    const groupedItems = this.getGroupedItems(this.resultsItemsList);\n    const listGroups: HTMLZListGroupElement[] = [];\n    let counter = 0;\n\n    Object.values(groupedItems).forEach((groupItem: SearchbarGroup, index: number, array) => {\n      if (this.checkResultsCount(counter)) {\n        const listGroupsElements: HTMLZListElement[] = [];\n        groupItem.items.forEach((item: SearchbarItem, subindex: number, subarray) => {\n          if (this.checkResultsCount(counter)) {\n            const isLast = index === array.length - 1 && subindex === subarray.length - 1;\n            listGroupsElements.push(this.renderItem(item, subindex, !isLast));\n          }\n          counter++;\n        });\n\n        if (listGroupsElements.length) {\n          listGroups.push(\n            <z-list-group divider-type={ListDividerType.ELEMENT}>\n              {this.renderItemCategory(groupItem)}\n              {listGroupsElements}\n            </z-list-group>\n          );\n        }\n      }\n    });\n\n    return listGroups;\n  }\n\n  private handleArrowsNavigation(e: KeyboardEvent): void {\n    const currentElement = e.target as HTMLElement;\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n\n    if (!arrows.includes(e.key as KeyboardCode)) {\n      e.preventDefault();\n\n      return;\n    }\n\n    if (!this.items.length) {\n      const list = this.element.shadowRoot.querySelector(\"z-list\");\n      if (!list) {\n        return;\n      }\n\n      this.items = Array.from(list.querySelectorAll(\".list-element\"));\n    }\n\n    this.items.forEach((item) => item.classList.contains(\"focused\") && item.classList.remove(\"focused\"));\n\n    const currentIndex = this.items.indexOf(currentElement as HTMLZListElementElement);\n\n    if (e.key === KeyboardCode.ARROW_DOWN) {\n      e.preventDefault();\n      const nextIndex = currentIndex + 1;\n      if (nextIndex < this.items.length) {\n        (this.items[nextIndex] as HTMLElement).focus();\n        this.items[nextIndex].classList.add(\"focused\");\n      }\n    }\n\n    if (e.key === KeyboardCode.ARROW_UP) {\n      e.preventDefault();\n      const prevIndex = currentIndex - 1;\n      if (prevIndex < 0) {\n        this.element.shadowRoot.querySelector(\"input\").focus();\n        this.element.shadowRoot\n          .querySelector(\"input\")\n          .setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);\n      }\n      if (prevIndex >= 0) {\n        (this.items[prevIndex] as HTMLElement).focus();\n        this.items[prevIndex].classList.add(\"focused\");\n      }\n    }\n  }\n\n  private renderItem(item: SearchbarItem, key: number, divider: boolean): HTMLZListElementElement {\n    return (\n      <z-list-element\n        id={`list-item-${this.htmlid}-${key}`}\n        tabIndex={0}\n        role=\"option\"\n        dividerType={divider ? ListDividerType.ELEMENT : undefined}\n        onKeyDown={(e: KeyboardEvent) => this.handleArrowsNavigation(e)}\n      >\n        <div\n          class=\"list-element\"\n          tabIndex={0}\n          onClick={() => this.emitSearchItemClick(item)}\n          onKeyDown={(e: KeyboardEvent) => handleEnterKeydSubmit(e, () => this.emitSearchItemClick(item))}\n          onMouseEnter={(e: MouseEvent) => {\n            const currentElement = e.target as HTMLElement;\n            currentElement.classList.add(\"hovered\");\n          }}\n          onMouseLeave={(e: MouseEvent) => {\n            const currentElement = e.target as HTMLElement;\n            currentElement.classList.contains(\"hovered\") && currentElement.classList.remove(\"hovered\");\n          }}\n        >\n          <span class=\"item ellipsis\">\n            {item?.icon && (\n              <z-icon\n                class=\"item-icon\"\n                name={item.icon}\n              />\n            )}\n            <span\n              class=\"item-label\"\n              title={item.label}\n              innerHTML={this.renderItemLabel(item.label)}\n            />\n          </span>\n          {item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n        </div>\n        {item.children && item.children.length > 0 ? (\n          <z-list>\n            <div class=\"children-node\">{item.children.map((child, index) => this.renderItem(child, index, false))}</div>\n          </z-list>\n        ) : null}\n      </z-list-element>\n    );\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 renderItemCategory(groupItem: SearchbarGroup): HTMLSpanElement | null {\n    if (!groupItem?.category) {\n      return null;\n    }\n\n    return (\n      <span\n        class=\"category-heading\"\n        slot=\"header-title\"\n      >\n        <span class=\"category\">{groupItem.category}</span>\n        {groupItem?.subcategory && <span class=\"subcategory\">{groupItem.subcategory}</span>}\n      </span>\n    );\n  }\n\n  private renderSearchHelper(hasDivider = true): HTMLZListElement | null {\n    if (!this.autocomplete || this.preventSubmit || !this.searchString) {\n      return null;\n    }\n\n    return (\n      <z-list-element\n        role=\"option\"\n        dividerType={hasDivider ? ListDividerType.ELEMENT : undefined}\n        id={`list-item-${this.htmlid}-search`}\n        onKeyDown={(e: KeyboardEvent) => this.handleArrowsNavigation(e)}\n      >\n        <div\n          tabindex={0}\n          onClick={() => this.emitSearchSubmit()}\n          onKeyDown={(e: KeyboardEvent) => handleEnterKeydSubmit(e, () => this.emitSearchSubmit())}\n          class=\"list-element\"\n        >\n          <span class=\"item item-search\">\n            <z-icon\n              class=\"search-icon\"\n              name=\"left-magnifying-glass\"\n            />\n            <span\n              class=\"item-label\"\n              innerHTML={this.searchHelperLabel.replace(\"{searchString}\", `<mark>${this.searchString}</mark>`)}\n            />\n          </span>\n        </div>\n      </z-list-element>\n    );\n  }\n\n  private renderShowAllResults(): HTMLZListElement | null {\n    if (\n      !this.currResultsCount ||\n      !this.searchString ||\n      !this.resultsItemsList?.length ||\n      this.currResultsCount >= this.resultsItemsList?.length\n    ) {\n      return null;\n    }\n\n    return (\n      <z-list-element\n        role=\"option\"\n        tabindex={0}\n        clickable\n        id={`list-item-${this.htmlid}-show-all`}\n        onClickItem={() => (this.currResultsCount = 0)}\n        color=\"color-primary01\"\n      >\n        <div class=\"item-show-all\">Vedi tutti i risultati</div>\n      </z-list-element>\n    );\n  }\n\n  render(): HTMLZSearchbarElement {\n    return (\n      <Host\n        onFocus={() => (this.showResults = true)}\n        onClick={(e) => this.handleOutsideClick(e)}\n        class={{\"has-submit\": this.showSearchButton, \"has-results\": this.autocomplete}}\n      >\n        <div class=\"input-container\">\n          {this.renderInput()}\n          {this.renderResults()}\n        </div>\n        {this.renderButton()}\n      </Host>\n    );\n  }\n}\n",":host {\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, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * Ztag component.\n * @slot - The text of the z-tag.\n * @cssprop --z-tag-text-color - text and icon color using tokens.\n * @cssprop --z-tag-bg - background color 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 {\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    const hasText = this.host.textContent?.trim().length > 0;\n\n    return (\n      <Host\n        class={{\n          \"expandable\": this.expandable && !!this.icon,\n          \"has-text\": hasText,\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-9814f864.entry.js

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

package/www/build/p-9814f864.entry.js.map

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

package/www/build/p-988a58dd.entry.js

@@ -0,0 +1,2 @@
+export{Z as z_tbody}from"./p-623fdee4.js";import"./p-75c4a726.js";
+//# sourceMappingURL=p-988a58dd.entry.js.map

package/www/build/p-988a58dd.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/www/build/p-9ae0c0c6.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,a as o,g as s}from"./p-75c4a726.js";const a=':host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-primary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot="item"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"][active]){color:var(--color-primary01);font-weight:var(--font-bd)}';const l=a;const n=class{constructor(i){t(this,i);this.opened=e(this,"opened",7);this.closed=e(this,"closed",7);this.active=undefined;this.open=undefined;this.hasContent=undefined}toggle(){if(!this.hasContent){return}this.open=!this.open;this.open?this.opened.emit():this.closed.emit()}handleClick(t){if(!this.open||this.hostElement.contains(t.target)){return}this.open=false;this.closed.emit()}checkContent(){this.hasContent=this.hostElement.querySelectorAll('[slot="item"]').length>0}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=(e===null||e===void 0?void 0:e.innerText)||null}componentWillLoad(){this.checkContent()}render(){return i(o,{key:"6cc06eccce2d2c9611936c2b804f3c7744774aad",role:"menu",open:this.open},i("button",{key:"2cc287717a677392b5084f61b6eca0fd88dc13c0",class:"label","aria-pressed":this.open?"true":"false",onClick:this.toggle.bind(this)},i("slot",{key:"2b3d76700bea806f8b0db6a9d3fd915885b275c2",onSlotchange:this.onLabelSlotChange.bind(this)}),this.hasContent&&i("z-icon",{key:"16162d96f5d3d3fb475db88525ce9e23e34a08c6",name:this.open?"chevron-up":"chevron-down"})),this.open&&i("div",{key:"801f6e8e3f54fc7a64e3b6388f4c4d7297a3e757",class:"items"},i("slot",{key:"875889ac362c006c632db4eb04f32e228f7cb13c",name:"item",onSlotchange:this.checkContent.bind(this)})))}get hostElement(){return s(this)}};n.style=l;export{n as z_menu_section_deprecated};
+//# sourceMappingURL=p-9ae0c0c6.entry.js.map

package/www/build/p-9ae0c0c6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMenuSectionDeprecatedStyle0","ZMenuSectionDeprecated","toggle","this","hasContent","open","opened","emit","closed","handleClick","ev","hostElement","contains","target","checkContent","querySelectorAll","length","onLabelSlotChange","labelElement","assignedElements","dataset","text","innerText","componentWillLoad","render","h","Host","key","role","class","onClick","bind","onSlotchange","name"],"sources":["src/components/deprecated/z-menu-section-deprecated/styles.css?tag=z-menu-section-deprecated&encapsulation=shadow","src/components/deprecated/z-menu-section-deprecated/index.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host(:is([active], [open])) .label,\n.label:hover {\n  border-color: var(--color-primary01);\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n  font-weight: var(--font-bd);\n}\n\n.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  overflow: hidden;\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n.label ::slotted(*) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.25;\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.label z-icon {\n  margin-left: calc(var(--space-unit) * 4);\n  fill: var(--color-default-icon);\n}\n\n.items {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: calc(var(--space-unit) / 2);\n  padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-2);\n  line-height: 1.4;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"][active]) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n  tag: \"z-menu-section-deprecated\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSectionDeprecated {\n  @Element() hostElement: HTMLZMenuSectionDeprecatedElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  @State()\n  open: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.open || this.hostElement.contains(ev.target as Node)) {\n      return;\n    }\n\n    this.open = false;\n    this.closed.emit();\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.innerText || null;\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host\n        role=\"menu\"\n        open={this.open}\n      >\n        <button\n          class=\"label\"\n          aria-pressed={this.open ? \"true\" : \"false\"}\n          onClick={this.toggle.bind(this)}\n        >\n          <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n          {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div class=\"items\">\n            <slot\n              name=\"item\"\n              onSlotchange={this.checkContent.bind(this)}\n            ></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,67DAClB,MAAAC,EAAeD,E,MCWFE,EAAsB,M,2JAqBzB,MAAAC,GACN,IAAKC,KAAKC,WAAY,CACpB,M,CAGFD,KAAKE,MAAQF,KAAKE,KAClBF,KAAKE,KAAOF,KAAKG,OAAOC,OAASJ,KAAKK,OAAOD,M,CAK/C,WAAAE,CAAYC,GACV,IAAKP,KAAKE,MAAQF,KAAKQ,YAAYC,SAASF,EAAGG,QAAiB,CAC9D,M,CAGFV,KAAKE,KAAO,MACZF,KAAKK,OAAOD,M,CAMN,YAAAO,GACNX,KAAKC,WAAaD,KAAKQ,YAAYI,iBAAiB,iBAAiBC,OAAS,C,CAOxE,iBAAAC,CAAkBP,GACxB,MAAMQ,EAAgBR,EAAGG,OAA2BM,mBAAmB,GACvED,EAAaE,QAAQC,MAAOH,IAAY,MAAZA,SAAY,SAAZA,EAAcI,YAAa,I,CAGzD,iBAAAC,GACEpB,KAAKW,c,CAGP,MAAAU,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,OACLvB,KAAMF,KAAKE,MAEXoB,EAAA,UAAAE,IAAA,2CACEE,MAAM,QAAO,eACC1B,KAAKE,KAAO,OAAS,QACnCyB,QAAS3B,KAAKD,OAAO6B,KAAK5B,OAE1BsB,EAAA,QAAAE,IAAA,2CAAMK,aAAc7B,KAAKc,kBAAkBc,KAAK5B,QAC/CA,KAAKC,YAAcqB,EAAA,UAAAE,IAAA,2CAAQM,KAAM9B,KAAKE,KAAO,aAAe,kBAE9DF,KAAKE,MACJoB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,SACTJ,EAAA,QAAAE,IAAA,2CACEM,KAAK,OACLD,aAAc7B,KAAKW,aAAaiB,KAAK5B,S","ignoreList":[]}

package/www/build/p-9c816a3b.js

@@ -0,0 +1,2 @@
+import{r as o,h as s,a as e,g as t}from"./p-75c4a726.js";const r=":host{--z-table--cells-bottom-border-size:var(\n    --border-size-medium\n  );--z-table--cells-background:var(\n    --color-background\n  );display:block;box-sizing:border-box}:host([sticky]){position:sticky;z-index:2;top:0;box-shadow:0 2px 4px -2px var(--shadow-color-base)}:host(:focus-visible){box-shadow:none;outline:none}";const c=r;const a=class{constructor(s){o(this,s);this.sticky=false;this.isFocusable=false}render(){return s(e,{key:"d975481f3702161c0d76f42c47d6194c39d08f42",role:"rowgroup",tabIndex:this.isFocusable?0:-1},s("slot",{key:"97e675dc4bbefd4aac970d10dc4499c4bc80ac23"}))}get host(){return t(this)}};a.style=c;export{a as Z};
+//# sourceMappingURL=p-9c816a3b.js.map

package/www/build/p-9c816a3b.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZTheadStyle0","ZThead","render","h","Host","key","role","tabIndex","this","isFocusable"],"sources":["src/components/table/z-thead/styles.css?tag=z-thead&encapsulation=shadow","src/components/table/z-thead/index.tsx"],"sourcesContent":[":host {\n  --z-table--cells-bottom-border-size: var(\n    --border-size-medium\n  ); /* Needed to handle the border of the expand button cell */\n\n  --z-table--cells-background: var(\n    --color-background\n  ); /* Needed to handle the background-color of the expand button cell */\n\n  display: block;\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 2;\n  top: 0;\n  box-shadow: 0 2px 4px -2px var(--shadow-color-base);\n}\n\n:host(:focus-visible) {\n  box-shadow: none;\n  outline: none;\n}\n","import {Component, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n  tag: \"z-thead\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZThead {\n  @Element() host: HTMLZTheadElement;\n\n  /**\n   * If true, the header will be stuck to the top of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * The element is focusable\n   */\n  @Prop({reflect: true})\n  isFocusable = false;\n\n  render(): HTMLZTheadElement {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={this.isFocusable ? 0 : -1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,yUAClB,MAAAC,EAAeD,E,MCUFE,EAAM,M,qCAOR,M,iBAMK,K,CAEd,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WACLC,SAAUC,KAAKC,YAAc,GAAK,GAElCN,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/www/build/p-a2ee659d.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,a as l,g as n}from"./p-75c4a726.js";import{g as s}from"./p-86618221.js";const a=':host{font-family:var(--font-family-sans)}z-list-element{position:relative;display:block;padding-top:var(--space-unit)}z-list-element::before,z-list-element::after{position:absolute;z-index:100;top:0.125rem;left:-0.5rem;content:""}z-list z-list-element::before{width:var(--space-unit);height:calc(var(--space-unit) * 2);border-bottom:var(--border-size-small) solid var(--color-disabled01-icon);border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element::after{width:var(--space-unit);height:100%;border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element:last-child::after,z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 2)}z-list-element>.list-element{z-index:100;display:flex;justify-content:space-between;padding:0;color:var(--color-default-text);font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);text-decoration:none}z-list-element>.list-element.link-clickable{color:var(--color-primary01)}z-list-element>.list-element.link-clickable:hover{text-decoration:underline}z-list-element>.list-element .item.ellipsis{overflow:hidden}z-list-element .list-element::after{position:absolute;top:0;right:-0.0625rem;display:block;width:100%;height:calc(var(--space-unit) * 5);content:"";transform:translateX(-100%)}.item-label{overflow:hidden;flex-grow:1;font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);letter-spacing:0.0032rem;line-height:1.25rem;text-overflow:ellipsis;white-space:nowrap}.item-label.bold-item{font-weight:var(--font-sb)}.item.ellipsis{display:flex;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.children-node>z-list-element{padding:0;padding-top:0.125;padding-left:calc(var(--space-unit) * 1.25)}.item-icon{margin-right:var(--space-unit)}.no-icon-label{padding-left:var(--space-unit)}.children-node>z-list-element.no-icon-elm{padding-left:0}z-list-element>.list-element:focus:focus-visible{position:relative;z-index:200;box-shadow:var(--shadow-focus-primary);outline:none}@media (max-width: 767px){z-list-element::before,z-list-element::after{top:0.1875rem}z-list z-list-element::before{height:calc(var(--space-unit) * 2.5)}.children-node>z-list-element{padding-top:var(--space-unit)}}';const r=a;const o=class{constructor(i){e(this,i);this.treeItemClicked=t(this,"treeItemClicked",7);this.parsedItems=[];this.items=[];this.htmlAriaLabelledby=undefined;this.htmlSectionTitle=undefined}watchItems(){this.parsedItems=typeof this.items==="string"?JSON.parse(this.items):this.items}componentWillLoad(){this.watchItems()}handleClick(e){this.treeItemClicked.emit({id:e.id,name:e.name,url:e.url})}getFocusableElements(){return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex="0"]'))}getAncestor(e,t){let i=e;for(let e=0;e<t;e++){i=i===null||i===void 0?void 0:i.parentElement;if(!i){return}}return i}handleArrowNav(e){if(e.code===s.TAB){e.preventDefault();return}const t=this.getFocusableElements();const i=t.indexOf(e.target);if(i===-1){return}if(e.code===s.ARROW_DOWN||e.code===s.ARROW_UP){e.preventDefault();const l=i+(e.code===s.ARROW_DOWN?1:-1);if(l<0||l>=t.length){return}t[l].focus()}if(e.code===s.ARROW_LEFT){e.preventDefault();const l=this.getAncestor(t[i],4);if(!l||!l.children[0]||l.children[0].tagName.toLowerCase()!=="a"&&l.getAttribute("tabindex")===null){return}l.children[0].focus()}if(e.code===s.ARROW_RIGHT){e.preventDefault();const t=e.target.closest("z-list-element");if(!t){return}const i=t.querySelector("z-list");if(!i){return}const l=i.querySelector('a[tabindex="0"]');if(!l){return}l.focus()}}renderTreeList(e,t,l=1){var n,a;this.htmlTag=e.url?"a":"span";const r=i("z-list-element",{id:t,class:!e.icon?"no-icon-elm":"",clickable:Boolean(e.url),hasTreeItems:true,role:"none","aria-hidden":undefined},i(this.htmlTag,{class:{"list-element":true,"z-link":Boolean(e.url),"link-clickable":Boolean(e.url)},tabIndex:e.url?0:-1,onClick:()=>this.handleClick(e),onKeyUp:t=>{if(t.code===s.ENTER||t.code===s.SPACE){this.handleClick(e)}},onKeyDown:e=>this.handleArrowNav(e),role:e.url?"treeitem":undefined,"aria-hidden":e.url?undefined:"true","aria-expanded":((n=e.children)===null||n===void 0?void 0:n.length)>0&&true,"aria-level":l,"aria-label":e.name,href:e.url},i("span",{class:"item ellipsis"},e.icon&&i("z-icon",{width:16,height:16,fill:e.url?"color-primary01":"color-default-icon",class:"item-icon",name:e.icon}),i("span",{class:{"item-label":true,"no-icon-label":!e.icon,"bold-item":e.bold},title:e.name},e.name))),((a=e.children)===null||a===void 0?void 0:a.length)>0&&i("z-list",{role:"group"},i("div",{class:"children-node"},e.children.map(((e,t)=>this.renderTreeList(e,`${t}`,l+1))))));return r}render(){const e=this.parsedItems.some((e=>!!e.url));return i(l,{key:"2dec1105883f67ec44180943079ad9bc3386102a",class:"tree-list",role:e?"navigation":"none","aria-hidden":e?undefined:"true","aria-labelledby":this.htmlAriaLabelledby},i("div",{key:"bbe5bf141b17412719b230c4848a5aa2385a8adc",tabIndex:-1,role:e?"tree":"none","aria-hidden":e?undefined:"true","aria-label":this.htmlSectionTitle},this.parsedItems.map(((e,t)=>this.renderTreeList(e,`${t}`)))))}get host(){return n(this)}static get watchers(){return{items:["watchItems"]}}};o.style=r;export{o as z_tree_list};
+//# sourceMappingURL=p-a2ee659d.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZTreeListStyle0","ZTreeList","this","parsedItems","watchItems","items","JSON","parse","componentWillLoad","handleClick","item","treeItemClicked","emit","id","name","url","getFocusableElements","Array","from","host","shadowRoot","querySelectorAll","getAncestor","element","levels","ancestor","i","parentElement","handleArrowNav","event","code","KeyboardCode","TAB","preventDefault","focusableElements","currentIndex","indexOf","target","ARROW_DOWN","ARROW_UP","nextIndex","length","focus","ARROW_LEFT","children","tagName","toLowerCase","getAttribute","ARROW_RIGHT","parentElm","closest","childrenContainer","querySelector","firstChild","renderTreeList","key","level","htmlTag","treeListContent","h","class","icon","clickable","Boolean","hasTreeItems","role","undefined","tabIndex","onClick","onKeyUp","ENTER","SPACE","onKeyDown","_a","href","width","height","fill","bold","title","_b","map","child","render","hasClickableItems","some","Host","htmlAriaLabelledby","htmlSectionTitle"],"sources":["src/components/list/z-tree-list/styles.css?tag=z-tree-list&encapsulation=shadow","src/components/list/z-tree-list/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n}\n\nz-list-element {\n  position: relative;\n  display: block;\n  padding-top: var(--space-unit);\n}\n\nz-list-element::before,\nz-list-element::after {\n  position: absolute;\n  z-index: 100;\n  top: 0.125rem;\n  left: -0.5rem;\n  content: \"\";\n}\n\nz-list z-list-element::before {\n  width: var(--space-unit);\n  height: calc(var(--space-unit) * 2);\n  border-bottom: var(--border-size-small) solid var(--color-disabled01-icon);\n  border-left: var(--border-size-small) solid var(--color-disabled01-icon);\n}\n\nz-list z-list-element::after {\n  width: var(--space-unit);\n  height: 100%;\n  border-left: var(--border-size-small) solid var(--color-disabled01-icon);\n}\n\nz-list z-list-element:last-child::after,\nz-list > z-list-element::before,\nz-list > z-list-element::after,\nz-list > z-list-group > z-list-element::before,\nz-list > z-list-group > z-list-element::after {\n  display: none;\n}\n\nz-list > div.children-node {\n  padding-left: calc(var(--space-unit) * 2);\n}\n\nz-list-element > .list-element {\n  z-index: 100;\n  display: flex;\n  justify-content: space-between;\n  padding: 0;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-style: normal;\n  font-weight: var(--font-rg);\n  text-decoration: none;\n}\n\nz-list-element > .list-element.link-clickable {\n  color: var(--color-primary01);\n}\n\nz-list-element > .list-element.link-clickable:hover {\n  text-decoration: underline;\n}\n\nz-list-element > .list-element .item.ellipsis {\n  overflow: hidden;\n}\n\nz-list-element .list-element::after {\n  position: absolute;\n  top: 0;\n  right: -0.0625rem;\n  display: block;\n  width: 100%;\n  height: calc(var(--space-unit) * 5);\n  content: \"\";\n  transform: translateX(-100%);\n}\n\n.item-label {\n  overflow: hidden;\n  flex-grow: 1;\n  font-size: var(--font-size-2);\n  font-style: normal;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.0032rem;\n  line-height: 1.25rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.item-label.bold-item {\n  font-weight: var(--font-sb);\n}\n\n.item.ellipsis {\n  display: flex;\n  overflow: hidden;\n  max-width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.children-node > z-list-element {\n  padding: 0;\n  padding-top: 0.125;\n  padding-left: calc(var(--space-unit) * 1.25);\n}\n\n.item-icon {\n  margin-right: var(--space-unit);\n}\n\n.no-icon-label {\n  padding-left: var(--space-unit);\n}\n\n.children-node > z-list-element.no-icon-elm {\n  padding-left: 0;\n}\n\nz-list-element > .list-element:focus:focus-visible {\n  position: relative;\n  z-index: 200;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n@media (max-width: 767px) {\n  z-list-element::before,\n  z-list-element::after {\n    top: 0.1875rem;\n  }\n\n  z-list z-list-element::before {\n    height: calc(var(--space-unit) * 2.5);\n  }\n\n  .children-node > z-list-element {\n    padding-top: var(--space-unit);\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, TreeListItem} from \"../../../beans\";\n\n@Component({\n  tag: \"z-tree-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTreeList {\n  @Element() host: HTMLZTreeListElement;\n\n  /** Items to render, if they have the url property they will be rendered as clickable links */\n  @Prop()\n  items: TreeListItem[] | string = [];\n\n  /** Used for aria-labelledby attribute, sets name in \"navigation\" */\n  @Prop({reflect: true})\n  htmlAriaLabelledby: string;\n\n  /** Used for aria-label attribute, sets name in \"tree\" */\n  @Prop({reflect: true})\n  htmlSectionTitle: string;\n\n  /** Emitted on item click, it return the id, name and url of the clicked item */\n  @Event()\n  treeItemClicked: EventEmitter<{id: string; name: string; url: string}>;\n\n  private parsedItems: TreeListItem[] = [];\n\n  private htmlTag: string;\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.parsedItems = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  private handleClick(item: TreeListItem): void {\n    this.treeItemClicked.emit({id: item.id, name: item.name, url: item.url});\n  }\n\n  private getFocusableElements(): HTMLElement[] {\n    return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex=\"0\"]'));\n  }\n\n  private getAncestor(element: HTMLElement, levels: number): HTMLElement | null {\n    let ancestor: HTMLElement | null = element;\n\n    for (let i = 0; i < levels; i++) {\n      ancestor = ancestor?.parentElement;\n      if (!ancestor) {\n        return;\n      }\n    }\n\n    return ancestor;\n  }\n\n  private handleArrowNav(event: KeyboardEvent): void {\n    if (event.code === KeyboardCode.TAB) {\n      event.preventDefault();\n\n      return;\n    }\n\n    const focusableElements = this.getFocusableElements();\n    const currentIndex = focusableElements.indexOf(event.target as HTMLElement);\n\n    if (currentIndex === -1) {\n      return;\n    }\n\n    if (event.code === KeyboardCode.ARROW_DOWN || event.code === KeyboardCode.ARROW_UP) {\n      event.preventDefault();\n\n      const nextIndex = currentIndex + (event.code === KeyboardCode.ARROW_DOWN ? 1 : -1);\n      if (nextIndex < 0 || nextIndex >= focusableElements.length) {\n        return;\n      }\n\n      focusableElements[nextIndex].focus();\n    }\n\n    if (event.code === KeyboardCode.ARROW_LEFT) {\n      event.preventDefault();\n      const ancestor = this.getAncestor(focusableElements[currentIndex], 4);\n\n      if (\n        !ancestor ||\n        !ancestor.children[0] ||\n        (ancestor.children[0].tagName.toLowerCase() !== \"a\" && ancestor.getAttribute(\"tabindex\") === null)\n      ) {\n        return;\n      }\n\n      (ancestor.children[0] as HTMLElement).focus();\n    }\n\n    if (event.code === KeyboardCode.ARROW_RIGHT) {\n      event.preventDefault();\n\n      const parentElm = (event.target as HTMLElement).closest(\"z-list-element\") as HTMLElement;\n\n      if (!parentElm) {\n        return;\n      }\n\n      const childrenContainer = parentElm.querySelector(\"z-list\") as HTMLElement;\n\n      if (!childrenContainer) {\n        return;\n      }\n\n      const firstChild = childrenContainer.querySelector('a[tabindex=\"0\"]') as HTMLElement;\n\n      if (!firstChild) {\n        return;\n      }\n\n      firstChild.focus();\n    }\n  }\n\n  private renderTreeList(item: TreeListItem, key: string, level = 1): HTMLZListElementElement {\n    this.htmlTag = item.url ? \"a\" : \"span\";\n\n    const treeListContent = (\n      <z-list-element\n        id={key}\n        class={!item.icon ? \"no-icon-elm\" : \"\"}\n        clickable={Boolean(item.url)}\n        hasTreeItems={true}\n        role=\"none\"\n        aria-hidden={undefined}\n      >\n        <this.htmlTag\n          class={{\n            \"list-element\": true,\n            \"z-link\": Boolean(item.url),\n            \"link-clickable\": Boolean(item.url),\n          }}\n          tabIndex={item.url ? 0 : -1}\n          onClick={() => this.handleClick(item)}\n          onKeyUp={(event: KeyboardEvent) => {\n            if (event.code === KeyboardCode.ENTER || event.code === KeyboardCode.SPACE) {\n              this.handleClick(item);\n            }\n          }}\n          onKeyDown={(event: KeyboardEvent) => this.handleArrowNav(event)}\n          role={item.url ? \"treeitem\" : undefined}\n          aria-hidden={item.url ? undefined : \"true\"}\n          aria-expanded={item.children?.length > 0 && true}\n          aria-level={level}\n          aria-label={item.name}\n          href={item.url}\n        >\n          <span class=\"item ellipsis\">\n            {item.icon && (\n              <z-icon\n                width={16}\n                height={16}\n                fill={item.url ? \"color-primary01\" : \"color-default-icon\"}\n                class=\"item-icon\"\n                name={item.icon}\n              />\n            )}\n            <span\n              class={{\n                \"item-label\": true,\n                \"no-icon-label\": !item.icon,\n                \"bold-item\": item.bold,\n              }}\n              title={item.name}\n            >\n              {item.name}\n            </span>\n          </span>\n        </this.htmlTag>\n        {item.children?.length > 0 && (\n          <z-list role=\"group\">\n            <div class=\"children-node\">\n              {item.children.map((child, key) => this.renderTreeList(child, `${key}`, level + 1))}\n            </div>\n          </z-list>\n        )}\n      </z-list-element>\n    );\n\n    return treeListContent;\n  }\n\n  render(): HTMLZTreeListElement {\n    const hasClickableItems = this.parsedItems.some((item) => !!item.url);\n\n    return (\n      <Host\n        class=\"tree-list\"\n        role={hasClickableItems ? \"navigation\" : \"none\"}\n        aria-hidden={hasClickableItems ? undefined : \"true\"}\n        aria-labelledby={this.htmlAriaLabelledby}\n      >\n        <div\n          tabIndex={-1}\n          role={hasClickableItems ? \"tree\" : \"none\"}\n          aria-hidden={hasClickableItems ? undefined : \"true\"}\n          aria-label={this.htmlSectionTitle}\n        >\n          {this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}