@zanichelli/albe-web-components 12.4.1-RC1 → 12.4.1

package/dist/web-components-library/p-b5e223fb.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZAppHeaderStyle0","SUPPORT_INTERSECTION_OBSERVER","IntersectionObserver","ZAppHeader","constructor","hostRef","this","observer","entry","_stuck","isIntersecting","threshold","openDrawer","bind","closeDrawer","collectMenuElements","evaluateViewport","window","innerWidth","currentViewport","onStuck","scrollParent","sticking","emit","setMenuFloatingMode","menuElements","length","elements","forEach","element","open","floating","drawerOpen","verticalContext","title","titleElement","hostElement","querySelector","textContent","trim","parent","offsetParent","document","body","documentElement","canShowMenu","flow","canShowSearchbar","enableSearch","searchPageUrl","hasHero","hero","querySelectorAll","menuLength","enableStuckObserver","observe","container","disableStuckMode","unobserve","onStuckMode","stuck","renderSearchLinkButton","h","class","variant","ButtonVariant","SECONDARY","href","icon","size","ControlSize","X_SMALL","renderSeachbar","searchButtonIconOnly","value","searchString","placeholder","searchPlaceholder","showSearchButton","preventSubmit","onSearchTyping","e","detail","componentDidLoad","render","Host","key","name","alt","src","ref","el","onClick","onSlotchange","OffCanvasVariant","OVERLAY","transitiondirection","TransitionDirection","RIGHT","onCanvasOpenStatusChanged","ev","slot","disabled","ZButtonStyle0","ZButton","ButtonType","BUTTON","PRIMARY","BIG","getAttributes","id","htmlid","Object","assign","ariaLabel","target","width","height","type","role","ZDividerStyle0","ZDivider","DividerSize","SMALL","DividerOrientation","HORIZONTAL","orientation","style","backgroundColor","color","ZIconStyle0","ZIcon","selectPathOrPolygon","iconValue","startsWith","d","ICONS","points","viewBox","iconid","fill","ZInputStyle0","ZInput","typingtimeout","randomId","LabelPosition","inputCheckListener","data","InputType","RADIO","checked","isChecked","CHECKBOX","console","warn","emitInputChange","isTyping","emitStartTyping","validity","TEXTAREA","getValidity","inputChange","clearTimeout","timer","setTimeout","emitStopTyping","startTyping","stopTyping","emitInputCheck","inputCheck","input","getTextAttributes","readonly","required","htmltitle","minlength","maxlength","status","filled","autocomplete","onInput","getNumberAttributes","NUMBER","min","max","step","getPatternAttribute","PASSWORD","TEXT","TEL","SEARCH","URL","EMAIL","pattern","getRoleAttribute","getAriaAttrubutes","expanded","ariaExpanded","controls","ariaControls","ariaAutocomplete","activedescendant","ariaActivedescendant","renderInputText","attr","hasclearicon","renderLabel","passwordHidden","inputRef","renderIcons","renderMessage","label","htmlFor","renderResetIcon","renderIcon","renderShowHidePassword","tabIndex","hidden","boolean","message","undefined","renderTextarea","attributes","handleCheck","renderCheckbox","onChange","after","labelPosition","before","LEFT","innerHTML","renderRadio","ZInputMessageStyle0","ZInputMessage","statusIcons","success","error","warning","onMessageChange","statusRole","componentWillLoad","ZListStyle0","ZList","ListSize","MEDIUM","ListType","NONE","setChildrenSizeType","children","host","i","setAttribute","listType","toString","ZListElementStyle0","ZListElement","accessibleFocusHandler","listElementId","toFocus","shadowRoot","getElementById","focus","openElementConfig","accordion","close","menu","ExpandableListButtonAlign","ListDividerType","ExpandableListStyle","ACCORDION","handleClick","handleKeyDown","clickItem","expandable","showInnerContent","calculateClass","isContextualMenu","event","expandByKey","code","KeyboardCode","ENTER","ARROW_DOWN","preventDefault","accessibleFocus","ARROW_UP","renderExpandableButton","expandableStyle","renderExpandedContent","renderContent","ORDERED","listElementPosition","UNORDERED","onFocus","ariaDescendantFocus","onKeyDown","clickable","tabindex","part","dividerType","ELEMENT","dividerColor","dividerSize","ZListGroupStyle0","ZListGroup","hasHeader","HEADER","ZOffcanvasStyle0","ZOffcanvas","PUSHCONTENT","onOpenChanged","skipLoadAnimation","handlePageOverflow","canvasOpenStatusChanged","overflow","disconnectedCallback","onTransitionEnd","ZSearchbarStyle0","ZSearchbar","resultsItemsList","emitSearchSubmit","searchSubmit","emitSearchTyping","search","searchTyping","emitSearchItemClick","item","searchItemClick","watchItems","getResultsItemsList","watchResultsCount","currResultsCount","resultsCount","watchValue","watchSearchString","resultsItems","JSON","parse","getGroupedItems","items","groupedItems","category","subcategory","_a","push","sortResultsItems","keys","sort","reduce","obj","a","b","nameA","toUpperCase","nameB","checkResultsCount","counter","handleStopTyping","stopPropagation","handleSubmit","handleOutsideClick","cp","composedPath","searchbar","find","elem","nodeName","showResults","classList","contains","renderInput","val","onStopTyping","onKeyUp","handleEnterKeydSubmit","renderButton","iconProp","buttonLabel","defaultProps","renderResults","autocompleteMinChars","renderResultsList","renderSearchHelper","_b","renderItems","renderShowAllResults","listGroups","values","groupItem","index","array","listGroupsElements","subindex","subarray","isLast","renderItem","renderItemCategory","divider","onClickItem","ellipsis","resultsEllipsis","renderItemLabel","replace","RegExp","found","hasDivider","searchHelperLabel"],"sources":["src/components/navigation/z-app-header/styles.css?tag=z-app-header&encapsulation=shadow","src/components/navigation/z-app-header/index.tsx","src/components/buttons/z-button/styles.css?tag=z-button&encapsulation=scoped","src/components/buttons/z-button/index.tsx","src/components/z-divider/styles.css?tag=z-divider&encapsulation=scoped","src/components/z-divider/index.tsx","src/components/icons/z-icon/styles.css?tag=z-icon&encapsulation=shadow","src/components/icons/z-icon/index.tsx","src/components/inputs/z-input/styles.css?tag=z-input&encapsulation=scoped","src/components/inputs/z-input/index.tsx","src/components/inputs/z-input-message/styles.css?tag=z-input-message&encapsulation=shadow","src/components/inputs/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/inputs/z-searchbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/inputs/z-searchbar/index.tsx"],"sourcesContent":[":host {\n  --app-header-typography-1-size: 24px;\n  --app-header-typography-2-size: 28px;\n  --app-header-typography-3-size: 32px;\n  --app-header-typography-4-size: 36px;\n  --app-header-typography-5-size: 42px;\n  --app-header-typography-6-size: 48px;\n  --app-header-typography-7-size: 54px;\n  --app-header-typography-8-size: 60px;\n  --app-header-typography-9-size: 68px;\n  --app-header-typography-10-size: 76px;\n  --app-header-typography-11-size: 84px;\n  --app-header-typography-12-size: 92px;\n  --app-header-typography-1-lineheight: 1.33;\n  --app-header-typography-2-lineheight: 1.29;\n  --app-header-typography-3-lineheight: 1.25;\n  --app-header-typography-4-lineheight: 1.24;\n  --app-header-typography-5-lineheight: 1.24;\n  --app-header-typography-6-lineheight: 1.25;\n  --app-header-typography-7-lineheight: 1.2;\n  --app-header-typography-8-lineheight: 1.26;\n  --app-header-typography-9-lineheight: 1.24;\n  --app-header-typography-10-lineheight: 1.26;\n  --app-header-typography-11-lineheight: 1.2;\n  --app-header-typography-12-lineheight: 1.2;\n  --app-header-typography-1-tracking: calc(-0.2 / 1em);\n  --app-header-typography-2-tracking: calc(-0.4 / 1em);\n  --app-header-typography-3-tracking: calc(-0.6 / 1em);\n  --app-header-typography-4-tracking: calc(-0.8 / 1em);\n  --app-header-typography-5-tracking: calc(-1 / 1em);\n  --app-header-typography-6-tracking: calc(-1.2 / 1em);\n  --app-header-typography-7-tracking: calc(-1.4 / 1em);\n  --app-header-typography-8-tracking: calc(-1.6 / 1em);\n  --app-header-typography-9-tracking: calc(-1.8 / 1em);\n  --app-header-typography-10-tracking: calc(-2 / 1em);\n  --app-header-typography-11-tracking: calc(-2.2 / 1em);\n  --app-header-typography-12-tracking: calc(-2.4 / 1em);\n  --app-header-content-max-width: 100%;\n  --app-header-height: auto;\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: 48px;\n  --app-header-drawer-trigger-size: calc(var(--space-unit) * 4);\n\n  /* Variable to customize header background color. */\n  --app-header-bg: var(--color-surface01);\n\n  /* Variable to customize stuck header background color. */\n  --app-header-stucked-bg: var(--color-surface01);\n\n  /* Variable to customize text and icon color. */\n  --app-header-text-color: var(--color-text01);\n\n  /* Variable to customize the title's font size.\n  NOTE: Only use one of the exported `--app-header-typography-*-size` as a value. */\n  --app-header-title-font-size: var(--app-header-typography-3-size);\n\n  /* Variable to customize the title's line-height.\n  NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value\n  and use the same level as the one of the font size. */\n  --app-header-title-lineheight: var(--app-header-typography-3-lineheight);\n\n  /* Variable to customize the title's letter-spacing.\n  NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value\n  and use the same level as the one of the font size. */\n  --app-header-title-letter-spacing: var(--app-header-typography-3-tracking);\n\n  /* Variable to customize stuck header's text and icon color. */\n  --app-header-stucked-text-color: var(--color-text01);\n\n  position: relative;\n  display: block;\n  height: var(--app-header-height);\n  color: var(--app-header-text-color);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n.heading-panel {\n  position: relative;\n  display: flex;\n  width: 100%;\n  max-width: var(--app-header-content-max-width);\n  flex-direction: column;\n  flex-grow: 0;\n  flex-shrink: 0;\n  align-items: baseline;\n  padding: var(--grid-margin);\n  margin: 0 auto;\n  background: var(--app-header-bg);\n  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n}\n\n.hero-container + .heading-panel {\n  background: transparent;\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-title {\n  display: flex;\n  max-width: 100%;\n  flex-direction: row;\n  align-items: flex-start;\n  column-gap: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"title\"]),\n.heading-stuck .heading-title > *,\n::slotted([slot=\"stucked-title\"]) {\n  margin: 0;\n  font-family: \"IBM Plex Serif\", serif;\n  font-weight: var(--font-bd);\n}\n\n::slotted([slot=\"title\"]) {\n  font-size: var(--app-header-title-font-size);\n  letter-spacing: var(--app-header-title-letter-spacing);\n  line-height: var(--app-header-title-lineheight);\n}\n\n.heading-stuck .heading-title > *,\n::slotted([slot=\"stucked-title\"]) {\n  font-size: var(--app-header-typography-3-size);\n  letter-spacing: var(--app-header-typography-3-tracking);\n  line-height: var(--app-header-typography-3-lineheight);\n}\n\n:host(:not([menu-length=\"0\"])) .heading-subtitle {\n  padding-left: calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2));\n}\n\n::slotted([slot=\"top-subtitle\"]),\n::slotted([slot=\"subtitle\"]) {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-size: 20px;\n  font-style: italic;\n  line-height: 26px;\n}\n\n::slotted([slot=\"subtitle\"]) {\n  font-weight: 500;\n}\n\n::slotted([slot=\"top-subtitle\"]) {\n  font-weight: 400;\n}\n\n.menu-container {\n  display: flex;\n  width: 100%;\n  flex: 1 auto;\n  flex-flow: row wrap;\n}\n\n:host([menu-length=\"0\"]:not([enable-search])) .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\nz-searchbar {\n  z-index: 0;\n  display: flex;\n  width: auto;\n  min-width: calc(var(--space-unit) * 32);\n  flex: 1 auto;\n  align-items: center;\n  margin-left: auto;\n}\n\n.heading-stuck {\n  position: fixed;\n  z-index: 20;\n  top: var(--app-header-top-offset);\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);\n  box-shadow: var(--shadow-2);\n  color: var(--app-header-stucked-text-color);\n}\n\n.heading-stuck-content {\n  display: flex;\n  max-width: var(--app-header-content-max-width);\n  align-items: center;\n  padding: var(--space-unit) var(--grid-margin);\n  margin: 0 auto;\n  column-gap: calc(var(--space-unit) * 2);\n}\n\n.heading-stuck .heading-title {\n  overflow: hidden;\n}\n\n.heading-stuck .heading-title > *,\n.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]) {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.heading-stuck-content z-button {\n  margin-left: auto;\n}\n\n.drawer-trigger {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  appearance: none;\n  background: none;\n  border-radius: 0;\n  color: inherit;\n  cursor: pointer;\n}\n\n.drawer-trigger z-icon {\n  --z-icon-width: var(--app-header-drawer-trigger-size);\n  --z-icon-height: var(--app-header-drawer-trigger-size);\n\n  fill: currentcolor;\n}\n\n/* Simulate the height of the first line of text,\nto correctly align drawer icon and search page button with the title */\n.heading-container :is(.drawer-trigger, z-button.search-page-button) {\n  display: flex;\n  height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));\n  align-items: center;\n}\n\n.heading-container z-button.search-page-button {\n  margin-left: auto;\n}\n\n.drawer-content {\n  display: none;\n}\n\nz-offcanvas[open] .drawer-content {\n  display: flex;\n  width: 100%;\n  flex: 1 auto;\n  flex-direction: column;\n  row-gap: calc(var(--space-unit) * 2.5);\n}\n\nz-offcanvas[open] .drawer-content ::slotted(z-menu) {\n  width: 100%;\n}\n\n.drawer-close {\n  --z-icon-width: var(--app-header-drawer-trigger-size);\n  --z-icon-height: var(--app-header-drawer-trigger-size);\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  color: inherit;\n  cursor: pointer;\n  fill: currentcolor;\n  font-size: inherit;\n  outline: none;\n}\n\n.drawer-close:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.hero-container {\n  position: absolute;\n  z-index: 0;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n:host([overlay]) .heading-panel .drawer-trigger z-icon,\n:host([overlay]) .heading-panel .heading-container,\n:host([overlay]) .heading-panel .menu-container {\n  color: var(--color-white);\n  fill: var(--color-white);\n}\n\n:host([overlay]) .heading-panel .menu-container ::slotted(z-menu) {\n  --z-menu-label-color: var(--color-white);\n}\n\n:host([overlay]) .hero-container::after {\n  position: absolute;\n  z-index: 0;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--color-black);\n  content: \"\";\n  opacity: 0.5;\n}\n\n.hero-container img,\n.hero-container ::slotted(*) {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: top center;\n  -webkit-user-drag: none;\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  :host {\n    --app-header-title-font-size: var(--app-header-typography-6-size);\n    --app-header-title-lineheight: var(--app-header-typography-6-lineheight);\n    --app-header-title-letter-spacing: var(--app-header-typography-6-tracking);\n  }\n\n  .heading-panel {\n    flex-flow: row wrap;\n    align-items: center;\n    padding-bottom: calc(var(--space-unit) * 2);\n  }\n\n  .heading-container {\n    margin-right: auto;\n  }\n\n  :host(:is([flow=\"offcanvas\"], [menu-length=\"0\"])) :is(.heading-container, .menu-container) {\n    width: auto;\n  }\n\n  :host(:not([flow=\"offcanvas\"])) .heading-subtitle {\n    padding-left: 0;\n  }\n\n  .menu-container {\n    flex: initial;\n    align-items: center;\n  }\n\n  :host([menu-length=\"0\"]) .menu-container:not(:empty) {\n    height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));\n  }\n\n  :host(:not([flow=\"offcanvas\"])) .menu-container {\n    gap: var(--space-unit) calc(var(--space-unit) * 5);\n  }\n\n  :host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger {\n    display: none;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host {\n    --app-header-title-font-size: var(--app-header-typography-7-size);\n    --app-header-title-lineheight: var(--app-header-typography-7-lineheight);\n    --app-header-title-letter-spacing: var(--app-header-typography-7-tracking);\n  }\n\n  .heading-panel {\n    justify-content: flex-start;\n    padding-bottom: calc(var(--space-unit) * 3);\n  }\n\n  .heading-container,\n  .menu-container {\n    width: auto;\n  }\n\n  :host([flow=\"stack\"]) .heading-panel {\n    flex-flow: column;\n    align-items: flex-start;\n  }\n\n  :host([flow=\"stack\"]) .menu-container {\n    width: 100%;\n  }\n\n  :host(:not([flow=\"offcanvas\"], [menu-length=\"0\"])) .heading-panel {\n    row-gap: calc(var(--space-unit) * 3);\n  }\n\n  z-searchbar {\n    min-width: calc(var(--space-unit) * 45);\n    flex: initial;\n  }\n}\n\n/* Wide breakpoint */\n@media (min-width: 1366px) {\n  :host {\n    --app-header-title-font-size: var(--app-header-typography-9-size);\n    --app-header-title-lineheight: var(--app-header-typography-9-lineheight);\n    --app-header-title-letter-spacing: var(--app-header-typography-9-tracking);\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, h, Element, Prop, State, Watch, Host, Event, EventEmitter, Listen} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, OffCanvasVariant, TransitionDirection} from \"../../../beans\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/**\n * @slot title - Slot for the main title\n * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.\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 * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.\n * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.\n * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.\n * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.\n * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.\n * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.\n * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.\n * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.\n * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.\n * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.\n * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.\n * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.\n * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.\n * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.\n * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.\n * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.\n * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.\n * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.\n * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.\n * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.\n * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.\n * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.\n * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.\n * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.\n * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.\n * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.\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-height - Defaults to `auto`.\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-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.\n * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-text01`.\n * @cssprop --app-header-title-font-size - Variable to customize the title's font size.\n * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.\n * Defaults to `--app-header-typography-3-size`.\n * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.\n * NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size.\n * Defaults to `--app-header-typography-3-lineheight`.\n * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.\n * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.\n * Defaults to `--app-header-typography-3-tracking`.\n * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-text01`.\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   * Set the hero image source for the header.\n   * You can also use a [slot=\"hero\"] node for advanced customization.\n   */\n  @Prop()\n  hero: string;\n\n  /**\n   * Should place an overlay over the hero image.\n   * Useful for legibility purpose.\n   */\n  @Prop({reflect: true})\n  overlay = false;\n\n  /**\n   * Control menu bar position in the header.\n   * - auto: the menu bar is positioned near the title\n   * - stack: the menu bar is positioned below the title\n   * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu\n   */\n  @Prop({reflect: true})\n  flow: \"auto\" | \"stack\" | \"offcanvas\" = \"auto\";\n\n  /**\n   * The opening state of the drawer.\n   */\n  @Prop({reflect: true})\n  drawerOpen = 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   * The stuck state of the bar.\n   */\n  @State()\n  private _stuck = false;\n\n  /**\n   * Current viewport.\n   * Used to change the aspect of the search button (icon only) on mobile and tablet.\n   */\n  @State()\n  private currentViewport: \"mobile\" | \"tablet\" | \"desktop\" = \"mobile\";\n\n  /**\n   * Current count of menu items.\n   */\n  @State()\n  menuLength: number;\n\n  /**\n   * Emitted when the `stuck` state of the header changes\n   */\n  @Event()\n  sticking: EventEmitter;\n\n  private container?: HTMLDivElement;\n\n  private menuElements?: NodeListOf<HTMLElement>;\n\n  private observer?: IntersectionObserver =\n    SUPPORT_INTERSECTION_OBSERVER &&\n    new IntersectionObserver(\n      ([entry]) => {\n        this._stuck = !entry.isIntersecting;\n      },\n      {\n        threshold: 0.5,\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  }\n\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  evaluateViewport(): void {\n    if (window.innerWidth < 768) {\n      this.currentViewport = \"mobile\";\n    } else if (window.innerWidth >= 768 && window.innerWidth < 1152) {\n      this.currentViewport = \"tablet\";\n    } else {\n      this.currentViewport = \"desktop\";\n    }\n  }\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    const elements = this.menuElements;\n    elements.forEach((element) => {\n      (element as HTMLZMenuElement).open = false;\n      (element as HTMLZMenuElement).floating = !this.drawerOpen;\n      (element as HTMLZMenuElement).verticalContext = this.drawerOpen;\n    });\n  }\n\n  private get title(): string {\n    const titleElement = this.hostElement.querySelector('[slot=\"title\"]');\n    if (titleElement === null) {\n      return \"\";\n    }\n\n    return titleElement.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.flow !== \"offcanvas\" && this.currentViewport !== \"mobile\" && !this.drawerOpen;\n  }\n\n  private get canShowSearchbar(): boolean {\n    if (!this.enableSearch) {\n      return false;\n    }\n\n    // Always show the searchbar on desktop, even if a searchPageUrl is set\n    if (this.searchPageUrl) {\n      return this.currentViewport === \"desktop\";\n    }\n\n    return true;\n  }\n\n  /**\n   * Whether the header has a hero image, either as a prop or as a slot.\n   */\n  private get hasHero(): boolean {\n    return !!this.hero || this.hostElement.querySelector(\"[slot=hero]\") !== null;\n  }\n\n  private openDrawer(): void {\n    this.drawerOpen = true;\n  }\n\n  private closeDrawer(): void {\n    this.drawerOpen = false;\n  }\n\n  private collectMenuElements(): void {\n    const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n    this.menuLength = menuElements.length;\n    this.setMenuFloatingMode();\n  }\n\n  private enableStuckObserver(): void {\n    if (this.observer) {\n      this.observer.observe(this.container);\n    }\n  }\n\n  private disableStuckMode(): void {\n    this._stuck = false;\n    if (this.observer) {\n      this.observer.unobserve(this.container);\n    }\n  }\n\n  @Watch(\"stuck\")\n  onStuckMode(): void {\n    if (this.stuck) {\n      this.enableStuckObserver();\n    } else {\n      this.disableStuckMode();\n    }\n  }\n\n  private renderSearchLinkButton(): HTMLZButtonElement | null {\n    if (!this.enableSearch || !this.searchPageUrl || this.currentViewport === \"desktop\") {\n      return null;\n    }\n\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      ></z-button>\n    );\n  }\n\n  private renderSeachbar(searchButtonIconOnly: boolean): HTMLZSearchbarElement {\n    return (\n      <z-searchbar\n        value={this.searchString}\n        placeholder={this.searchPlaceholder}\n        showSearchButton={true}\n        searchButtonIconOnly={searchButtonIconOnly}\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  componentDidLoad(): void {\n    this.collectMenuElements();\n    this.onStuckMode();\n    this.evaluateViewport();\n  }\n\n  render(): HTMLZAppHeaderElement {\n    return (\n      <Host menu-length={this.menuLength}>\n        {this.hasHero && (\n          <div class=\"hero-container\">\n            <slot name=\"hero\">\n              {this.hero && (\n                <img\n                  alt=\"\"\n                  src={this.hero}\n                />\n              )}\n            </slot>\n          </div>\n        )}\n\n        <div\n          class=\"heading-panel\"\n          ref={(el) => (this.container = el)}\n        >\n          <div class=\"heading-container\">\n            <div class=\"heading-subtitle\">\n              <slot name=\"top-subtitle\"></slot>\n            </div>\n            <div class=\"heading-title\">\n              {this.menuLength > 0 && (\n                <button\n                  class=\"drawer-trigger\"\n                  aria-label=\"Apri menu\"\n                  onClick={this.openDrawer}\n                >\n                  <z-icon name=\"burger-menu\"></z-icon>\n                </button>\n              )}\n\n              <slot name=\"title\"></slot>\n\n              {this.renderSearchLinkButton()}\n            </div>\n\n            <div class=\"heading-subtitle\">\n              <slot name=\"subtitle\"></slot>\n            </div>\n          </div>\n\n          {(this.canShowMenu || this.canShowSearchbar) && (\n            <div class=\"menu-container\">\n              {this.canShowMenu && (\n                <slot\n                  name=\"menu\"\n                  onSlotchange={this.collectMenuElements}\n                ></slot>\n              )}\n\n              {this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== \"desktop\")}\n            </div>\n          )}\n        </div>\n\n        <z-offcanvas\n          variant={OffCanvasVariant.OVERLAY}\n          transitiondirection={TransitionDirection.RIGHT}\n          open={this.drawerOpen}\n          onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n        >\n          <button\n            class=\"drawer-close\"\n            aria-label=\"Chiudi menu\"\n            onClick={this.closeDrawer}\n            slot=\"canvasContent\"\n            aria-hidden={`${!this.drawerOpen}`}\n            disabled={!this.drawerOpen}\n          >\n            <z-icon name=\"close\"></z-icon>\n          </button>\n\n          <div\n            class=\"drawer-content\"\n            slot=\"canvasContent\"\n            aria-hidden={`${!this.drawerOpen}`}\n          >\n            <slot\n              name=\"menu\"\n              onSlotchange={this.collectMenuElements}\n            ></slot>\n          </div>\n        </z-offcanvas>\n\n        {this._stuck && (\n          <div class=\"heading-stuck\">\n            <div class=\"heading-stuck-content\">\n              {this.menuLength > 0 && (\n                <button\n                  class=\"drawer-trigger\"\n                  aria-label=\"Apri menu\"\n                  onClick={this.openDrawer}\n                >\n                  <z-icon name=\"burger-menu\"></z-icon>\n                </button>\n              )}\n\n              <div class=\"heading-title\">\n                <slot name=\"stucked-title\">{this.title}</slot>\n              </div>\n\n              {this.renderSearchLinkButton()}\n              {this.canShowSearchbar && this.currentViewport === \"desktop\" && this.renderSeachbar(false)}\n            </div>\n          </div>\n        )}\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}\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  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 .z-button--container.z-button--has-text z-icon {\n  --z-icon-right-margin: var(--space-unit);\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-disabled02);\n}\n\n:host([variant=\"secondary\"]) .z-button--container {\n  border-color: var(--color-primary01);\n  background-color: var(--color-surface01);\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-surface01);\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-surface01);\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-surface01);\n  color: var(--color-disabled02);\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-disabled02);\n}\n","import {Component, Prop, h, Element} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {ButtonVariant, ButtonType, ButtonSize, ControlSize} 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 an interactive element, used for accessibility. */\n  @Prop({reflect: true})\n  ariaLabel = \"\";\n\n  /** defines role attribute, used for accessibility. */\n  @Prop()\n  role?: 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  /** 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  render(): HTMLAnchorElement | HTMLButtonElement {\n    if (this.href) {\n      return (\n        <a\n          {...this.getAttributes()}\n          aria-label={this.ariaLabel}\n          href={this.href}\n          target={this.target}\n        >\n          {this.icon && (\n            <z-icon\n              name={this.icon}\n              width={16}\n              height={16}\n            />\n          )}\n          <slot />\n        </a>\n      );\n    }\n\n    return (\n      <button\n        {...this.getAttributes()}\n        aria-label={this.ariaLabel}\n        name={this.name}\n        type={this.type}\n        role={this.role}\n        disabled={this.disabled}\n      >\n        {this.icon && (\n          <z-icon\n            name={this.icon}\n            width={16}\n            height={16}\n          />\n        )}\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, Prop, h, Host} from \"@stencil/core\";\nimport {DividerSize, DividerOrientation} 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  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:host svg:not([width]) {\n  width: var(--z-icon-width, 18px);\n}\n\n:host svg:not([height]) {\n  height: var(--z-icon-height, 18px);\n}\n","import {Component, Prop, Host, h} from \"@stencil/core\";\nimport {ICONS} from \"../icons\";\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;\n\n  /** icon width (optional) */\n  @Prop()\n  width?: number;\n\n  /** icon id (optional) */\n  @Prop()\n  iconid?: string;\n\n  /** icon fill (optional) */\n  @Prop()\n  fill?: string;\n\n  private selectPathOrPolygon(iconValue: string): SVGPathElement | SVGPolygonElement {\n    if (iconValue?.startsWith(\"M\")) {\n      return <path d={ICONS[this.name]}></path>;\n    }\n\n    return <polygon points={ICONS[this.name]}></polygon>;\n  }\n\n  render(): SVGElement {\n    return (\n      <Host aria-hidden=\"true\">\n        <svg\n          viewBox=\"0 0 1000 1000\"\n          width={this.width}\n          height={this.height}\n          id={this.iconid}\n          fill={this.fill ? `var(--${this.fill})` : \"\"}\n        >\n          {this.selectPathOrPolygon(ICONS[this.name])}\n        </svg>\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, Prop, State, h, Method, Event, EventEmitter, Element, Listen} from \"@stencil/core\";\nimport {Host, JSXBase} from \"@stencil/core/internal\";\nimport {InputType, LabelPosition, InputStatus, ControlSize} 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 (optional): available for text, password, number, email */\n  @Prop()\n  ariaExpanded?: string;\n\n  /** the input aria-controls (optional): available for text, password, number, email */\n  @Prop()\n  ariaControls?: string;\n\n  /** the input aria-autocomplete (optional): available for text, password, number, email */\n  @Prop()\n  ariaAutocomplete?: string;\n\n  /** the input aria-activedescendant (optional): available for text, password, number, email */\n  @Prop()\n  ariaActivedescendant?: string;\n\n  /** the input value */\n  @Prop({mutable: true})\n  value?: string;\n\n  /** the input is disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** the input is readonly */\n  @Prop()\n  readonly?: boolean = false;\n\n  /** the input is required (optional): available for text, password, number, email, textarea, checkbox */\n  @Prop()\n  required?: boolean = false;\n\n  /** checked: available for checkbox, radio */\n  @Prop({mutable: true})\n  checked?: boolean = false;\n\n  /** the input placeholder (optional) */\n  @Prop()\n  placeholder?: string;\n\n  /** the input html title (optional) */\n  @Prop()\n  htmltitle?: string;\n\n  /** the input status (optional): available for text, password, number, email, textarea */\n  @Prop()\n  status?: InputStatus;\n\n  /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */\n  @Prop()\n  message?: string | boolean = true;\n\n  /** the input label position: available for checkbox, radio */\n  @Prop()\n  labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n  /** the input has autocomplete option (optional): available for text, password, number, email */\n  @Prop()\n  autocomplete?: string;\n\n  /** the input role (optional) */\n  @Prop()\n  role?: string;\n\n  /** render clear icon when typing (optional): available for text */\n  @Prop()\n  hasclearicon?: boolean = true;\n\n  /** render icon (optional): available for text */\n  @Prop()\n  icon?: string;\n\n  /** min number value (optional): available for number */\n  @Prop()\n  min?: number;\n\n  /** Min length value (optional): available for text */\n  @Prop()\n  minlength?: number;\n\n  /** max number value (optional): available for number */\n  @Prop()\n  max?: number;\n\n  /** Max length value (optional): available for text */\n  @Prop()\n  maxlength?: number;\n\n  /** step number value (optional): available for number */\n  @Prop()\n  step?: number;\n\n  /** pattern value (optional): available for tel, text, search, url, email, password*/\n  @Prop()\n  pattern?: string;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  isTyping = false;\n\n  @State()\n  passwordHidden = true;\n\n  private timer;\n\n  private typingtimeout = 300;\n\n  private inputRef: HTMLInputElement;\n\n  @Listen(\"inputCheck\", {target: \"document\"})\n  inputCheckListener(e: CustomEvent): void {\n    const data = e.detail;\n    switch (this.type) {\n      case InputType.RADIO:\n        if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n          this.checked = false;\n        }\n        break;\n    }\n  }\n\n  /** get checked status */\n  @Method()\n  async isChecked(): Promise<boolean> {\n    switch (this.type) {\n      case InputType.CHECKBOX:\n      case InputType.RADIO:\n        return this.checked;\n      default:\n        console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n        return false;\n    }\n  }\n\n  /** Emitted on input value change, returns value, validity */\n  @Event()\n  inputChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    if (!this.isTyping) {\n      this.emitStartTyping();\n    }\n\n    let validity: ValidityState;\n    if (this.type === InputType.TEXTAREA) {\n      validity = this.getValidity(\"textarea\");\n    } else {\n      validity = this.getValidity(\"input\");\n    }\n    this.value = value;\n    this.inputChange.emit({value, validity});\n\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => {\n      this.emitStopTyping(this.value, validity);\n    }, this.typingtimeout);\n  }\n\n  /** Emitted when user starts typing */\n  @Event()\n  startTyping: EventEmitter;\n\n  private emitStartTyping(): void {\n    this.isTyping = true;\n    this.startTyping.emit();\n  }\n\n  /** Emitted when user stops typing, returns value, validity */\n  @Event()\n  stopTyping: EventEmitter;\n\n  private emitStopTyping(value: string, validity: ValidityState): void {\n    this.isTyping = false;\n    this.stopTyping.emit({\n      value: value,\n      validity: validity,\n    });\n  }\n\n  /** Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity */\n  @Event()\n  inputCheck: EventEmitter;\n\n  private emitInputCheck(checked: boolean): void {\n    this.inputCheck.emit({\n      id: this.htmlid,\n      checked: checked,\n      type: this.type,\n      name: this.name,\n      value: this.value,\n      validity: this.getValidity(\"input\"),\n    });\n  }\n\n  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        filled: !!this.value,\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 getAriaAttrubutes(): Record<string, unknown> {\n    const expanded = this.ariaExpanded ? {\"aria-expanded\": this.ariaExpanded} : {};\n    const controls = this.ariaControls ? {\"aria-controls\": this.ariaControls} : {};\n    const autocomplete = this.ariaAutocomplete ? {\"aria-autocomplete\": this.ariaAutocomplete} : {};\n    const activedescendant = this.ariaActivedescendant ? {\"aria-activedescendant\": this.ariaActivedescendant} : {};\n\n    return {\n      ...expanded,\n      ...controls,\n      ...autocomplete,\n      ...activedescendant,\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    };\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=\"input-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      <button\n        type=\"button\"\n        class=\"icon-button input-icon\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n      >\n        <z-icon\n          name={this.icon}\n          class={this.size}\n        />\n      </button>\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={`icon-button reset-icon ${hidden ? \"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=\"icon-button 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        message={boolean(this.message) === true ? undefined : (this.message as string)}\n        status={this.status}\n        class={this.size}\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 ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n\n    return (\n      <div class=\"text-wrapper\">\n        {this.renderLabel()}\n        <div\n          class={{\n            ...(attributes.class as Record<string, boolean>),\n            \"textarea-wrapper\": true,\n            \"readonly\": attributes.readonly as boolean,\n          }}\n        >\n          <textarea\n            {...attributes}\n            {...ariaLabel}\n            {...this.getRoleAttribute()}\n          ></textarea>\n        </div>\n        {this.renderMessage()}\n      </div>\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        />\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            aria-hidden=\"true\"\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        />\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            aria-hidden=\"true\"\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-text05);\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-text-success);\n}\n\n:host([status=\"error\"]) {\n  color: var(--color-text-error);\n}\n\n:host([status=\"warning\"]) {\n  color: var(--color-warning02);\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","import {Component, Prop, Watch, State, h, Host} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\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  /** input status (optional) */\n  @Prop({reflect: true})\n  status?: InputStatus;\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  onMessageChange(): void {\n    this.statusRole = this.message && this.status ? {role: \"alert\"} : {};\n  }\n\n  componentWillLoad(): void {\n    this.onMessageChange();\n  }\n\n  render(): HTMLZInputMessageElement {\n    return (\n      <Host\n        {...this.statusRole}\n        aria-label={this.message}\n      >\n        {this.statusIcons[this.status] && this.message && <z-icon name={this.statusIcons[this.status]}></z-icon>}\n        <span innerHTML={this.message} />\n      </Host>\n    );\n  }\n}\n",":host {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n","import {Component, Element, h, Prop, Host} from \"@stencil/core\";\n\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   * [optional] Sets role of the element.\n   */\n  @Prop({reflect: true})\n  role?: string = \"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:host > .container-contextual-menu {\n  --background-color-list-element: var(--color-surface01);\n  --background-hover-color-list-element: var(--color-surface02);\n  --background-active-color-list-element: var(--color-surface02);\n\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: center;\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=\"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([expandable]) > .container-contextual-menu,\n:host([clickable]) > .container,\n:host([clickable]) > .container-contextual-menu {\n  cursor: pointer;\n}\n\n:host([expandable]:hover) > .container,\n:host([expandable]:hover) > .container-contextual-menu,\n:host([clickable]:hover) > .container,\n:host([clickable]:hover) > .container-contextual-menu {\n  background-color: var(--background-hover-color-list-element);\n}\n\n:host([expandable]:focus:focus-visible) > .container,\n:host([expandable]:focus:focus-visible) > .container-contextual-menu,\n:host([clickable]:focus:focus-visible) > .container,\n:host([clickable]:focus:focus-visible) > .container-contextual-menu {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]:not([expandable])) > .container.clicked,\n:host([clickable]:not([expandable])) > .container-contextual-menu.clicked {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([expandable]:active) > .container,\n:host([expandable]:active) > .container-contextual-menu,\n:host([clickable]:active) > .container,\n:host([clickable]:active) > .container-contextual-menu {\n  background-color: var(--background-active-color-list-element);\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container,\n:host([align-button=\"left\"][expandable]) > .container-contextual-menu > .z-list-element-container {\n  display: flex;\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container,\n:host([align-button=\"right\"][expandable]) > .container-contextual-menu > .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:host([align-button=\"left\"][expandable]) > .container-contextual-menu > .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:host([align-button=\"right\"][expandable]) > .container-contextual-menu > .z-list-element-container > z-icon {\n  margin-left: var(--space-unit);\n}\n\n:host > .container > .z-list-element-inner-container,\n:host > .container-contextual-menu > .z-list-element-inner-container {\n  display: none;\n}\n\n:host > .container > .z-list-element-inner-container.expanded,\n:host > .container-contextual-menu > .z-list-element-inner-container.expanded {\n  display: block;\n}\n\n:host([clickable]:hover) > .container-contextual-menu {\n  background-color: var(--color-surface03);\n}\n\n.container-contextual-menu:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-list-content-container {\n  display: flex;\n  align-items: center;\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] If is used in ZContextualMenu component\n   */\n  @Prop({reflect: true})\n  isContextualMenu?: 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 role.\n   */\n  @Prop({reflect: true})\n  role?: string = \"listitem\";\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    this.clickItem.emit(this.listElementId);\n    if (!this.expandable) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  private calculateClass(): string {\n    if (this.isContextualMenu) {\n      return \"container-contextual-menu\";\n    }\n\n    return \"container\";\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.isContextualMenu ? \"0\" : null}\n      >\n        <div\n          class={`${this.calculateClass()}`}\n          style={{color: `var(--${this.color})`}}\n          tabindex={this.isContextualMenu ? \"0\" : \"-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            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: var(--space-unit);\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","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ListSize, ListDividerType, 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  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 role=\"group\">\n        <div\n          class={{\n            \"z-list-group-header-container\": true,\n            \"has-header\": this.hasHeader,\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: 375px;\n  --z-offcanvas--top-space: 0;\n\n  min-width: 100%;\n  height: 100%;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.canvas-container {\n  display: flex;\n  overflow: -moz-scrollbars-none;\n  overflow: hidden;\n  min-width: 100%;\n  height: 100%;\n  flex-direction: column;\n  background: var(--color-surface01);\n}\n\n:host([variant=\"pushcontent\"]) {\n  display: none;\n}\n\n:host([open]) {\n  display: flex;\n  visibility: visible;\n}\n\n:host(:not([open])) {\n  visibility: hidden;\n}\n\n:host([variant=\"overlay\"]) {\n  position: fixed;\n  z-index: 1000;\n  top: var(--z-offcanvas--top-space);\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  height: calc(100% - var(--z-offcanvas--top-space));\n}\n\n:host([variant=\"overlay\"][transitiondirection=\"left\"]) {\n  justify-content: end;\n}\n\n:host([variant=\"overlay\"]) > .canvas-container {\n  z-index: 1010;\n}\n\n:host([variant=\"overlay\"]) .canvas-background {\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--gray900);\n  opacity: 0.7;\n}\n\n.canvas-container > .canvas-content {\n  overflow: 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  overflow-x: hidden;\n}\n\n:host([variant=\"overlay\"]) > .canvas-container > .canvas-content {\n  padding: 0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);\n  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0;\n}\n\n/* Webkit Scrollbar */\n.canvas-container .canvas-content::-webkit-scrollbar {\n  width: 10px;\n  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n  border-radius: var(--border-radius);\n}\n\n.canvas-container .canvas-content::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n\n.canvas-container .canvas-content::-webkit-scrollbar-thumb {\n  width: 10px;\n  background-color: var(--color-primary01);\n  border-radius: var(--border-radius);\n}\n\n.canvas-container .canvas-content::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n/* Firefox */\n.canvas-container .canvas-content {\n  scrollbar-color: var(--color-primary01) transparent;\n}\n\n/* Mobile */\n@media only screen and (max-width: 768px) {\n  :host([open][transitiondirection=\"left\"]:not(.skip-animation)) > .canvas-container {\n    animation: enter-right 0.4s ease-out;\n  }\n\n  :host([open][transitiondirection=\"right\"]:not(.skip-animation)) > .canvas-container {\n    animation: enter-left 0.4s ease-out;\n  }\n}\n\n/* Tablet / Desktop */\n@media only screen and (min-width: 768px) {\n  :host {\n    min-width: auto;\n  }\n\n  .canvas-container {\n    width: auto;\n    min-width: max(var(--z-offcanvas--container-width), 375px);\n    max-width: max(var(--z-offcanvas--container-width), 375px);\n    height: auto;\n    min-height: calc(var(--space-unit) * 40);\n  }\n\n  :host(:not([variant=\"overlay\"])[open]:not(.skip-animation)) {\n    width: auto;\n    animation: grow 0.4s ease-out;\n  }\n}\n\n/* ANIMATION */\n\n@keyframes grow {\n  from {\n    width: 0;\n  }\n\n  to {\n    width: max(var(--z-offcanvas--container-width), 375px);\n  }\n}\n\n@keyframes enter-left {\n  from {\n    transform: translateX(-100%);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes enter-right {\n  from {\n    transform: translateX(100%);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n}\n\n:host([open][variant=\"overlay\"][transitiondirection=\"left\"]:not(.skip-animation)) > .canvas-container {\n  animation: enter-right 0.4s ease-out;\n}\n\n:host([open][transitiondirection=\"right\"]:not(.skip-animation)) > .canvas-container {\n  animation: enter-left 0.4s ease-out;\n}\n\n:host(:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]) > .canvas-container {\n  transform: translateX(-100%);\n  transition: visibility 0.4s ease-out, transform 0.4s ease-out;\n}\n\n:host(:not([open])[variant=\"overlay\"][transitiondirection=\"left\"]) > .canvas-container {\n  transform: translateX(100%);\n  transition: visibility 0.4s ease-out, transform 0.4s ease-out;\n}\n\n:host(:not([open])[variant=\"overlay\"]) .canvas-background {\n  transition: visibility 0.4s ease-out;\n  visibility: hidden;\n}\n","import {Component, Event, EventEmitter, h, Host, Prop, Watch} from \"@stencil/core\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\n/**\n * @slot canvasContent - Slot for the main content.\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   * Can be one `overlay` or `pushcontent`.\n   * Default variant: pushcontent\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  /** open content transitioning in a specified direction left | right. Default: left */\n  @Prop({reflect: true})\n  transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n  /**\n   * Whether to skip the initial animation.\n   * Useful when the initial value of the `open` prop is set to `true`.\n   */\n  @Prop({mutable: true})\n  skipLoadAnimation = false;\n\n  /** emitted when `open` prop changes */\n  @Event()\n  canvasOpenStatusChanged: EventEmitter;\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (!this.open && this.skipLoadAnimation) {\n      this.skipLoadAnimation = false;\n    }\n\n    this.handlePageOverflow();\n    this.canvasOpenStatusChanged.emit(this.open);\n  }\n\n  private handlePageOverflow(): void {\n    const overflow = this.variant === OffCanvasVariant.OVERLAY ? \"overflow-y\" : \"overflow-x\";\n    document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n  }\n\n  disconnectedCallback(): void {\n    this.open = false;\n  }\n\n  render(): HTMLZOffcanvasElement {\n    return (\n      <Host class={{\"skip-animation\": this.skipLoadAnimation}}>\n        <div\n          role=\"presentation\"\n          class=\"canvas-container\"\n          onTransitionEnd={() => this.handlePageOverflow()}\n        >\n          <div\n            role=\"presentation\"\n            class=\"canvas-content\"\n          >\n            <slot name=\"canvasContent\"></slot>\n          </div>\n        </div>\n        {this.variant == OffCanvasVariant.OVERLAY && (\n          <div\n            class=\"canvas-background\"\n            data-action=\"canvasBackground\"\n            onClick={() => (this.open = false)}\n          ></div>\n        )}\n      </Host>\n    );\n  }\n}\n",":host {\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.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  scrollbar-color: var(--color-primary01) transparent;\n}\n\n.results::-webkit-scrollbar {\n  width: 10px;\n  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n  border-radius: var(--border-radius);\n}\n\n.results::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n\n.results::-webkit-scrollbar-thumb {\n  width: 10px;\n  background-color: var(--color-primary01);\n  border-radius: var(--border-radius);\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-text01);\n  text-transform: uppercase;\n}\n\n.results z-list-element {\n  display: block;\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-text01);\n  column-gap: calc(var(--space-unit) * 1.5);\n  fill: var(--color-icon02);\n  font-size: var(--font-size-2);\n  line-height: var(--font-size-3);\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.has-category {\n  padding-left: calc(var(--space-unit) * 3);\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: 24px;\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\"])::part(list-item-container) {\n  min-height: calc(var(--space-unit) * 4.5);\n  padding: 0;\n}\n\n:host([size=\"x-small\"])::part(list-item-container) {\n  min-height: calc(var(--space-unit) * 4);\n  padding: 0;\n}\n","import {Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch} from \"@stencil/core\";\nimport {\n  ButtonVariant,\n  ListDividerType,\n  SearchbarGroup,\n  SearchbarGroupedItem,\n  SearchbarItem,\n  ControlSize,\n} from \"../../../beans\";\nimport {handleEnterKeydSubmit, randomId} from \"../../../utils/utils\";\n\n/**\n * @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)\n */\n@Component({\n  tag: \"z-searchbar\",\n  styleUrl: \"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  /** 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  /** Truncate results to single row */\n  @Prop()\n  resultsEllipsis?: boolean = true;\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  private resultsItemsList: SearchbarItem[] | undefined = null;\n\n  private inputRef: HTMLZInputElement;\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  }\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    if (!this.searchString) {\n      this.currResultsCount = this.resultsCount;\n    }\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  }\n\n  private handleSubmit(): void {\n    if (this.preventSubmit) {\n      return;\n    }\n\n    this.emitSearchSubmit();\n  }\n\n  @Listen(\"click\", {target: \"document\"})\n  private handleOutsideClick(e: MouseEvent): void {\n    const cp = e.composedPath();\n\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        message={false}\n        placeholder={this.placeholder}\n        onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n        onKeyUp={(e: KeyboardEvent) => handleEnterKeydSubmit(e, () => this.handleSubmit())}\n        value={this.value}\n        size={this.size}\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 defaultProps = {\n      disabled: this.preventSubmit,\n      variant: this.variant,\n      size: this.size,\n      onClick: () => this.handleSubmit(),\n      ...iconProp,\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      >\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 renderItem(item: SearchbarItem, key: number, divider: boolean): HTMLZListElementElement {\n    return (\n      <z-list-element\n        id={`list-item-${this.htmlid}-${key}`}\n        role=\"option\"\n        tabindex={0}\n        dividerType={divider ? ListDividerType.ELEMENT : undefined}\n        clickable\n        onClickItem={() => this.emitSearchItemClick(item)}\n      >\n        <span class={{\"item\": true, \"ellipsis\": this.resultsEllipsis, \"has-category\": !!item.category}}>\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      </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        tabindex={0}\n        dividerType={hasDivider ? ListDividerType.ELEMENT : undefined}\n        clickable\n        id={`list-item-${this.htmlid}-search`}\n        onClickItem={() => this.emitSearchSubmit()}\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      </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"],"mappings":"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"}

package/dist/web-components-library/p-b99dd793.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as a,a as n}from"./p-10bb4f4b.js";import{N as e,a as o}from"./p-025f494e.js";import{I as r}from"./p-4686b762.js";const l='z-navigation-tab>button,z-navigation-tab-link>a{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tab-link>a{text-decoration:none}z-navigation-tab *,z-navigation-tab-link *,z-navigation-tab *::before,z-navigation-tab *::after,z-navigation-tab-link *::before,z-navigation-tab-link *::after{box-sizing:border-box}z-navigation-tab>*:focus:focus-visible,z-navigation-tab-link>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 4px 3px var(--color-highlight)}z-navigation-tab:not([disabled]):hover>*,z-navigation-tab[selected]>*,z-navigation-tab-link:not([disabled]):hover>*,z-navigation-tab-link[selected]>*{color:var(--color-hover-secondary);fill:currentcolor}z-navigation-tab:not([disabled]):hover>*::after,z-navigation-tab[selected]>*::after,z-navigation-tab-link:not([disabled]):hover>*::after,z-navigation-tab-link[selected]>*::after{position:absolute;background-color:var(--color-hover-secondary);content:""}z-navigation-tab[orientation="horizontal"]:not([disabled]):hover>*::after,z-navigation-tab[orientation="horizontal"][selected]>*::after,z-navigation-tab-link[orientation="horizontal"]:not([disabled]):hover>*::after,z-navigation-tab-link[orientation="horizontal"][selected]>*::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tab z-icon,z-navigation-tab-link z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tab[orientation="horizontal"] z-icon,z-navigation-tab-link[orientation="horizontal"] z-icon{margin-right:var(--space-unit)}z-navigation-tab:not([disabled]):hover>*{background-color:var(--color-background)}z-navigation-tab[disabled]>*,z-navigation-tab-link[disabled]>*{color:var(--gray500);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tab[size="small"]>*,z-navigation-tab-link[size="small"]>*{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}z-navigation-tab[size="small"][orientation="horizontal"]>*,z-navigation-tab-link[size="small"][orientation="horizontal"]>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tab[size="small"][orientation="horizontal"]:not([disabled]):hover>*::after,z-navigation-tab[size="small"][orientation="horizontal"][selected]>*::after,z-navigation-tab-link[size="small"][orientation="horizontal"]:not([disabled]):hover>*::after,z-navigation-tab-link[size="small"][orientation="horizontal"][selected]>*::after{height:var(--border-size-medium)}z-navigation-tab[size="small"]:not([orientation="vertical"]) z-icon,z-navigation-tab-link[size="small"]:not([orientation="vertical"]) z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tab[orientation="vertical"]>*,z-navigation-tab-link[orientation="vertical"]>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tab[orientation="vertical"]:not([disabled]):hover>*::after,z-navigation-tab[orientation="vertical"][selected]>*::after,z-navigation-tab-link[orientation="vertical"]:not([disabled]):hover>*::after,z-navigation-tab-link[orientation="vertical"][selected]>*::after{top:0;right:0;width:var(--border-size-large);height:100%}';const s=l;const c=class{constructor(a){i(this,a);this.selectedEvent=t(this,"selected",7);this.ariaControls=undefined;this.tabId=undefined;this.selected=false;this.disabled=false;this.orientation=e.HORIZONTAL;this.size=o.BIG;this.htmlTitle=undefined;this.target=undefined;this.href=undefined;this.icon=undefined;this.label=undefined}scrollToTab({target:i}){const t=this.orientation===e.HORIZONTAL?{block:"nearest",inline:"center"}:{block:"center",inline:"nearest"};i.scrollIntoView(Object.assign({behavior:"smooth"},t))}onClick(){if(this.disabled){return}this.selected=true}onSelected(){if(this.selected){this.selectedEvent.emit()}}renderIcon(){let i=this.icon;const t=`${i.replace(/-filled$/,"")}-filled`;if(this.selected&&Object.keys(r).includes(t)){i=t}return a("z-icon",{name:i})}render(){return a(n,{key:"77c729dd9c1bfd412d958eb477f2e227ba7fc7a7",role:"tab",id:this.tabId,"aria-selected":this.selected?"true":"false","aria-controls":this.ariaControls},a("a",{key:"3b70074a8637c2df922e6c5dcfc38f45c14ae770",tabIndex:this.selected?0:-1,onFocus:this.scrollToTab.bind(this),href:this.disabled?null:this.href,title:this.htmlTitle,target:this.target},this.icon&&this.renderIcon(),this.orientation==="horizontal"&&this.label))}static get watchers(){return{selected:["onSelected"]}}};c.style=s;export{c as z_navigation_tab_link};
+//# sourceMappingURL=p-b99dd793.entry.js.map

