@zanichelli/albe-web-components 20.0.2 → 21.0.0-RC2

package/dist/components/{index12.js.map → p-CJjo0ntH.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","typographyCss","ZSearchbar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlid","randomId","preventSubmit","autocomplete","autocompleteMinChars","searchHelperLabel","sortResultsItems","showSearchButton","searchButtonIconOnly","searchButtonLabel","size","ControlSize","BIG","variant","ButtonVariant","PRIMARY","searchString","value","currResultsCount","resultsCount","showResults","isMobile","resultsItemsList","emitSearchItemClick","item","searchItemClick","emit","selectedItem","emitSearchSubmit","searchSubmit","inputRef","watchItems","getResultsItemsList","watchResultsCount","watchValue","watchSearchString","searchTyping","resultsItems","JSON","parse","getGroupedItems","groupedItems","forEach","key","category","subcategory","_a","items","push","Object","keys","sort","reduce","obj","assign","a","b","nameA","label","toUpperCase","nameB","onListItemKeyDown","e","KeyboardCode","ENTER","preventDefault","handleArrowsNavigation","onSearchHelperKeyDown","ARROW_DOWN","ARROW_UP","includes","currentElement","target","Array","from","_b","host","shadowRoot","querySelectorAll","currentIndex","indexOf","nextIndex","length","focus","prevIndex","_d","_c","querySelector","_f","_e","setSelectionRange","handleStopTyping","stopPropagation","detail","undefined","handleSubmit","handleOutsideClick","cp","composedPath","componentWillLoad","mql","matchMedia","onMobileViewChange","matches","addEventListener","disconnectedCallback","removeEventListener","renderItemLabel","replace","RegExp","found","renderItem","index","h","id","role","htmlTabindex","onKeyDown","onClick","class","tabindex","icon","name","title","innerHTML","tag","text","children","map","child","renderItemGroups","values","listGroups","hasResultsLimit","renderedCount","groupItem","remaining","visibleItems","slice","listGroupsElements","subindex","ariaLabel","filter","Boolean","join","slot","render","Host","onFocus","ref","el","message","placeholder","onStopTyping","onKeyUp","handleEnterKeydSubmit","htmlAriaLabel","trim","disabled"],"sources":["src/components/z-searchbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/css-components/z-label/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/css-components/z-scrollbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/tokens/typography.css?tag=z-searchbar&encapsulation=shadow","src/components/z-searchbar/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-searchbar-results-height: Max height of the results container (default: 540px)\n   * @prop --z-searchbar-tag-text-color: Color of tag's text (default --color-primary03);\n   * @prop --z-searchbar-tag-bg: Color of tag's background (default --color-hover-primary);\n   */\n  --z-searchbar-tag-text-color: var(--color-primary03);\n  --z-searchbar-tag-bg: var(--color-hover-primary);\n  --z-searchbar-item-height: 2.75rem;\n\n  z-index: 15;\n  display: flex;\n  align-items: flex-end;\n  column-gap: calc(var(--space-unit) * 2);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host,\n*,\n::after,\n::before {\n  box-sizing: border-box;\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.input-container z-input {\n  z-index: 1;\n}\n\n.results {\n  --item-icon-size: 1rem;\n  --z-icon-height: var(--item-icon-size);\n  --z-icon-width: var(--item-icon-size);\n  --item-inline-padding: calc(var(--space-unit) * 1.5);\n  --item-col-gap: var(--space-unit);\n\n  position: absolute;\n  top: calc(100% - 1px);\n  left: 0;\n  overflow: auto;\n  width: 100%;\n  max-height: var(--z-searchbar-results-height, 540px);\n  border: var(--border-size-small) solid var(--color-form-surface03);\n  border-top: none;\n  background: var(--color-form-background);\n}\n\n.results z-list-element {\n  --background-color-list-element: var(--color-form-background);\n\n  position: relative;\n  display: block;\n}\n\n.results > z-list > z-list-element::part(list-item-container) {\n  padding: 0 var(--item-inline-padding);\n}\n\n.results z-list-element > .list-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);\n  background-color: transparent;\n  color: var(--color-form-default-text);\n  fill: var(--color-form-default-icon);\n  gap: var(--item-col-gap);\n}\n\n.results z-list-element > .list-item:hover {\n  background-color: var(--gray100); /* TODO: use correct form-related token when available */\n  cursor: pointer;\n}\n\n.results z-list-element > .list-item:focus-visible {\n  z-index: 1;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n/* list elements separator */\n.results > z-list > z-list-element:not(:last-child) > .list-item,\n.results z-list-group:not(:last-child) > z-list-element:not(.category-heading) {\n  border-bottom: 1px solid var(--color-form-surface03);\n}\n\n.results z-list-group {\n  padding: 0 var(--item-inline-padding);\n}\n\n.results z-list-group > z-list-element::part(list-item-container) {\n  padding: 0;\n}\n\n.results .sub-list {\n  padding-left: calc(var(--item-icon-size) + var(--item-col-gap));\n}\n\n.results .sub-list z-list-element::part(list-item-container) {\n  padding: 0;\n}\n\n.results .sub-list z-list-element > .list-item {\n  position: relative;\n}\n\n/* tree indicators */\n.results .sub-list > z-list-element:not(:last-child)::before,\n.results .sub-list > z-list-element > .list-item::before {\n  position: absolute;\n  top: 0;\n  left: calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);\n  border-left: 1px solid var(--color-form-surface03);\n  content: \"\";\n}\n\n/* \"|\" tree indicator */\n.results .sub-list > z-list-element:not(:last-child)::before {\n  top: -4px;\n  height: calc(100% + 4px);\n}\n\n/* \"—\" tree indicator */\n.results .sub-list z-list-element > .list-item::before {\n  width: 14px;\n  height: calc(var(--z-searchbar-item-height) / 2);\n  border-bottom: 1px solid var(--color-form-surface03);\n}\n\n.results .category-heading > .category {\n  font-style: italic;\n}\n\n.results .category-heading > .subcategory {\n  text-transform: uppercase;\n}\n\n.results z-list-element > .list-item .ellipsis {\n  overflow: hidden;\n}\n\n.results .ellipsis > .item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.results .item-label mark {\n  background: var(--color-primary03);\n  color: var(--color-default-text);\n}\n\n.results .list-item > z-tag {\n  --z-tag-bg: var(--z-searchbar-tag-bg);\n  --z-tag-text-color: var(--z-searchbar-tag-text-color);\n\n  margin-left: auto;\n  white-space: nowrap;\n}\n\n.results .item-show-all {\n  width: 100%;\n  color: var(--color-primary01);\n  cursor: pointer;\n  text-align: center;\n}\n\n.results .item-no-results {\n  display: block;\n  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n  font-style: italic;\n}\n\n.results .item-no-results > ul {\n  padding-left: calc(var(--space-unit) * 2);\n  margin: var(--space-unit);\n}\n\n@media (min-width: 768px) {\n  .results {\n    --item-icon-size: 1.125rem;\n  }\n}\n",".z-label {\n  display: block;\n  padding-bottom: var(--space-unit);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  text-align: left;\n  text-transform: uppercase;\n}\n","/* Webkit Scrollbar */\n.z-scrollbar::-webkit-scrollbar {\n  width: 6px;\n  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary01);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n:host([theme=\"dark\"]) .z-scrollbar,\n.z-scrollbar--dark {\n  --z-scrollbar-track-gradient: linear-gradient(\n    to right,\n    transparent 0 1px,\n    var(--gray600) 1px 5px,\n    transparent 5px 6px\n  );\n  --z-scrollbar-track-color: var(--gray600);\n  --z-scrollbar-thumb-color: var(--color-primary03);\n  --z-scrollbar-thumb-hover-color: var(--color-hover-primary);\n  --z-scrollbar-corner-color: transparent;\n}\n\n/* Firefox scrollbar */\n@supports not selector(.z-scrollbar::-webkit-scrollbar-track) {\n  .z-scrollbar {\n    scrollbar-color: var(--color-primary01) transparent;\n  }\n\n  :host([theme=\"dark\"]) .z-scrollbar,\n  .z-scrollbar--dark {\n    scrollbar-color: var(--z-scrollbar-thumb-color, var(--color-primary03))\n      var(--z-scrollbar-track-color, var(--gray600));\n  }\n}\n",":root {\n  /* font-family */\n  --font-family-sans: \"IBM Plex Sans\", sans-serif;\n  --font-family-serif: \"IBM Plex Serif\", serif;\n\n  /* font-weight */\n  --font-lt: 300;\n  --font-rg: 400;\n  --font-sb: 600;\n  --font-bd: 700;\n\n  /* font-size type scale */\n  --font-size-1: 0.75rem; /* 12px */\n  --font-size-2: 0.875rem; /* 14px */\n  --font-size-3: 1rem; /* assuming 16px */\n  --font-size-4: 1.125rem; /* 18px */\n  --font-size-5: 1.25rem; /* 20px */\n  --font-size-6: 1.5rem; /* 24px */\n  --font-size-7: 1.75rem; /* 28px */\n  --font-size-8: 2rem; /* 32px */\n  --font-size-9: 2.25rem; /* 36px */\n  --font-size-10: 2.625rem; /* 42px */\n  --font-size-11: 3rem; /* 48px */\n  --font-size-12: 3.375rem; /* 54px */\n  --font-size-13: 3.75rem; /* 60px */\n  --font-size-14: 4.25rem; /* 68px */\n  --font-size-15: 4.75rem; /* 76px */\n  --font-size-16: 5.25rem; /* 84px */\n  --font-size-17: 5.75rem; /* 92px */\n\n  /* cssprops to use with `font` shorthand property */\n  --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n  font-size: var(--font-size-7);\n  font-weight: var(--font-rg);\n  line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n  font-size: var(--font-size-1);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n  font: var(--section-title-1);\n}\n\n.section-title-2 {\n  font: var(--section-title-2);\n}\n\n.section-title-3 {\n  font: var(--section-title-3);\n}\n\n.section-title-4 {\n  font: var(--section-title-4);\n}\n\n.section-title-5 {\n  font: var(--section-title-5);\n}\n\n.section-title-6 {\n  font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n  .heading-1,\n  .heading-1-sb,\n  .heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .heading-2,\n  .heading-2-sb,\n  .heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n  .mobile-heading-1,\n  .mobile-heading-1-sb,\n  .mobile-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .mobile-heading-2,\n  .mobile-heading-2-sb,\n  .mobile-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-3,\n  .mobile-heading-3-sb,\n  .mobile-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-4,\n  .mobile-heading-4-sb,\n  .mobile-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-1,\n  .mobile-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-2,\n  .mobile-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-3,\n  .mobile-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-4,\n  .mobile-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-body-5,\n  .mobile-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-interactive-1,\n  .mobile-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-interactive-2,\n  .mobile-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-interactive-3,\n  .mobile-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .mobile-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .mobile-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .mobile-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .mobile-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .mobile-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  .tablet-heading-1,\n  .tablet-heading-1-sb,\n  .tablet-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .tablet-heading-2,\n  .tablet-heading-2-sb,\n  .tablet-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-3,\n  .tablet-heading-3-sb,\n  .tablet-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-4,\n  .tablet-heading-4-sb,\n  .tablet-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-1,\n  .tablet-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-2,\n  .tablet-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-3,\n  .tablet-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-4,\n  .tablet-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-body-5,\n  .tablet-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-interactive-1,\n  .tablet-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-interactive-2,\n  .tablet-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-interactive-3,\n  .tablet-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .tablet-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .tablet-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .tablet-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .tablet-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .tablet-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  .desktop-heading-1,\n  .desktop-heading-1-sb,\n  .desktop-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .desktop-heading-2,\n  .desktop-heading-2-sb,\n  .desktop-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .desktop-heading-3,\n  .desktop-heading-3-sb,\n  .desktop-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .desktop-heading-4,\n  .desktop-heading-4-sb,\n  .desktop-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-1,\n  .desktop-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-2,\n  .desktop-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-3,\n  .desktop-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-4,\n  .desktop-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-body-5,\n  .desktop-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-interactive-1,\n  .desktop-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-interactive-2,\n  .desktop-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-interactive-3,\n  .desktop-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .desktop-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .desktop-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .desktop-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .desktop-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .desktop-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1366px) {\n  .wide-heading-1,\n  .wide-heading-1-sb,\n  .wide-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .wide-heading-2,\n  .wide-heading-2-sb,\n  .wide-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .wide-heading-3,\n  .wide-heading-3-sb,\n  .wide-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .wide-heading-4,\n  .wide-heading-4-sb,\n  .wide-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-1,\n  .wide-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-2,\n  .wide-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-3,\n  .wide-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-4,\n  .wide-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-body-5,\n  .wide-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-interactive-1,\n  .wide-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-interactive-2,\n  .wide-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-interactive-3,\n  .wide-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .wide-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .wide-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .wide-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .wide-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .wide-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n  font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n  font-weight: var(--font-sb);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {\n  ButtonVariant,\n  ControlSize,\n  KeyboardCode,\n  SearchbarGroup,\n  SearchbarGroupedItem,\n  SearchbarItem,\n} from \"../../beans\";\nimport {handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-searchbar\",\n  styleUrls: [\n    \"styles.css\",\n    \"../css-components/z-label/styles.css\",\n    \"../css-components/z-scrollbar/styles.css\",\n    \"../../tokens/typography.css\",\n  ],\n  shadow: true,\n})\nexport class ZSearchbar implements ComponentInterface {\n  @Element() host: HTMLZSearchbarElement;\n\n  /** The id of the searchbar element */\n  @Prop({reflect: true})\n  htmlid = `searchbar-${randomId()}`;\n\n  /** Prevent submit action */\n  @Prop()\n  preventSubmit?: boolean = false;\n\n  /** The input label */\n  @Prop()\n  label?: string;\n\n  /** The input aria-label */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Input search string */\n  @Prop()\n  value?: string;\n\n  /** Search input placeholder */\n  @Prop()\n  placeholder?: string;\n\n  /** Show autocomplete results */\n  @Prop()\n  autocomplete?: boolean = false;\n\n  /** Minimun number of characters to dispatch typing event */\n  @Prop()\n  autocompleteMinChars?: number = 3;\n\n  /** Number of results shown. Default: all */\n  @Prop()\n  resultsCount?: number;\n\n  /** Search helper text */\n  @Prop()\n  searchHelperLabel?: string = \"Cerca {searchString}\";\n\n  /** Autocomplete results items */\n  @Prop()\n  resultsItems?: SearchbarItem[] | string;\n\n  /** Sort autocomplete results items */\n  @Prop()\n  sortResultsItems?: boolean = false;\n\n  /** Show submit button */\n  @Prop()\n  showSearchButton?: boolean = false;\n\n  /** Hide the label of the submit button, showing only the icon */\n  @Prop()\n  searchButtonIconOnly?: boolean = false;\n\n  /** The label of the submit button */\n  @Prop()\n  searchButtonLabel?: string = \"CERCA\";\n\n  /** Size of the `z-input` and submit `z-button` */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Submit `z-button` variant */\n  @Prop()\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  @State()\n  searchString = this.value;\n\n  @State()\n  currResultsCount: number | undefined = this.resultsCount;\n\n  @State()\n  showResults = false;\n\n  @State()\n  isMobile = false;\n\n  @State()\n  selectedItem?: SearchbarItem;\n\n  private resultsItemsList: SearchbarItem[] | undefined = null;\n\n  private inputRef: HTMLZInputElement;\n\n  /** Media query list for detecting mobile view. */\n  private mql?: MediaQueryList;\n\n  /** Listener for changes in the mobile view media query. */\n  private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n  /** Emitted on search submit, return search string */\n  @Event()\n  searchSubmit: EventEmitter<string>;\n\n  /** Emitted on search typing, return search string */\n  @Event()\n  searchTyping: EventEmitter<string>;\n\n  /** Emitted on search result click, return item */\n  @Event()\n  searchItemClick: EventEmitter<SearchbarItem>;\n\n  private emitSearchItemClick(item: SearchbarItem): void {\n    this.searchItemClick.emit(item);\n    this.selectedItem = item;\n    this.searchString = \"\";\n  }\n\n  private emitSearchSubmit(): void {\n    this.searchSubmit.emit(this.inputRef.value);\n  }\n\n  @Watch(\"resultsItems\")\n  watchItems(): void {\n    this.resultsItemsList = this.getResultsItemsList();\n  }\n\n  @Watch(\"resultsCount\")\n  watchResultsCount(): void {\n    this.currResultsCount = this.resultsCount;\n  }\n\n  @Watch(\"value\")\n  watchValue(): void {\n    this.searchString = this.value;\n  }\n\n  @Watch(\"searchString\")\n  watchSearchString(): void {\n    this.searchTyping.emit(this.searchString);\n    if (!this.searchString) {\n      this.currResultsCount = this.resultsCount;\n    }\n  }\n\n  private getResultsItemsList(): SearchbarItem[] | undefined {\n    return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n  }\n\n  private getGroupedItems(): SearchbarGroupedItem {\n    const groupedItems = {};\n    this.resultsItemsList.forEach((item: SearchbarItem) => {\n      const key = `${item?.category}${item?.subcategory}`;\n      groupedItems[key] = groupedItems[key] ?? {\n        category: item?.category,\n        subcategory: item?.subcategory,\n        items: [],\n      };\n      groupedItems[key][\"items\"].push(item);\n    });\n\n    if (this.sortResultsItems) {\n      return Object.keys(groupedItems)\n        .sort()\n        .reduce((obj, key) => {\n          obj[key] = {\n            ...groupedItems[key],\n            items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n              const nameA = a.label.toUpperCase();\n              const nameB = b.label.toUpperCase();\n              if (nameA < nameB) {\n                return -1;\n              }\n              if (nameA > nameB) {\n                return 1;\n              }\n\n              return 0;\n            }),\n          };\n\n          return obj;\n        }, {});\n    }\n\n    return groupedItems;\n  }\n\n  private onListItemKeyDown(e: KeyboardEvent, item: SearchbarItem): void {\n    if (e.key === KeyboardCode.ENTER) {\n      e.preventDefault();\n      this.emitSearchItemClick(item);\n\n      return;\n    }\n\n    this.handleArrowsNavigation(e);\n  }\n\n  private onSearchHelperKeyDown(e: KeyboardEvent): void {\n    if (e.key === KeyboardCode.ENTER) {\n      e.preventDefault();\n      this.emitSearchSubmit();\n\n      return;\n    }\n\n    this.handleArrowsNavigation(e);\n  }\n\n  private handleArrowsNavigation(e: KeyboardEvent): void {\n    if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode)) {\n      return;\n    }\n\n    const currentElement = e.target as HTMLElement;\n    const items = Array.from(this.host.shadowRoot?.querySelectorAll(\"z-list .list-item\") ?? []);\n    const currentIndex = items.indexOf(currentElement);\n\n    if (e.key === KeyboardCode.ARROW_DOWN) {\n      e.preventDefault();\n      const nextIndex = currentIndex + 1;\n      if (nextIndex < items.length) {\n        (items[nextIndex] as HTMLElement).focus();\n      }\n    }\n\n    if (e.key === KeyboardCode.ARROW_UP) {\n      e.preventDefault();\n      const prevIndex = currentIndex - 1;\n      if (prevIndex < 0) {\n        this.host.shadowRoot?.querySelector(\"input\")?.focus();\n        this.host.shadowRoot\n          ?.querySelector(\"input\")\n          ?.setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);\n      }\n      if (prevIndex >= 0) {\n        (items[prevIndex] as HTMLElement).focus();\n      }\n    }\n  }\n\n  private handleStopTyping(e: CustomEvent): void {\n    e.stopPropagation();\n    this.searchString = e.detail.value;\n    this.selectedItem = undefined;\n  }\n\n  private handleSubmit(): void {\n    if (this.preventSubmit) {\n      return;\n    }\n\n    this.emitSearchSubmit();\n  }\n\n  @Listen(\"click\", {target: \"document\"})\n  private handleOutsideClick(e: MouseEvent): void {\n    const cp = e.composedPath();\n    if (cp.includes(this.host)) {\n      return;\n    }\n\n    this.showResults = false;\n  }\n\n  componentWillLoad(): void {\n    this.resultsItemsList = this.getResultsItemsList();\n\n    this.mql = matchMedia(\"(max-width: 767px)\");\n    this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n    this.mql.addEventListener(\"change\", this.onMobileViewChange);\n    this.isMobile = this.mql.matches;\n  }\n\n  disconnectedCallback(): void {\n    this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n  }\n\n  private renderItemLabel(label: string): string {\n    if (!this.searchString) {\n      return label;\n    }\n\n    return label.replace(\n      new RegExp(this.searchString.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n      (found) => `<mark>${found}</mark>`\n    );\n  }\n\n  private renderItem(item: SearchbarItem, index: number): HTMLZListElementElement {\n    return (\n      <z-list-element\n        id={`list-item-${this.htmlid}-${index}`}\n        role=\"presentation\"\n        htmlTabindex={-1}\n        onKeyDown={(e: KeyboardEvent) => this.onListItemKeyDown(e, item)}\n        onClick={(e: MouseEvent) => {\n          e.stopPropagation();\n          this.emitSearchItemClick(item);\n        }}\n      >\n        <div\n          class=\"list-item ellipsis\"\n          role=\"option\"\n          tabindex={0}\n        >\n          {!!item?.icon && (\n            <z-icon\n              class=\"item-icon\"\n              name={item.icon}\n            />\n          )}\n\n          <div\n            class=\"item-label body-3 mobile-body-4\"\n            title={item.label}\n            innerHTML={this.renderItemLabel(item.label)}\n          />\n          {!!item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n        </div>\n        {!!item.children?.length && (\n          <z-list\n            class=\"sub-list\"\n            role=\"group\"\n            aria-label={item.label || undefined}\n          >\n            {item.children.map((child, index) => this.renderItem(child, index))}\n          </z-list>\n        )}\n      </z-list-element>\n    );\n  }\n\n  /**\n   * Renders the item grouped by category and subcategory. If `resultsCount` is set, it limits the number of rendered items.\n   */\n  private renderItemGroups(): HTMLZListGroupElement[] | undefined {\n    if (!this.resultsItemsList?.length) {\n      return;\n    }\n\n    const groupedItems = Object.values(this.getGroupedItems()) as SearchbarGroup[];\n    const listGroups: HTMLZListGroupElement[] = [];\n    const hasResultsLimit = !!this.currResultsCount;\n    let renderedCount = 0;\n\n    for (const groupItem of groupedItems) {\n      const remaining = hasResultsLimit ? this.currResultsCount - renderedCount : groupItem.items.length;\n      if (remaining <= 0) {\n        break;\n      }\n\n      const visibleItems = groupItem.items.slice(0, remaining);\n      const listGroupsElements: HTMLZListElement[] = visibleItems.map((item: SearchbarItem, subindex: number) =>\n        this.renderItem(item, subindex)\n      );\n      renderedCount += listGroupsElements.length;\n\n      if (!listGroupsElements.length) {\n        continue;\n      }\n\n      const ariaLabel = [groupItem.category, groupItem.subcategory].filter(Boolean).join(\" \");\n\n      listGroups.push(\n        <z-list-group aria-label={ariaLabel || undefined}>\n          {groupItem.category && (\n            <z-list-element\n              class=\"category-heading body-3 mobile-body-4\"\n              slot=\"header-title\"\n              role=\"presentation\"\n              htmlTabindex={-1}\n            >\n              <div class=\"category\">{groupItem.category}</div>\n              {groupItem.subcategory && <div class=\"subcategory\">{groupItem.subcategory}</div>}\n            </z-list-element>\n          )}\n\n          {listGroupsElements}\n        </z-list-group>\n      );\n    }\n\n    return listGroups;\n  }\n\n  render(): HTMLZSearchbarElement {\n    return (\n      <Host\n        onFocus={() => (this.showResults = true)}\n        onClick={(e: MouseEvent) => this.handleOutsideClick(e)}\n        class={{\"has-submit\": !!this.showSearchButton, \"has-results\": !!this.autocomplete}}\n      >\n        <div class=\"input-container\">\n          <z-input\n            ref={(el) => (this.inputRef = el)}\n            htmlid={`input-${this.htmlid}`}\n            message={false}\n            placeholder={this.placeholder}\n            onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n            onKeyUp={(e: KeyboardEvent) => {\n              handleEnterKeydSubmit(e, () => this.handleSubmit());\n              this.handleArrowsNavigation(e);\n            }}\n            onFocus={() => (this.showResults = true)}\n            value={this.searchString || this.selectedItem?.label}\n            size={this.size}\n            label={this.label}\n            aria-label={this.htmlAriaLabel || this.placeholder || undefined}\n          />\n\n          {!!(\n            this.showResults &&\n            this.autocomplete &&\n            this.searchString &&\n            this.searchString.length >= this.autocompleteMinChars &&\n            this.resultsItemsList\n          ) && (\n            <div class=\"results z-scrollbar\">\n              {this.preventSubmit && !this.resultsItemsList?.length ? (\n                <div class=\"item-no-results body-3 mobile-body-4\">\n                  Non abbiamo trovato risultati per <b>{this.searchString}</b>\n                  <br />\n                  <br />\n                  Cosa puoi fare?\n                  <ul>\n                    <li>Verificare di aver scritto bene</li>\n                    <li>Provare a cercare un'altra parola</li>\n                    <li>Provare a cercare qualcosa di più generico</li>\n                  </ul>\n                </div>\n              ) : (\n                <z-list\n                  role=\"listbox\"\n                  id={`list-${this.htmlid}`}\n                  aria-label={this.htmlAriaLabel || this.label || undefined}\n                >\n                  {this.autocomplete && !this.preventSubmit && !!this.searchString && (\n                    <z-list-element\n                      role=\"presentation\"\n                      htmlTabindex={-1}\n                      id={`list-item-${this.htmlid}-search`}\n                      onKeyDown={(e: KeyboardEvent) => this.onSearchHelperKeyDown(e)}\n                      onClick={() => this.emitSearchSubmit()}\n                    >\n                      <div\n                        class=\"list-item item-search\"\n                        role=\"option\"\n                        tabindex={0}\n                      >\n                        <z-icon\n                          class=\"search-icon\"\n                          name=\"left-magnifying-glass\"\n                        />\n                        <div\n                          class=\"item-label body-3 mobile-body-4\"\n                          innerHTML={this.searchHelperLabel?.replace(\n                            \"{searchString}\",\n                            `<mark>${this.searchString}</mark>`\n                          )}\n                        />\n                      </div>\n                    </z-list-element>\n                  )}\n\n                  {this.renderItemGroups()}\n\n                  {!!(\n                    this.searchString &&\n                    this.resultsItemsList?.length &&\n                    this.currResultsCount &&\n                    this.currResultsCount < this.resultsItemsList?.length\n                  ) && (\n                    <z-list-element\n                      role=\"presentation\"\n                      htmlTabindex={-1}\n                      id={`list-item-${this.htmlid}-show-all`}\n                    >\n                      <div\n                        role=\"option\"\n                        class=\"item-show-all body-3 mobile-body-4\"\n                        tabindex={0}\n                        onClick={() => (this.currResultsCount = undefined)}\n                      >\n                        Vedi tutti i risultati\n                      </div>\n                    </z-list-element>\n                  )}\n                </z-list>\n              )}\n            </div>\n          )}\n        </div>\n\n        {this.showSearchButton && (\n          <z-button\n            icon={this.searchButtonIconOnly ? \"search\" : undefined}\n            aria-label={this.searchButtonIconOnly ? this.searchButtonLabel.trim() || \"CERCA\" : undefined}\n            disabled={!!this.preventSubmit}\n            variant={this.variant}\n            size={this.size}\n            onClick={() => this.handleSubmit()}\n          >\n            {this.searchButtonIconOnly ? \"\" : this.searchButtonLabel.trim() || \"CERCA\"}\n          </z-button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["stylesCss","typographyCss","ZSearchbar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlid","randomId","preventSubmit","autocomplete","autocompleteMinChars","searchHelperLabel","sortResultsItems","showSearchButton","searchButtonIconOnly","searchButtonLabel","size","ControlSize","BIG","variant","ButtonVariant","PRIMARY","searchString","value","currResultsCount","resultsCount","showResults","isMobile","resultsItemsList","emitSearchItemClick","item","searchItemClick","emit","selectedItem","emitSearchSubmit","searchSubmit","inputRef","watchItems","getResultsItemsList","watchResultsCount","watchValue","watchSearchString","searchTyping","resultsItems","JSON","parse","getGroupedItems","groupedItems","forEach","key","category","subcategory","_a","items","push","Object","keys","sort","reduce","obj","assign","a","b","nameA","label","toUpperCase","nameB","onListItemKeyDown","e","KeyboardCode","ENTER","preventDefault","handleArrowsNavigation","onSearchHelperKeyDown","ARROW_DOWN","ARROW_UP","includes","currentElement","target","Array","from","_b","host","shadowRoot","querySelectorAll","currentIndex","indexOf","nextIndex","length","focus","prevIndex","_d","_c","querySelector","_f","_e","setSelectionRange","handleStopTyping","stopPropagation","detail","undefined","handleSubmit","handleOutsideClick","cp","composedPath","componentWillLoad","mql","matchMedia","onMobileViewChange","matches","addEventListener","disconnectedCallback","removeEventListener","renderItemLabel","replace","RegExp","found","renderItem","index","h","id","role","htmlTabindex","onKeyDown","onClick","class","tabindex","icon","name","title","innerHTML","tag","text","children","map","child","renderItemGroups","values","listGroups","hasResultsLimit","renderedCount","groupItem","remaining","visibleItems","slice","listGroupsElements","subindex","ariaLabel","filter","Boolean","join","slot","render","Host","onFocus","ref","el","message","placeholder","onStopTyping","onKeyUp","handleEnterKeydSubmit","htmlAriaLabel","trim","disabled"],"sources":["src/components/z-searchbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/css-components/z-label/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/css-components/z-scrollbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/tokens/typography.css?tag=z-searchbar&encapsulation=shadow","src/components/z-searchbar/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-searchbar-results-height: Max height of the results container (default: 540px)\n   * @prop --z-searchbar-tag-text-color: Color of tag's text (default --color-primary03);\n   * @prop --z-searchbar-tag-bg: Color of tag's background (default --color-hover-primary);\n   */\n  --z-searchbar-tag-text-color: var(--color-primary03);\n  --z-searchbar-tag-bg: var(--color-hover-primary);\n  --z-searchbar-item-height: 2.75rem;\n\n  z-index: 15;\n  display: flex;\n  align-items: flex-end;\n  column-gap: calc(var(--space-unit) * 2);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host,\n*,\n::after,\n::before {\n  box-sizing: border-box;\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.input-container z-input {\n  z-index: 1;\n}\n\n.results {\n  --item-icon-size: 1rem;\n  --z-icon-height: var(--item-icon-size);\n  --z-icon-width: var(--item-icon-size);\n  --item-inline-padding: calc(var(--space-unit) * 1.5);\n  --item-col-gap: var(--space-unit);\n\n  position: absolute;\n  top: calc(100% - 1px);\n  left: 0;\n  overflow: auto;\n  width: 100%;\n  max-height: var(--z-searchbar-results-height, 540px);\n  border: var(--border-size-small) solid var(--color-form-surface03);\n  border-top: none;\n  background: var(--color-form-background);\n}\n\n.results z-list-element {\n  --background-color-list-element: var(--color-form-background);\n\n  position: relative;\n  display: block;\n}\n\n.results > z-list > z-list-element::part(list-item-container) {\n  padding: 0 var(--item-inline-padding);\n}\n\n.results z-list-element > .list-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);\n  background-color: transparent;\n  color: var(--color-form-default-text);\n  fill: var(--color-form-default-icon);\n  gap: var(--item-col-gap);\n}\n\n.results z-list-element > .list-item:hover {\n  background-color: var(--gray100); /* TODO: use correct form-related token when available */\n  cursor: pointer;\n}\n\n.results z-list-element > .list-item:focus-visible {\n  z-index: 1;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n/* list elements separator */\n.results > z-list > z-list-element:not(:last-child) > .list-item,\n.results z-list-group:not(:last-child) > z-list-element:not(.category-heading) {\n  border-bottom: 1px solid var(--color-form-surface03);\n}\n\n.results z-list-group {\n  padding: 0 var(--item-inline-padding);\n}\n\n.results z-list-group > z-list-element::part(list-item-container) {\n  padding: 0;\n}\n\n.results .sub-list {\n  padding-left: calc(var(--item-icon-size) + var(--item-col-gap));\n}\n\n.results .sub-list z-list-element::part(list-item-container) {\n  padding: 0;\n}\n\n.results .sub-list z-list-element > .list-item {\n  position: relative;\n}\n\n/* tree indicators */\n.results .sub-list > z-list-element:not(:last-child)::before,\n.results .sub-list > z-list-element > .list-item::before {\n  position: absolute;\n  top: 0;\n  left: calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);\n  border-left: 1px solid var(--color-form-surface03);\n  content: \"\";\n}\n\n/* \"|\" tree indicator */\n.results .sub-list > z-list-element:not(:last-child)::before {\n  top: -4px;\n  height: calc(100% + 4px);\n}\n\n/* \"—\" tree indicator */\n.results .sub-list z-list-element > .list-item::before {\n  width: 14px;\n  height: calc(var(--z-searchbar-item-height) / 2);\n  border-bottom: 1px solid var(--color-form-surface03);\n}\n\n.results .category-heading > .category {\n  font-style: italic;\n}\n\n.results .category-heading > .subcategory {\n  text-transform: uppercase;\n}\n\n.results z-list-element > .list-item .ellipsis {\n  overflow: hidden;\n}\n\n.results .ellipsis > .item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.results .item-label mark {\n  background: var(--color-primary03);\n  color: var(--color-default-text);\n}\n\n.results .list-item > z-tag {\n  --z-tag-bg: var(--z-searchbar-tag-bg);\n  --z-tag-text-color: var(--z-searchbar-tag-text-color);\n\n  margin-left: auto;\n  white-space: nowrap;\n}\n\n.results .item-show-all {\n  width: 100%;\n  color: var(--color-primary01);\n  cursor: pointer;\n  text-align: center;\n}\n\n.results .item-no-results {\n  display: block;\n  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n  font-style: italic;\n}\n\n.results .item-no-results > ul {\n  padding-left: calc(var(--space-unit) * 2);\n  margin: var(--space-unit);\n}\n\n@media (min-width: 768px) {\n  .results {\n    --item-icon-size: 1.125rem;\n  }\n}\n",".z-label {\n  display: block;\n  padding-bottom: var(--space-unit);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  text-align: left;\n  text-transform: uppercase;\n}\n","/* Webkit Scrollbar */\n.z-scrollbar::-webkit-scrollbar {\n  width: 6px;\n  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary01);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n:host([theme=\"dark\"]) .z-scrollbar,\n.z-scrollbar--dark {\n  --z-scrollbar-track-gradient: linear-gradient(\n    to right,\n    transparent 0 1px,\n    var(--gray600) 1px 5px,\n    transparent 5px 6px\n  );\n  --z-scrollbar-track-color: var(--gray600);\n  --z-scrollbar-thumb-color: var(--color-primary03);\n  --z-scrollbar-thumb-hover-color: var(--color-hover-primary);\n  --z-scrollbar-corner-color: transparent;\n}\n\n/* Firefox scrollbar */\n@supports not selector(.z-scrollbar::-webkit-scrollbar-track) {\n  .z-scrollbar {\n    scrollbar-color: var(--color-primary01) transparent;\n  }\n\n  :host([theme=\"dark\"]) .z-scrollbar,\n  .z-scrollbar--dark {\n    scrollbar-color: var(--z-scrollbar-thumb-color, var(--color-primary03))\n      var(--z-scrollbar-track-color, var(--gray600));\n  }\n}\n",":root {\n  /* font-family */\n  --font-family-sans: \"IBM Plex Sans\", sans-serif;\n  --font-family-serif: \"IBM Plex Serif\", serif;\n\n  /* font-weight */\n  --font-lt: 300;\n  --font-rg: 400;\n  --font-sb: 600;\n  --font-bd: 700;\n\n  /* font-size type scale */\n  --font-size-1: 0.75rem; /* 12px */\n  --font-size-2: 0.875rem; /* 14px */\n  --font-size-3: 1rem; /* assuming 16px */\n  --font-size-4: 1.125rem; /* 18px */\n  --font-size-5: 1.25rem; /* 20px */\n  --font-size-6: 1.5rem; /* 24px */\n  --font-size-7: 1.75rem; /* 28px */\n  --font-size-8: 2rem; /* 32px */\n  --font-size-9: 2.25rem; /* 36px */\n  --font-size-10: 2.625rem; /* 42px */\n  --font-size-11: 3rem; /* 48px */\n  --font-size-12: 3.375rem; /* 54px */\n  --font-size-13: 3.75rem; /* 60px */\n  --font-size-14: 4.25rem; /* 68px */\n  --font-size-15: 4.75rem; /* 76px */\n  --font-size-16: 5.25rem; /* 84px */\n  --font-size-17: 5.75rem; /* 92px */\n\n  /* cssprops to use with `font` shorthand property */\n  --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n  font-size: var(--font-size-7);\n  font-weight: var(--font-rg);\n  line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n  font-size: var(--font-size-1);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n  font: var(--section-title-1);\n}\n\n.section-title-2 {\n  font: var(--section-title-2);\n}\n\n.section-title-3 {\n  font: var(--section-title-3);\n}\n\n.section-title-4 {\n  font: var(--section-title-4);\n}\n\n.section-title-5 {\n  font: var(--section-title-5);\n}\n\n.section-title-6 {\n  font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n  .heading-1,\n  .heading-1-sb,\n  .heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .heading-2,\n  .heading-2-sb,\n  .heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n  .mobile-heading-1,\n  .mobile-heading-1-sb,\n  .mobile-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .mobile-heading-2,\n  .mobile-heading-2-sb,\n  .mobile-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-3,\n  .mobile-heading-3-sb,\n  .mobile-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-4,\n  .mobile-heading-4-sb,\n  .mobile-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-1,\n  .mobile-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-2,\n  .mobile-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-3,\n  .mobile-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-4,\n  .mobile-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-body-5,\n  .mobile-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-interactive-1,\n  .mobile-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-interactive-2,\n  .mobile-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-interactive-3,\n  .mobile-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .mobile-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .mobile-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .mobile-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .mobile-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .mobile-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  .tablet-heading-1,\n  .tablet-heading-1-sb,\n  .tablet-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .tablet-heading-2,\n  .tablet-heading-2-sb,\n  .tablet-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-3,\n  .tablet-heading-3-sb,\n  .tablet-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-4,\n  .tablet-heading-4-sb,\n  .tablet-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-1,\n  .tablet-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-2,\n  .tablet-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-3,\n  .tablet-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-4,\n  .tablet-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-body-5,\n  .tablet-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-interactive-1,\n  .tablet-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-interactive-2,\n  .tablet-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-interactive-3,\n  .tablet-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .tablet-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .tablet-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .tablet-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .tablet-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .tablet-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  .desktop-heading-1,\n  .desktop-heading-1-sb,\n  .desktop-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .desktop-heading-2,\n  .desktop-heading-2-sb,\n  .desktop-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .desktop-heading-3,\n  .desktop-heading-3-sb,\n  .desktop-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .desktop-heading-4,\n  .desktop-heading-4-sb,\n  .desktop-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-1,\n  .desktop-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-2,\n  .desktop-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-3,\n  .desktop-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-4,\n  .desktop-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-body-5,\n  .desktop-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-interactive-1,\n  .desktop-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-interactive-2,\n  .desktop-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-interactive-3,\n  .desktop-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .desktop-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .desktop-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .desktop-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .desktop-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .desktop-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1366px) {\n  .wide-heading-1,\n  .wide-heading-1-sb,\n  .wide-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .wide-heading-2,\n  .wide-heading-2-sb,\n  .wide-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .wide-heading-3,\n  .wide-heading-3-sb,\n  .wide-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .wide-heading-4,\n  .wide-heading-4-sb,\n  .wide-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-1,\n  .wide-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-2,\n  .wide-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-3,\n  .wide-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-4,\n  .wide-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-body-5,\n  .wide-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-interactive-1,\n  .wide-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-interactive-2,\n  .wide-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-interactive-3,\n  .wide-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .wide-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .wide-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .wide-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .wide-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .wide-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n  font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n  font-weight: var(--font-sb);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {\n  ButtonVariant,\n  ControlSize,\n  KeyboardCode,\n  SearchbarGroup,\n  SearchbarGroupedItem,\n  SearchbarItem,\n} from \"../../beans\";\nimport {handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-searchbar\",\n  styleUrls: [\n    \"styles.css\",\n    \"../css-components/z-label/styles.css\",\n    \"../css-components/z-scrollbar/styles.css\",\n    \"../../tokens/typography.css\",\n  ],\n  shadow: true,\n})\nexport class ZSearchbar implements ComponentInterface {\n  @Element() host: HTMLZSearchbarElement;\n\n  /** The id of the searchbar element */\n  @Prop({reflect: true})\n  htmlid = `searchbar-${randomId()}`;\n\n  /** Prevent submit action */\n  @Prop()\n  preventSubmit?: boolean = false;\n\n  /** The input label */\n  @Prop()\n  label?: string;\n\n  /** The input aria-label */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Input search string */\n  @Prop()\n  value?: string;\n\n  /** Search input placeholder */\n  @Prop()\n  placeholder?: string;\n\n  /** Show autocomplete results */\n  @Prop()\n  autocomplete?: boolean = false;\n\n  /** Minimun number of characters to dispatch typing event */\n  @Prop()\n  autocompleteMinChars?: number = 3;\n\n  /** Number of results shown. Default: all */\n  @Prop()\n  resultsCount?: number;\n\n  /** Search helper text */\n  @Prop()\n  searchHelperLabel?: string = \"Cerca {searchString}\";\n\n  /** Autocomplete results items */\n  @Prop()\n  resultsItems?: SearchbarItem[] | string;\n\n  /** Sort autocomplete results items */\n  @Prop()\n  sortResultsItems?: boolean = false;\n\n  /** Show submit button */\n  @Prop()\n  showSearchButton?: boolean = false;\n\n  /** Hide the label of the submit button, showing only the icon */\n  @Prop()\n  searchButtonIconOnly?: boolean = false;\n\n  /** The label of the submit button */\n  @Prop()\n  searchButtonLabel?: string = \"CERCA\";\n\n  /** Size of the `z-input` and submit `z-button` */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Submit `z-button` variant */\n  @Prop()\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  @State()\n  searchString = this.value;\n\n  @State()\n  currResultsCount: number | undefined = this.resultsCount;\n\n  @State()\n  showResults = false;\n\n  @State()\n  isMobile = false;\n\n  @State()\n  selectedItem?: SearchbarItem;\n\n  private resultsItemsList: SearchbarItem[] | undefined = null;\n\n  private inputRef: HTMLZInputElement;\n\n  /** Media query list for detecting mobile view. */\n  private mql?: MediaQueryList;\n\n  /** Listener for changes in the mobile view media query. */\n  private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n  /** Emitted on search submit, return search string */\n  @Event()\n  searchSubmit: EventEmitter<string>;\n\n  /** Emitted on search typing, return search string */\n  @Event()\n  searchTyping: EventEmitter<string>;\n\n  /** Emitted on search result click, return item */\n  @Event()\n  searchItemClick: EventEmitter<SearchbarItem>;\n\n  private emitSearchItemClick(item: SearchbarItem): void {\n    this.searchItemClick.emit(item);\n    this.selectedItem = item;\n    this.searchString = \"\";\n  }\n\n  private emitSearchSubmit(): void {\n    this.searchSubmit.emit(this.inputRef.value);\n  }\n\n  @Watch(\"resultsItems\")\n  watchItems(): void {\n    this.resultsItemsList = this.getResultsItemsList();\n  }\n\n  @Watch(\"resultsCount\")\n  watchResultsCount(): void {\n    this.currResultsCount = this.resultsCount;\n  }\n\n  @Watch(\"value\")\n  watchValue(): void {\n    this.searchString = this.value;\n  }\n\n  @Watch(\"searchString\")\n  watchSearchString(): void {\n    this.searchTyping.emit(this.searchString);\n    if (!this.searchString) {\n      this.currResultsCount = this.resultsCount;\n    }\n  }\n\n  private getResultsItemsList(): SearchbarItem[] | undefined {\n    return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n  }\n\n  private getGroupedItems(): SearchbarGroupedItem {\n    const groupedItems = {};\n    this.resultsItemsList.forEach((item: SearchbarItem) => {\n      const key = `${item?.category}${item?.subcategory}`;\n      groupedItems[key] = groupedItems[key] ?? {\n        category: item?.category,\n        subcategory: item?.subcategory,\n        items: [],\n      };\n      groupedItems[key][\"items\"].push(item);\n    });\n\n    if (this.sortResultsItems) {\n      return Object.keys(groupedItems)\n        .sort()\n        .reduce((obj, key) => {\n          obj[key] = {\n            ...groupedItems[key],\n            items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n              const nameA = a.label.toUpperCase();\n              const nameB = b.label.toUpperCase();\n              if (nameA < nameB) {\n                return -1;\n              }\n              if (nameA > nameB) {\n                return 1;\n              }\n\n              return 0;\n            }),\n          };\n\n          return obj;\n        }, {});\n    }\n\n    return groupedItems;\n  }\n\n  private onListItemKeyDown(e: KeyboardEvent, item: SearchbarItem): void {\n    if (e.key === KeyboardCode.ENTER) {\n      e.preventDefault();\n      this.emitSearchItemClick(item);\n\n      return;\n    }\n\n    this.handleArrowsNavigation(e);\n  }\n\n  private onSearchHelperKeyDown(e: KeyboardEvent): void {\n    if (e.key === KeyboardCode.ENTER) {\n      e.preventDefault();\n      this.emitSearchSubmit();\n\n      return;\n    }\n\n    this.handleArrowsNavigation(e);\n  }\n\n  private handleArrowsNavigation(e: KeyboardEvent): void {\n    if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode)) {\n      return;\n    }\n\n    const currentElement = e.target as HTMLElement;\n    const items = Array.from(this.host.shadowRoot?.querySelectorAll(\"z-list .list-item\") ?? []);\n    const currentIndex = items.indexOf(currentElement);\n\n    if (e.key === KeyboardCode.ARROW_DOWN) {\n      e.preventDefault();\n      const nextIndex = currentIndex + 1;\n      if (nextIndex < items.length) {\n        (items[nextIndex] as HTMLElement).focus();\n      }\n    }\n\n    if (e.key === KeyboardCode.ARROW_UP) {\n      e.preventDefault();\n      const prevIndex = currentIndex - 1;\n      if (prevIndex < 0) {\n        this.host.shadowRoot?.querySelector(\"input\")?.focus();\n        this.host.shadowRoot\n          ?.querySelector(\"input\")\n          ?.setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);\n      }\n      if (prevIndex >= 0) {\n        (items[prevIndex] as HTMLElement).focus();\n      }\n    }\n  }\n\n  private handleStopTyping(e: CustomEvent): void {\n    e.stopPropagation();\n    this.searchString = e.detail.value;\n    this.selectedItem = undefined;\n  }\n\n  private handleSubmit(): void {\n    if (this.preventSubmit) {\n      return;\n    }\n\n    this.emitSearchSubmit();\n  }\n\n  @Listen(\"click\", {target: \"document\"})\n  private handleOutsideClick(e: MouseEvent): void {\n    const cp = e.composedPath();\n    if (cp.includes(this.host)) {\n      return;\n    }\n\n    this.showResults = false;\n  }\n\n  componentWillLoad(): void {\n    this.resultsItemsList = this.getResultsItemsList();\n\n    this.mql = matchMedia(\"(max-width: 767px)\");\n    this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n    this.mql.addEventListener(\"change\", this.onMobileViewChange);\n    this.isMobile = this.mql.matches;\n  }\n\n  disconnectedCallback(): void {\n    this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n  }\n\n  private renderItemLabel(label: string): string {\n    if (!this.searchString) {\n      return label;\n    }\n\n    return label.replace(\n      new RegExp(this.searchString.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n      (found) => `<mark>${found}</mark>`\n    );\n  }\n\n  private renderItem(item: SearchbarItem, index: number): HTMLZListElementElement {\n    return (\n      <z-list-element\n        id={`list-item-${this.htmlid}-${index}`}\n        role=\"presentation\"\n        htmlTabindex={-1}\n        onKeyDown={(e: KeyboardEvent) => this.onListItemKeyDown(e, item)}\n        onClick={(e: MouseEvent) => {\n          e.stopPropagation();\n          this.emitSearchItemClick(item);\n        }}\n      >\n        <div\n          class=\"list-item ellipsis\"\n          role=\"option\"\n          tabindex={0}\n        >\n          {!!item?.icon && (\n            <z-icon\n              class=\"item-icon\"\n              name={item.icon}\n            />\n          )}\n\n          <div\n            class=\"item-label body-3 mobile-body-4\"\n            title={item.label}\n            innerHTML={this.renderItemLabel(item.label)}\n          />\n          {!!item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n        </div>\n        {!!item.children?.length && (\n          <z-list\n            class=\"sub-list\"\n            role=\"group\"\n            aria-label={item.label || undefined}\n          >\n            {item.children.map((child, index) => this.renderItem(child, index))}\n          </z-list>\n        )}\n      </z-list-element>\n    );\n  }\n\n  /**\n   * Renders the item grouped by category and subcategory. If `resultsCount` is set, it limits the number of rendered items.\n   */\n  private renderItemGroups(): HTMLZListGroupElement[] | undefined {\n    if (!this.resultsItemsList?.length) {\n      return;\n    }\n\n    const groupedItems = Object.values(this.getGroupedItems()) as SearchbarGroup[];\n    const listGroups: HTMLZListGroupElement[] = [];\n    const hasResultsLimit = !!this.currResultsCount;\n    let renderedCount = 0;\n\n    for (const groupItem of groupedItems) {\n      const remaining = hasResultsLimit ? this.currResultsCount - renderedCount : groupItem.items.length;\n      if (remaining <= 0) {\n        break;\n      }\n\n      const visibleItems = groupItem.items.slice(0, remaining);\n      const listGroupsElements: HTMLZListElement[] = visibleItems.map((item: SearchbarItem, subindex: number) =>\n        this.renderItem(item, subindex)\n      );\n      renderedCount += listGroupsElements.length;\n\n      if (!listGroupsElements.length) {\n        continue;\n      }\n\n      const ariaLabel = [groupItem.category, groupItem.subcategory].filter(Boolean).join(\" \");\n\n      listGroups.push(\n        <z-list-group aria-label={ariaLabel || undefined}>\n          {groupItem.category && (\n            <z-list-element\n              class=\"category-heading body-3 mobile-body-4\"\n              slot=\"header-title\"\n              role=\"presentation\"\n              htmlTabindex={-1}\n            >\n              <div class=\"category\">{groupItem.category}</div>\n              {groupItem.subcategory && <div class=\"subcategory\">{groupItem.subcategory}</div>}\n            </z-list-element>\n          )}\n\n          {listGroupsElements}\n        </z-list-group>\n      );\n    }\n\n    return listGroups;\n  }\n\n  render(): HTMLZSearchbarElement {\n    return (\n      <Host\n        onFocus={() => (this.showResults = true)}\n        onClick={(e: MouseEvent) => this.handleOutsideClick(e)}\n        class={{\"has-submit\": !!this.showSearchButton, \"has-results\": !!this.autocomplete}}\n      >\n        <div class=\"input-container\">\n          <z-input\n            ref={(el) => (this.inputRef = el)}\n            htmlid={`input-${this.htmlid}`}\n            message={false}\n            placeholder={this.placeholder}\n            onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n            onKeyUp={(e: KeyboardEvent) => {\n              handleEnterKeydSubmit(e, () => this.handleSubmit());\n              this.handleArrowsNavigation(e);\n            }}\n            onFocus={() => (this.showResults = true)}\n            value={this.searchString || this.selectedItem?.label}\n            size={this.size}\n            label={this.label}\n            aria-label={this.htmlAriaLabel || this.placeholder || undefined}\n          />\n\n          {!!(\n            this.showResults &&\n            this.autocomplete &&\n            this.searchString &&\n            this.searchString.length >= this.autocompleteMinChars &&\n            this.resultsItemsList\n          ) && (\n            <div class=\"results z-scrollbar\">\n              {this.preventSubmit && !this.resultsItemsList?.length ? (\n                <div class=\"item-no-results body-3 mobile-body-4\">\n                  Non abbiamo trovato risultati per <b>{this.searchString}</b>\n                  <br />\n                  <br />\n                  Cosa puoi fare?\n                  <ul>\n                    <li>Verificare di aver scritto bene</li>\n                    <li>Provare a cercare un'altra parola</li>\n                    <li>Provare a cercare qualcosa di più generico</li>\n                  </ul>\n                </div>\n              ) : (\n                <z-list\n                  role=\"listbox\"\n                  id={`list-${this.htmlid}`}\n                  aria-label={this.htmlAriaLabel || this.label || undefined}\n                >\n                  {this.autocomplete && !this.preventSubmit && !!this.searchString && (\n                    <z-list-element\n                      role=\"presentation\"\n                      htmlTabindex={-1}\n                      id={`list-item-${this.htmlid}-search`}\n                      onKeyDown={(e: KeyboardEvent) => this.onSearchHelperKeyDown(e)}\n                      onClick={() => this.emitSearchSubmit()}\n                    >\n                      <div\n                        class=\"list-item item-search\"\n                        role=\"option\"\n                        tabindex={0}\n                      >\n                        <z-icon\n                          class=\"search-icon\"\n                          name=\"left-magnifying-glass\"\n                        />\n                        <div\n                          class=\"item-label body-3 mobile-body-4\"\n                          innerHTML={this.searchHelperLabel?.replace(\n                            \"{searchString}\",\n                            `<mark>${this.searchString}</mark>`\n                          )}\n                        />\n                      </div>\n                    </z-list-element>\n                  )}\n\n                  {this.renderItemGroups()}\n\n                  {!!(\n                    this.searchString &&\n                    this.resultsItemsList?.length &&\n                    this.currResultsCount &&\n                    this.currResultsCount < this.resultsItemsList?.length\n                  ) && (\n                    <z-list-element\n                      role=\"presentation\"\n                      htmlTabindex={-1}\n                      id={`list-item-${this.htmlid}-show-all`}\n                    >\n                      <div\n                        role=\"option\"\n                        class=\"item-show-all body-3 mobile-body-4\"\n                        tabindex={0}\n                        onClick={() => (this.currResultsCount = undefined)}\n                      >\n                        Vedi tutti i risultati\n                      </div>\n                    </z-list-element>\n                  )}\n                </z-list>\n              )}\n            </div>\n          )}\n        </div>\n\n        {this.showSearchButton && (\n          <z-button\n            icon={this.searchButtonIconOnly ? \"search\" : undefined}\n            aria-label={this.searchButtonIconOnly ? this.searchButtonLabel.trim() || \"CERCA\" : undefined}\n            disabled={!!this.preventSubmit}\n            variant={this.variant}\n            size={this.size}\n            onClick={() => this.handleSubmit()}\n          >\n            {this.searchButtonIconOnly ? \"\" : this.searchButtonLabel.trim() || \"CERCA\"}\n          </z-button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"weAAA,MAAMA,EAAY,IAAM,2+GCAxB,MAAMA,EAAY,IAAM,gOCAxB,MAAMA,EAAY,IAAM,s+BCAxB,MAAMC,EAAgB,IAAM,k8X,MCiCfC,EAAUC,EAAA,MAAAD,UAAAE,EAVvB,WAAAC,CAAAC,G,yMAeEC,KAAAC,OAAS,aAAaC,MAItBF,KAAAG,cAA0B,MAoB1BH,KAAAI,aAAyB,MAIzBJ,KAAAK,qBAAgC,EAQhCL,KAAAM,kBAA6B,uBAQ7BN,KAAAO,iBAA6B,MAI7BP,KAAAQ,iBAA6B,MAI7BR,KAAAS,qBAAiC,MAIjCT,KAAAU,kBAA6B,QAI7BV,KAAAW,KAAqBC,EAAYC,IAIjCb,KAAAc,QAA0BC,EAAcC,QAGxChB,KAAAiB,aAAejB,KAAKkB,MAGpBlB,KAAAmB,iBAAuCnB,KAAKoB,aAG5CpB,KAAAqB,YAAc,MAGdrB,KAAAsB,SAAW,MAKHtB,KAAAuB,iBAAgD,IAoazD,CA9YS,mBAAAC,CAAoBC,GAC1BzB,KAAK0B,gBAAgBC,KAAKF,GAC1BzB,KAAK4B,aAAeH,EACpBzB,KAAKiB,aAAe,E,CAGd,gBAAAY,GACN7B,KAAK8B,aAAaH,KAAK3B,KAAK+B,SAASb,M,CAIvC,UAAAc,GACEhC,KAAKuB,iBAAmBvB,KAAKiC,qB,CAI/B,iBAAAC,GACElC,KAAKmB,iBAAmBnB,KAAKoB,Y,CAI/B,UAAAe,GACEnC,KAAKiB,aAAejB,KAAKkB,K,CAI3B,iBAAAkB,GACEpC,KAAKqC,aAAaV,KAAK3B,KAAKiB,cAC5B,IAAKjB,KAAKiB,aAAc,CACtBjB,KAAKmB,iBAAmBnB,KAAKoB,Y,EAIzB,mBAAAa,GACN,cAAcjC,KAAKsC,eAAiB,SAAWC,KAAKC,MAAMxC,KAAKsC,cAAgBtC,KAAKsC,Y,CAG9E,eAAAG,GACN,MAAMC,EAAe,GACrB1C,KAAKuB,iBAAiBoB,SAASlB,I,MAC7B,MAAMmB,EAAM,GAAGnB,IAAI,MAAJA,SAAI,SAAJA,EAAMoB,WAAWpB,IAAI,MAAJA,SAAI,SAAJA,EAAMqB,cACtCJ,EAAaE,IAAOG,EAAAL,EAAaE,MAAI,MAAAG,SAAA,EAAAA,EAAI,CACvCF,SAAUpB,IAAI,MAAJA,SAAI,SAAJA,EAAMoB,SAChBC,YAAarB,IAAI,MAAJA,SAAI,SAAJA,EAAMqB,YACnBE,MAAO,IAETN,EAAaE,GAAK,SAASK,KAAKxB,EAAK,IAGvC,GAAIzB,KAAKO,iBAAkB,CACzB,OAAO2C,OAAOC,KAAKT,GAChBU,OACAC,QAAO,CAACC,EAAKV,KACZU,EAAIV,GAAIM,OAAAK,OAAAL,OAAAK,OAAA,GACHb,EAAaE,IAAI,CACpBI,MAAON,EAAaE,GAAK,SAASQ,MAAK,CAACI,EAAkBC,KACxD,MAAMC,EAAQF,EAAEG,MAAMC,cACtB,MAAMC,EAAQJ,EAAEE,MAAMC,cACtB,GAAIF,EAAQG,EAAO,CACjB,OAAO,C,CAET,GAAIH,EAAQG,EAAO,CACjB,OAAO,C,CAGT,OAAO,CAAC,MAIZ,OAAOP,CAAG,GACT,G,CAGP,OAAOZ,C,CAGD,iBAAAoB,CAAkBC,EAAkBtC,GAC1C,GAAIsC,EAAEnB,MAAQoB,EAAaC,MAAO,CAChCF,EAAEG,iBACFlE,KAAKwB,oBAAoBC,GAEzB,M,CAGFzB,KAAKmE,uBAAuBJ,E,CAGtB,qBAAAK,CAAsBL,GAC5B,GAAIA,EAAEnB,MAAQoB,EAAaC,MAAO,CAChCF,EAAEG,iBACFlE,KAAK6B,mBAEL,M,CAGF7B,KAAKmE,uBAAuBJ,E,CAGtB,sBAAAI,CAAuBJ,G,gBAC7B,IAAK,CAACC,EAAaK,WAAYL,EAAaM,UAAUC,SAASR,EAAEnB,KAAsB,CACrF,M,CAGF,MAAM4B,EAAiBT,EAAEU,OACzB,MAAMzB,EAAQ0B,MAAMC,MAAKC,GAAA7B,EAAA/C,KAAK6E,KAAKC,cAAU,MAAA/B,SAAA,SAAAA,EAAEgC,iBAAiB,wBAAoB,MAAAH,SAAA,EAAAA,EAAI,IACxF,MAAMI,EAAehC,EAAMiC,QAAQT,GAEnC,GAAIT,EAAEnB,MAAQoB,EAAaK,WAAY,CACrCN,EAAEG,iBACF,MAAMgB,EAAYF,EAAe,EACjC,GAAIE,EAAYlC,EAAMmC,OAAQ,CAC3BnC,EAAMkC,GAA2BE,O,EAItC,GAAIrB,EAAEnB,MAAQoB,EAAaM,SAAU,CACnCP,EAAEG,iBACF,MAAMmB,EAAYL,EAAe,EACjC,GAAIK,EAAY,EAAG,EACjBC,GAAAC,EAAAvF,KAAK6E,KAAKC,cAAU,MAAAS,SAAA,SAAAA,EAAEC,cAAc,YAAQ,MAAAF,SAAA,SAAAA,EAAEF,SAC9CK,GAAAC,EAAA1F,KAAK6E,KAAKC,cAAU,MAAAY,SAAA,SAAAA,EAChBF,cAAc,YAAQ,MAAAC,SAAA,SAAAA,EACtBE,kBAAkB3F,KAAK+B,SAASb,MAAMiE,OAAQnF,KAAK+B,SAASb,MAAMiE,O,CAExE,GAAIE,GAAa,EAAG,CACjBrC,EAAMqC,GAA2BD,O,GAKhC,gBAAAQ,CAAiB7B,GACvBA,EAAE8B,kBACF7F,KAAKiB,aAAe8C,EAAE+B,OAAO5E,MAC7BlB,KAAK4B,aAAemE,S,CAGd,YAAAC,GACN,GAAIhG,KAAKG,cAAe,CACtB,M,CAGFH,KAAK6B,kB,CAIC,kBAAAoE,CAAmBlC,GACzB,MAAMmC,EAAKnC,EAAEoC,eACb,GAAID,EAAG3B,SAASvE,KAAK6E,MAAO,CAC1B,M,CAGF7E,KAAKqB,YAAc,K,CAGrB,iBAAA+E,GACEpG,KAAKuB,iBAAmBvB,KAAKiC,sBAE7BjC,KAAKqG,IAAMC,WAAW,sBACtBtG,KAAKuG,mBAAsBxC,GAA4B/D,KAAKsB,SAAWyC,EAAEyC,QACzExG,KAAKqG,IAAII,iBAAiB,SAAUzG,KAAKuG,oBACzCvG,KAAKsB,SAAWtB,KAAKqG,IAAIG,O,CAG3B,oBAAAE,G,OACE3D,EAAA/C,KAAKqG,OAAG,MAAAtD,SAAA,SAAAA,EAAE4D,oBAAoB,SAAU3G,KAAKuG,mB,CAGvC,eAAAK,CAAgBjD,GACtB,IAAK3D,KAAKiB,aAAc,CACtB,OAAO0C,C,CAGT,OAAOA,EAAMkD,QACX,IAAIC,OAAO9G,KAAKiB,aAAa4F,QAAQ,sBAAuB,QAAS,QACpEE,GAAU,SAASA,Y,CAIhB,UAAAC,CAAWvF,EAAqBwF,G,MACtC,OACEC,EAAA,kBACEC,GAAI,aAAanH,KAAKC,UAAUgH,IAChCG,KAAK,eACLC,cAAc,EACdC,UAAYvD,GAAqB/D,KAAK8D,kBAAkBC,EAAGtC,GAC3D8F,QAAUxD,IACRA,EAAE8B,kBACF7F,KAAKwB,oBAAoBC,EAAK,GAGhCyF,EAAA,OACEM,MAAM,qBACNJ,KAAK,SACLK,SAAU,MAEPhG,IAAI,MAAJA,SAAI,SAAJA,EAAMiG,OACPR,EAAA,UACEM,MAAM,YACNG,KAAMlG,EAAKiG,OAIfR,EAAA,OACEM,MAAM,kCACNI,MAAOnG,EAAKkC,MACZkE,UAAW7H,KAAK4G,gBAAgBnF,EAAKkC,YAEpClC,IAAI,MAAJA,SAAI,SAAJA,EAAMqG,MAAOZ,EAAA,SAAOQ,KAAMjG,EAAKqG,IAAIJ,OAAQ1H,KAAKsB,SAAWG,EAAKqG,IAAIC,KAAO,SAE7EhF,EAAAtB,EAAKuG,YAAQ,MAAAjF,SAAA,SAAAA,EAAEoC,SAChB+B,EAAA,UACEM,MAAM,WACNJ,KAAK,QAAO,aACA3F,EAAKkC,OAASoC,WAEzBtE,EAAKuG,SAASC,KAAI,CAACC,EAAOjB,IAAUjH,KAAKgH,WAAWkB,EAAOjB,M,CAU9D,gBAAAkB,G,MACN,MAAKpF,EAAA/C,KAAKuB,oBAAgB,MAAAwB,SAAA,SAAAA,EAAEoC,QAAQ,CAClC,M,CAGF,MAAMzC,EAAeQ,OAAOkF,OAAOpI,KAAKyC,mBACxC,MAAM4F,EAAsC,GAC5C,MAAMC,IAAoBtI,KAAKmB,iBAC/B,IAAIoH,EAAgB,EAEpB,IAAK,MAAMC,KAAa9F,EAAc,CACpC,MAAM+F,EAAYH,EAAkBtI,KAAKmB,iBAAmBoH,EAAgBC,EAAUxF,MAAMmC,OAC5F,GAAIsD,GAAa,EAAG,CAClB,K,CAGF,MAAMC,EAAeF,EAAUxF,MAAM2F,MAAM,EAAGF,GAC9C,MAAMG,EAAyCF,EAAaT,KAAI,CAACxG,EAAqBoH,IACpF7I,KAAKgH,WAAWvF,EAAMoH,KAExBN,GAAiBK,EAAmBzD,OAEpC,IAAKyD,EAAmBzD,OAAQ,CAC9B,Q,CAGF,MAAM2D,EAAY,CAACN,EAAU3F,SAAU2F,EAAU1F,aAAaiG,OAAOC,SAASC,KAAK,KAEnFZ,EAAWpF,KACTiE,EAAA,6BAA0B4B,GAAa/C,WACpCyC,EAAU3F,UACTqE,EAAA,kBACEM,MAAM,wCACN0B,KAAK,eACL9B,KAAK,eACLC,cAAc,GAEdH,EAAA,OAAKM,MAAM,YAAYgB,EAAU3F,UAChC2F,EAAU1F,aAAeoE,EAAA,OAAKM,MAAM,eAAegB,EAAU1F,cAIjE8F,G,CAKP,OAAOP,C,CAGT,MAAAc,G,cACE,OACEjC,EAACkC,EAAI,CAAAxG,IAAA,2CACHyG,QAAS,IAAOrJ,KAAKqB,YAAc,KACnCkG,QAAUxD,GAAkB/D,KAAKiG,mBAAmBlC,GACpDyD,MAAO,CAAC,eAAgBxH,KAAKQ,iBAAkB,gBAAiBR,KAAKI,eAErE8G,EAAA,OAAAtE,IAAA,2CAAK4E,MAAM,mBACTN,EAAA,WAAAtE,IAAA,2CACE0G,IAAMC,GAAQvJ,KAAK+B,SAAWwH,EAC9BtJ,OAAQ,SAASD,KAAKC,SACtBuJ,QAAS,MACTC,YAAazJ,KAAKyJ,YAClBC,aAAe3F,GAAmB/D,KAAK4F,iBAAiB7B,GACxD4F,QAAU5F,IACR6F,EAAsB7F,GAAG,IAAM/D,KAAKgG,iBACpChG,KAAKmE,uBAAuBJ,EAAE,EAEhCsF,QAAS,IAAOrJ,KAAKqB,YAAc,KACnCH,MAAOlB,KAAKiB,gBAAgB8B,EAAA/C,KAAK4B,gBAAY,MAAAmB,SAAA,SAAAA,EAAEY,OAC/ChD,KAAMX,KAAKW,KACXgD,MAAO3D,KAAK2D,MAAK,aACL3D,KAAK6J,eAAiB7J,KAAKyJ,aAAe1D,eAItD/F,KAAKqB,aACLrB,KAAKI,cACLJ,KAAKiB,cACLjB,KAAKiB,aAAakE,QAAUnF,KAAKK,sBACjCL,KAAKuB,mBAEL2F,EAAA,OAAAtE,IAAA,2CAAK4E,MAAM,uBACRxH,KAAKG,kBAAkByE,EAAA5E,KAAKuB,oBAAgB,MAAAqD,SAAA,SAAAA,EAAEO,QAC7C+B,EAAA,OAAKM,MAAM,wCAAsC,qCACbN,EAAA,SAAIlH,KAAKiB,cAC3CiG,EAAA,WACAA,EAAA,WAAM,kBAENA,EAAA,UACEA,EAAA,6CACAA,EAAA,+CACAA,EAAA,0DAIJA,EAAA,UACEE,KAAK,UACLD,GAAI,QAAQnH,KAAKC,SAAQ,aACbD,KAAK6J,eAAiB7J,KAAK2D,OAASoC,WAE/C/F,KAAKI,eAAiBJ,KAAKG,iBAAmBH,KAAKiB,cAClDiG,EAAA,kBACEE,KAAK,eACLC,cAAc,EACdF,GAAI,aAAanH,KAAKC,gBACtBqH,UAAYvD,GAAqB/D,KAAKoE,sBAAsBL,GAC5DwD,QAAS,IAAMvH,KAAK6B,oBAEpBqF,EAAA,OACEM,MAAM,wBACNJ,KAAK,SACLK,SAAU,GAEVP,EAAA,UACEM,MAAM,cACNG,KAAK,0BAEPT,EAAA,OACEM,MAAM,kCACNK,WAAWtC,EAAAvF,KAAKM,qBAAiB,MAAAiF,SAAA,SAAAA,EAAEsB,QACjC,iBACA,SAAS7G,KAAKiB,2BAOvBjB,KAAKmI,sBAGJnI,KAAKiB,gBACLqE,EAAAtF,KAAKuB,oBAAgB,MAAA+D,SAAA,SAAAA,EAAEH,SACvBnF,KAAKmB,kBACLnB,KAAKmB,mBAAmBuE,EAAA1F,KAAKuB,oBAAgB,MAAAmE,SAAA,SAAAA,EAAEP,UAE/C+B,EAAA,kBACEE,KAAK,eACLC,cAAc,EACdF,GAAI,aAAanH,KAAKC,mBAEtBiH,EAAA,OACEE,KAAK,SACLI,MAAM,qCACNC,SAAU,EACVF,QAAS,IAAOvH,KAAKmB,iBAAmB4E,WAAU,8BAYjE/F,KAAKQ,kBACJ0G,EAAA,YAAAtE,IAAA,2CACE8E,KAAM1H,KAAKS,qBAAuB,SAAWsF,UAAS,aAC1C/F,KAAKS,qBAAuBT,KAAKU,kBAAkBoJ,QAAU,QAAU/D,UACnFgE,WAAY/J,KAAKG,cACjBW,QAASd,KAAKc,QACdH,KAAMX,KAAKW,KACX4G,QAAS,IAAMvH,KAAKgG,gBAEnBhG,KAAKS,qBAAuB,GAAKT,KAAKU,kBAAkBoJ,QAAU,S","ignoreList":[]}

package/dist/components/p-CaSvyuw6.js

@@ -0,0 +1,2 @@
+import{p as r,H as e,h as s,d as t,t as a}from"./p-RmbDDbWd.js";const o=()=>`:host{display:inline-block;overflow:hidden;width:100%;height:100%;background:var(--color-surface02);border-radius:var(--border-radius);transform:translate3d(0, 0, 0)}:host::after{display:block;width:100%;height:100%;animation:progress 1.6s ease-in-out infinite;background-image:linear-gradient(     90deg,     var(--color-surface02) 0%,     var(--color-surface03) 95%,     var(--color-surface02) 100%   );content:"";filter:blur(6px)}@keyframes progress{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}`;const n=r(class r extends e{constructor(r){super();if(r!==false){this.__registerHost()}this.__attachShadow()}render(){return s(t,{key:"1df84453886015afcf512ae9294a598d97c37697"})}static get style(){return o()}},[1,"z-ghost-loading"]);function i(){if(typeof customElements==="undefined"){return}const r=["z-ghost-loading"];r.forEach((r=>{switch(r){case"z-ghost-loading":if(!customElements.get(a(r))){customElements.define(a(r),n)}break}}))}export{n as Z,i as d};
+//# sourceMappingURL=p-CaSvyuw6.js.map

package/dist/components/{index17.js.map → p-CaSvyuw6.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZGhostLoading","__stencil_proxyCustomElement","HTMLElement","render","h","Host","key"],"sources":["src/components/z-ghost-loading/styles.css?tag=z-ghost-loading&encapsulation=shadow","src/components/z-ghost-loading/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  background: var(--color-surface02);\n  border-radius: var(--border-radius);\n  transform: translate3d(0, 0, 0);\n}\n\n:host::after {\n  display: block;\n  width: 100%;\n  height: 100%;\n  animation: progress 1.6s ease-in-out infinite;\n  background-image: linear-gradient(\n    90deg,\n    var(--color-surface02) 0%,\n    var(--color-surface03) 95%,\n    var(--color-surface02) 100%\n  );\n  content: \"\";\n  filter: blur(6px);\n}\n\n@keyframes progress {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(100%);\n  }\n}\n","import {Component, ComponentInterface, h, Host} from \"@stencil/core\";\n@Component({\n  tag: \"z-ghost-loading\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZGhostLoading implements ComponentInterface {\n  render(): HTMLZGhostLoadingElement {\n    return <Host />;\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAY,IAAM,wgB,MCMXC,EAAaC,EAAA,MAAAD,UAAAE,E,iFACxB,MAAAC,GACE,OAAOC,EAACC,EAAI,CAAAC,IAAA,4C","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZGhostLoading","__stencil_proxyCustomElement","HTMLElement","render","h","Host","key"],"sources":["src/components/z-ghost-loading/styles.css?tag=z-ghost-loading&encapsulation=shadow","src/components/z-ghost-loading/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  background: var(--color-surface02);\n  border-radius: var(--border-radius);\n  transform: translate3d(0, 0, 0);\n}\n\n:host::after {\n  display: block;\n  width: 100%;\n  height: 100%;\n  animation: progress 1.6s ease-in-out infinite;\n  background-image: linear-gradient(\n    90deg,\n    var(--color-surface02) 0%,\n    var(--color-surface03) 95%,\n    var(--color-surface02) 100%\n  );\n  content: \"\";\n  filter: blur(6px);\n}\n\n@keyframes progress {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(100%);\n  }\n}\n","import {Component, ComponentInterface, h, Host} from \"@stencil/core\";\n@Component({\n  tag: \"z-ghost-loading\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZGhostLoading implements ComponentInterface {\n  render(): HTMLZGhostLoadingElement {\n    return <Host />;\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,IAAM,wgB,MCMXC,EAAaC,EAAA,MAAAD,UAAAE,E,iFACxB,MAAAC,GACE,OAAOC,EAACC,EAAI,CAAAC,IAAA,4C","ignoreList":[]}

package/dist/components/p-CbXEdwLi.js

@@ -0,0 +1,2 @@
+import{p as i,H as t,h as e,d as n,t as r}from"./p-RmbDDbWd.js";import{C as s,I as o}from"./p-D1c5gR45.js";const a=()=>`:host{display:inline;margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0);line-height:0;vertical-align:middle}.icon-wrapper{position:relative;z-index:0;display:inline-block}svg:not([width]){width:var(--z-icon-width, 1.125rem)}svg:not([height]){height:var(--z-icon-height, 1.125rem)}.icon-wrapper svg.color-indicator{position:absolute;z-index:-1;bottom:0;left:0}`;const d=/^(.+?)(-transparent)?(-filled|-button)?$/;const h=i(class i extends t{constructor(i){super();if(i!==false){this.__registerHost()}this.__attachShadow()}selectPathOrPolygon(i){if(i===null||i===void 0?void 0:i.startsWith("M")){return e("path",{d:i})}return e("polygon",{points:i})}get hasColorIndicator(){return s.includes(this.name)}get needsTransparentIndicator(){var i;return["transparent","#ffffff00"].includes((i=this.indicatorColor)===null||i===void 0?void 0:i.toLowerCase())}getTransparentIndicatorIconIfNeeded(){var i;const t=(i=this.name)===null||i===void 0?void 0:i.replace(d,"$1-transparent$3");if(!this.hasColorIndicator||!this.needsTransparentIndicator||!o[t]){return this.name}return t}renderColorIndicator(){return e("svg",{class:"color-indicator",fill:this.indicatorColor||"#FFFFFF00",viewBox:"0 0 1000 1000",width:this.width,height:this.height,"aria-hidden":"true"},this.selectPathOrPolygon(o["picker-color"]))}renderBaseIcon(){return e("svg",{id:this.iconid||undefined,fill:this.fill?`var(--${this.fill})`:undefined,viewBox:"0 0 1000 1000",width:this.width,height:this.height,"aria-hidden":"true"},this.selectPathOrPolygon(o[this.getTransparentIndicatorIconIfNeeded()]))}render(){return e(n,{key:"c64019d3c25828c266b030224a74aaa6c9e8df33","aria-hidden":"true"},this.hasColorIndicator&&!this.needsTransparentIndicator?e("div",{class:"icon-wrapper"},this.renderColorIndicator(),this.renderBaseIcon()):this.renderBaseIcon())}static get style(){return a()}},[1,"z-icon",{name:[1],height:[8],width:[8],iconid:[1],fill:[1],indicatorColor:[1,"indicator-color"]}]);function c(){if(typeof customElements==="undefined"){return}const i=["z-icon"];i.forEach((i=>{switch(i){case"z-icon":if(!customElements.get(r(i))){customElements.define(r(i),h)}break}}))}export{h as Z,c as d};
+//# sourceMappingURL=p-CbXEdwLi.js.map

package/dist/components/{index3.js.map → p-CbXEdwLi.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ICON_NAME_SUFFIX_REGEX","ZIcon","__stencil_proxyCustomElement","HTMLElement","selectPathOrPolygon","iconValue","startsWith","h","d","points","hasColorIndicator","COLOR_INDICATOR_ICONS","includes","this","name","needsTransparentIndicator","_a","indicatorColor","toLowerCase","getTransparentIndicatorIconIfNeeded","transparentIconName","replace","ICONS","renderColorIndicator","class","fill","viewBox","width","height","renderBaseIcon","id","iconid","undefined","render","Host","key"],"sources":["src/components/z-icon/styles.css?tag=z-icon&encapsulation=shadow","src/components/z-icon/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-icon-width: Width of the icon. Default is 1.125rem (18px).\n   * @prop --z-icon-height: Height of the icon. Default is 1.125rem (18px).\n   * @prop --z-icon-left-margin: Left margin of the icon. Default is 0.\n   * @prop --z-icon-right-margin: Right margin of the icon. Default is 0.\n   */\n  display: inline;\n  margin-right: var(--z-icon-right-margin, 0);\n  margin-left: var(--z-icon-left-margin, 0);\n  line-height: 0;\n  vertical-align: middle;\n}\n\n.icon-wrapper {\n  position: relative;\n  z-index: 0;\n  display: inline-block;\n}\n\nsvg:not([width]) {\n  width: var(--z-icon-width, 1.125rem);\n}\n\nsvg:not([height]) {\n  height: var(--z-icon-height, 1.125rem);\n}\n\n.icon-wrapper svg.color-indicator {\n  position: absolute;\n  z-index: -1;\n  bottom: 0;\n  left: 0;\n}\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {COLOR_INDICATOR_ICONS, ICONS} from \"../../constants/iconset\";\n\n// https://regex101.com/r/ZnoZQ5/3\nconst ICON_NAME_SUFFIX_REGEX = /^(.+?)(-transparent)?(-filled|-button)?$/;\n\n/**\n * Component to render an SVG icon from the internal icon set, selected by `name`.\n * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.\n */\n@Component({\n  tag: \"z-icon\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZIcon implements ComponentInterface {\n  /** Icon name */\n  @Prop()\n  name: string;\n\n  /** Icon height (optional) */\n  @Prop()\n  height?: number | string;\n\n  /** Icon width (optional) */\n  @Prop()\n  width?: number | string;\n\n  /** HTML `id` attribute (optional) */\n  @Prop()\n  iconid?: string;\n\n  /** Name of the CSS color token to use for the icon fill color (e.g. `blue500`). */\n  @Prop()\n  fill?: string;\n\n  /**\n   * Color to use to fill the icon's color indicator, if it has one.\n   * Can be any valid value for the `fill` svg attribute.\n   * If the icon passed through the `name` prop doesn't have a color indicator, this prop has no effect.\n   */\n  @Prop()\n  indicatorColor?: string;\n\n  /**\n   * Selects either a `<path>` or `<polygon>` element based on the format of the icon data.\n   * @param iconValue The SVG path data or polygon points from the ICONS set.\n   */\n  private selectPathOrPolygon(iconValue: string): SVGPathElement | SVGPolygonElement {\n    if (iconValue?.startsWith(\"M\")) {\n      return <path d={iconValue}></path>;\n    }\n\n    return <polygon points={iconValue}></polygon>;\n  }\n\n  private get hasColorIndicator(): boolean {\n    return COLOR_INDICATOR_ICONS.includes(this.name);\n  }\n\n  private get needsTransparentIndicator(): boolean {\n    return [\"transparent\", \"#ffffff00\"].includes(this.indicatorColor?.toLowerCase());\n  }\n\n  /**\n   * For icons with a color indicator, if `indicatorColor` is set to transparent, use a specific icon version without the color indicator.\n   * Using the icon without the color indicator prevents visual ambiguity between a transparent indicator and one filled with the background color.\n   * @returns The name of the corresponding icon without the indicator, or the original icon name if no transparent version is needed or available.\n   */\n  private getTransparentIndicatorIconIfNeeded(): string {\n    const transparentIconName = this.name?.replace(ICON_NAME_SUFFIX_REGEX, \"$1-transparent$3\");\n    if (!this.hasColorIndicator || !this.needsTransparentIndicator || !ICONS[transparentIconName]) {\n      return this.name;\n    }\n\n    return transparentIconName;\n  }\n\n  /**\n   * Render the icon with the color indicator.\n   * The indicator is rendered as a separate SVG element behind the main icon, filled with the `indicatorColor`.\n   */\n  private renderColorIndicator(): SVGElement {\n    return (\n      <svg\n        class=\"color-indicator\"\n        fill={this.indicatorColor || \"#FFFFFF00\"}\n        viewBox=\"0 0 1000 1000\"\n        width={this.width}\n        height={this.height}\n        aria-hidden=\"true\"\n      >\n        {this.selectPathOrPolygon(ICONS[\"picker-color\"])}\n      </svg>\n    );\n  }\n\n  private renderBaseIcon(): SVGElement {\n    return (\n      <svg\n        id={this.iconid || undefined}\n        fill={this.fill ? `var(--${this.fill})` : undefined}\n        viewBox=\"0 0 1000 1000\"\n        width={this.width}\n        height={this.height}\n        aria-hidden=\"true\"\n      >\n        {this.selectPathOrPolygon(ICONS[this.getTransparentIndicatorIconIfNeeded()])}\n      </svg>\n    );\n  }\n\n  render(): HTMLZIconElement {\n    return (\n      <Host aria-hidden=\"true\">\n        {this.hasColorIndicator && !this.needsTransparentIndicator ? (\n          <div class=\"icon-wrapper\">\n            {this.renderColorIndicator()}\n            {this.renderBaseIcon()}\n          </div>\n        ) : (\n          this.renderBaseIcon()\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"+JAAA,MAAMA,EAAY,IAAM,2YCIxB,MAAMC,EAAyB,2C,MAWlBC,EAAKC,EAAA,MAAAD,UAAAE,E,iFAiCR,mBAAAC,CAAoBC,GAC1B,GAAIA,IAAS,MAATA,SAAS,SAATA,EAAWC,WAAW,KAAM,CAC9B,OAAOC,EAAA,QAAMC,EAAGH,G,CAGlB,OAAOE,EAAA,WAASE,OAAQJ,G,CAG1B,qBAAYK,GACV,OAAOC,EAAsBC,SAASC,KAAKC,K,CAG7C,6BAAYC,G,MACV,MAAO,CAAC,cAAe,aAAaH,UAASI,EAAAH,KAAKI,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,c,CAQ5D,mCAAAC,G,MACN,MAAMC,GAAsBJ,EAAAH,KAAKC,QAAI,MAAAE,SAAA,SAAAA,EAAEK,QAAQrB,EAAwB,oBACvE,IAAKa,KAAKH,oBAAsBG,KAAKE,4BAA8BO,EAAMF,GAAsB,CAC7F,OAAOP,KAAKC,I,CAGd,OAAOM,C,CAOD,oBAAAG,GACN,OACEhB,EAAA,OACEiB,MAAM,kBACNC,KAAMZ,KAAKI,gBAAkB,YAC7BS,QAAQ,gBACRC,MAAOd,KAAKc,MACZC,OAAQf,KAAKe,OAAM,cACP,QAEXf,KAAKT,oBAAoBkB,EAAM,iB,CAK9B,cAAAO,GACN,OACEtB,EAAA,OACEuB,GAAIjB,KAAKkB,QAAUC,UACnBP,KAAMZ,KAAKY,KAAO,SAASZ,KAAKY,QAAUO,UAC1CN,QAAQ,gBACRC,MAAOd,KAAKc,MACZC,OAAQf,KAAKe,OAAM,cACP,QAEXf,KAAKT,oBAAoBkB,EAAMT,KAAKM,wC,CAK3C,MAAAc,GACE,OACE1B,EAAC2B,EAAI,CAAAC,IAAA,yDAAa,QACftB,KAAKH,oBAAsBG,KAAKE,0BAC/BR,EAAA,OAAKiB,MAAM,gBACRX,KAAKU,uBACLV,KAAKgB,kBAGRhB,KAAKgB,iB","ignoreList":[]}
+{"version":3,"names":["stylesCss","ICON_NAME_SUFFIX_REGEX","ZIcon","__stencil_proxyCustomElement","HTMLElement","selectPathOrPolygon","iconValue","startsWith","h","d","points","hasColorIndicator","COLOR_INDICATOR_ICONS","includes","this","name","needsTransparentIndicator","_a","indicatorColor","toLowerCase","getTransparentIndicatorIconIfNeeded","transparentIconName","replace","ICONS","renderColorIndicator","class","fill","viewBox","width","height","renderBaseIcon","id","iconid","undefined","render","Host","key"],"sources":["src/components/z-icon/styles.css?tag=z-icon&encapsulation=shadow","src/components/z-icon/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-icon-width: Width of the icon. Default is 1.125rem (18px).\n   * @prop --z-icon-height: Height of the icon. Default is 1.125rem (18px).\n   * @prop --z-icon-left-margin: Left margin of the icon. Default is 0.\n   * @prop --z-icon-right-margin: Right margin of the icon. Default is 0.\n   */\n  display: inline;\n  margin-right: var(--z-icon-right-margin, 0);\n  margin-left: var(--z-icon-left-margin, 0);\n  line-height: 0;\n  vertical-align: middle;\n}\n\n.icon-wrapper {\n  position: relative;\n  z-index: 0;\n  display: inline-block;\n}\n\nsvg:not([width]) {\n  width: var(--z-icon-width, 1.125rem);\n}\n\nsvg:not([height]) {\n  height: var(--z-icon-height, 1.125rem);\n}\n\n.icon-wrapper svg.color-indicator {\n  position: absolute;\n  z-index: -1;\n  bottom: 0;\n  left: 0;\n}\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {COLOR_INDICATOR_ICONS, ICONS} from \"../../constants/iconset\";\n\n// https://regex101.com/r/ZnoZQ5/3\nconst ICON_NAME_SUFFIX_REGEX = /^(.+?)(-transparent)?(-filled|-button)?$/;\n\n/**\n * Component to render an SVG icon from the internal icon set, selected by `name`.\n * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.\n */\n@Component({\n  tag: \"z-icon\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZIcon implements ComponentInterface {\n  /** Icon name */\n  @Prop()\n  name: string;\n\n  /** Icon height (optional) */\n  @Prop()\n  height?: number | string;\n\n  /** Icon width (optional) */\n  @Prop()\n  width?: number | string;\n\n  /** HTML `id` attribute (optional) */\n  @Prop()\n  iconid?: string;\n\n  /** Name of the CSS color token to use for the icon fill color (e.g. `blue500`). */\n  @Prop()\n  fill?: string;\n\n  /**\n   * Color to use to fill the icon's color indicator, if it has one.\n   * Can be any valid value for the `fill` svg attribute.\n   * If the icon passed through the `name` prop doesn't have a color indicator, this prop has no effect.\n   */\n  @Prop()\n  indicatorColor?: string;\n\n  /**\n   * Selects either a `<path>` or `<polygon>` element based on the format of the icon data.\n   * @param iconValue The SVG path data or polygon points from the ICONS set.\n   */\n  private selectPathOrPolygon(iconValue: string): SVGPathElement | SVGPolygonElement {\n    if (iconValue?.startsWith(\"M\")) {\n      return <path d={iconValue}></path>;\n    }\n\n    return <polygon points={iconValue}></polygon>;\n  }\n\n  private get hasColorIndicator(): boolean {\n    return COLOR_INDICATOR_ICONS.includes(this.name);\n  }\n\n  private get needsTransparentIndicator(): boolean {\n    return [\"transparent\", \"#ffffff00\"].includes(this.indicatorColor?.toLowerCase());\n  }\n\n  /**\n   * For icons with a color indicator, if `indicatorColor` is set to transparent, use a specific icon version without the color indicator.\n   * Using the icon without the color indicator prevents visual ambiguity between a transparent indicator and one filled with the background color.\n   * @returns The name of the corresponding icon without the indicator, or the original icon name if no transparent version is needed or available.\n   */\n  private getTransparentIndicatorIconIfNeeded(): string {\n    const transparentIconName = this.name?.replace(ICON_NAME_SUFFIX_REGEX, \"$1-transparent$3\");\n    if (!this.hasColorIndicator || !this.needsTransparentIndicator || !ICONS[transparentIconName]) {\n      return this.name;\n    }\n\n    return transparentIconName;\n  }\n\n  /**\n   * Render the icon with the color indicator.\n   * The indicator is rendered as a separate SVG element behind the main icon, filled with the `indicatorColor`.\n   */\n  private renderColorIndicator(): SVGElement {\n    return (\n      <svg\n        class=\"color-indicator\"\n        fill={this.indicatorColor || \"#FFFFFF00\"}\n        viewBox=\"0 0 1000 1000\"\n        width={this.width}\n        height={this.height}\n        aria-hidden=\"true\"\n      >\n        {this.selectPathOrPolygon(ICONS[\"picker-color\"])}\n      </svg>\n    );\n  }\n\n  private renderBaseIcon(): SVGElement {\n    return (\n      <svg\n        id={this.iconid || undefined}\n        fill={this.fill ? `var(--${this.fill})` : undefined}\n        viewBox=\"0 0 1000 1000\"\n        width={this.width}\n        height={this.height}\n        aria-hidden=\"true\"\n      >\n        {this.selectPathOrPolygon(ICONS[this.getTransparentIndicatorIconIfNeeded()])}\n      </svg>\n    );\n  }\n\n  render(): HTMLZIconElement {\n    return (\n      <Host aria-hidden=\"true\">\n        {this.hasColorIndicator && !this.needsTransparentIndicator ? (\n          <div class=\"icon-wrapper\">\n            {this.renderColorIndicator()}\n            {this.renderBaseIcon()}\n          </div>\n        ) : (\n          this.renderBaseIcon()\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"2GAAA,MAAMA,EAAY,IAAM,2YCIxB,MAAMC,EAAyB,2C,MAWlBC,EAAKC,EAAA,MAAAD,UAAAE,E,iFAiCR,mBAAAC,CAAoBC,GAC1B,GAAIA,IAAS,MAATA,SAAS,SAATA,EAAWC,WAAW,KAAM,CAC9B,OAAOC,EAAA,QAAMC,EAAGH,G,CAGlB,OAAOE,EAAA,WAASE,OAAQJ,G,CAG1B,qBAAYK,GACV,OAAOC,EAAsBC,SAASC,KAAKC,K,CAG7C,6BAAYC,G,MACV,MAAO,CAAC,cAAe,aAAaH,UAASI,EAAAH,KAAKI,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,c,CAQ5D,mCAAAC,G,MACN,MAAMC,GAAsBJ,EAAAH,KAAKC,QAAI,MAAAE,SAAA,SAAAA,EAAEK,QAAQrB,EAAwB,oBACvE,IAAKa,KAAKH,oBAAsBG,KAAKE,4BAA8BO,EAAMF,GAAsB,CAC7F,OAAOP,KAAKC,I,CAGd,OAAOM,C,CAOD,oBAAAG,GACN,OACEhB,EAAA,OACEiB,MAAM,kBACNC,KAAMZ,KAAKI,gBAAkB,YAC7BS,QAAQ,gBACRC,MAAOd,KAAKc,MACZC,OAAQf,KAAKe,OAAM,cACP,QAEXf,KAAKT,oBAAoBkB,EAAM,iB,CAK9B,cAAAO,GACN,OACEtB,EAAA,OACEuB,GAAIjB,KAAKkB,QAAUC,UACnBP,KAAMZ,KAAKY,KAAO,SAASZ,KAAKY,QAAUO,UAC1CN,QAAQ,gBACRC,MAAOd,KAAKc,MACZC,OAAQf,KAAKe,OAAM,cACP,QAEXf,KAAKT,oBAAoBkB,EAAMT,KAAKM,wC,CAK3C,MAAAc,GACE,OACE1B,EAAC2B,EAAI,CAAAC,IAAA,yDAAa,QACftB,KAAKH,oBAAsBG,KAAKE,0BAC/BR,EAAA,OAAKiB,MAAM,gBACRX,KAAKU,uBACLV,KAAKgB,kBAGRhB,KAAKgB,iB","ignoreList":[]}

package/dist/components/p-CdBqnUF6.js

@@ -0,0 +1,2 @@
+import{p as s,H as t,h as i,d as a,t as e}from"./p-RmbDDbWd.js";import{r as c}from"./p-8C_CrFxp.js";import{d as o}from"./p-CbXEdwLi.js";const r=()=>`:host{display:flex;min-height:calc(var(--space-unit) * 2.5);align-items:start;margin-top:var(--space-unit);color:var(--color-default-text);fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-2);letter-spacing:0.16px}:host(.small),:host(.x-small){margin-top:calc(var(--space-unit) * 0.5);font-size:var(--font-size-1)}:host([status="success"]){color:var(--color-hover-success)}:host([status="error"]){color:var(--color-hover-error)}:host([status="warning"]){color:var(--color-hover-warning)}:host(:focus){outline:none}:host>z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);--z-icon-right-margin:var(--space-unit);margin-top:calc(var(--space-unit) * 0.25)}:host(.small)>z-icon,:host(.x-small)>z-icon{--z-icon-width:14px;--z-icon-height:14px;--z-icon-right-margin:calc(var(--space-unit) * 0.5)}:host([disabled]){color:var(--color-disabled03);fill:var(--color-disabled03)}`;const n=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.htmlId=`id-${c()}`;this.htmlRole="alert";this.statusIcons={success:"checkmark-circle",error:"multiply-circled",warning:"exclamation-circle"}}render(){return i(a,{key:"acc2b74cb7dfda1d8529785c601d3fd92c2884dc",role:this.htmlRole&&this.message&&this.status?this.htmlRole:undefined,id:this.htmlId},this.statusIcons[this.status]&&this.message&&i("z-icon",{key:"b9532d92b1a91d4218c30ed7bb543964c7822b03",name:this.statusIcons[this.status]}),i("span",{key:"933d1ac0a4194da9ec3f70ca715812d6cf3a7891",innerHTML:this.message}))}static get style(){return r()}},[1,"z-input-message",{message:[1],htmlId:[1,"html-id"],htmlRole:[1,"html-role"],status:[513],disabled:[516]}]);function l(){if(typeof customElements==="undefined"){return}const s=["z-input-message","z-icon"];s.forEach((s=>{switch(s){case"z-input-message":if(!customElements.get(e(s))){customElements.define(e(s),n)}break;case"z-icon":if(!customElements.get(e(s))){o()}break}}))}export{n as Z,l as d};
+//# sourceMappingURL=p-CdBqnUF6.js.map