package/dist/web-components-library/p-b99dd793.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["navigationTabCss","ZNavigationTabLinkStyle0","ZNavigationTabLink","NavigationTabsOrientation","HORIZONTAL","NavigationTabsSize","BIG","scrollToTab","target","button","scrollOptions","this","orientation","block","inline","scrollIntoView","Object","assign","behavior","onClick","disabled","selected","onSelected","selectedEvent","emit","renderIcon","icon","iconFilled","replace","keys","ICONS","includes","h","name","render","Host","key","role","id","tabId","ariaControls","tabIndex","onFocus","bind","href","title","htmlTitle","label"],"sources":["src/deprecated/navigation-tab.css?tag=z-navigation-tab-link","src/deprecated/z-navigation-tab-link/index.tsx"],"sourcesContent":["z-navigation-tab > button,\nz-navigation-tab-link > a {\n  position: relative;\n  z-index: 0;\n  display: inline-flex;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n  border: none;\n  margin: 0;\n  background-color: unset;\n  border-radius: var(--border-no-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n}\n\nz-navigation-tab-link > a {\n  text-decoration: none;\n}\n\nz-navigation-tab *,\nz-navigation-tab-link *,\nz-navigation-tab *::before,\nz-navigation-tab *::after,\nz-navigation-tab-link *::before,\nz-navigation-tab-link *::after {\n  box-sizing: border-box;\n}\n\nz-navigation-tab > *:focus:focus-visible,\nz-navigation-tab-link > *:focus:focus-visible {\n  z-index: 1;\n  box-shadow: inset 0 0 4px 3px var(--color-highlight);\n}\n\nz-navigation-tab:not([disabled]):hover > *,\nz-navigation-tab[selected] > *,\nz-navigation-tab-link:not([disabled]):hover > *,\nz-navigation-tab-link[selected] > * {\n  color: var(--color-hover-secondary);\n  fill: currentcolor;\n}\n\nz-navigation-tab:not([disabled]):hover > *::after,\nz-navigation-tab[selected] > *::after,\nz-navigation-tab-link:not([disabled]):hover > *::after,\nz-navigation-tab-link[selected] > *::after {\n  position: absolute;\n  background-color: var(--color-hover-secondary);\n  content: \"\";\n}\n\nz-navigation-tab[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"][selected] > *::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tab z-icon,\nz-navigation-tab-link z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n\n  display: flex;\n  margin: 0;\n}\n\nz-navigation-tab[orientation=\"horizontal\"] z-icon,\nz-navigation-tab-link[orientation=\"horizontal\"] z-icon {\n  margin-right: var(--space-unit);\n}\n\nz-navigation-tab:not([disabled]):hover > * {\n  background-color: var(--color-background);\n}\n\nz-navigation-tab[disabled] > *,\nz-navigation-tab-link[disabled] > * {\n  color: var(--gray500);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\n/* Size small (only available for horizontal) */\nz-navigation-tab[size=\"small\"] > *,\nz-navigation-tab-link[size=\"small\"] > * {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"] > *,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"] > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"][selected] > *::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tab[size=\"small\"]:not([orientation=\"vertical\"]) z-icon,\nz-navigation-tab-link[size=\"small\"]:not([orientation=\"vertical\"]) z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\nz-navigation-tab[orientation=\"vertical\"] > *,\nz-navigation-tab-link[orientation=\"vertical\"] > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"vertical\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"vertical\"][selected] > *::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {Component, Prop, h, Listen, Event, EventEmitter, Watch, Host} from \"@stencil/core\";\nimport {NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\nimport {ICONS} from \"../../components/icons/icons\";\n\n/**\n * Single tab component to use inside `z-navigation-tabs`. It renders an anchor element.\n * This component uses the `tab` role:\n * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n * @deprecated Use a native `<a>` instead.\n */\n@Component({\n  tag: \"z-navigation-tab-link\",\n  styleUrl: \"../navigation-tab.css\",\n})\nexport class ZNavigationTabLink {\n  /**\n   * `aria-controls` attribute of the tab.\n   * Identifies the element (with `role=tabpanel`) whose contents or presence are controlled by this tab.\n   * The value must be the `id` of the element it controls.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n   */\n  @Prop()\n  ariaControls?: string;\n\n  /**\n   * `id` attribute of the tab.\n   * Set this id to the `aria-labelledby` attribute of the controlled `tabpanel` element.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby\n   * @deprecated Use native `id` attribute instead\n   */\n  @Prop()\n  tabId?: string;\n\n  /**\n   * Whether the tab is selected.\n   */\n  @Prop({mutable: true, reflect: true})\n  selected?: boolean = false;\n\n  /**\n   * Whether the tab is disabled.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  orientation = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  size = NavigationTabsSize.BIG;\n\n  /**\n   * Html title attribute for the anchor element.\n   */\n  @Prop()\n  htmlTitle: string;\n\n  /**\n   * Html `target` attribute for the anchor element.\n   */\n  @Prop()\n  target: string;\n\n  /**\n   * Url to set to the anchor element.\n   */\n  @Prop()\n  href: string;\n\n  /**\n   * Name of the icon to use.\n   * The `filled` version will be automatically used (if found) when the tab is `selected`.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Label to show in the tab.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * The tab has been selected.\n   */\n  @Event({eventName: \"selected\"})\n  private selectedEvent: EventEmitter;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab({target: button}): void {\n    const scrollOptions = (\n      this.orientation === NavigationTabsOrientation.HORIZONTAL\n        ? {block: \"nearest\", inline: \"center\"}\n        : {block: \"center\", inline: \"nearest\"}\n    ) as ScrollIntoViewOptions;\n\n    button.scrollIntoView({\n      behavior: \"smooth\",\n      ...scrollOptions,\n    });\n  }\n\n  @Listen(\"click\")\n  onClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.selected = true;\n  }\n\n  @Watch(\"selected\")\n  onSelected(): void {\n    if (this.selected) {\n      this.selectedEvent.emit();\n    }\n  }\n\n  /**\n   * Render the icon component using the icon's name passed from prop.\n   * Use the `filled` version when the tab is `selected`.\n   * @returns {HTMLElement}\n   */\n  private renderIcon(): HTMLZIconElement {\n    let icon = this.icon;\n    const iconFilled = `${icon.replace(/-filled$/, \"\")}-filled`;\n\n    if (this.selected && Object.keys(ICONS).includes(iconFilled)) {\n      icon = iconFilled;\n    }\n\n    return <z-icon name={icon}></z-icon>;\n  }\n\n  render(): HTMLZNavigationTabLinkElement {\n    return (\n      <Host\n        role=\"tab\"\n        id={this.tabId}\n        aria-selected={this.selected ? \"true\" : \"false\"}\n        aria-controls={this.ariaControls}\n      >\n        <a\n          tabIndex={this.selected ? 0 : -1}\n          onFocus={this.scrollToTab.bind(this)}\n          href={this.disabled ? null : this.href}\n          title={this.htmlTitle}\n          target={this.target}\n        >\n          {this.icon && this.renderIcon()}\n          {this.orientation === \"horizontal\" && this.label}\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAAmB,69GACzB,MAAAC,EAAeD,E,MCaFE,EAAkB,M,gIAuBR,M,cAMA,M,iBAMPC,EAA0BC,W,UAMjCC,EAAmBC,I,4GA0ClB,WAAAC,EAAaC,OAAQC,IAC3B,MAAMC,EACJC,KAAKC,cAAgBT,EAA0BC,WAC3C,CAACS,MAAO,UAAWC,OAAQ,UAC3B,CAACD,MAAO,SAAUC,OAAQ,WAGhCL,EAAOM,eAAcC,OAAAC,OAAA,CACnBC,SAAU,UACPR,G,CAKP,OAAAS,GACE,GAAIR,KAAKS,SAAU,CACjB,M,CAGFT,KAAKU,SAAW,I,CAIlB,UAAAC,GACE,GAAIX,KAAKU,SAAU,CACjBV,KAAKY,cAAcC,M,EASf,UAAAC,GACN,IAAIC,EAAOf,KAAKe,KAChB,MAAMC,EAAa,GAAGD,EAAKE,QAAQ,WAAY,aAE/C,GAAIjB,KAAKU,UAAYL,OAAOa,KAAKC,GAAOC,SAASJ,GAAa,CAC5DD,EAAOC,C,CAGT,OAAOK,EAAA,UAAQC,KAAMP,G,CAGvB,MAAAQ,GACE,OACEF,EAACG,EAAI,CAAAC,IAAA,2CACHC,KAAK,MACLC,GAAI3B,KAAK4B,MAAK,gBACC5B,KAAKU,SAAW,OAAS,QAAO,gBAChCV,KAAK6B,cAEpBR,EAAA,KAAAI,IAAA,2CACEK,SAAU9B,KAAKU,SAAW,GAAK,EAC/BqB,QAAS/B,KAAKJ,YAAYoC,KAAKhC,MAC/BiC,KAAMjC,KAAKS,SAAW,KAAOT,KAAKiC,KAClCC,MAAOlC,KAAKmC,UACZtC,OAAQG,KAAKH,QAEZG,KAAKe,MAAQf,KAAKc,aAClBd,KAAKC,cAAgB,cAAgBD,KAAKoC,O"}

package/dist/web-components-library/p-bb8037c4.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as e,h as t}from"./p-10bb4f4b.js";import{P as n}from"./p-025f494e.js";import{a as s}from"./p-955da62e.js";import"./p-2c886e8b.js";const o=':host{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:relative;display:grid;width:calc(100% + calc(var(--space-unit) * 2));height:402px;box-sizing:border-box;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--color-primary01);margin-left:calc(-1 * var(--space-unit));background:var(--color-surface01);border-radius:0;box-shadow:0 2px 4px 0 rgb(66 69 72 / 35%)}:host>div>z-icon{position:absolute;top:var(--space-unit);right:var(--space-unit);cursor:pointer;fill:var(--color-primary01)}:host>div>div.cta-wrapper{display:flex;flex-flow:column nowrap;align-self:end;justify-content:space-between}:host>div>div.content-wrapper{position:relative;overflow:hidden;align-self:stretch}:host>div>div.content-wrapper>section{box-sizing:border-box;padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface04);color:var(--color-surface05);font-size:14px;line-height:20px}:host>div>div.content-wrapper>section:last-child{border-bottom:none}:host>div>div.content-wrapper>section.info-wrapper{position:relative;overflow:hidden;box-sizing:border-box}:host>div>div.content-wrapper>section.info-wrapper.hidden::after{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);content:"";pointer-events:none}:host>div>div.content-wrapper>section>span.license-heading{display:flex;justify-content:space-between}:host>div>div.content-wrapper>section>span.license-heading>span.expired{color:var(--color-secondary02);font-size:12px;font-weight:600}:host>div>div.content-wrapper>section>span.license-heading>span.expiring{color:var(--color-warning01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>z-popover{position:absolute;top:0;left:calc(var(--space-unit) * 4)}';const r=o;const a=class{emitFlipCard(i=false){this.flipCard.emit(i)}constructor(t){i(this,t);this.flipCard=e(this,"flipCard",7);this.data=undefined;this.htmltabindex=0;this.hiddenContent=false;this.tooltip=false;this.emitFlipCard=this.emitFlipCard.bind(this)}componentWillLoad(){this.setStringOrArray()}componentWillUpdate(){this.setStringOrArray()}componentDidRender(){this.handleContentHeight()}handleContentHeight(){if(!this.contentWrapper&&!this.infoWrapper){this.hiddenContent=false;return}if(this.contentWrapper.scrollHeight>this.contentWrapper.offsetHeight||this.infoWrapper.scrollHeight>this.infoWrapper.offsetHeight){const i=this.contentWrapper.offsetHeight-this.onlineLicenseWrapper.offsetHeight-this.offlineLicenseWrapper.offsetHeight;this.infoWrapper.style.height=`${i}px`;this.hiddenContent=true;return}this.hiddenContent=false}setStringOrArray(){if(typeof this.data==="string"){this.cardData=JSON.parse(this.data)}else{this.cardData=this.data}}renderCloseIcon(){return t("z-icon",{name:"multiply-circled-filled",height:18,width:18,onClick:()=>this.emitFlipCard(false),tabindex:this.htmltabindex,onKeyUp:i=>{s(i,this.emitFlipCard,false)}})}renderGeneralSection(){var i,e;const n=(i=this===null||this===void 0?void 0:this.cardData)===null||i===void 0?void 0:i.title;const s=(e=this===null||this===void 0?void 0:this.cardData)===null||e===void 0?void 0:e.description;return t("section",{class:`info-wrapper ${this.hiddenContent?"hidden":""}`,onClick:()=>{if(this.hiddenContent){this.tooltip=!this.tooltip}},ref:i=>this.infoWrapper=i},this.renderAuthor(),this.renderYear(),n,t("br",null),s)}renderAuthor(){var i;const e=(i=this===null||this===void 0?void 0:this.cardData)===null||i===void 0?void 0:i.author;if(!e){return null}return t("span",null,"Autore: ",t("b",null,e),t("br",null))}renderYear(){var i;const e=(i=this===null||this===void 0?void 0:this.cardData)===null||i===void 0?void 0:i.year;if(!e){return null}return t("span",null,"Anno: ",t("b",null,e),t("br",null))}renderTooltip(){if(!this.tooltip){return}if(!this.cardData){return}const{title:i,year:e,author:s,description:o}=this.cardData;return t("z-popover",{position:n.RIGHT,onClick:()=>this.tooltip=false},`${i} ${e} ${s} ${o}`)}setExpirationLicenseMessage(i){if(i==="online"&&this.cardData.onlineLicense.expired||i==="offline"&&this.cardData.offlineLicense.expired){return t("span",{class:"expired"},"SCADUTA")}if(i==="online"&&this.cardData.onlineLicense.expiring||i==="offline"&&this.cardData.offlineLicense.expiring){return t("span",{class:"expiring"},"IN SCADENZA")}}renderOnlineLicenseSection(){var i;if(!((i=this===null||this===void 0?void 0:this.cardData)===null||i===void 0?void 0:i.onlineLicense)){return}return t("section",{ref:i=>this.onlineLicenseWrapper=i},t("span",{class:"license-heading"},t("span",null,"Licenza online"),this.setExpirationLicenseMessage("online")),"Scadenza il ",t("b",null,this.cardData.onlineLicense.expiration),t("br",null))}renderOfflineLicenseSection(){var i;if(!((i=this===null||this===void 0?void 0:this.cardData)===null||i===void 0?void 0:i.offlineLicense)){return}return t("section",{ref:i=>this.offlineLicenseWrapper=i},t("span",{class:"license-heading"},t("span",null,"Licenza offline"),this.setExpirationLicenseMessage("offline")),"Scadenza il ",t("b",null,this.cardData.offlineLicense.expiration),t("br",null),"Installazioni disponibili: ",t("b",null,this.cardData.offlineLicense.installations))}render(){return t("div",{key:"cdc99e22e6b891a80166dfd1c8fe5643687c6ac5"},this.renderCloseIcon(),t("div",{key:"4a987a72789738cacaaf56874141b616b5121ee4",class:"content-wrapper",ref:i=>this.contentWrapper=i},this.renderGeneralSection(),this.renderTooltip(),this.renderOnlineLicenseSection(),this.renderOfflineLicenseSection()),t("div",{key:"d0437dfce9bf76ddcdb5606f31da3c1c661a2e66",class:"cta-wrapper"},t("slot",{key:"9d1b541e7d4e64e87ce6e2b08d98a7e96f0c1b7e"})))}};a.style=r;export{a as z_myz_card_info};
+//# sourceMappingURL=p-bb8037c4.entry.js.map