package/dist/components/{index7.js.map → p-CdBqnUF6.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZInputMessage","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlId","randomId","htmlRole","statusIcons","success","error","warning","render","h","Host","key","role","message","status","undefined","id","name","innerHTML"],"sources":["src/components/z-input-message/styles.css?tag=z-input-message&encapsulation=shadow","src/components/z-input-message/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  min-height: calc(var(--space-unit) * 2.5);\n  align-items: start;\n  margin-top: var(--space-unit);\n  color: var(--color-default-text);\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n}\n\n:host(.small),\n:host(.x-small) {\n  margin-top: calc(var(--space-unit) * 0.5);\n  font-size: var(--font-size-1);\n}\n\n:host([status=\"success\"]) {\n  color: var(--color-hover-success);\n}\n\n:host([status=\"error\"]) {\n  color: var(--color-hover-error);\n}\n\n:host([status=\"warning\"]) {\n  color: var(--color-hover-warning);\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n:host > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n  --z-icon-right-margin: var(--space-unit);\n\n  margin-top: calc(var(--space-unit) * 0.25);\n}\n\n:host(.small) > z-icon,\n:host(.x-small) > z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n  --z-icon-right-margin: calc(var(--space-unit) * 0.5);\n}\n\n:host([disabled]) {\n  color: var(--color-disabled03);\n  fill: var(--color-disabled03);\n}\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-input-message\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInputMessage implements ComponentInterface {\n  /** input helper message */\n  @Prop()\n  message: string;\n\n  /** the id of the message element (optional) */\n  @Prop()\n  htmlId? = `id-${randomId()}`;\n\n  /** the role to set when both the message and the status are populated (optional) */\n  @Prop()\n  htmlRole: null | string = \"alert\";\n\n  /** input status (optional) */\n  @Prop({reflect: true})\n  status?: InputStatus;\n\n  /** input disabled status (optional) */\n  @Prop({reflect: true})\n  disabled?: boolean;\n\n  private statusIcons = {\n    success: \"checkmark-circle\",\n    error: \"multiply-circled\",\n    warning: \"exclamation-circle\",\n  };\n\n  render(): HTMLZInputMessageElement {\n    return (\n      <Host\n        role={this.htmlRole && this.message && this.status ? this.htmlRole : undefined}\n        id={this.htmlId}\n      >\n        {this.statusIcons[this.status] && this.message && <z-icon name={this.statusIcons[this.status]}></z-icon>}\n        <span innerHTML={this.message} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"sLAAA,MAAMA,EAAY,IAAM,+6B,MCSXC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,kEAYEC,KAAAC,OAAU,MAAMC,MAIhBF,KAAAG,SAA0B,QAUlBH,KAAAI,YAAc,CACpBC,QAAS,mBACTC,MAAO,mBACPC,QAAS,qBAcZ,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAMZ,KAAKG,UAAYH,KAAKa,SAAWb,KAAKc,OAASd,KAAKG,SAAWY,UACrEC,GAAIhB,KAAKC,QAERD,KAAKI,YAAYJ,KAAKc,SAAWd,KAAKa,SAAWJ,EAAA,UAAAE,IAAA,2CAAQM,KAAMjB,KAAKI,YAAYJ,KAAKc,UACtFL,EAAA,QAAAE,IAAA,2CAAMO,UAAWlB,KAAKa,U","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZInputMessage","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlId","randomId","htmlRole","statusIcons","success","error","warning","render","h","Host","key","role","message","status","undefined","id","name","innerHTML"],"sources":["src/components/z-input-message/styles.css?tag=z-input-message&encapsulation=shadow","src/components/z-input-message/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  min-height: calc(var(--space-unit) * 2.5);\n  align-items: start;\n  margin-top: var(--space-unit);\n  color: var(--color-default-text);\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n}\n\n:host(.small),\n:host(.x-small) {\n  margin-top: calc(var(--space-unit) * 0.5);\n  font-size: var(--font-size-1);\n}\n\n:host([status=\"success\"]) {\n  color: var(--color-hover-success);\n}\n\n:host([status=\"error\"]) {\n  color: var(--color-hover-error);\n}\n\n:host([status=\"warning\"]) {\n  color: var(--color-hover-warning);\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n:host > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n  --z-icon-right-margin: var(--space-unit);\n\n  margin-top: calc(var(--space-unit) * 0.25);\n}\n\n:host(.small) > z-icon,\n:host(.x-small) > z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n  --z-icon-right-margin: calc(var(--space-unit) * 0.5);\n}\n\n:host([disabled]) {\n  color: var(--color-disabled03);\n  fill: var(--color-disabled03);\n}\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-input-message\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInputMessage implements ComponentInterface {\n  /** input helper message */\n  @Prop()\n  message: string;\n\n  /** the id of the message element (optional) */\n  @Prop()\n  htmlId? = `id-${randomId()}`;\n\n  /** the role to set when both the message and the status are populated (optional) */\n  @Prop()\n  htmlRole: null | string = \"alert\";\n\n  /** input status (optional) */\n  @Prop({reflect: true})\n  status?: InputStatus;\n\n  /** input disabled status (optional) */\n  @Prop({reflect: true})\n  disabled?: boolean;\n\n  private statusIcons = {\n    success: \"checkmark-circle\",\n    error: \"multiply-circled\",\n    warning: \"exclamation-circle\",\n  };\n\n  render(): HTMLZInputMessageElement {\n    return (\n      <Host\n        role={this.htmlRole && this.message && this.status ? this.htmlRole : undefined}\n        id={this.htmlId}\n      >\n        {this.statusIcons[this.status] && this.message && <z-icon name={this.statusIcons[this.status]}></z-icon>}\n        <span innerHTML={this.message} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAAY,IAAM,+6B,MCSXC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,kEAYEC,KAAAC,OAAU,MAAMC,MAIhBF,KAAAG,SAA0B,QAUlBH,KAAAI,YAAc,CACpBC,QAAS,mBACTC,MAAO,mBACPC,QAAS,qBAcZ,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAMZ,KAAKG,UAAYH,KAAKa,SAAWb,KAAKc,OAASd,KAAKG,SAAWY,UACrEC,GAAIhB,KAAKC,QAERD,KAAKI,YAAYJ,KAAKc,SAAWd,KAAKa,SAAWJ,EAAA,UAAAE,IAAA,2CAAQM,KAAMjB,KAAKI,YAAYJ,KAAKc,UACtFL,EAAA,QAAAE,IAAA,2CAAMO,UAAWlB,KAAKa,U","ignoreList":[]}

package/dist/components/p-Ch6o4_VN.js

@@ -0,0 +1,2 @@
+import{p as e,H as o,c as t,h as s,t as r}from"./p-RmbDDbWd.js";import{P as p}from"./p-DdetsoIY.js";import{d as a}from"./p-D8wde41u.js";const i=()=>`:host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-default-text);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));--z-tooltip-padding:var(--space-unit)}z-popover{--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-padding:var(--z-tooltip-padding);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}`;const n=e(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.openChange=t(this,"openChange",7);this.position=p.AUTO;this.dark=false;this.open=false;this.closable=true}onPopoverOpenChange(){this.open=this.popoverEl.open}render(){return s("z-popover",{key:"09052c0c35b449590b0abfcd7e2816253814cc57",ref:e=>this.popoverEl=e,bindTo:this.bindTo,open:this.open,position:this.position,closable:this.closable,center:true,showArrow:true,onOpenChange:e=>this.openChange.emit(e.detail)},s("slot",{key:"1d4e6d0108724f8bc77bb6faf17b3938aa77d519"}))}static get style(){return i()}},[257,"z-tooltip",{position:[513],dark:[516],open:[1540],bindTo:[1,"bind-to"],closable:[4]},[[0,"openChange","onPopoverOpenChange"]]]);function h(){if(typeof customElements==="undefined"){return}const e=["z-tooltip","z-popover"];e.forEach((e=>{switch(e){case"z-tooltip":if(!customElements.get(r(e))){customElements.define(r(e),n)}break;case"z-popover":if(!customElements.get(r(e))){a()}break}}))}export{n as Z,h as d};
+//# sourceMappingURL=p-Ch6o4_VN.js.map

package/dist/components/{index21.js.map → p-Ch6o4_VN.js.map}

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