package/dist/web-components-library/p-bb8037c4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMyzCardInfoStyle0","ZMyzCardInfo","emitFlipCard","showBack","this","flipCard","emit","constructor","hostRef","bind","componentWillLoad","setStringOrArray","componentWillUpdate","componentDidRender","handleContentHeight","contentWrapper","infoWrapper","hiddenContent","scrollHeight","offsetHeight","height","onlineLicenseWrapper","offlineLicenseWrapper","style","data","cardData","JSON","parse","renderCloseIcon","h","name","width","onClick","tabindex","htmltabindex","onKeyUp","e","handleKeyboardSubmit","renderGeneralSection","title","_a","description","_b","class","tooltip","ref","el","renderAuthor","renderYear","author","year","renderTooltip","position","PopoverPosition","RIGHT","setExpirationLicenseMessage","type","onlineLicense","expired","offlineLicense","expiring","renderOnlineLicenseSection","expiration","renderOfflineLicenseSection","installations","render","key"],"sources":["src/snowflakes/myz/card/z-myz-card-info/styles.css?tag=z-myz-card-info&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-info/index.tsx"],"sourcesContent":[":host {\n  width: 100%;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  position: relative;\n  display: grid;\n  width: calc(100% + calc(var(--space-unit) * 2));\n  height: 402px;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);\n  border: var(--border-size-small) solid var(--color-primary01);\n  margin-left: calc(-1 * var(--space-unit));\n  background: var(--color-surface01);\n  border-radius: 0;\n  box-shadow: 0 2px 4px 0 rgb(66 69 72 / 35%);\n}\n\n:host > div > z-icon {\n  position: absolute;\n  top: var(--space-unit);\n  right: var(--space-unit);\n  cursor: pointer;\n  fill: var(--color-primary01);\n}\n\n:host > div > div.cta-wrapper {\n  display: flex;\n  flex-flow: column nowrap;\n  align-self: end;\n  justify-content: space-between;\n}\n\n:host > div > div.content-wrapper {\n  position: relative;\n  overflow: hidden;\n  align-self: stretch;\n}\n\n:host > div > div.content-wrapper > section {\n  box-sizing: border-box;\n  padding: var(--space-unit) 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface04);\n  color: var(--color-surface05);\n  font-size: 14px;\n  line-height: 20px;\n}\n\n:host > div > div.content-wrapper > section:last-child {\n  border-bottom: none;\n}\n\n:host > div > div.content-wrapper > section.info-wrapper {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n:host > div > div.content-wrapper > section.info-wrapper.hidden::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);\n  content: \"\";\n  pointer-events: none;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading {\n  display: flex;\n  justify-content: space-between;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading > span.expired {\n  color: var(--color-secondary02);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading > span.expiring {\n  color: var(--color-warning01);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n:host > div > div.content-wrapper > z-popover {\n  position: absolute;\n  top: 0;\n  left: calc(var(--space-unit) * 4);\n}\n","import {Component, Prop, h, Event, EventEmitter, State} from \"@stencil/core\";\nimport {DictionaryData, PopoverPosition} from \"../../../../beans\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\n\n/**\n * @slot  - content\n */\n@Component({\n  tag: \"z-myz-card-info\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardInfo {\n  /** dictionary info */\n  @Prop()\n  data: string | DictionaryData;\n\n  /** tabindex link attribute (optional) */\n  @Prop()\n  htmltabindex?: number = 0;\n\n  @State()\n  hiddenContent = false;\n\n  @State()\n  tooltip = false;\n\n  private cardData: DictionaryData;\n\n  private contentWrapper: HTMLElement;\n\n  private infoWrapper: HTMLElement;\n\n  private onlineLicenseWrapper: HTMLElement;\n\n  private offlineLicenseWrapper: HTMLElement;\n\n  /** flip card to front */\n  @Event()\n  flipCard: EventEmitter;\n\n  private emitFlipCard(showBack = false): void {\n    this.flipCard.emit(showBack);\n  }\n\n  constructor() {\n    this.emitFlipCard = this.emitFlipCard.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.setStringOrArray();\n  }\n\n  componentWillUpdate(): void {\n    this.setStringOrArray();\n  }\n\n  componentDidRender(): void {\n    this.handleContentHeight();\n  }\n\n  private handleContentHeight(): void {\n    if (!this.contentWrapper && !this.infoWrapper) {\n      this.hiddenContent = false;\n\n      return;\n    }\n\n    if (\n      this.contentWrapper.scrollHeight > this.contentWrapper.offsetHeight ||\n      this.infoWrapper.scrollHeight > this.infoWrapper.offsetHeight\n    ) {\n      const height =\n        this.contentWrapper.offsetHeight -\n        this.onlineLicenseWrapper.offsetHeight -\n        this.offlineLicenseWrapper.offsetHeight;\n      this.infoWrapper.style.height = `${height}px`;\n      this.hiddenContent = true;\n\n      return;\n    }\n\n    this.hiddenContent = false;\n  }\n\n  private setStringOrArray(): void {\n    if (typeof this.data === \"string\") {\n      this.cardData = JSON.parse(this.data);\n    } else {\n      this.cardData = this.data;\n    }\n  }\n\n  private renderCloseIcon(): HTMLZIconElement {\n    return (\n      <z-icon\n        name=\"multiply-circled-filled\"\n        height={18}\n        width={18}\n        onClick={() => this.emitFlipCard(false)}\n        tabindex={this.htmltabindex}\n        onKeyUp={(e: KeyboardEvent) => {\n          handleKeyboardSubmit(e, this.emitFlipCard, false);\n        }}\n      />\n    );\n  }\n\n  private renderGeneralSection(): HTMLElement {\n    const title = this?.cardData?.title;\n    const description = this?.cardData?.description;\n\n    return (\n      <section\n        class={`info-wrapper ${this.hiddenContent ? \"hidden\" : \"\"}`}\n        onClick={() => {\n          if (this.hiddenContent) {\n            this.tooltip = !this.tooltip;\n          }\n        }}\n        ref={(el) => (this.infoWrapper = el)}\n      >\n        {this.renderAuthor()}\n        {this.renderYear()}\n        {title}\n        <br />\n        {description}\n      </section>\n    );\n  }\n\n  private renderAuthor(): HTMLSpanElement {\n    const author = this?.cardData?.author;\n    if (!author) {\n      return null;\n    }\n\n    return (\n      <span>\n        Autore: <b>{author}</b>\n        <br />\n      </span>\n    );\n  }\n\n  private renderYear(): HTMLSpanElement {\n    const year = this?.cardData?.year;\n    if (!year) {\n      return null;\n    }\n\n    return (\n      <span>\n        Anno: <b>{year}</b>\n        <br />\n      </span>\n    );\n  }\n\n  private renderTooltip(): HTMLZPopoverElement {\n    if (!this.tooltip) {\n      return;\n    }\n\n    if (!this.cardData) {\n      return;\n    }\n    const {title, year, author, description} = this.cardData;\n\n    return (\n      <z-popover\n        position={PopoverPosition.RIGHT}\n        onClick={() => (this.tooltip = false)}\n      >\n        {`${title} ${year} ${author} ${description}`}\n      </z-popover>\n    );\n  }\n\n  private setExpirationLicenseMessage(type: string): HTMLSpanElement {\n    if (\n      (type === \"online\" && this.cardData.onlineLicense.expired) ||\n      (type === \"offline\" && this.cardData.offlineLicense.expired)\n    ) {\n      return <span class=\"expired\">SCADUTA</span>;\n    }\n\n    if (\n      (type === \"online\" && this.cardData.onlineLicense.expiring) ||\n      (type === \"offline\" && this.cardData.offlineLicense.expiring)\n    ) {\n      return <span class=\"expiring\">IN SCADENZA</span>;\n    }\n  }\n\n  private renderOnlineLicenseSection(): HTMLElement {\n    if (!this?.cardData?.onlineLicense) {\n      return;\n    }\n\n    return (\n      <section ref={(el) => (this.onlineLicenseWrapper = el)}>\n        <span class=\"license-heading\">\n          <span>Licenza online</span>\n          {this.setExpirationLicenseMessage(\"online\")}\n        </span>\n        Scadenza il <b>{this.cardData.onlineLicense.expiration}</b>\n        <br />\n      </section>\n    );\n  }\n\n  private renderOfflineLicenseSection(): HTMLElement {\n    if (!this?.cardData?.offlineLicense) {\n      return;\n    }\n\n    return (\n      <section ref={(el) => (this.offlineLicenseWrapper = el)}>\n        <span class=\"license-heading\">\n          <span>Licenza offline</span>\n          {this.setExpirationLicenseMessage(\"offline\")}\n        </span>\n        Scadenza il <b>{this.cardData.offlineLicense.expiration}</b>\n        <br />\n        Installazioni disponibili: <b>{this.cardData.offlineLicense.installations}</b>\n      </section>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div>\n        {this.renderCloseIcon()}\n        <div\n          class=\"content-wrapper\"\n          ref={(el) => (this.contentWrapper = el)}\n        >\n          {this.renderGeneralSection()}\n          {this.renderTooltip()}\n          {this.renderOnlineLicenseSection()}\n          {this.renderOfflineLicenseSection()}\n        </div>\n        <div class=\"cta-wrapper\">\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/web-components-library/p-bc956e60.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as r,a as t}from"./p-10bb4f4b.js";import{u as e}from"./p-025f494e.js";const s=class{constructor(r){a(this,r);this.mode=e.POLITE}render(){return r(t,{key:"a3275876421862b2b2c80c044ca50f50464cfd55","aria-live":this.mode,"aria-atomic":"true","aria-relevant":"additions"},r("slot",{key:"3767d930ccea80abbd79b4f3ee6d1733df29b934"}))}};export{s as z_aria_alert};
+//# sourceMappingURL=p-bc956e60.entry.js.map

package/dist/web-components-library/p-bc956e60.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ZAriaAlert","ZAriaAlertMode","POLITE","render","h","Host","key","this","mode"],"sources":["src/components/z-aria-alert/index.tsx"],"sourcesContent":["import {Component, Prop, h, Host} from \"@stencil/core\";\nimport {ZAriaAlertMode} from \"../../beans\";\n\n@Component({\n  tag: \"z-aria-alert\",\n  shadow: false,\n})\nexport class ZAriaAlert {\n  /** Aria live mode */\n  @Prop()\n  mode: ZAriaAlertMode = ZAriaAlertMode.POLITE;\n\n  render(): HTMLZAriaAlertElement {\n    return (\n      <Host\n        aria-live={this.mode}\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"4FAOaA,EAAU,M,mCAGEC,EAAeC,M,CAEtC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,uDACQC,KAAKC,KAAI,cACR,OAAM,gBACJ,aAEdJ,EAAA,QAAAE,IAAA,6C"}

package/dist/web-components-library/p-c0bfa87d.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as n,a as o,g as s}from"./p-10bb4f4b.js";import{P as i,S as r,B as a,e as c}from"./p-025f494e.js";const h=':host{position:relative;display:flex;min-width:128px;box-sizing:border-box;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([show-menu])::after{display:inline-block;height:100%;margin-right:calc(var(--space-unit) * 4);background:transparent;content:"";user-select:none}.cell--menu-container{position:absolute;z-index:1;top:var(--space-unit);right:var(--space-unit)}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}:host{background-color:var(--color-surface02);font-weight:var(--font-sb)}:host([sortable]){cursor:pointer}.z-th--sort-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin-top:auto;background-color:transparent;cursor:pointer}.z-th--sort-button:focus{box-shadow:var(--shadow-focus-primary);outline:none}';const l=h;const u=class{constructor(n){t(this,n);this.sort=e(this,"sort",7);this.colspan=undefined;this.showMenu=null;this.sticky=false;this.sortDirection=undefined;this.popoverPosition=i.AUTO;this.isMenuOpen=false}get ariaSortDirection(){if(!this.sortDirection){return null}return this.sortDirection===r.ASC?"ascending":"descending"}handleSort(){if(!this.sortDirection){return}this.sortDirection=this.sortDirection===r.ASC?r.DESC:r.ASC;this.sort.emit({sortDirection:this.sortDirection})}updateColspan(){if(this.colspan){this.host.style.gridColumn=`span ${this.colspan}`}else{this.host.style.removeProperty("grid-column")}}componentWillLoad(){this.updateColspan()}render(){return n(o,{key:"db05b7222adcb42b904d44fccc8fc63c759c1848",role:"columnheader","menu-open":this.isMenuOpen,"aria-sort":this.ariaSortDirection},n("slot",{key:"11ed23546ec8e9223354cf65e851d0d1794f71b5"}),this.sortDirection&&n("button",{class:"z-th--sort-button",type:"button",onClick:this.handleSort.bind(this)},n("z-icon",{name:this.sortDirection===r.ASC?"arrow-simple-up":"arrow-simple-down",width:14,height:14})),this.showMenu&&n("div",{class:"cell--menu-container"},n("z-button",{variant:a.TERTIARY,icon:"contextual-menu",size:c.X_SMALL,ref:t=>this.menuTrigger=t,onClick:()=>this.popoverEl.open=!this.popoverEl.open}),n("z-popover",{ref:t=>this.popoverEl=t,bindTo:this.menuTrigger,onOpenChange:t=>this.isMenuOpen=t.detail.open,position:this.popoverPosition},n("slot",{name:"contextual-menu"}))))}get host(){return s(this)}static get watchers(){return{colspan:["updateColspan"]}}};u.style=l;export{u as Z};
+//# sourceMappingURL=p-c0bfa87d.js.map

package/dist/web-components-library/p-c0bfa87d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZThStyle0","ZTh","PopoverPosition","AUTO","ariaSortDirection","this","sortDirection","SortDirection","ASC","handleSort","DESC","sort","emit","updateColspan","colspan","host","style","gridColumn","removeProperty","componentWillLoad","render","h","Host","key","role","isMenuOpen","class","type","onClick","bind","name","width","height","showMenu","variant","ButtonVariant","TERTIARY","icon","size","ControlSize","X_SMALL","ref","el","menuTrigger","popoverEl","open","bindTo","onOpenChange","event","detail","position","popoverPosition"],"sources":["src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n\n:host {\n  background-color: var(--color-surface02);\n  font-weight: var(--font-sb);\n}\n\n/* :host([sticky]) {\n  background-color: var(--color-surface02);\n} */\n\n:host([sortable]) {\n  cursor: pointer;\n}\n\n.z-th--sort-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin-top: auto;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n.z-th--sort-button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, SortDirection, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTh component.\n * @slot - ZTh content.\n * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.\n */\n@Component({\n  tag: \"z-th\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTh {\n  @Element() host: HTMLZThElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Current sorting direction.\n   * Set `SortDirection.ASC` or `SortDirection.DESC` to show the sort icon.\n   */\n  @Prop({mutable: true})\n  sortDirection?: SortDirection;\n\n  /**\n   * Set popover position.\n   */\n  @Prop()\n  popoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  /**\n   * Sort event fired when the user clicks on the sort button.\n   * The sorting logic must be implemented by the app.\n   * You can set an `id` on the `z-th` to easly identify the column in the event listener.\n   */\n  @Event()\n  private sort: EventEmitter;\n\n  private menuTrigger: HTMLElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Get the value to set to the `aria-sort` attribute based on the current sort direction.\n   */\n  private get ariaSortDirection(): string {\n    if (!this.sortDirection) {\n      return null;\n    }\n\n    return this.sortDirection === SortDirection.ASC ? \"ascending\" : \"descending\";\n  }\n\n  /**\n   * Handle the click on the sort button.\n   * @fires sort\n   */\n  private handleSort(): void {\n    if (!this.sortDirection) {\n      return;\n    }\n\n    this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;\n    this.sort.emit({\n      sortDirection: this.sortDirection,\n    });\n  }\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZThElement {\n    return (\n      <Host\n        role=\"columnheader\"\n        menu-open={this.isMenuOpen}\n        aria-sort={this.ariaSortDirection}\n      >\n        <slot></slot>\n        {this.sortDirection && (\n          <button\n            class=\"z-th--sort-button\"\n            type=\"button\"\n            onClick={this.handleSort.bind(this)}\n          >\n            <z-icon\n              name={this.sortDirection === SortDirection.ASC ? \"arrow-simple-up\" : \"arrow-simple-down\"}\n              width={14}\n              height={14}\n            />\n          </button>\n        )}\n        {this.showMenu && (\n          <div class=\"cell--menu-container\">\n            <z-button\n              variant={ButtonVariant.TERTIARY}\n              icon=\"contextual-menu\"\n              size={ControlSize.X_SMALL}\n              ref={(el) => (this.menuTrigger = el as HTMLElement)}\n              onClick={() => (this.popoverEl.open = !this.popoverEl.open)}\n            />\n            <z-popover\n              ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n              bindTo={this.menuTrigger}\n              onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n              position={this.popoverPosition}\n            >\n              <slot name=\"contextual-menu\"></slot>\n            </z-popover>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"yHAAA,MAAMA,EAAY,81CAClB,MAAAC,EAAeD,E,MCYFE,EAAG,M,yFAekB,K,YAMvB,M,kDAaSC,EAAgBC,K,gBAMrB,K,CAiBb,qBAAYC,GACV,IAAKC,KAAKC,cAAe,CACvB,OAAO,I,CAGT,OAAOD,KAAKC,gBAAkBC,EAAcC,IAAM,YAAc,Y,CAO1D,UAAAC,GACN,IAAKJ,KAAKC,cAAe,CACvB,M,CAGFD,KAAKC,cAAgBD,KAAKC,gBAAkBC,EAAcC,IAAMD,EAAcG,KAAOH,EAAcC,IACnGH,KAAKM,KAAKC,KAAK,CACbN,cAAeD,KAAKC,e,CAKd,aAAAO,GACR,GAAIR,KAAKS,QAAS,CAChBT,KAAKU,KAAKC,MAAMC,WAAa,QAAQZ,KAAKS,S,KACrC,CACLT,KAAKU,KAAKC,MAAME,eAAe,c,EAInC,iBAAAC,GACEd,KAAKQ,e,CAGP,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,eAAc,YACRnB,KAAKoB,WAAU,YACfpB,KAAKD,mBAEhBiB,EAAA,QAAAE,IAAA,6CACClB,KAAKC,eACJe,EAAA,UACEK,MAAM,oBACNC,KAAK,SACLC,QAASvB,KAAKI,WAAWoB,KAAKxB,OAE9BgB,EAAA,UACES,KAAMzB,KAAKC,gBAAkBC,EAAcC,IAAM,kBAAoB,oBACrEuB,MAAO,GACPC,OAAQ,MAIb3B,KAAK4B,UACJZ,EAAA,OAAKK,MAAM,wBACTL,EAAA,YACEa,QAASC,EAAcC,SACvBC,KAAK,kBACLC,KAAMC,EAAYC,QAClBC,IAAMC,GAAQrC,KAAKsC,YAAcD,EACjCd,QAAS,IAAOvB,KAAKuC,UAAUC,MAAQxC,KAAKuC,UAAUC,OAExDxB,EAAA,aACEoB,IAAMC,GAAQrC,KAAKuC,UAAYF,EAC/BI,OAAQzC,KAAKsC,YACbI,aAAeC,GAAW3C,KAAKoB,WAAauB,EAAMC,OAAOJ,KACzDK,SAAU7C,KAAK8C,iBAEf9B,EAAA,QAAMS,KAAK,sB"}

package/dist/web-components-library/p-c2110712.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,g as s}from"./p-10bb4f4b.js";import{t as i}from"./p-025f494e.js";const n=':host{position:fixed;z-index:10000;display:flex;flex-flow:column nowrap;margin-top:calc(var(--space-unit) * 2);margin-bottom:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host([position="bottom-centre"]),:host([position="bottom-right"]),:host([position="bottom-left"]){bottom:0;align-items:flex-end;justify-content:flex-end}:host([position="top-left"]),:host([position="top-right"]),:host([position="top-centre"]){top:0;align-items:flex-start;justify-content:flex-start}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host([position="top-centre"]){top:0;left:50%;align-items:center;justify-content:flex-start;transform:translateX(-50%)}:host([position="top-left"]){top:0;left:0;align-items:flex-start;justify-content:flex-start}:host([position="top-right"]){top:0;right:0;align-items:flex-end;justify-content:flex-start}:host([position="bottom-centre"]){bottom:0;left:50%;align-items:center;justify-content:flex-end;transform:translateX(-50%)}:host([position="bottom-right"]){right:0;bottom:0;align-items:flex-end;justify-content:flex-end}:host([position="bottom-left"]){bottom:0;left:0;align-items:flex-start;justify-content:flex-end}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}';const e=n;const a=class{constructor(o){t(this,o);this.position=i.TOP_RIGHT;this.newestontop=true}watchPropNewestontop(t){this.hostElement.append(...this.notificationArray.reverse());if(t){this.hostElement.shadowRoot.addEventListener("slotchange",this.slotChangeHandler)}else{this.hostElement.shadowRoot.removeEventListener("slotchange",this.slotChangeHandler)}}componentWillLoad(){if(this.newestontop){this.handleNewestOnTop()}}handleNewestOnTop(){this.notificationArray=Array.from(this.hostElement.children);this.hostElement.append(...this.notificationArray.reverse());this.hostElement.shadowRoot.addEventListener("slotchange",this.slotChangeHandler.bind(this))}slotChangeHandler(){const t=Array.from(this.hostElement.children).filter((t=>!this.notificationArray.includes(t)));if(t){t.forEach((t=>{this.notificationArray.push(t);const o=t;t.remove();this.hostElement.prepend(o)}))}}render(){return o("slot",{key:"43f93b7edca0a4245d9c79d63004617ad21063b0",name:"toasts"})}get hostElement(){return s(this)}static get watchers(){return{newestontop:["watchPropNewestontop"]}}};a.style=e;export{a as z_toast_notification_list};
+//# sourceMappingURL=p-c2110712.entry.js.map

package/dist/web-components-library/p-c2110712.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZToastNotificationListStyle0","ZToastNotificationList","ToastNotificationPosition","TOP_RIGHT","watchPropNewestontop","newValue","this","hostElement","append","notificationArray","reverse","shadowRoot","addEventListener","slotChangeHandler","removeEventListener","componentWillLoad","newestontop","handleNewestOnTop","Array","from","children","bind","difference","filter","elem","includes","forEach","push","newElem","remove","prepend","render","h","key","name"],"sources":["src/components/list/z-toast-notification-list/styles.css?tag=z-toast-notification-list&encapsulation=shadow","src/components/list/z-toast-notification-list/index.tsx"],"sourcesContent":[":host {\n  position: fixed;\n  z-index: 10000;\n  display: flex;\n  flex-flow: column nowrap;\n  margin-top: calc(var(--space-unit) * 2);\n  margin-bottom: calc(var(--space-unit) * 2);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n::slotted(z-toast-notification) {\n  width: 100vw;\n}\n\n::slotted(:not(:last-child)) {\n  margin-bottom: calc(var(--space-unit) * 1);\n}\n\n:host([position=\"bottom-centre\"]),\n:host([position=\"bottom-right\"]),\n:host([position=\"bottom-left\"]) {\n  bottom: 0;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n\n:host([position=\"top-left\"]),\n:host([position=\"top-right\"]),\n:host([position=\"top-centre\"]) {\n  top: 0;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host {\n    margin: calc(var(--space-unit) * 3);\n  }\n\n  :host([position=\"top-centre\"]) {\n    top: 0;\n    left: 50%;\n    align-items: center;\n    justify-content: flex-start;\n    transform: translateX(-50%);\n  }\n\n  :host([position=\"top-left\"]) {\n    top: 0;\n    left: 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n\n  :host([position=\"top-right\"]) {\n    top: 0;\n    right: 0;\n    align-items: flex-end;\n    justify-content: flex-start;\n  }\n\n  :host([position=\"bottom-centre\"]) {\n    bottom: 0;\n    left: 50%;\n    align-items: center;\n    justify-content: flex-end;\n    transform: translateX(-50%);\n  }\n\n  :host([position=\"bottom-right\"]) {\n    right: 0;\n    bottom: 0;\n    align-items: flex-end;\n    justify-content: flex-end;\n  }\n\n  :host([position=\"bottom-left\"]) {\n    bottom: 0;\n    left: 0;\n    align-items: flex-start;\n    justify-content: flex-end;\n  }\n\n  ::slotted(z-toast-notification) {\n    width: 50vw;\n  }\n}\n\n/* Wide breakpoint */\n@media only screen and (min-width: 1366px) {\n  :host {\n    margin: calc(var(--space-unit) * 4);\n  }\n\n  ::slotted(z-toast-notification) {\n    width: 33vw;\n  }\n}\n","import {Component, Prop, h, Element, Watch} from \"@stencil/core\";\nimport {ToastNotificationPosition} from \"../../../beans\";\n\n@Component({\n  tag: \"z-toast-notification-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotificationList {\n  @Element() hostElement: HTMLZToastNotificationListElement;\n\n  /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */\n  @Prop({reflect: true})\n  position: ToastNotificationPosition = ToastNotificationPosition.TOP_RIGHT;\n\n  /**Set the entry position of new notification in the list */\n  @Prop()\n  newestontop?: boolean = true;\n\n  private notificationArray: Element[];\n\n  @Watch(\"newestontop\")\n  watchPropNewestontop(newValue: boolean): void {\n    this.hostElement.append(...this.notificationArray.reverse());\n    if (newValue) {\n      this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler);\n    } else {\n      this.hostElement.shadowRoot.removeEventListener(\"slotchange\", this.slotChangeHandler);\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.newestontop) {\n      this.handleNewestOnTop();\n    }\n  }\n\n  private handleNewestOnTop(): void {\n    this.notificationArray = Array.from(this.hostElement.children);\n    this.hostElement.append(...this.notificationArray.reverse());\n    this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler.bind(this));\n  }\n\n  private slotChangeHandler(): void {\n    const difference = Array.from(this.hostElement.children).filter((elem) => !this.notificationArray.includes(elem));\n    if (difference) {\n      difference.forEach((elem) => {\n        this.notificationArray.push(elem);\n        const newElem = elem;\n        elem.remove();\n        this.hostElement.prepend(newElem);\n      });\n    }\n  }\n\n  render(): HTMLSlotElement {\n    return <slot name=\"toasts\"></slot>;\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,m+CAClB,MAAAC,EAAeD,E,MCOFE,EAAsB,M,uCAKKC,EAA0BC,U,iBAIxC,I,CAKxB,oBAAAC,CAAqBC,GACnBC,KAAKC,YAAYC,UAAUF,KAAKG,kBAAkBC,WAClD,GAAIL,EAAU,CACZC,KAAKC,YAAYI,WAAWC,iBAAiB,aAAcN,KAAKO,kB,KAC3D,CACLP,KAAKC,YAAYI,WAAWG,oBAAoB,aAAcR,KAAKO,kB,EAIvE,iBAAAE,GACE,GAAIT,KAAKU,YAAa,CACpBV,KAAKW,mB,EAID,iBAAAA,GACNX,KAAKG,kBAAoBS,MAAMC,KAAKb,KAAKC,YAAYa,UACrDd,KAAKC,YAAYC,UAAUF,KAAKG,kBAAkBC,WAClDJ,KAAKC,YAAYI,WAAWC,iBAAiB,aAAcN,KAAKO,kBAAkBQ,KAAKf,M,CAGjF,iBAAAO,GACN,MAAMS,EAAaJ,MAAMC,KAAKb,KAAKC,YAAYa,UAAUG,QAAQC,IAAUlB,KAAKG,kBAAkBgB,SAASD,KAC3G,GAAIF,EAAY,CACdA,EAAWI,SAASF,IAClBlB,KAAKG,kBAAkBkB,KAAKH,GAC5B,MAAMI,EAAUJ,EAChBA,EAAKK,SACLvB,KAAKC,YAAYuB,QAAQF,EAAQ,G,EAKvC,MAAAG,GACE,OAAOC,EAAA,QAAAC,IAAA,2CAAMC,KAAK,U"}

package/dist/web-components-library/p-c49ca2a9.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,g as i}from"./p-10bb4f4b.js";import{p as r}from"./p-025f494e.js";import{f as s,g as n,a as o}from"./p-955da62e.js";import"./p-2c886e8b.js";const a=':host{display:block;width:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;flex-direction:column}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;z-index:10;top:50%;width:auto;margin:0 var(--space-unit);cursor:pointer;fill:var(--color-primary01);transition:0.6s ease}main .scroll.disabled{opacity:0.5;pointer-events:none}main .scroll.right{right:0}#slides{display:flex;flex-wrap:wrap;line-height:0px;overflow-y:hidden;transition:all 300ms}footer{display:grid;width:100%;height:56px;align-items:center;border-top:var(--border-size-medium) solid var(--color-surface02);grid-template:2 / 2;grid-template-areas:"center center" "left right"}footer>div{width:100%;align-items:center}footer .footer-center{grid-area:center}footer .footer-left{grid-area:left}footer .footer-right{grid-area:right}footer .bullet-container{display:flex;min-height:60px;align-items:center;justify-content:center;margin:0 auto}footer .bullet-container .bullet{width:8px;height:8px;margin:var(--space-unit) 2px;background-color:var(--gray200);border-radius:50%;pointer-events:none}footer .bullet-container .bullet.selected{background-color:var(--gray400)}@media only screen and (min-width: 768px){footer{height:76px;border-top:var(--border-size-medium) solid var(--color-surface02);grid-template:1 / 1fr 2fr 1fr;grid-template-areas:"left center right"}footer .bullet-container .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bullet-container .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);cursor:pointer;pointer-events:auto}}';const l=a;function h(t){return Array.isArray(t)&&t.every((t=>typeof t==="string"))}const d=class{constructor(e){t(this,e);this.slideshowid=undefined;this.data=undefined;this.device=undefined;this.currentSlide=0}watchData(){this.parseLinks()}componentWillLoad(){this.parseLinks();this.setDevice();window.addEventListener("resize",this.handleResize.bind(this))}componentDidRender(){this.setStyle()}handleResize(){this.setDevice();this.setStyle()}parseLinks(){var t;switch(typeof this.data){case"string":{const e=(t=s(this.data))!==null&&t!==void 0?t:[];if(!h(e)){throw new Error("Passed data is invalid")}this.links=e;break}default:this.links=this.data;break}}setStyle(){const t=this.el.shadowRoot.querySelector("#slides");if(!t){return}const e=this.el.shadowRoot.querySelectorAll(".slide");const i=this.el.offsetWidth;const r=i*this.links.length;t.style.width=`${r}px`;t.style.transform=`translate(-${i*this.currentSlide}px)`;e.forEach((t=>{const e=t.querySelector("img");e.style.width=`${i}px`}))}setDevice(){this.device=n()}setCurrentSlide(t){this.currentSlide=t}getBulletDimension(){switch(this.device){case r.MOBILE:return 24;case r.TABLET:return 32;default:return 40}}renderSlides(t){return e("div",{id:"slides"},t.map(((t,i)=>e("div",{id:"slide"+i,class:`slide ${this.currentSlide!==i&&"hide"}`},e("img",{src:t})))))}renderScroll(t){let i=false,r=this.currentSlide;if(t==="left"){i=this.currentSlide===0;r--}else if(t==="right"){i=this.currentSlide===this.links.length-1;r++}return e("z-icon",{class:`scroll ${t} ${i&&"disabled"}`,width:this.getBulletDimension(),height:this.getBulletDimension(),name:`chevron-${t}-circle`,onClick:()=>{!i&&this.setCurrentSlide(r)},onKeyUp:t=>!i&&o(t,(()=>{this.setCurrentSlide(r)})),tabindex:0,role:"button"})}renderSlideshowMain(){return e("main",null,this.renderScroll("left"),this.renderSlides(this.links),this.renderScroll("right"))}renderBullet(t){return e("a",{class:`bullet ${this.currentSlide===t&&"selected"}`,onClick:()=>this.setCurrentSlide(t),onKeyUp:e=>o(e,(()=>this.setCurrentSlide(t))),tabindex:0,role:"button"})}renderSlideshowFooter(){return e("footer",null,e("div",{class:"footer-left"},e("slot",{name:"footer-left"})),e("div",{class:"footer-center"},e("div",{class:"bullet-container"},Object.keys(this.links).map((t=>this.renderBullet(parseInt(t)))))),e("div",{class:"footer-right"},e("slot",{name:"footer-right"})))}render(){if(!this.links||!this.links.length){return e("div",null)}return e("div",{id:this.slideshowid},this.renderSlideshowMain(),this.renderSlideshowFooter())}get el(){return i(this)}static get watchers(){return{data:["watchData"]}}};d.style=l;export{d as z_slideshow};
+//# sourceMappingURL=p-c49ca2a9.entry.js.map

package/dist/web-components-library/p-c49ca2a9.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZSlideshowStyle0","isStringArray","data","Array","isArray","every","datum","ZSlideshow","watchData","this","parseLinks","componentWillLoad","setDevice","window","addEventListener","handleResize","bind","componentDidRender","setStyle","parsed","_a","convertJson","Error","links","refSlides","el","shadowRoot","querySelector","allImages","querySelectorAll","width","offsetWidth","fullwidth","length","style","transform","currentSlide","forEach","item","img","device","getDevice","setCurrentSlide","index","getBulletDimension","Device","MOBILE","TABLET","renderSlides","items","h","id","map","i","class","src","renderScroll","direction","disabled","nextSlide","height","name","onClick","onKeyUp","e","handleKeyboardSubmit","tabindex","role","renderSlideshowMain","renderBullet","renderSlideshowFooter","Object","keys","parseInt","render","slideshowid"],"sources":["src/snowflakes/myz/z-slideshow/styles.css?tag=z-slideshow&encapsulation=shadow","src/snowflakes/myz/z-slideshow/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: inherit;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  display: flex;\n  width: inherit;\n  flex-direction: column;\n}\n\nmain {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n}\n\nmain z-icon.scroll {\n  position: absolute;\n  z-index: 10;\n  top: 50%;\n  width: auto;\n  margin: 0 var(--space-unit);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  transition: 0.6s ease;\n}\n\nmain .scroll.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\nmain .scroll.right {\n  right: 0;\n}\n\n#slides {\n  display: flex;\n  flex-wrap: wrap;\n  line-height: 0px;\n  overflow-y: hidden;\n  transition: all 300ms;\n}\n\nfooter {\n  display: grid;\n  width: 100%;\n  height: 56px;\n  align-items: center;\n  border-top: var(--border-size-medium) solid var(--color-surface02);\n  grid-template: 2 / 2;\n  grid-template-areas: \"center center\" \"left right\";\n}\n\nfooter > div {\n  width: 100%;\n  align-items: center;\n}\n\nfooter .footer-center {\n  grid-area: center;\n}\n\nfooter .footer-left {\n  grid-area: left;\n}\n\nfooter .footer-right {\n  grid-area: right;\n}\n\nfooter .bullet-container {\n  display: flex;\n  min-height: 60px;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto;\n}\n\nfooter .bullet-container .bullet {\n  width: 8px;\n  height: 8px;\n  margin: var(--space-unit) 2px;\n  background-color: var(--gray200);\n  border-radius: 50%;\n  pointer-events: none;\n}\n\nfooter .bullet-container .bullet.selected {\n  background-color: var(--gray400);\n}\n\n/* Tablet breakpoint */\n\n@media only screen and (min-width: 768px) {\n  footer {\n    height: 76px;\n    border-top: var(--border-size-medium) solid var(--color-surface02);\n    grid-template: 1 / 1fr 2fr 1fr;\n    grid-template-areas: \"left center right\";\n  }\n\n  footer .bullet-container .bullet {\n    width: 10px;\n    height: 10px;\n    margin: var(--space-unit) 3px;\n  }\n}\n\n/* Desktop breakpoint */\n\n@media only screen and (min-width: 1025px) {\n  main z-icon.scroll {\n    margin: 0 10px;\n  }\n\n  footer .bullet-container .bullet {\n    width: 16px;\n    height: 16px;\n    margin: var(--space-unit) calc(var(--space-unit) * 0.5);\n    cursor: pointer;\n    pointer-events: auto;\n  }\n}\n","import {Component, Prop, h, State, Element, Watch} from \"@stencil/core\";\nimport {Device} from \"../../../beans\";\nimport {getDevice, handleKeyboardSubmit, convertJson} from \"../../../utils/utils\";\n\n/**\n * Check if data is an array of strings.\n * @param {unknown} data Data to check\n * @returns {boolean}\n */\nfunction isStringArray(data: unknown): data is string[] {\n  return Array.isArray(data) && data.every((datum: unknown): datum is string => typeof datum === \"string\");\n}\n\n/**\n * @slot footer-right - right content slot in footer\n * @slot footer-left - left content slot in footer\n */\n@Component({\n  tag: \"z-slideshow\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSlideshow {\n  @Element() el: HTMLZSlideshowElement;\n\n  /** slideshow id */\n  @Prop()\n  slideshowid: string;\n\n  /** array or JSON stringified images urls */\n  @Prop()\n  data: string[] | string;\n\n  @State()\n  device: Device;\n\n  @State()\n  currentSlide = 0;\n\n  private links: string[];\n\n  @Watch(\"data\")\n  watchData(): void {\n    this.parseLinks();\n  }\n\n  componentWillLoad(): void {\n    this.parseLinks();\n\n    this.setDevice();\n    window.addEventListener(\"resize\", this.handleResize.bind(this));\n  }\n\n  componentDidRender(): void {\n    this.setStyle();\n  }\n\n  private handleResize(): void {\n    this.setDevice();\n    this.setStyle();\n  }\n\n  private parseLinks(): void {\n    switch (typeof this.data) {\n      case \"string\": {\n        const parsed = convertJson(this.data) ?? [];\n        if (!isStringArray(parsed)) {\n          throw new Error(\"Passed data is invalid\");\n        }\n\n        this.links = parsed;\n        break;\n      }\n      default:\n        this.links = this.data;\n        break;\n    }\n  }\n\n  private setStyle(): void {\n    const refSlides = this.el.shadowRoot.querySelector(\"#slides\") as HTMLElement;\n    if (!refSlides) {\n      return;\n    }\n\n    const allImages = this.el.shadowRoot.querySelectorAll(\".slide\");\n    const width = this.el.offsetWidth;\n    const fullwidth = width * this.links.length;\n\n    refSlides.style.width = `${fullwidth}px`;\n    refSlides.style.transform = `translate(-${width * this.currentSlide}px)`;\n    allImages.forEach((item: HTMLElement) => {\n      const img = item.querySelector(\"img\");\n      img.style.width = `${width}px`;\n    });\n  }\n\n  private setDevice(): void {\n    this.device = getDevice();\n  }\n\n  private setCurrentSlide(index: number): void {\n    this.currentSlide = index;\n  }\n\n  private getBulletDimension(): number {\n    switch (this.device) {\n      case Device.MOBILE:\n        return 24;\n      case Device.TABLET:\n        return 32;\n      default:\n        return 40;\n    }\n  }\n\n  private renderSlides(items: string[]): HTMLElement {\n    return (\n      <div id=\"slides\">\n        {items.map((item: string, i: number) => (\n          <div\n            id={\"slide\" + i}\n            class={`slide ${this.currentSlide !== i && \"hide\"}`}\n          >\n            <img src={item} />\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  private renderScroll(direction: \"left\" | \"right\"): HTMLZIconElement {\n    let disabled = false,\n      nextSlide = this.currentSlide;\n\n    if (direction === \"left\") {\n      disabled = this.currentSlide === 0;\n      nextSlide--;\n    } else if (direction === \"right\") {\n      disabled = this.currentSlide === this.links.length - 1;\n      nextSlide++;\n    }\n\n    return (\n      <z-icon\n        class={`scroll ${direction} ${disabled && \"disabled\"}`}\n        width={this.getBulletDimension()}\n        height={this.getBulletDimension()}\n        name={`chevron-${direction}-circle`}\n        onClick={() => {\n          !disabled && this.setCurrentSlide(nextSlide);\n        }}\n        onKeyUp={(e: KeyboardEvent) =>\n          !disabled &&\n          handleKeyboardSubmit(e, () => {\n            this.setCurrentSlide(nextSlide);\n          })\n        }\n        tabindex={0}\n        role=\"button\"\n      />\n    );\n  }\n\n  private renderSlideshowMain(): HTMLElement {\n    return (\n      <main>\n        {this.renderScroll(\"left\")}\n        {this.renderSlides(this.links)}\n        {this.renderScroll(\"right\")}\n      </main>\n    );\n  }\n\n  private renderBullet(i: number): HTMLElement {\n    return (\n      <a\n        class={`bullet ${this.currentSlide === i && \"selected\"}`}\n        onClick={() => this.setCurrentSlide(i)}\n        onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, () => this.setCurrentSlide(i))}\n        tabindex={0}\n        role=\"button\"\n      ></a>\n    );\n  }\n\n  private renderSlideshowFooter(): HTMLElement {\n    return (\n      <footer>\n        <div class=\"footer-left\">\n          <slot name=\"footer-left\" />\n        </div>\n        <div class=\"footer-center\">\n          <div class=\"bullet-container\">{Object.keys(this.links).map((i) => this.renderBullet(parseInt(i)))}</div>\n        </div>\n        <div class=\"footer-right\">\n          <slot name=\"footer-right\" />\n        </div>\n      </footer>\n    );\n  }\n\n  render(): HTMLElement {\n    if (!this.links || !this.links.length) {\n      return <div />;\n    }\n\n    return (\n      <div id={this.slideshowid}>\n        {this.renderSlideshowMain()}\n        {this.renderSlideshowFooter()}\n      </div>\n    );\n  }\n}\n"],"mappings":"gKAAA,MAAMA,EAAY,msDAClB,MAAAC,EAAeD,ECQf,SAASE,EAAcC,GACrB,OAAOC,MAAMC,QAAQF,IAASA,EAAKG,OAAOC,UAA2CA,IAAU,UACjG,C,MAWaC,EAAU,M,gHAeN,C,CAKf,SAAAC,GACEC,KAAKC,Y,CAGP,iBAAAC,GACEF,KAAKC,aAELD,KAAKG,YACLC,OAAOC,iBAAiB,SAAUL,KAAKM,aAAaC,KAAKP,M,CAG3D,kBAAAQ,GACER,KAAKS,U,CAGC,YAAAH,GACNN,KAAKG,YACLH,KAAKS,U,CAGC,UAAAR,G,MACN,cAAeD,KAAKP,MAClB,IAAK,SAAU,CACb,MAAMiB,GAASC,EAAAC,EAAYZ,KAAKP,SAAK,MAAAkB,SAAA,EAAAA,EAAI,GACzC,IAAKnB,EAAckB,GAAS,CAC1B,MAAM,IAAIG,MAAM,yB,CAGlBb,KAAKc,MAAQJ,EACb,K,CAEF,QACEV,KAAKc,MAAQd,KAAKP,KAClB,M,CAIE,QAAAgB,GACN,MAAMM,EAAYf,KAAKgB,GAAGC,WAAWC,cAAc,WACnD,IAAKH,EAAW,CACd,M,CAGF,MAAMI,EAAYnB,KAAKgB,GAAGC,WAAWG,iBAAiB,UACtD,MAAMC,EAAQrB,KAAKgB,GAAGM,YACtB,MAAMC,EAAYF,EAAQrB,KAAKc,MAAMU,OAErCT,EAAUU,MAAMJ,MAAQ,GAAGE,MAC3BR,EAAUU,MAAMC,UAAY,cAAcL,EAAQrB,KAAK2B,kBACvDR,EAAUS,SAASC,IACjB,MAAMC,EAAMD,EAAKX,cAAc,OAC/BY,EAAIL,MAAMJ,MAAQ,GAAGA,KAAS,G,CAI1B,SAAAlB,GACNH,KAAK+B,OAASC,G,CAGR,eAAAC,CAAgBC,GACtBlC,KAAK2B,aAAeO,C,CAGd,kBAAAC,GACN,OAAQnC,KAAK+B,QACX,KAAKK,EAAOC,OACV,OAAO,GACT,KAAKD,EAAOE,OACV,OAAO,GACT,QACE,OAAO,G,CAIL,YAAAC,CAAaC,GACnB,OACEC,EAAA,OAAKC,GAAG,UACLF,EAAMG,KAAI,CAACd,EAAce,IACxBH,EAAA,OACEC,GAAI,QAAUE,EACdC,MAAO,SAAS7C,KAAK2B,eAAiBiB,GAAK,UAE3CH,EAAA,OAAKK,IAAKjB,O,CAOZ,YAAAkB,CAAaC,GACnB,IAAIC,EAAW,MACbC,EAAYlD,KAAK2B,aAEnB,GAAIqB,IAAc,OAAQ,CACxBC,EAAWjD,KAAK2B,eAAiB,EACjCuB,G,MACK,GAAIF,IAAc,QAAS,CAChCC,EAAWjD,KAAK2B,eAAiB3B,KAAKc,MAAMU,OAAS,EACrD0B,G,CAGF,OACET,EAAA,UACEI,MAAO,UAAUG,KAAaC,GAAY,aAC1C5B,MAAOrB,KAAKmC,qBACZgB,OAAQnD,KAAKmC,qBACbiB,KAAM,WAAWJ,WACjBK,QAAS,MACNJ,GAAYjD,KAAKiC,gBAAgBiB,EAAU,EAE9CI,QAAUC,IACPN,GACDO,EAAqBD,GAAG,KACtBvD,KAAKiC,gBAAgBiB,EAAU,IAGnCO,SAAU,EACVC,KAAK,U,CAKH,mBAAAC,GACN,OACElB,EAAA,YACGzC,KAAK+C,aAAa,QAClB/C,KAAKuC,aAAavC,KAAKc,OACvBd,KAAK+C,aAAa,S,CAKjB,YAAAa,CAAahB,GACnB,OACEH,EAAA,KACEI,MAAO,UAAU7C,KAAK2B,eAAiBiB,GAAK,aAC5CS,QAAS,IAAMrD,KAAKiC,gBAAgBW,GACpCU,QAAUC,GAAqBC,EAAqBD,GAAG,IAAMvD,KAAKiC,gBAAgBW,KAClFa,SAAU,EACVC,KAAK,U,CAKH,qBAAAG,GACN,OACEpB,EAAA,cACEA,EAAA,OAAKI,MAAM,eACTJ,EAAA,QAAMW,KAAK,iBAEbX,EAAA,OAAKI,MAAM,iBACTJ,EAAA,OAAKI,MAAM,oBAAoBiB,OAAOC,KAAK/D,KAAKc,OAAO6B,KAAKC,GAAM5C,KAAK4D,aAAaI,SAASpB,QAE/FH,EAAA,OAAKI,MAAM,gBACTJ,EAAA,QAAMW,KAAK,kB,CAMnB,MAAAa,GACE,IAAKjE,KAAKc,QAAUd,KAAKc,MAAMU,OAAQ,CACrC,OAAOiB,EAAA,W,CAGT,OACEA,EAAA,OAAKC,GAAI1C,KAAKkE,aACXlE,KAAK2D,sBACL3D,KAAK6D,wB"}

package/dist/web-components-library/p-ca5975a3.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,g as r}from"./p-10bb4f4b.js";const s=".sc-z-table-footer-h{display:table-footer-group;font-family:var(--font-family-sans);font-weight:var(--font-rg)}";const e=s;const a=class{constructor(o){t(this,o)}componentWillRender(){this.host.setAttribute("role","rowgroup")}render(){return o("slot",{key:"2c6376eb19a83b077b07d9127ba5cf5441fb5ba1"})}get host(){return r(this)}};a.style=e;export{a as Z};
+//# sourceMappingURL=p-ca5975a3.js.map

package/dist/web-components-library/p-ca5975a3.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZTableFooterStyle0","ZTableFooter","componentWillRender","this","host","setAttribute","render","h","key"],"sources":["src/deprecated/z-table-deprecated/z-table-footer/styles.css?tag=z-table-footer&encapsulation=scoped","src/deprecated/z-table-deprecated/z-table-footer/index.tsx"],"sourcesContent":[":host {\n  display: table-footer-group;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n","import {Component, Element, h} from \"@stencil/core\";\n\n/**\n * @deprecated\n */\n@Component({\n  tag: \"z-table-footer\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZTableFooter {\n  @Element() host: HTMLZTableFooterElement;\n\n  componentWillRender(): void {\n    this.host.setAttribute(\"role\", \"rowgroup\");\n  }\n\n  render(): HTMLSlotElement {\n    return <slot />;\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,kHAClB,MAAAC,EAAeD,E,MCUFE,EAAY,M,yBAGvB,mBAAAC,GACEC,KAAKC,KAAKC,aAAa,OAAQ,W,CAGjC,MAAAC,GACE,OAAOC,EAAA,QAAAC,IAAA,4C"}

package/dist/web-components-library/p-cc46f0ce.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as a,a as l}from"./p-10bb4f4b.js";import{Z as r}from"./p-025f494e.js";const d='z-table-row{display:table-row;font-family:var(--font-family-sans)}z-table-row[expanded-type="expandable"]:hover{cursor:pointer}z-table-row[expanded-type="expandable"]>z-table-cell:first-child,z-table-row[expanded-type="padding"]>z-table-cell:first-child{--z-icon-width:16px;--z-icon-height:16px;width:24px;box-sizing:border-box;padding-right:0;padding-left:16px;fill:var(--gray800);text-align:center;user-select:none}.z-icon-placeholder{width:24px;padding-right:0}z-table-row[expanded-type="expandable"]>z-table-cell:nth-child(2),z-table-row[expanded-type="padding"]>z-table-cell:nth-child(2){padding-left:8px}z-table-row[expanded-type]:hover>z-table-cell:first-child{fill:var(--color-hover-primary)}z-table-row[expanded]>z-table-cell{border-bottom:none;background-color:var(--gray50)}z-table-row[expanded]+z-table-expanded-row{display:table-row}';const n=d;const i=class{constructor(a){e(this,a);this.expand=t(this,"expand",7);this.expandedType=r.NONE;this.expanded=false}emitOnExpand(){this.expand.emit({expanded:this.expanded})}handleExpand(){this.expanded=!this.expanded;this.emitOnExpand()}renderExpandButton(){if(this.expandedType==r.EXPANDABLE){return a("z-table-cell",{style:{borderRight:"none"}},a("z-icon",{name:this.expanded?"minus-circled":"plus-circled"}))}return a("z-table-cell",{style:{borderRight:"none"}},a("div",{class:"z-icon-placeholder"}))}render(){return a(l,{key:"05feb1b745b9f720f4b9b42f9753791410703e4d",role:"row",expanded:this.expanded,onClick:e=>{const t=e.target.classList.contains("prevent-expand");const a=this.expandedType===r.EXPANDABLE;if(a&&!t){this.handleExpand()}}},this.expandedType!==r.NONE&&this.renderExpandButton(),a("slot",{key:"6b5dc7930bea80c6f19fb8b3f2253465f1bdba20"}))}};i.style=n;export{i as Z};
+//# sourceMappingURL=p-cc46f0ce.js.map

package/dist/web-components-library/p-cc46f0ce.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZTableRowStyle0","ZTableRow","ZTableRowExpandedType","NONE","emitOnExpand","this","expand","emit","expanded","handleExpand","renderExpandButton","expandedType","EXPANDABLE","h","style","borderRight","name","class","render","Host","key","role","onClick","event","preventExpand","target","classList","contains","isExpandable"],"sources":["src/deprecated/z-table-deprecated/z-table-row/styles.css?tag=z-table-row","src/deprecated/z-table-deprecated/z-table-row/index.tsx"],"sourcesContent":["z-table-row {\n  display: table-row;\n  font-family: var(--font-family-sans);\n}\n\nz-table-row[expanded-type=\"expandable\"]:hover {\n  cursor: pointer;\n}\n\nz-table-row[expanded-type=\"expandable\"] > z-table-cell:first-child,\nz-table-row[expanded-type=\"padding\"] > z-table-cell:first-child {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n\n  width: 24px;\n  box-sizing: border-box;\n  padding-right: 0;\n  padding-left: 16px;\n  fill: var(--gray800);\n  text-align: center;\n  user-select: none;\n}\n\n.z-icon-placeholder {\n  width: 24px;\n  padding-right: 0;\n}\n\nz-table-row[expanded-type=\"expandable\"] > z-table-cell:nth-child(2),\nz-table-row[expanded-type=\"padding\"] > z-table-cell:nth-child(2) {\n  padding-left: 8px;\n}\n\nz-table-row[expanded-type]:hover > z-table-cell:first-child {\n  fill: var(--color-hover-primary);\n}\n\nz-table-row[expanded] > z-table-cell {\n  border-bottom: none;\n  background-color: var(--gray50);\n}\n\nz-table-row[expanded] + z-table-expanded-row {\n  display: table-row;\n}\n","import {Component, Prop, State, Host, h, Event, EventEmitter} from \"@stencil/core\";\nimport {ZTableRowExpandedType} from \"../../../beans\";\n\n/**\n * @deprecated\n */\n@Component({\n  tag: \"z-table-row\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: false,\n})\nexport class ZTableRow {\n  /** Table row expanded type */\n  @Prop({reflect: true})\n  expandedType: ZTableRowExpandedType = ZTableRowExpandedType.NONE;\n\n  @State()\n  expanded = false;\n\n  /** Row has been expanded */\n  @Event()\n  expand: EventEmitter;\n\n  private emitOnExpand(): void {\n    this.expand.emit({expanded: this.expanded});\n  }\n\n  private handleExpand(): void {\n    this.expanded = !this.expanded;\n\n    this.emitOnExpand();\n  }\n\n  private renderExpandButton(): HTMLZTableCellElement {\n    if (this.expandedType == ZTableRowExpandedType.EXPANDABLE) {\n      return (\n        <z-table-cell style={{borderRight: \"none\"}}>\n          <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"} />\n        </z-table-cell>\n      );\n    }\n\n    return (\n      <z-table-cell style={{borderRight: \"none\"}}>\n        <div class=\"z-icon-placeholder\" />\n      </z-table-cell>\n    );\n  }\n\n  render(): HTMLZTableRowElement {\n    return (\n      <Host\n        role=\"row\"\n        expanded={this.expanded}\n        onClick={(event) => {\n          const preventExpand = event.target.classList.contains(\"prevent-expand\");\n          const isExpandable = this.expandedType === ZTableRowExpandedType.EXPANDABLE;\n\n          if (isExpandable && !preventExpand) {\n            this.handleExpand();\n          }\n        }}\n      >\n        {this.expandedType !== ZTableRowExpandedType.NONE && this.renderExpandButton()}\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,i1BAClB,MAAAC,EAAeD,E,MCWFE,EAAS,M,0EAGkBC,EAAsBC,K,cAGjD,K,CAMH,YAAAC,GACNC,KAAKC,OAAOC,KAAK,CAACC,SAAUH,KAAKG,U,CAG3B,YAAAC,GACNJ,KAAKG,UAAYH,KAAKG,SAEtBH,KAAKD,c,CAGC,kBAAAM,GACN,GAAIL,KAAKM,cAAgBT,EAAsBU,WAAY,CACzD,OACEC,EAAA,gBAAcC,MAAO,CAACC,YAAa,SACjCF,EAAA,UAAQG,KAAMX,KAAKG,SAAW,gBAAkB,iB,CAKtD,OACEK,EAAA,gBAAcC,MAAO,CAACC,YAAa,SACjCF,EAAA,OAAKI,MAAM,uB,CAKjB,MAAAC,GACE,OACEL,EAACM,EAAI,CAAAC,IAAA,2CACHC,KAAK,MACLb,SAAUH,KAAKG,SACfc,QAAUC,IACR,MAAMC,EAAgBD,EAAME,OAAOC,UAAUC,SAAS,kBACtD,MAAMC,EAAevB,KAAKM,eAAiBT,EAAsBU,WAEjE,GAAIgB,IAAiBJ,EAAe,CAClCnB,KAAKI,c,IAIRJ,KAAKM,eAAiBT,EAAsBC,MAAQE,KAAKK,qBAC1DG,EAAA,QAAAO,IAAA,6C"}

package/dist/web-components-library/p-d973f170.entry.js

@@ -0,0 +1,2 @@
+import{r,c as t,h as o}from"./p-10bb4f4b.js";import{t as i}from"./p-2c886e8b.js";const s="button{display:flex;max-width:100%;height:36px;align-items:center;padding:0 var(--space-unit);border:var(--border-size-medium) solid var(--color-primary01);background-color:var(--color-surface01);border-radius:var(--border-radius);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none}button::-moz-focus-inner{border:0}button:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{border-color:var(--color-primary01);box-shadow:var(--shadow-focus-primary);color:var(--color-primary01);fill:var(--color-primary01)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button.selected{border-color:var(--color-active-primary);background-color:var(--color-active-primary);color:var(--color-text-inverse);fill:var(--color-text-inverse)}button>span.ellipsis{overflow:hidden;padding:0;margin:0;text-overflow:ellipsis;white-space:nowrap}button>span.counter{margin-right:calc(var(--space-unit) * 2);margin-left:calc(var(--space-unit) / 2)}button>span.sort{margin-right:calc(var(--space-unit) / 2);white-space:nowrap}button>span{margin-right:calc(var(--space-unit) / 2)}@media (min-width: 768px){button{max-width:325px}}@media (min-width: 1152px){button{max-width:490px}}";const e=s;const a=class{constructor(o){r(this,o);this.buttonSortClick=t(this,"buttonSortClick",7);this.buttonid=undefined;this.label=undefined;this.desclabel=undefined;this.counter=undefined;this.sortlabelasc="A-Z";this.sortlabeldesc="Z-A";this.isselected=false;this.sortasc=true;this.allowTooltip=false}emitButtonSortClick(){if(!this.isselected){this.isselected=true}else{this.sortasc=!this.sortasc}this.buttonSortClick.emit({buttonid:this.buttonid,sortAsc:this.sortasc})}componentDidLoad(){if(this.elementHasEllipsis()&&window.innerWidth>i){this.allowTooltip=true}}setButtonTitle(){return this.allowTooltip?`${this.sortasc?this.label:this.desclabel}`:""}elementHasEllipsis(){return this.ellipsis.offsetWidth<this.ellipsis.scrollWidth}render(){return o("button",{key:"444ce93c134cb613b64f1ebd82f8744b7dcd38f2",title:this.setButtonTitle(),id:this.buttonid,class:{selected:this.isselected},onClick:()=>this.emitButtonSortClick()},o("span",{key:"586d7950170a1d79bf495b00f405fdfcd8f43a0d",ref:r=>this.ellipsis=r,class:"ellipsis"},!this.sortasc&&this.desclabel?this.desclabel:this.label),o("span",{key:"eada0327e1a5117958be3147dc1c134338759d92",class:"counter"},this.counter&&` (${this.counter})`),o("span",{key:"03bf71c7f7670ba162ca24c2d455d7454677793c",class:"sort"},this.sortasc?this.sortlabelasc:this.sortlabeldesc),o("z-icon",{key:"d2ec9963ebe5b404a78af6fe3f0d228583dce23b",name:"caret-up-down",width:16,height:16}))}};a.style=e;export{a as z_button_sort};
+//# sourceMappingURL=p-d973f170.entry.js.map