@zanichelli/albe-web-components 17.0.5-RC2 → 17.0.5

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

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZAppHeaderDeprecatedStyle0","SUPPORT_INTERSECTION_OBSERVER","IntersectionObserver","ZAppHeaderDeprecated","constructor","hostRef","this","observer","entry","_stuck","isIntersecting","threshold","openDrawer","bind","closeDrawer","collectMenuElements","evaluateViewport","window","innerWidth","currentViewport","onStuck","scrollParent","sticking","emit","setMenuFloatingMode","menuElements","length","elements","forEach","element","open","floating","drawerOpen","verticalContext","title","titleElement","hostElement","querySelector","textContent","trim","parent","offsetParent","document","body","documentElement","canShowMenu","flow","canShowSearchbar","enableSearch","searchPageUrl","hasHero","hero","querySelectorAll","menuLength","enableStuckObserver","observe","container","disableStuckMode","unobserve","onStuckMode","stuck","renderSearchLinkButton","h","class","variant","ButtonVariant","SECONDARY","href","icon","size","ControlSize","X_SMALL","renderSeachbar","searchButtonIconOnly","value","searchString","placeholder","searchPlaceholder","showSearchButton","preventSubmit","onSearchTyping","e","detail","componentDidLoad","render","Host","key","name","alt","src","ref","el","onClick","onSlotchange","OffCanvasVariant","OVERLAY","transitiondirection","TransitionDirection","RIGHT","onCanvasOpenStatusChanged","ev","slot","disabled"],"sources":["src/components/deprecated/z-app-header-deprecated/styles.css?tag=z-app-header-deprecated&encapsulation=shadow","src/components/deprecated/z-app-header-deprecated/index.tsx"],"sourcesContent":[":host {\n  --app-header-typography-1-size: 24px;\n  --app-header-typography-2-size: 28px;\n  --app-header-typography-3-size: 32px;\n  --app-header-typography-4-size: 36px;\n  --app-header-typography-5-size: 42px;\n  --app-header-typography-6-size: 48px;\n  --app-header-typography-7-size: 54px;\n  --app-header-typography-8-size: 60px;\n  --app-header-typography-9-size: 68px;\n  --app-header-typography-10-size: 76px;\n  --app-header-typography-11-size: 84px;\n  --app-header-typography-12-size: 92px;\n  --app-header-typography-1-lineheight: 1.33;\n  --app-header-typography-2-lineheight: 1.29;\n  --app-header-typography-3-lineheight: 1.25;\n  --app-header-typography-4-lineheight: 1.24;\n  --app-header-typography-5-lineheight: 1.24;\n  --app-header-typography-6-lineheight: 1.25;\n  --app-header-typography-7-lineheight: 1.2;\n  --app-header-typography-8-lineheight: 1.26;\n  --app-header-typography-9-lineheight: 1.24;\n  --app-header-typography-10-lineheight: 1.26;\n  --app-header-typography-11-lineheight: 1.2;\n  --app-header-typography-12-lineheight: 1.2;\n  --app-header-typography-1-tracking: calc(-0.2 / 1em);\n  --app-header-typography-2-tracking: calc(-0.4 / 1em);\n  --app-header-typography-3-tracking: calc(-0.6 / 1em);\n  --app-header-typography-4-tracking: calc(-0.8 / 1em);\n  --app-header-typography-5-tracking: calc(-1 / 1em);\n  --app-header-typography-6-tracking: calc(-1.2 / 1em);\n  --app-header-typography-7-tracking: calc(-1.4 / 1em);\n  --app-header-typography-8-tracking: calc(-1.6 / 1em);\n  --app-header-typography-9-tracking: calc(-1.8 / 1em);\n  --app-header-typography-10-tracking: calc(-2 / 1em);\n  --app-header-typography-11-tracking: calc(-2.2 / 1em);\n  --app-header-typography-12-tracking: calc(-2.4 / 1em);\n  --app-header-content-max-width: 100%;\n  --app-header-height: auto;\n\n  /* Variable to set stuck header and drawer's top offset.\n  Useful when something is absolutely positioned above the header. */\n  --app-header-top-offset: 48px;\n  --app-header-drawer-trigger-size: calc(var(--space-unit) * 4);\n\n  /* Variable to customize header background color. */\n  --app-header-bg: var(--color-surface01);\n\n  /* Variable to customize stuck header background color. */\n  --app-header-stucked-bg: var(--color-surface01);\n\n  /* Variable to customize text and icon color. */\n  --app-header-text-color: var(--color-default-text);\n\n  /* Variable to customize the title's font size.\n  NOTE: Only use one of the exported `--app-header-typography-*-size` as a value. */\n  --app-header-title-font-size: var(--app-header-typography-3-size);\n\n  /* Variable to customize the title's line-height.\n  NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value\n  and use the same level as the one of the font size. */\n  --app-header-title-lineheight: var(--app-header-typography-3-lineheight);\n\n  /* Variable to customize the title's letter-spacing.\n  NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value\n  and use the same level as the one of the font size. */\n  --app-header-title-letter-spacing: var(--app-header-typography-3-tracking);\n\n  /* Variable to customize stuck header's text and icon color. */\n  --app-header-stucked-text-color: var(--color-default-text);\n\n  position: relative;\n  display: block;\n  height: var(--app-header-height);\n  color: var(--app-header-text-color);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n.heading-panel {\n  position: relative;\n  display: flex;\n  width: 100%;\n  max-width: var(--app-header-content-max-width);\n  flex-direction: column;\n  flex-grow: 0;\n  flex-shrink: 0;\n  align-items: baseline;\n  padding: var(--grid-margin);\n  margin: 0 auto;\n  background: var(--app-header-bg);\n  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n}\n\n.hero-container + .heading-panel {\n  background: transparent;\n}\n\n:host(:empty) .heading-panel {\n  padding: 0;\n}\n\n.heading-container {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n\n.heading-title {\n  display: flex;\n  max-width: 100%;\n  flex-direction: row;\n  align-items: flex-start;\n  column-gap: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"title\"]),\n.heading-stuck .heading-title > *,\n::slotted([slot=\"stucked-title\"]) {\n  margin: 0;\n  font-family: \"IBM Plex Serif\", serif;\n  font-weight: var(--font-bd);\n}\n\n::slotted([slot=\"title\"]) {\n  font-size: var(--app-header-title-font-size);\n  letter-spacing: var(--app-header-title-letter-spacing);\n  line-height: var(--app-header-title-lineheight);\n}\n\n.heading-stuck .heading-title > *,\n::slotted([slot=\"stucked-title\"]) {\n  font-size: var(--app-header-typography-3-size);\n  letter-spacing: var(--app-header-typography-3-tracking);\n  line-height: var(--app-header-typography-3-lineheight);\n}\n\n:host(:not([menu-length=\"0\"])) .heading-subtitle {\n  padding-left: calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2));\n}\n\n::slotted([slot=\"top-subtitle\"]),\n::slotted([slot=\"subtitle\"]) {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-size: 20px;\n  font-style: italic;\n  line-height: 26px;\n}\n\n::slotted([slot=\"subtitle\"]) {\n  font-weight: 500;\n}\n\n::slotted([slot=\"top-subtitle\"]) {\n  font-weight: 400;\n}\n\n.menu-container {\n  display: flex;\n  width: 100%;\n  flex: 1 auto;\n  flex-flow: row wrap;\n}\n\n:host([menu-length=\"0\"]:not([enable-search])) .menu-container,\n.menu-container:empty {\n  display: none;\n}\n\n.menu-container ::slotted([open]) {\n  position: relative;\n  z-index: 3;\n}\n\nz-searchbar {\n  z-index: 0;\n  display: flex;\n  width: auto;\n  min-width: calc(var(--space-unit) * 32);\n  flex: 1 auto;\n  align-items: center;\n  margin-left: auto;\n}\n\n.heading-stuck {\n  position: fixed;\n  z-index: 20;\n  top: var(--app-header-top-offset);\n  left: 0;\n  width: 100%;\n  max-width: 100%;\n  animation: slide-stuck-heading-in 250ms ease-out;\n  background: var(--app-header-stucked-bg);\n  box-shadow: var(--shadow-2);\n  color: var(--app-header-stucked-text-color);\n}\n\n.heading-stuck-content {\n  display: flex;\n  max-width: var(--app-header-content-max-width);\n  align-items: center;\n  padding: var(--space-unit) var(--grid-margin);\n  margin: 0 auto;\n  column-gap: calc(var(--space-unit) * 2);\n}\n\n.heading-stuck .heading-title {\n  overflow: hidden;\n}\n\n.heading-stuck .heading-title > *,\n.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]) {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.heading-stuck-content z-button {\n  margin-left: auto;\n}\n\n.drawer-trigger {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  appearance: none;\n  background: none;\n  border-radius: 0;\n  color: inherit;\n  cursor: pointer;\n}\n\n.drawer-trigger z-icon {\n  --z-icon-width: var(--app-header-drawer-trigger-size);\n  --z-icon-height: var(--app-header-drawer-trigger-size);\n\n  fill: currentcolor;\n}\n\n/* Simulate the height of the first line of text,\nto correctly align drawer icon and search page button with the title */\n.heading-container :is(.drawer-trigger, z-button.search-page-button) {\n  display: flex;\n  height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));\n  align-items: center;\n}\n\n.heading-container z-button.search-page-button {\n  margin-left: auto;\n}\n\n.drawer-content {\n  display: none;\n}\n\nz-offcanvas[open] .drawer-content {\n  display: flex;\n  width: 100%;\n  flex: 1 auto;\n  flex-direction: column;\n  row-gap: calc(var(--space-unit) * 2.5);\n}\n\nz-offcanvas[open] .drawer-content ::slotted(z-menu) {\n  width: 100%;\n}\n\n.drawer-close {\n  --z-icon-width: var(--app-header-drawer-trigger-size);\n  --z-icon-height: var(--app-header-drawer-trigger-size);\n\n  padding: 0;\n  border: 0;\n  margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);\n  appearance: none;\n  background: transparent;\n  border-radius: 0;\n  color: inherit;\n  cursor: pointer;\n  fill: currentcolor;\n  font-size: inherit;\n  outline: none;\n}\n\n.drawer-close:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.hero-container {\n  position: absolute;\n  z-index: 0;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n:host([overlay]) .heading-panel .drawer-trigger z-icon,\n:host([overlay]) .heading-panel .heading-container,\n:host([overlay]) .heading-panel .menu-container {\n  color: var(--color-white);\n  fill: var(--color-white);\n}\n\n:host([overlay]) .heading-panel .menu-container ::slotted(z-menu) {\n  --z-menu-label-color: var(--color-white);\n}\n\n:host([overlay]) .hero-container::after {\n  position: absolute;\n  z-index: 0;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--color-black);\n  content: \"\";\n  opacity: 0.5;\n}\n\n.hero-container img,\n.hero-container ::slotted(*) {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: top center;\n  -webkit-user-drag: none;\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  :host {\n    --app-header-title-font-size: var(--app-header-typography-6-size);\n    --app-header-title-lineheight: var(--app-header-typography-6-lineheight);\n    --app-header-title-letter-spacing: var(--app-header-typography-6-tracking);\n  }\n\n  .heading-panel {\n    flex-flow: row wrap;\n    align-items: center;\n    padding-bottom: calc(var(--space-unit) * 2);\n  }\n\n  .heading-container {\n    margin-right: auto;\n  }\n\n  :host(:is([flow=\"offcanvas\"], [menu-length=\"0\"])) :is(.heading-container, .menu-container) {\n    width: auto;\n  }\n\n  :host(:not([flow=\"offcanvas\"])) .heading-subtitle {\n    padding-left: 0;\n  }\n\n  .menu-container {\n    flex: initial;\n    align-items: center;\n  }\n\n  :host([menu-length=\"0\"]) .menu-container:not(:empty) {\n    height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));\n  }\n\n  :host(:not([flow=\"offcanvas\"])) .menu-container {\n    gap: var(--space-unit) calc(var(--space-unit) * 5);\n  }\n\n  :host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger {\n    display: none;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host {\n    --app-header-title-font-size: var(--app-header-typography-7-size);\n    --app-header-title-lineheight: var(--app-header-typography-7-lineheight);\n    --app-header-title-letter-spacing: var(--app-header-typography-7-tracking);\n  }\n\n  .heading-panel {\n    justify-content: flex-start;\n    padding-bottom: calc(var(--space-unit) * 3);\n  }\n\n  .heading-container,\n  .menu-container {\n    width: auto;\n  }\n\n  :host([flow=\"stack\"]) .heading-panel {\n    flex-flow: column;\n    align-items: flex-start;\n  }\n\n  :host([flow=\"stack\"]) .menu-container {\n    width: 100%;\n  }\n\n  :host(:not([flow=\"offcanvas\"], [menu-length=\"0\"])) .heading-panel {\n    row-gap: calc(var(--space-unit) * 3);\n  }\n\n  z-searchbar {\n    min-width: calc(var(--space-unit) * 45);\n    flex: initial;\n  }\n}\n\n/* Wide breakpoint */\n@media (min-width: 1366px) {\n  :host {\n    --app-header-title-font-size: var(--app-header-typography-9-size);\n    --app-header-title-lineheight: var(--app-header-typography-9-lineheight);\n    --app-header-title-letter-spacing: var(--app-header-typography-9-tracking);\n  }\n}\n\n@keyframes slide-stuck-heading-in {\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n\n  100% {\n    transform: none;\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, OffCanvasVariant, TransitionDirection} from \"../../../beans\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/**\n * @slot title - Slot for the main title\n * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.\n * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.\n * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.\n * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.\n * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.\n * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.\n * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.\n * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.\n * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.\n * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.\n * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.\n * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.\n * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.\n * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.\n * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.\n * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.\n * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.\n * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.\n * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.\n * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.\n * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.\n * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.\n * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.\n * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.\n * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.\n * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.\n * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n * @cssprop --app-header-height - Defaults to `auto`.\n * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.\n * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.\n * @cssprop --app-header-title-font-size - Variable to customize the title's font size.\n * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.\n * Defaults to `--app-header-typography-3-size`.\n * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.\n * NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size.\n * Defaults to `--app-header-typography-3-lineheight`.\n * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.\n * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.\n * Defaults to `--app-header-typography-3-tracking`.\n * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.\n */\n@Component({\n  tag: \"z-app-header-deprecated\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAppHeaderDeprecated {\n  @Element() hostElement: HTMLZAppHeaderDeprecatedElement;\n\n  /**\n   * Stuck mode for the header.\n   * You can programmatically set it using an IntersectionObserver.\n   */\n  @Prop({reflect: true})\n  stuck = false;\n\n  /**\n   * Set the hero image source for the header.\n   * You can also use a [slot=\"hero\"] node for advanced customization.\n   */\n  @Prop()\n  hero: string;\n\n  /**\n   * Should place an overlay over the hero image.\n   * Useful for legibility purpose.\n   */\n  @Prop({reflect: true})\n  overlay = false;\n\n  /**\n   * Control menu bar position in the header.\n   * - auto: the menu bar is positioned near the title\n   * - stack: the menu bar is positioned below the title\n   * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu\n   */\n  @Prop({reflect: true})\n  flow: \"auto\" | \"stack\" | \"offcanvas\" = \"auto\";\n\n  /**\n   * The opening state of the drawer.\n   */\n  @Prop({reflect: true})\n  drawerOpen = false;\n\n  /**\n   * Enable the search bar.\n   */\n  @Prop({reflect: true})\n  enableSearch = false;\n\n  /**\n   * Placeholder text for the search bar.\n   */\n  @Prop()\n  searchPlaceholder = \"Cerca\";\n\n  /**\n   * Search string for the search bar.\n   */\n  @Prop({mutable: true})\n  searchString = \"\";\n\n  /**\n   * Url to the search page.\n   * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n   * The link will also appear on the sticky header.\n   */\n  @Prop()\n  searchPageUrl: string;\n\n  /**\n   * The stuck state of the bar.\n   */\n  @State()\n  private _stuck = false;\n\n  /**\n   * Current viewport.\n   * Used to change the aspect of the search button (icon only) on mobile and tablet.\n   */\n  @State()\n  private currentViewport: \"mobile\" | \"tablet\" | \"desktop\" = \"mobile\";\n\n  /**\n   * Current count of menu items.\n   */\n  @State()\n  menuLength: number;\n\n  /**\n   * Emitted when the `stuck` state of the header changes\n   */\n  @Event()\n  sticking: EventEmitter;\n\n  private container?: HTMLDivElement;\n\n  private menuElements?: NodeListOf<HTMLElement>;\n\n  private observer?: IntersectionObserver =\n    SUPPORT_INTERSECTION_OBSERVER &&\n    new IntersectionObserver(\n      ([entry]) => {\n        this._stuck = !entry.isIntersecting;\n      },\n      {\n        threshold: 0.5,\n      }\n    );\n\n  constructor() {\n    this.openDrawer = this.openDrawer.bind(this);\n    this.closeDrawer = this.closeDrawer.bind(this);\n    this.collectMenuElements = this.collectMenuElements.bind(this);\n  }\n\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  evaluateViewport(): void {\n    if (window.innerWidth < 768) {\n      this.currentViewport = \"mobile\";\n    } else if (window.innerWidth >= 768 && window.innerWidth < 1152) {\n      this.currentViewport = \"tablet\";\n    } else {\n      this.currentViewport = \"desktop\";\n    }\n  }\n\n  @Watch(\"_stuck\")\n  onStuck(): void {\n    const scrollParent = this.scrollParent;\n    if (!scrollParent) {\n      return;\n    }\n\n    this.sticking.emit(this._stuck);\n  }\n\n  @Watch(\"drawerOpen\")\n  setMenuFloatingMode(): void {\n    if (this.menuElements.length === 0) {\n      return;\n    }\n\n    const elements = this.menuElements;\n    elements.forEach((element) => {\n      (element as HTMLZMenuDeprecatedElement).open = false;\n      (element as HTMLZMenuDeprecatedElement).floating = !this.drawerOpen;\n      (element as HTMLZMenuDeprecatedElement).verticalContext = this.drawerOpen;\n    });\n  }\n\n  private get title(): string {\n    const titleElement = this.hostElement.querySelector('[slot=\"title\"]');\n    if (titleElement === null) {\n      return \"\";\n    }\n\n    return titleElement.textContent.trim();\n  }\n\n  private get scrollParent(): Window | Element {\n    const parent = this.hostElement.offsetParent;\n    if (parent === document.body || parent === document.documentElement) {\n      return window;\n    }\n\n    return parent;\n  }\n\n  private get canShowMenu(): boolean {\n    return this.flow !== \"offcanvas\" && this.currentViewport !== \"mobile\" && !this.drawerOpen;\n  }\n\n  private get canShowSearchbar(): boolean {\n    if (!this.enableSearch) {\n      return false;\n    }\n\n    // Always show the searchbar on desktop, even if a searchPageUrl is set\n    if (this.searchPageUrl) {\n      return this.currentViewport === \"desktop\";\n    }\n\n    return true;\n  }\n\n  /**\n   * Whether the header has a hero image, either as a prop or as a slot.\n   */\n  private get hasHero(): boolean {\n    return !!this.hero || this.hostElement.querySelector(\"[slot=hero]\") !== null;\n  }\n\n  private openDrawer(): void {\n    this.drawerOpen = true;\n  }\n\n  private closeDrawer(): void {\n    this.drawerOpen = false;\n  }\n\n  private collectMenuElements(): void {\n    const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n    this.menuLength = menuElements.length;\n    this.setMenuFloatingMode();\n  }\n\n  private enableStuckObserver(): void {\n    if (this.observer) {\n      this.observer.observe(this.container);\n    }\n  }\n\n  private disableStuckMode(): void {\n    this._stuck = false;\n    if (this.observer) {\n      this.observer.unobserve(this.container);\n    }\n  }\n\n  @Watch(\"stuck\")\n  onStuckMode(): void {\n    if (this.stuck) {\n      this.enableStuckObserver();\n    } else {\n      this.disableStuckMode();\n    }\n  }\n\n  private renderSearchLinkButton(): HTMLZButtonElement | null {\n    if (!this.enableSearch || !this.searchPageUrl || this.currentViewport === \"desktop\") {\n      return null;\n    }\n\n    return (\n      <z-button\n        class=\"search-page-button\"\n        variant={ButtonVariant.SECONDARY}\n        href={this.searchPageUrl}\n        icon=\"search\"\n        size={ControlSize.X_SMALL}\n      ></z-button>\n    );\n  }\n\n  private renderSeachbar(searchButtonIconOnly: boolean): HTMLZSearchbarElement {\n    return (\n      <z-searchbar\n        value={this.searchString}\n        placeholder={this.searchPlaceholder}\n        showSearchButton={true}\n        searchButtonIconOnly={searchButtonIconOnly}\n        size={ControlSize.X_SMALL}\n        variant={ButtonVariant.SECONDARY}\n        preventSubmit={this.searchString.length < 3}\n        onSearchTyping={(e) => (this.searchString = e.detail)}\n      />\n    );\n  }\n\n  componentDidLoad(): void {\n    this.collectMenuElements();\n    this.onStuckMode();\n    this.evaluateViewport();\n  }\n\n  render(): HTMLZAppHeaderElement {\n    return (\n      <Host menu-length={this.menuLength}>\n        {this.hasHero && (\n          <div class=\"hero-container\">\n            <slot name=\"hero\">\n              {this.hero && (\n                <img\n                  alt=\"\"\n                  src={this.hero}\n                />\n              )}\n            </slot>\n          </div>\n        )}\n\n        <div\n          class=\"heading-panel\"\n          ref={(el) => (this.container = el)}\n        >\n          <div class=\"heading-container\">\n            <div class=\"heading-subtitle\">\n              <slot name=\"top-subtitle\"></slot>\n            </div>\n            <div class=\"heading-title\">\n              {this.menuLength > 0 && (\n                <button\n                  class=\"drawer-trigger\"\n                  aria-label=\"Apri menu\"\n                  onClick={this.openDrawer}\n                >\n                  <z-icon name=\"burger-menu\"></z-icon>\n                </button>\n              )}\n\n              <slot name=\"title\"></slot>\n\n              {this.renderSearchLinkButton()}\n            </div>\n\n            <div class=\"heading-subtitle\">\n              <slot name=\"subtitle\"></slot>\n            </div>\n          </div>\n\n          {(this.canShowMenu || this.canShowSearchbar) && (\n            <div class=\"menu-container\">\n              {this.canShowMenu && (\n                <slot\n                  name=\"menu\"\n                  onSlotchange={this.collectMenuElements}\n                ></slot>\n              )}\n\n              {this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== \"desktop\")}\n            </div>\n          )}\n        </div>\n\n        <z-offcanvas\n          variant={OffCanvasVariant.OVERLAY}\n          transitiondirection={TransitionDirection.RIGHT}\n          open={this.drawerOpen}\n          onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n        >\n          <button\n            class=\"drawer-close\"\n            aria-label=\"Chiudi menu\"\n            onClick={this.closeDrawer}\n            slot=\"canvasContent\"\n            aria-hidden={`${!this.drawerOpen}`}\n            disabled={!this.drawerOpen}\n          >\n            <z-icon name=\"close\"></z-icon>\n          </button>\n\n          <div\n            class=\"drawer-content\"\n            slot=\"canvasContent\"\n            aria-hidden={`${!this.drawerOpen}`}\n          >\n            <slot\n              name=\"menu\"\n              onSlotchange={this.collectMenuElements}\n            ></slot>\n          </div>\n        </z-offcanvas>\n\n        {this._stuck && (\n          <div class=\"heading-stuck\">\n            <div class=\"heading-stuck-content\">\n              {this.menuLength > 0 && (\n                <button\n                  class=\"drawer-trigger\"\n                  aria-label=\"Apri menu\"\n                  onClick={this.openDrawer}\n                >\n                  <z-icon name=\"burger-menu\"></z-icon>\n                </button>\n              )}\n\n              <div class=\"heading-title\">\n                <slot name=\"stucked-title\">{this.title}</slot>\n              </div>\n\n              {this.renderSearchLinkButton()}\n              {this.canShowSearchbar && this.currentViewport === \"desktop\" && this.renderSeachbar(false)}\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/web-components-library/p-2aeb2a94.entry.js

@@ -0,0 +1,2 @@
+export{Z as z_tfoot}from"./p-c13ef624.js";import"./p-75c4a726.js";
+//# sourceMappingURL=p-2aeb2a94.entry.js.map

package/dist/web-components-library/p-2c450113.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,a as o,g as r}from"./p-75c4a726.js";import{J as a,M as i}from"./p-b34993de.js";const n=':host{--cover-hero-overlay:linear-gradient(270deg, #0000 0%, #000000e6 100%);--cover-hero-text-color:var(--color-text-inverse);display:block;overflow:hidden}:host,*{box-sizing:border-box}:host .main-container{position:relative;width:100%;align-items:baseline}:host .content-container{color:var(--cover-hero-text-color);fill:var(--cover-hero-text-color)}:host .main-container .cover-container{position:relative;width:100%;padding-top:calc(100% / (var(--cover-hero-aspect-ratio, var(--image-aspect-ratio, 16/9))));background-color:var(--gray600)}::slotted([slot="cover"]){position:absolute;display:block;width:100%;height:100%;inset:0;object-fit:cover;object-position:top center}::slotted(z-info-reveal){position:absolute;z-index:1;right:var(--grid-margin);bottom:var(--grid-margin)}:host([variant="overlay"]:not([preserve-aspect-ratio=""],[preserve-aspect-ratio="true"])) .main-container{height:100%}:host([variant="overlay"]:not([preserve-aspect-ratio=""],[preserve-aspect-ratio="true"])) .main-container .cover-container{position:absolute;z-index:-1;height:100%;padding:0}:host([variant="overlay"]) .main-container .cover-container::after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--cover-hero-overlay);content:""}:host([variant="overlay"]:is([preserve-aspect-ratio=""],[preserve-aspect-ratio="true"])) .main-container .content-container{position:absolute;inset:0}:host([variant="overlay"]) .main-container .content-container{height:100%;padding:var(--grid-margin)}:host([variant="stacked"]){--cover-hero-text-color:var(--color-default-text)}:host([variant="stacked"]) .content-container ::slotted(*){padding:var(--grid-margin) 0}';const c=n;const s=class{constructor(e){t(this,e);this.variant=a.OVERLAY;this.contentPosition=i.TOP;this.preserveAspectRatio=true}onImgLoad({target:t}){if(t instanceof Image&&t.closest("[slot=cover]")){const e=t.naturalWidth/t.naturalHeight;this.host.style.setProperty("--image-aspect-ratio",e.toString())}}renderContent(){return e("div",{class:"content-container"},e("slot",{name:"content"}))}render(){return e(o,{key:"15c2c9a401700c3503e74f74637c2cbf3b474805"},this.variant===a.STACKED&&this.contentPosition===i.TOP&&this.renderContent(),e("div",{key:"269c88ee41679ea7730c202f4ca927a1868c5506",class:"main-container"},e("div",{key:"67b039d0ba87fdb8a3520035104d9c6263ca5dc1",class:"cover-container"},e("slot",{key:"3c330cafa143f57e9b4d6615d966c4d62cedd9c8",name:"cover"})),e("slot",{key:"c092503e4d24f52535182e570edb67428d7a8aa9",name:"info-reveal"}),this.variant===a.OVERLAY&&this.renderContent()),this.variant===a.STACKED&&this.contentPosition===i.BOTTOM&&this.renderContent())}get host(){return r(this)}};s.style=c;export{s as z_cover_hero};
+//# sourceMappingURL=p-2c450113.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZCoverHeroStyle0","ZCoverHero","CoverHeroVariant","OVERLAY","CoverHeroContentPosition","TOP","onImgLoad","target","Image","closest","ratio","naturalWidth","naturalHeight","this","host","style","setProperty","toString","renderContent","h","class","name","render","Host","key","variant","STACKED","contentPosition","BOTTOM"],"sources":["src/components/z-cover-hero/styles.css?tag=z-cover-hero&encapsulation=shadow","src/components/z-cover-hero/index.tsx"],"sourcesContent":[":host {\n  --cover-hero-overlay: linear-gradient(270deg, #0000 0%, #000000e6 100%);\n  --cover-hero-text-color: var(--color-text-inverse);\n  --cover-hero-aspect-ratio: ;\n\n  display: block;\n  overflow: hidden;\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n:host .main-container {\n  position: relative;\n  width: 100%;\n  align-items: baseline;\n}\n\n:host .content-container {\n  color: var(--cover-hero-text-color);\n  fill: var(--cover-hero-text-color);\n}\n\n:host .main-container .cover-container {\n  position: relative;\n  width: 100%;\n  padding-top: calc(100% / (var(--cover-hero-aspect-ratio, var(--image-aspect-ratio, 16/9))));\n  background-color: var(--gray600);\n}\n\n::slotted([slot=\"cover\"]) {\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n  inset: 0;\n  object-fit: cover;\n  object-position: top center;\n}\n\n::slotted(z-info-reveal) {\n  position: absolute;\n  z-index: 1;\n  right: var(--grid-margin);\n  bottom: var(--grid-margin);\n}\n\n/* Variant overlay */\n:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"], [preserve-aspect-ratio=\"true\"])) .main-container {\n  height: 100%;\n}\n\n:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"], [preserve-aspect-ratio=\"true\"]))\n  .main-container\n  .cover-container {\n  position: absolute;\n  z-index: -1;\n  height: 100%;\n  padding: 0;\n}\n\n:host([variant=\"overlay\"]) .main-container .cover-container::after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--cover-hero-overlay);\n  content: \"\";\n}\n\n:host([variant=\"overlay\"]:is([preserve-aspect-ratio=\"\"], [preserve-aspect-ratio=\"true\"]))\n  .main-container\n  .content-container {\n  position: absolute;\n  inset: 0;\n}\n\n:host([variant=\"overlay\"]) .main-container .content-container {\n  height: 100%;\n  padding: var(--grid-margin);\n}\n\n/* Variant stacked */\n:host([variant=\"stacked\"]) {\n  --cover-hero-text-color: var(--color-default-text);\n}\n\n:host([variant=\"stacked\"]) .content-container ::slotted(*) {\n  padding: var(--grid-margin) 0;\n}\n","import {Component, Element, Host, Listen, Prop, h} from \"@stencil/core\";\nimport {CoverHeroContentPosition, CoverHeroVariant} from \"../../beans\";\n\n/**\n * Cover hero component.\n * Component to display a hero image with content.\n *\n * @slot cover - slot for the cover image.\n * @slot content - slot for the content.\n * @slot info-reveal - slot for the info reveal.\n * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.\n * @cssprop --cover-hero-text-color - color of the text.\n * @cssprop --cover-hero-aspect-ratio - aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. **Default**: the intrinsic aspect ratio of the slotted image or `16/9`.\n */\n@Component({\n  tag: \"z-cover-hero\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCoverHero {\n  @Element() host: HTMLZCoverHeroElement;\n\n  /**\n   * Cover hero variant. Can be `OVERLAY` or `STACKED`.\n   */\n  @Prop({reflect: true})\n  variant: CoverHeroVariant = CoverHeroVariant.OVERLAY;\n\n  /**\n   * Vertical content position (for `STACKED` variant).\n   */\n  @Prop({reflect: true})\n  contentPosition: CoverHeroContentPosition = CoverHeroContentPosition.TOP;\n\n  /**\n   * Whether to keep the image aspect ratio.\n   * If set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;\n   * instead, the height of the component follows the content's one.\n   * Note: it may be necessary to set a min and/or max height to the component.\n   */\n  @Prop({reflect: true})\n  preserveAspectRatio = true;\n\n  /**\n   * Store the intrinsic aspect ratio of the slotted image when loaded,\n   * to have a default when `--cover-hero-aspect-ratio` is not set.\n   * @param target The event target\n   */\n  @Listen(\"load\", {capture: true})\n  protected onImgLoad({target}: Event): void {\n    if (target instanceof Image && target.closest(\"[slot=cover]\")) {\n      const ratio = target.naturalWidth / target.naturalHeight;\n      this.host.style.setProperty(\"--image-aspect-ratio\", ratio.toString());\n    }\n  }\n\n  /**\n   * Template for the content.\n   */\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"content-container\">\n        <slot name=\"content\"></slot>\n      </div>\n    );\n  }\n\n  render(): HTMLZCoverHeroElement {\n    return (\n      <Host>\n        {this.variant === CoverHeroVariant.STACKED &&\n          this.contentPosition === CoverHeroContentPosition.TOP &&\n          this.renderContent()}\n        <div class=\"main-container\">\n          <div class=\"cover-container\">\n            <slot name=\"cover\"></slot>\n          </div>\n          <slot name=\"info-reveal\"></slot>\n          {this.variant === CoverHeroVariant.OVERLAY && this.renderContent()}\n        </div>\n        {this.variant === CoverHeroVariant.STACKED &&\n          this.contentPosition === CoverHeroContentPosition.BOTTOM &&\n          this.renderContent()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,6nDAClB,MAAAC,EAAeD,E,MCkBFE,EAAU,M,sCAOOC,EAAiBC,Q,qBAMDC,EAAyBC,I,yBAS/C,I,CAQZ,SAAAC,EAAUC,OAACA,IACnB,GAAIA,aAAkBC,OAASD,EAAOE,QAAQ,gBAAiB,CAC7D,MAAMC,EAAQH,EAAOI,aAAeJ,EAAOK,cAC3CC,KAAKC,KAAKC,MAAMC,YAAY,uBAAwBN,EAAMO,W,EAOtD,aAAAC,GACN,OACEC,EAAA,OAAKC,MAAM,qBACTD,EAAA,QAAME,KAAK,Y,CAKjB,MAAAC,GACE,OACEH,EAACI,EAAI,CAAAC,IAAA,4CACFX,KAAKY,UAAYvB,EAAiBwB,SACjCb,KAAKc,kBAAoBvB,EAAyBC,KAClDQ,KAAKK,gBACPC,EAAA,OAAAK,IAAA,2CAAKJ,MAAM,kBACTD,EAAA,OAAAK,IAAA,2CAAKJ,MAAM,mBACTD,EAAA,QAAAK,IAAA,2CAAMH,KAAK,WAEbF,EAAA,QAAAK,IAAA,2CAAMH,KAAK,gBACVR,KAAKY,UAAYvB,EAAiBC,SAAWU,KAAKK,iBAEpDL,KAAKY,UAAYvB,EAAiBwB,SACjCb,KAAKc,kBAAoBvB,EAAyBwB,QAClDf,KAAKK,gB","ignoreList":[]}

package/dist/web-components-library/p-2dcf53b3.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as t,h as i}from"./p-75c4a726.js";const a=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;padding:calc(var(--space-unit) * 2);background:var(--color-primary03);border-radius:var(--border-radius)}:host>div>slot{color:var(--color-default-text);font-size:14px}:host>div>z-icon{margin-left:calc(var(--space-unit) * 2);cursor:pointer;fill:var(--color-primary01)}";const r=a;const s=class{constructor(i){o(this,i);this.infoBoxClose=t(this,"infoBoxClose",7);this.boxid=undefined;this.isclosable=true}emitInfoBoxClose(){this.infoBoxClose.emit({boxid:this.boxid})}render(){return i("div",{key:"bff4d7fdd01fae2697f23b03515d9cb93a53127d",id:this.boxid},i("slot",{key:"a2d80c39c0cc7c115974a4d5da52c2189ab830c9",name:"content"}),this.isclosable&&i("z-icon",{key:"555579d0bf7c1e654055fe4c552c4e89af0fb513",name:"multiply","data-action":"infoBoxClose",onClick:()=>this.emitInfoBoxClose()}))}};s.style=r;export{s as z_info_box};
+//# sourceMappingURL=p-2dcf53b3.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZInfoBoxStyle0","ZInfoBox","emitInfoBoxClose","this","infoBoxClose","emit","boxid","render","h","key","id","name","isclosable","onClick"],"sources":["src/components/z-info-box/styles.css?tag=z-info-box&encapsulation=shadow","src/components/z-info-box/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  display: flex;\n  width: inherit;\n  padding: calc(var(--space-unit) * 2);\n  background: var(--color-primary03);\n  border-radius: var(--border-radius);\n}\n\n:host > div > slot {\n  color: var(--color-default-text);\n  font-size: 14px;\n}\n\n:host > div > z-icon {\n  margin-left: calc(var(--space-unit) * 2);\n  cursor: pointer;\n  fill: var(--color-primary01);\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n/**\n * @slot content - set the info box content\n */\n@Component({\n  tag: \"z-info-box\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoBox {\n  /** info box unique id */\n  @Prop()\n  boxid: string;\n\n  /** render close icon flag */\n  @Prop()\n  isclosable = true;\n\n  /** emitted on close icon click */\n  @Event()\n  infoBoxClose: EventEmitter;\n\n  private emitInfoBoxClose(): void {\n    this.infoBoxClose.emit({boxid: this.boxid});\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div id={this.boxid}>\n        <slot name=\"content\" />\n        {this.isclosable && (\n          <z-icon\n            name=\"multiply\"\n            data-action=\"infoBoxClose\"\n            onClick={() => this.emitInfoBoxClose()}\n          />\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,wXAClB,MAAAC,EAAeD,E,MCSFE,EAAQ,M,yGAON,I,CAML,gBAAAC,GACNC,KAAKC,aAAaC,KAAK,CAACC,MAAOH,KAAKG,O,CAGtC,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,GAAIP,KAAKG,OACZE,EAAA,QAAAC,IAAA,2CAAME,KAAK,YACVR,KAAKS,YACJJ,EAAA,UAAAC,IAAA,2CACEE,KAAK,WAAU,cACH,eACZE,QAAS,IAAMV,KAAKD,qB","ignoreList":[]}

package/dist/web-components-library/p-2fa0042e.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,g as s}from"./p-75c4a726.js";import{I as o,e as r,i as a,g as n,l as h}from"./p-b34993de.js";import{r as d,d as l}from"./p-e691c0b8.js";import"./p-5145a606.js";const c=':host{display:block;font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface04);margin:0;background-color:var(--color-form-background);border-radius:var(--border-radius-small);cursor:pointer}:host([size="small"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header p.body-3{padding:calc(var(--space-unit) * 0.5) 0}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>p.body-3{padding:var(--space-unit) 0;margin:0;color:var(--color-default-text)}:host>div>.header>p.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-primary01);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-disabled01);fill:var(--color-disabled01)}:host>div.disabled .header>p.body-3{color:var(--color-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-disabled01)}:host>div.open>.header>z-icon{fill:var(--color-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--gray200);border-top:0;background-color:var(--color-form-background);border-radius:0}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 3px;margin:0}::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:auto;margin-top:0;box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%)}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2);scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>div>div.search>div{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search>div>a{display:inline-block;height:44px;color:var(--color-primary01);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search>div>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);text-align:left}:host([size="small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size="x-small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}';const p=c;const u=class{watchItems(){this.itemsList=typeof this.items==="string"?JSON.parse(this.items):this.items;this.selectedCounter=this.itemsList.filter((t=>t.checked)).length;this.updateRenderItemsList()}watchSearchValue(){this.filterItems(this.searchValue)}watchCheckboxes(){this.checkboxes.forEach(((t,i)=>t.setAttribute("tabindex",i===0?"0":"-1")))}emitComboboxChange(){this.comboboxChange.emit({id:this.inputid,items:this.itemsList})}constructor(e){t(this,e);this.comboboxChange=i(this,"comboboxChange",7);this.itemsList=[];this.inputType=o.TEXT;this.inputid=`combo-${d()}`;this.items=undefined;this.label=undefined;this.disabled=false;this.hassearch=false;this.searchlabel=undefined;this.searchplaceholder=undefined;this.searchtitle=undefined;this.noresultslabel="Nessun risultato";this.isopen=false;this.isfixed=false;this.closesearchtext="Chiudi";this.hascheckall=false;this.checkalltext="Seleziona tutti";this.uncheckalltext="Deseleziona tutti";this.maxcheckableitems=0;this.hasgroupitems=undefined;this.size=r.BIG;this.searchValue=undefined;this.selectedCounter=undefined;this.renderItemsList=[];this.focusedItemId=undefined;this.checkboxes=[];this.toggleComboBox=this.toggleComboBox.bind(this);this.closeFilterItems=this.closeFilterItems.bind(this)}componentWillLoad(){this.watchItems()}componentWillRender(){this.selectedCounter=this.itemsList.filter((t=>t.checked)).length}componentDidRender(){const t=this.getAllCheckboxes();if(JSON.stringify(t)!==JSON.stringify(this.checkboxes)){this.checkboxes=t}}getItemId(t){return`combo-checkbox-${this.inputid}-${t.id}`}getCheckboxClass(){return`combo-item-checkbox-input-${this.inputid}`}getAllCheckboxes(){return Array.from(this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`))}getControlToListSize(){switch(this.size){case r.X_SMALL:return a.SMALL;case r.SMALL:return a.MEDIUM;default:return a.LARGE}}handleSelectArrowsNavigation(t,i){if(![n.ARROW_DOWN,n.ARROW_UP].includes(t.key)||!this.isopen){return}t.preventDefault();t.stopPropagation();const e=this.element.shadowRoot.querySelector(`#${i}`);if(!e){return}const s=this.checkboxes;if(!s.length){return}const o=s.indexOf(e);const r=0;const a=s.length-1;let h=null;if(t.key===n.ARROW_DOWN){h=o===a?s[r]:s[o+1]}else if(t.key===n.ARROW_UP){h=o===r?s[a]:s[o-1]}this.focusComboboxItem(h)}handleHeaderKeyboardEvent(t){if(t.key===n.SPACE){t.preventDefault()}if(t.key===n.ARROW_DOWN&&!this.isopen||t.key===n.ARROW_UP&&this.isopen){this.toggleComboBox()}}handleCheckboxFocus(t){this.focusedItemId=t}focusComboboxItem(t){this.checkboxes.forEach((function(t){t.setAttribute("tabindex","-1")}));t.setAttribute("tabindex","0");t.focus()}updateRenderItemsList(){if(this.searchValue){this.filterItems(this.searchValue)}else{this.resetRenderItemsList()}}resetRenderItemsList(){const t=[];this.itemsList.forEach((i=>{t.push(Object.assign({},i))}));this.renderItemsList=t}filterItems(t){if(!t){return this.closeFilterItems()}this.resetRenderItemsList();this.renderItemsList=this.renderItemsList.filter((i=>{const e=i.name.toUpperCase().indexOf(t.toUpperCase());const s=e+t.length;const o=i.name.substring(0,e)+"<strong>"+i.name.substring(e,s)+"</strong>"+i.name.substring(s,i.name.length);i.name=o;return e>=0}))}checkAll(t=true){this.itemsList=this.itemsList.map((i=>Object.assign(Object.assign({},i),{checked:t})));this.resetRenderItemsList();this.emitComboboxChange()}closeFilterItems(){this.searchValue="";this.resetRenderItemsList()}toggleComboBox(){this.isopen=!this.isopen}getComboboxA11yAttributes(){return{role:"combobox","aria-label":this.label,"aria-expanded":this.isopen?"true":"false","aria-activedescendant":this.isopen?this.focusedItemId:"","aria-controls":`${this.inputid}_list`}}renderHeader(){return e("div",{class:"header",onClick:()=>this.toggleComboBox(),onKeyDown:t=>{this.handleHeaderKeyboardEvent(t)},onKeyUp:t=>l(t,this.toggleComboBox),role:"button",tabindex:0,"aria-expanded":this.isopen?"true":"false"},e("p",{class:"body-3"},this.label,e("span",null,this.selectedCounter>0&&` (${this.selectedCounter})`)),e("z-icon",{name:"caret-down",class:this.size}))}renderContent(){if(!this.isopen){return}return e("div",{class:"open-combo-data"},this.hassearch&&this.renderSearchInput(),!this.hassearch?e("span",Object.assign({},this.getComboboxA11yAttributes())):null,e("div",{role:"listbox","aria-label":this.label,"aria-multiselectable":true,id:`${this.inputid}_list`,"aria-owns":`${this.checkboxes.map((t=>t.id)).join(" ")}`},this.hascheckall&&this.renderCheckAll(),this.renderItems()))}renderItems(){return e("div",{class:this.searchValue&&"search"},this.renderList(this.renderItemsList),this.searchValue&&this.renderCloseButton())}renderItem(t,i,s){return e("z-list-element",{id:t.id,htmlTabindex:null,dividerType:i!==s-1?h.ELEMENT:h.NONE,size:this.getControlToListSize()},e("z-input",{type:o.CHECKBOX,checked:t.checked,htmlid:this.getItemId(t),label:t.name,class:this.getCheckboxClass(),disabled:!t.checked&&this.maxcheckableitems&&this.selectedCounter>=this.maxcheckableitems,size:this.size===r.X_SMALL?r.SMALL:this.size,role:"option","aria-selected":t.checked?"true":"false",onKeyDown:i=>this.handleSelectArrowsNavigation(i,this.getItemId(t)),onInputCheck:i=>{this.itemsList=this.itemsList.map((e=>{if(t.id===e.id){e.checked=i.detail.checked}return e}));this.updateRenderItemsList();this.emitComboboxChange()},onInputFocus:t=>this.handleCheckboxFocus(t.detail.id)}))}renderList(t){if(!t){return}if(!t.length&&this.searchValue){return this.renderNoSearchResults()}if(this.hasgroupitems){return this.renderGroups(t)}return e("ul",{role:"none"},t.map(((i,e)=>this.renderItem(i,e,t.length))))}renderGroups(t){const i=t.reduce(((i,e,s)=>{var o;const{category:r}=e;const a=this.renderItem(e,s,t.length);i[r]=(o=i[r])!==null&&o!==void 0?o:[];i[r].push(a);return i}),{});const s=Object.entries(i).map((([t,i])=>e("z-list-group",{"divider-type":h.ELEMENT},e("span",{class:"body-3-sb z-list-group-title",slot:"header-title"},t),i.map((t=>t)))));return e("ul",{role:"none"},s)}renderNoSearchResults(){return e("ul",{role:"none"},e("z-myz-list-item",{id:"no-results",text:this.noresultslabel,listitemid:"no-results",icon:"multiply-circle",class:this.size}))}renderCloseButton(){return e("div",null,e("a",{onClick:()=>this.closeFilterItems(),onKeyUp:t=>l(t,this.closeFilterItems),role:"button",tabindex:0},this.closesearchtext))}renderSearchInput(){return e("z-input",Object.assign({htmlid:`${this.inputid}_search`,label:this.searchlabel,placeholder:this.searchplaceholder,htmltitle:this.searchtitle,type:this.inputType,value:this.searchValue,message:false,size:this.size,"aria-autocomplete":"list"},this.getComboboxA11yAttributes(),{onKeyUp:t=>{if(t.key===n.ESC){this.closeFilterItems()}},onInputChange:t=>{this.searchValue=t.detail.value}}))}renderCheckAll(){if(this.searchValue){return}const t=`combo-checkbox-${this.inputid}-check-all`;const i=this.selectedCounter===this.itemsList.length;return e("div",{class:"check-all-wrapper"},e("z-input",{type:o.CHECKBOX,checked:i,htmlid:t,class:this.getCheckboxClass(),label:i?this.uncheckalltext:this.checkalltext,disabled:this.maxcheckableitems&&this.maxcheckableitems<this.itemsList.length,size:this.size===r.X_SMALL?r.SMALL:this.size,role:"option","aria-selected":i?"true":"false",onKeyDown:i=>this.handleSelectArrowsNavigation(i,t),onInputCheck:t=>this.checkAll(t.detail.checked),onInputFocus:t=>this.handleCheckboxFocus(t.detail.id)}))}render(){return e("div",{key:"69b13355a675561cb0748a743e7509f8b944615e","data-action":`combo-${this.inputid}`,class:{open:this.isopen,fixed:this.isfixed,disabled:this.disabled},id:this.inputid},this.renderHeader(),!this.disabled&&this.renderContent())}get element(){return s(this)}static get watchers(){return{items:["watchItems"],searchValue:["watchSearchValue"],checkboxes:["watchCheckboxes"]}}};u.style=p;export{u as z_combobox};
+//# sourceMappingURL=p-2fa0042e.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZComboboxStyle0","ZCombobox","watchItems","this","itemsList","items","JSON","parse","selectedCounter","filter","item","checked","length","updateRenderItemsList","watchSearchValue","filterItems","searchValue","watchCheckboxes","checkboxes","forEach","index","setAttribute","emitComboboxChange","comboboxChange","emit","id","inputid","constructor","hostRef","inputType","InputType","TEXT","randomId","ControlSize","BIG","toggleComboBox","bind","closeFilterItems","componentWillLoad","componentWillRender","componentDidRender","getAllCheckboxes","stringify","getItemId","getCheckboxClass","Array","from","element","shadowRoot","querySelectorAll","getControlToListSize","size","X_SMALL","ListSize","SMALL","MEDIUM","LARGE","handleSelectArrowsNavigation","e","currId","KeyboardCode","ARROW_DOWN","ARROW_UP","includes","key","isopen","preventDefault","stopPropagation","currElem","querySelector","currElemIndex","indexOf","firstElemIndex","lastElemIndex","nextElem","focusComboboxItem","handleHeaderKeyboardEvent","ev","SPACE","handleCheckboxFocus","focusedItemId","elem","focus","resetRenderItemsList","renderItemsList","push","Object","assign","value","start","name","toUpperCase","end","newName","substring","checkAll","map","getComboboxA11yAttributes","role","label","renderHeader","h","class","onClick","onKeyDown","onKeyUp","handleKeyboardSubmit","tabindex","renderContent","hassearch","renderSearchInput","join","hascheckall","renderCheckAll","renderItems","renderList","renderCloseButton","renderItem","htmlTabindex","dividerType","ListDividerType","ELEMENT","NONE","type","CHECKBOX","htmlid","disabled","maxcheckableitems","onInputCheck","i","detail","onInputFocus","renderNoSearchResults","hasgroupitems","renderGroups","newData","reduce","group","category","zListItem","_a","listGroups","entries","slot","text","noresultslabel","listitemid","icon","closesearchtext","searchlabel","placeholder","searchplaceholder","htmltitle","searchtitle","message","ESC","onInputChange","checkAllId","allChecked","uncheckalltext","checkalltext","render","open","fixed","isfixed"],"sources":["src/components/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/z-combobox/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: var(--font-family-sans);\n}\n\n:host > div.fixed {\n  position: relative;\n}\n\n:host > div > .header {\n  position: relative;\n  z-index: 10;\n  display: flex;\n  min-height: 42px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  border: var(--border-size-small) solid var(--color-surface04);\n  margin: 0;\n  background-color: var(--color-form-background);\n  border-radius: var(--border-radius-small);\n  cursor: pointer;\n}\n\n:host([size=\"small\"]) > div > .header {\n  min-height: 34px;\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header {\n  min-height: 30px;\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header p.body-3 {\n  padding: calc(var(--space-unit) * 0.5) 0;\n}\n\n:host > div > .header:hover {\n  outline: var(--border-size-medium) solid var(--color-surface04);\n  outline-offset: -2px;\n}\n\n:host > div > div.header:focus:focus-visible {\n  z-index: 16;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > div > .header > p.body-3 {\n  padding: var(--space-unit) 0;\n  margin: 0;\n  color: var(--color-default-text);\n}\n\n:host > div > .header > p.body-3 > span {\n  font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n  fill: var(--color-default-icon);\n  transform: rotate(360deg);\n  transition: all 200ms linear;\n}\n\n:host > div > .header > z-icon.small,\n:host > div > .header > z-icon.x-small {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n:host > div.open > .header {\n  border: var(--border-size-small) solid var(--color-primary01);\n  border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;\n}\n\n:host > div.disabled {\n  pointer-events: none;\n}\n\n:host > div.disabled .header {\n  border-color: var(--color-disabled01);\n  fill: var(--color-disabled01);\n}\n\n:host > div.disabled .header > p.body-3 {\n  color: var(--color-disabled03);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n  fill: var(--color-disabled01);\n}\n\n:host > div.open > .header > z-icon {\n  fill: var(--color-default-icon);\n  transform: rotate(180deg);\n  transition: all 200ms linear;\n}\n\n:host > div.open > div.open-combo-data {\n  position: relative;\n  z-index: 12;\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n  border: var(--border-size-small) solid var(--gray200);\n  border-top: 0;\n  background-color: var(--color-form-background);\n  border-radius: 0;\n}\n\n:host > div.open > div.open-combo-data > div > div {\n  overflow: auto;\n  max-height: 235px;\n  padding: 0;\n  scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > z-input {\n  width: 100%;\n  margin-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > div.open > div.open-combo-data > div > div > ul {\n  max-height: 235px;\n  padding: 0 3px; /* needed for checkbox focus shadow */\n  margin: 0;\n}\n\n::-webkit-scrollbar {\n  width: 10px;\n  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n  border-radius: var(--border-radius);\n}\n\n::-webkit-scrollbar-thumb {\n  width: 10px;\n  background-color: var(--color-primary01);\n}\n\n:host > div.open > z-input {\n  position: relative;\n  z-index: 1;\n  width: 238px;\n  margin: 0 calc(var(--space-unit) * 2);\n  color: var(--color-primary01);\n}\n\n:host > div.open > div.open-combo-data > div > div.search {\n  overflow: hidden;\n  max-height: auto;\n  margin-top: 0;\n  box-shadow: 1px 1px 4px 2px rgb(217 222 227 / 50%);\n}\n\n:host > div.open > div.open-combo-data > div > div.search > ul {\n  overflow: auto;\n  max-height: 180px;\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n  scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div {\n  display: flex;\n  justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div > a {\n  display: inline-block;\n  height: 44px;\n  color: var(--color-primary01);\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  line-height: 44px;\n  text-align: center;\n  text-transform: uppercase;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div > a:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > div.open > div.open-combo-data > div > div.check-all-wrapper {\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n  border-bottom: var(--border-size-small) solid var(--gray800);\n  margin-bottom: var(--space-unit);\n  text-align: left;\n}\n\n:host([size=\"small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"x-small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n  padding: var(--space-unit) calc(var(--space-unit) * 0.5);\n}\n","import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {ZMyzListItem} from \"../../snowflakes/myz/list/z-myz-list-item\";\nimport {handleKeyboardSubmit, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n  tag: \"z-combobox\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCombobox {\n  @Element() element: HTMLZComboboxElement;\n\n  /** input unique id */\n  @Prop()\n  inputid = `combo-${randomId()}`;\n\n  /** list items array */\n  @Prop()\n  items: ComboItem[] | string;\n\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** the combobox is disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** show search input flag (optional) */\n  @Prop()\n  hassearch?: boolean = false;\n\n  /** search input label text (optional) */\n  @Prop()\n  searchlabel?: string;\n\n  /** search input placeholder text (optional) */\n  @Prop()\n  searchplaceholder?: string;\n\n  /** search input title text (optional) */\n  @Prop()\n  searchtitle?: string;\n\n  /** no result text message */\n  @Prop()\n  noresultslabel?: string = \"Nessun risultato\";\n\n  /** toggle combo list opening flag */\n  @Prop({mutable: true})\n  isopen = false;\n\n  /** fixed style flag */\n  @Prop()\n  isfixed = false;\n\n  /** close combobox list text */\n  @Prop()\n  closesearchtext?: string = \"Chiudi\";\n\n  /** show \"check all\" checkbox (optional) */\n  @Prop()\n  hascheckall?: boolean = false;\n\n  /** check all label (optional) */\n  @Prop()\n  checkalltext?: string = \"Seleziona tutti\";\n\n  /** uncheck all label (optional) */\n  @Prop()\n  uncheckalltext?: string = \"Deseleziona tutti\";\n\n  /** max number of checkable items (0 = unlimited) */\n  @Prop()\n  maxcheckableitems = 0;\n\n  /** group items by category */\n  @Prop()\n  hasgroupitems?: boolean;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  searchValue: string;\n\n  @State()\n  selectedCounter: number;\n\n  @State()\n  renderItemsList: ComboItem[] = []; // used for render only\n\n  @State()\n  focusedItemId: string;\n\n  @State()\n  checkboxes: HTMLInputElement[] = [];\n\n  private itemsList: ComboItem[] = [];\n\n  private inputType: InputType = InputType.TEXT;\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n    this.updateRenderItemsList();\n  }\n\n  @Watch(\"searchValue\")\n  watchSearchValue(): void {\n    this.filterItems(this.searchValue);\n  }\n\n  @Watch(\"checkboxes\")\n  watchCheckboxes(): void {\n    this.checkboxes.forEach((item, index) => item.setAttribute(\"tabindex\", index === 0 ? \"0\" : \"-1\"));\n  }\n\n  /** Emitted when value is checked/unchecked. Returns id, items. */\n  @Event()\n  comboboxChange: EventEmitter;\n\n  private emitComboboxChange(): void {\n    this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n  }\n\n  constructor() {\n    this.toggleComboBox = this.toggleComboBox.bind(this);\n    this.closeFilterItems = this.closeFilterItems.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  componentWillRender(): void {\n    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n  }\n\n  componentDidRender(): void {\n    const checkboxes = this.getAllCheckboxes();\n    if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {\n      this.checkboxes = checkboxes;\n    }\n  }\n\n  private getItemId(item: ComboItem): string {\n    return `combo-checkbox-${this.inputid}-${item.id}`;\n  }\n\n  private getCheckboxClass(): string {\n    return `combo-item-checkbox-input-${this.inputid}`;\n  }\n\n  private getAllCheckboxes(): HTMLInputElement[] {\n    return Array.from(\n      this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`)\n    ) as HTMLInputElement[];\n  }\n\n  private getControlToListSize(): ListSize {\n    switch (this.size) {\n      case ControlSize.X_SMALL:\n        return ListSize.SMALL;\n      case ControlSize.SMALL:\n        return ListSize.MEDIUM;\n      default:\n        return ListSize.LARGE;\n    }\n  }\n\n  private handleSelectArrowsNavigation(e: KeyboardEvent, currId: string): void {\n    if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode) || !this.isopen) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    const currElem = this.element.shadowRoot.querySelector(`#${currId}`) as HTMLInputElement;\n    if (!currElem) {\n      return;\n    }\n\n    const checkboxes = this.checkboxes;\n    if (!checkboxes.length) {\n      return;\n    }\n\n    const currElemIndex = checkboxes.indexOf(currElem);\n    const firstElemIndex = 0;\n    const lastElemIndex = checkboxes.length - 1;\n\n    let nextElem = null;\n    if (e.key === KeyboardCode.ARROW_DOWN) {\n      nextElem = currElemIndex === lastElemIndex ? checkboxes[firstElemIndex] : checkboxes[currElemIndex + 1];\n    } else if (e.key === KeyboardCode.ARROW_UP) {\n      nextElem = currElemIndex === firstElemIndex ? checkboxes[lastElemIndex] : checkboxes[currElemIndex - 1];\n    }\n\n    this.focusComboboxItem(nextElem);\n  }\n\n  private handleHeaderKeyboardEvent(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n    }\n    if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) || (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {\n      this.toggleComboBox();\n    }\n  }\n\n  private handleCheckboxFocus(id: string): void {\n    this.focusedItemId = id;\n  }\n\n  private focusComboboxItem(elem): void {\n    this.checkboxes.forEach(function (item) {\n      item.setAttribute(\"tabindex\", \"-1\");\n    });\n\n    elem.setAttribute(\"tabindex\", \"0\");\n    elem.focus();\n  }\n\n  private updateRenderItemsList(): void {\n    if (this.searchValue) {\n      this.filterItems(this.searchValue);\n    } else {\n      this.resetRenderItemsList();\n    }\n  }\n\n  private resetRenderItemsList(): void {\n    const renderItemsList = [];\n    this.itemsList.forEach((item: ComboItem) => {\n      renderItemsList.push({...item});\n    });\n    this.renderItemsList = renderItemsList;\n  }\n\n  private filterItems(value: string): void {\n    if (!value) {\n      return this.closeFilterItems();\n    }\n\n    this.resetRenderItemsList();\n    this.renderItemsList = this.renderItemsList.filter((item) => {\n      const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n      const end = start + value.length;\n      const newName =\n        item.name.substring(0, start) +\n        \"<strong>\" +\n        item.name.substring(start, end) +\n        \"</strong>\" +\n        item.name.substring(end, item.name.length);\n\n      item.name = newName;\n\n      return start >= 0;\n    });\n  }\n\n  private checkAll(checked = true): void {\n    this.itemsList = this.itemsList.map((item: ComboItem) => ({\n      ...item,\n      checked: checked,\n    }));\n    this.resetRenderItemsList();\n    this.emitComboboxChange();\n  }\n\n  private closeFilterItems(): void {\n    this.searchValue = \"\";\n    this.resetRenderItemsList();\n  }\n\n  private toggleComboBox(): void {\n    this.isopen = !this.isopen;\n  }\n\n  private getComboboxA11yAttributes(): Record<string, unknown> {\n    return {\n      \"role\": \"combobox\",\n      \"aria-label\": this.label,\n      \"aria-expanded\": this.isopen ? \"true\" : \"false\",\n      \"aria-activedescendant\": this.isopen ? this.focusedItemId : \"\",\n      \"aria-controls\": `${this.inputid}_list`,\n    };\n  }\n\n  private renderHeader(): HTMLDivElement {\n    return (\n      <div\n        class=\"header\"\n        onClick={() => this.toggleComboBox()}\n        onKeyDown={(ev: KeyboardEvent) => {\n          this.handleHeaderKeyboardEvent(ev);\n        }}\n        onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n        role=\"button\"\n        tabindex={0}\n        aria-expanded={this.isopen ? \"true\" : \"false\"}\n      >\n        <p class=\"body-3\">\n          {this.label}\n          <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n        </p>\n        <z-icon\n          name=\"caret-down\"\n          class={this.size}\n        />\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    if (!this.isopen) {\n      return;\n    }\n\n    return (\n      <div class=\"open-combo-data\">\n        {this.hassearch && this.renderSearchInput()}\n        {!this.hassearch ? <span {...this.getComboboxA11yAttributes()} /> : null}\n        <div\n          role=\"listbox\"\n          aria-label={this.label}\n          aria-multiselectable={true}\n          id={`${this.inputid}_list`}\n          aria-owns={`${this.checkboxes.map((item) => item.id).join(\" \")}`}\n        >\n          {this.hascheckall && this.renderCheckAll()}\n          {this.renderItems()}\n        </div>\n      </div>\n    );\n  }\n\n  private renderItems(): HTMLDivElement {\n    return (\n      <div class={this.searchValue && \"search\"}>\n        {this.renderList(this.renderItemsList)}\n        {this.searchValue && this.renderCloseButton()}\n      </div>\n    );\n  }\n\n  private renderItem(item: ComboItem, index: number, length: number): ZMyzListItem {\n    return (\n      <z-list-element\n        id={item.id}\n        htmlTabindex={null}\n        dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n        size={this.getControlToListSize()}\n      >\n        <z-input\n          type={InputType.CHECKBOX}\n          checked={item.checked}\n          htmlid={this.getItemId(item)}\n          label={item.name}\n          class={this.getCheckboxClass()}\n          disabled={!item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems}\n          size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n          role=\"option\"\n          aria-selected={item.checked ? \"true\" : \"false\"}\n          onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, this.getItemId(item))}\n          onInputCheck={(e: CustomEvent) => {\n            this.itemsList = this.itemsList.map((i: ComboItem) => {\n              if (item.id === i.id) {\n                i.checked = e.detail.checked;\n              }\n\n              return i;\n            });\n            this.updateRenderItemsList();\n            this.emitComboboxChange();\n          }}\n          onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n        />\n      </z-list-element>\n    );\n  }\n\n  private renderList(items: ComboItem[]): HTMLUListElement {\n    if (!items) {\n      return;\n    }\n    if (!items.length && this.searchValue) {\n      return this.renderNoSearchResults();\n    }\n\n    if (this.hasgroupitems) {\n      return this.renderGroups(items);\n    }\n\n    return (\n      <ul role=\"none\">\n        {items.map((item, i) => {\n          return this.renderItem(item, i, items.length);\n        })}\n      </ul>\n    );\n  }\n\n  private renderGroups(items: ComboItem[]): HTMLUListElement {\n    const newData = items.reduce((group, item, index) => {\n      const {category} = item;\n      const zListItem = this.renderItem(item, index, items.length);\n\n      group[category] = group[category] ?? [];\n      group[category].push(zListItem);\n\n      return group;\n    }, {});\n\n    const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n      return (\n        <z-list-group divider-type={ListDividerType.ELEMENT}>\n          <span\n            class=\"body-3-sb z-list-group-title\"\n            slot=\"header-title\"\n          >\n            {key}\n          </span>\n          {value.map((item) => item)}\n        </z-list-group>\n      );\n    });\n\n    return <ul role=\"none\">{listGroups}</ul>;\n  }\n\n  private renderNoSearchResults(): HTMLUListElement {\n    return (\n      <ul role=\"none\">\n        <z-myz-list-item\n          id=\"no-results\"\n          text={this.noresultslabel}\n          listitemid=\"no-results\"\n          icon=\"multiply-circle\"\n          class={this.size}\n        />\n      </ul>\n    );\n  }\n\n  private renderCloseButton(): HTMLDivElement {\n    return (\n      <div>\n        <a\n          onClick={() => this.closeFilterItems()}\n          onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, this.closeFilterItems)}\n          role=\"button\"\n          tabindex={0}\n        >\n          {this.closesearchtext}\n        </a>\n      </div>\n    );\n  }\n\n  private renderSearchInput(): ZInput {\n    return (\n      <z-input\n        htmlid={`${this.inputid}_search`}\n        label={this.searchlabel}\n        placeholder={this.searchplaceholder}\n        htmltitle={this.searchtitle}\n        type={this.inputType}\n        value={this.searchValue}\n        message={false}\n        size={this.size}\n        aria-autocomplete=\"list\"\n        {...this.getComboboxA11yAttributes()}\n        onKeyUp={(e: KeyboardEvent) => {\n          if (e.key === KeyboardCode.ESC) {\n            this.closeFilterItems();\n          }\n        }}\n        onInputChange={(e: CustomEvent) => {\n          this.searchValue = e.detail.value;\n        }}\n      />\n    );\n  }\n\n  private renderCheckAll(): HTMLDivElement {\n    if (this.searchValue) {\n      return;\n    }\n\n    const checkAllId = `combo-checkbox-${this.inputid}-check-all`;\n    const allChecked = this.selectedCounter === this.itemsList.length;\n\n    return (\n      <div class=\"check-all-wrapper\">\n        <z-input\n          type={InputType.CHECKBOX}\n          checked={allChecked}\n          htmlid={checkAllId}\n          class={this.getCheckboxClass()}\n          label={allChecked ? this.uncheckalltext : this.checkalltext}\n          disabled={this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length}\n          size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n          role=\"option\"\n          aria-selected={allChecked ? \"true\" : \"false\"}\n          onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, checkAllId)}\n          onInputCheck={(e: CustomEvent) => this.checkAll(e.detail.checked)}\n          onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n        />\n      </div>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        data-action={`combo-${this.inputid}`}\n        class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n        id={this.inputid}\n      >\n        {this.renderHeader()}\n        {!this.disabled && this.renderContent()}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as t,h as n}from"./p-75c4a726.js";const a='*:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}ul{overflow:hidden;width:auto;height:auto;padding:0;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01);font-family:var(--font-family-sans);list-style:none}ul>li{padding-left:10px;text-indent:-10px}ul>li>a{display:block;padding-top:calc(var(--space-unit) * 0.5);color:var(--color-primary01);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}ul>li>a::before{padding-right:5px;content:"•"}ul>li>span{padding:0 calc(var(--space-unit) * 2);color:var(--color-surface04);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}';const e=a;const i=class{constructor(n){t(this,n);this.listdata=undefined;this.renderList=this.renderList.bind(this)}handleSpaceKeyPress(t,n){if(t.keyCode==32||t.keyCode==13){t.preventDefault();window.open(n,"_blank")}}formatListContent(t){const{value:a,isLink:e,url:i}=t;if(!e){return n("span",null,a)}return n("a",{role:"button",onKeyPress:t=>this.handleSpaceKeyPress(t,i),href:i,target:"_blank"},a)}renderList(t){return t.map((t=>n("li",null,this.formatListContent(t))))}render(){return n("ul",{key:"01d6967e96c5ab8f9acebbd0c107fb0168ee5c57"},this.renderList(JSON.parse(this.listdata)))}};i.style=e;export{i as z_myz_card_list};
+//# sourceMappingURL=p-30170218.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMyzCardListStyle0","ZMyzCardList","constructor","hostRef","this","renderList","bind","handleSpaceKeyPress","e","url","keyCode","preventDefault","window","open","formatListContent","data","value","isLink","h","role","onKeyPress","href","target","dataArray","map","render","key","JSON","parse","listdata"],"sources":["src/snowflakes/myz/card/z-myz-card-list/styles.css?tag=z-myz-card-list&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-list/index.tsx"],"sourcesContent":["*:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\nul {\n  overflow: hidden;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0 calc(var(--space-unit) * 2);\n  color: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  list-style: none;\n}\n\nul > li {\n  padding-left: 10px;\n  text-indent: -10px;\n}\n\nul > li > a {\n  display: block;\n  padding-top: calc(var(--space-unit) * 0.5);\n  color: var(--color-primary01);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n\nul > li > a::before {\n  padding-right: 5px;\n  content: \"•\";\n}\n\nul > li > span {\n  padding: 0 calc(var(--space-unit) * 2);\n  color: var(--color-surface04);\n  font-size: 14px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\nimport {Action} from \"../../../../beans\";\n\n@Component({\n  tag: \"z-myz-card-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardList {\n  /** list data stringified array */\n  @Prop()\n  listdata: string;\n\n  constructor() {\n    this.renderList = this.renderList.bind(this);\n  }\n\n  private handleSpaceKeyPress(e: KeyboardEvent, url: string): void {\n    if (e.keyCode == 32 || e.keyCode == 13) {\n      e.preventDefault();\n      window.open(url, \"_blank\");\n    }\n  }\n\n  private formatListContent(data: Action): HTMLAnchorElement {\n    const {value, isLink, url} = data;\n    if (!isLink) {\n      return <span>{value}</span>;\n    }\n\n    return (\n      <a\n        role=\"button\"\n        onKeyPress={(e: KeyboardEvent) => this.handleSpaceKeyPress(e, url)}\n        href={url}\n        target=\"_blank\"\n      >\n        {value}\n      </a>\n    );\n  }\n\n  private renderList(dataArray: Action[]): HTMLLIElement[] {\n    return dataArray.map((data: Action) => {\n      return <li>{this.formatListContent(data)}</li>;\n    });\n  }\n\n  render(): HTMLUListElement {\n    return <ul>{this.renderList(JSON.parse(this.listdata))}</ul>;\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAY,qvBAClB,MAAAC,EAAeD,E,MCOFE,EAAY,MAKvB,WAAAC,CAAAC,G,kCACEC,KAAKC,WAAaD,KAAKC,WAAWC,KAAKF,K,CAGjC,mBAAAG,CAAoBC,EAAkBC,GAC5C,GAAID,EAAEE,SAAW,IAAMF,EAAEE,SAAW,GAAI,CACtCF,EAAEG,iBACFC,OAAOC,KAAKJ,EAAK,S,EAIb,iBAAAK,CAAkBC,GACxB,MAAMC,MAACA,EAAKC,OAAEA,EAAMR,IAAEA,GAAOM,EAC7B,IAAKE,EAAQ,CACX,OAAOC,EAAA,YAAOF,E,CAGhB,OACEE,EAAA,KACEC,KAAK,SACLC,WAAaZ,GAAqBJ,KAAKG,oBAAoBC,EAAGC,GAC9DY,KAAMZ,EACNa,OAAO,UAENN,E,CAKC,UAAAX,CAAWkB,GACjB,OAAOA,EAAUC,KAAKT,GACbG,EAAA,UAAKd,KAAKU,kBAAkBC,K,CAIvC,MAAAU,GACE,OAAOP,EAAA,MAAAQ,IAAA,4CAAKtB,KAAKC,WAAWsB,KAAKC,MAAMxB,KAAKyB,W","ignoreList":[]}

package/dist/web-components-library/p-384baa02.entry.js

@@ -0,0 +1,2 @@
+import{r,h as o}from"./p-75c4a726.js";const s=":host{display:block;box-sizing:border-box;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-rg);line-height:calc(var(--space-unit) * 2)}:host>div{padding:calc(var(--space-unit) * 2)}:host>.success{background:var(--color-success-inverse);fill:var(--color-success01)}:host>.warning{background:var(--color-warning-inverse);fill:var(--color-warning01)}:host>.error{background:var(--color-error-inverse);fill:var(--color-error01)}";const a=s;const c=class{constructor(o){r(this,o);this.type=undefined}render(){return o("div",{key:"5fd2b297a4ab7e426d50f8ef36d5729df579786f",class:this.type},o("slot",{key:"cd24f83bcb38d4bbbce5f3b115aa18e217c402b2"}))}};c.style=a;export{c as z_alert};
+//# sourceMappingURL=p-384baa02.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZAlertStyle0","ZAlert","render","h","key","class","this","type"],"sources":["src/snowflakes/myz/z-alert/styles.css?tag=z-alert&encapsulation=shadow","src/snowflakes/myz/z-alert/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-rg);\n  line-height: calc(var(--space-unit) * 2);\n}\n\n:host > div {\n  padding: calc(var(--space-unit) * 2);\n}\n\n:host > .success {\n  background: var(--color-success-inverse);\n  fill: var(--color-success01);\n}\n\n:host > .warning {\n  background: var(--color-warning-inverse);\n  fill: var(--color-warning01);\n}\n\n:host > .error {\n  background: var(--color-error-inverse);\n  fill: var(--color-error01);\n}\n","import {Component, Prop, h} from \"@stencil/core\";\nimport {AlertType} from \"../../../beans/index\";\n\n/**\n * @slot - alert content\n */\n\n@Component({\n  tag: \"z-alert\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAlert {\n  /** alert variant type */\n  @Prop()\n  type: AlertType;\n\n  render(): HTMLDivElement {\n    return (\n      <div class={this.type}>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":"sCAAA,MAAMA,EAAY,ieAClB,MAAAC,EAAeD,E,MCWFE,EAAM,M,6CAKjB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAOC,KAAKC,MACfJ,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/web-components-library/p-395b261e.entry.js

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

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

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

package/dist/web-components-library/p-4374d3f3.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as r,h as a,g as e}from"./p-75c4a726.js";import{f as i,s as n,v as o,i as l,a as p}from"./p-05f6053f.js";import{G as c,F as s,I as d,f}from"./p-b34993de.js";const h='.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:\'\';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{left:0}.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{right:0}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer+.dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.flatpickr-monthSelect-months{margin:10px 1px 3px 1px;flex-wrap:wrap}.flatpickr-monthSelect-month{background:none;border:1px solid transparent;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;display:inline-block;font-weight:400;margin:0.5px;justify-content:center;padding:10px;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;text-align:center;width:33%}.flatpickr-monthSelect-month.flatpickr-disabled{color:#eee}.flatpickr-monthSelect-month.flatpickr-disabled:hover,.flatpickr-monthSelect-month.flatpickr-disabled:focus{cursor:not-allowed;background:none !important}.flatpickr-monthSelect-theme-dark{background:#3f4458}.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year{color:#fff}.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month,.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month{color:#fff;fill:#fff}.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month{color:rgba(255, 255, 255, 0.95)}.flatpickr-monthSelect-month.today{border-color:#959ea9}.flatpickr-monthSelect-month.inRange,.flatpickr-monthSelect-month.inRange.today,.flatpickr-monthSelect-month:hover,.flatpickr-monthSelect-month:focus{background:#e6e6e6;cursor:pointer;outline:0;border-color:#e6e6e6}.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus{background:#646c8c;border-color:#646c8c}.flatpickr-monthSelect-month.today:hover,.flatpickr-monthSelect-month.today:focus{background:#959ea9;border-color:#959ea9;color:#fff}.flatpickr-monthSelect-month.selected,.flatpickr-monthSelect-month.startRange,.flatpickr-monthSelect-month.endRange{background-color:#569ff7;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-monthSelect-month.startRange{border-radius:50px 0 0 50px}.flatpickr-monthSelect-month.endRange{border-radius:0 50px 50px 0}.flatpickr-monthSelect-month.startRange.endRange{border-radius:50px}.flatpickr-monthSelect-month.inRange{border-radius:0;box-shadow:-5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6}.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange{background:#80cbc4;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#80cbc4}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-range-picker--toggle-height:0}z-date-picker{position:relative}z-date-picker>div>*{cursor:pointer !important}z-range-picker{position:relative}.flatpickr-toggle-container{width:fit-content}.range-pickers-container>div{position:relative}.hidden-input{position:absolute;bottom:0;width:0;height:0;visibility:hidden !important}.flatpickr-calendar::before,.flatpickr-calendar::after{display:none}.flatpickr-calendar{position:absolute !important;top:var(--z-range-picker--toggle-height) !important;left:0 !important;padding-top:calc(var(--space-unit) * 2);border-radius:2px;box-shadow:var(--shadow-2);font-family:var(--font-family-sans) !important}.months.top>.flatpickr-calendar{top:-288px !important}.date.top>.flatpickr-calendar,.date.top>div>.flatpickr-calendar{top:-401px !important}.date-time.top>.flatpickr-calendar,.date-time.top>div>.flatpickr-calendar{top:-523px !important}.flatpickr-calendar,.flatpickr-innerContainer,.flatpickr-days,.dayContainer,.flatpickr-rContainer,.flatpickr-monthSelect-months{width:calc(var(--space-unit) * 42) !important;max-width:calc(var(--space-unit) * 42) !important}.flatpickr-monthSelect-months{box-sizing:border-box;padding:0 !important;margin:calc(var(--space-unit) * 2) 0 !important}.flatpickr-months{position:relative;height:calc(var(--space-unit) * 6) !important;align-items:center;margin-bottom:var(--space-unit) 0 !important}.flatpickr-month{overflow:visible !important;height:calc(var(--space-unit) * 6) !important}.flatpickr-current-month{left:0 !important;display:flex !important;width:fill-available;height:calc(var(--space-unit) * 6);align-items:baseline;justify-content:space-evenly;padding-top:0}.flatpickr-next-month,.flatpickr-prev-month{position:static !important;display:flex;width:calc(var(--space-unit) * 4) !important;height:calc(var(--space-unit) * 4) !important;align-items:center;justify-content:center;padding:0 !important}.flatpickr-prev-month{margin-left:var(--space-unit)}.flatpickr-next-month{margin-right:var(--space-unit)}.flatpickr-next-month>svg,.flatpickr-prev-month>svg{width:calc(var(--space-unit) * 2) !important;height:calc(var(--space-unit) * 2) !important;fill:var(--color-primary01)}.flatpickr-next-month:hover,.flatpickr-prev-month:hover,.flatpickr-next-month:focus,.flatpickr-prev-month:focus{border:none !important;border-color:var(--color-primary03) !important;background-color:var(--color-primary03) !important;border-radius:var(--border-radius);color:var(--color-hover-primary) !important;outline:none !important}.flatpickr-next-month:hover svg,.flatpickr-prev-month:hover svg{fill:var(--color-hover-primary) !important}.flatpickr-next-month:active,.flatpickr-prev-month:active{border-color:var(--color-surface01) !important;background-color:var(--color-surface01) !important;border-radius:var(--border-radius);box-shadow:var(--shadow-2) !important;color:var(--color-primary01) !important}.flatpickr-next-month:focus svg,.flatpickr-prev-month:focus svg{fill:var(--color-primary01) !important}.flatpickr-monthDropdown-months{width:108px !important;height:calc(var(--space-unit) * 5.5) !important;padding-left:var(--space-unit) !important;background:var(--color-surface01) !important;color:var(--color-default-text) !important;font-size:var(--font-size-3) !important;font-weight:var(--font-rg) !important;outline:1px solid black !important}.flatpickr-monthDropdown-months:hover,.flatpickr-monthDropdown-months:focus{outline:1px solid var(--color-primary01) !important}.flatpickr-current-month>.numInputWrapper{display:flex;width:calc(var(--space-unit) * 10);height:calc(var(--space-unit) * 5.5) !important;background:var(--color-surface01) !important;color:var(--color-default-text);outline:1px solid black !important}.flatpickr-current-month>.numInputWrapper:hover,.flatpickr-current-month>.numInputWrapper:focus-within{outline:1px solid var(--color-primary01) !important}.flatpickr-current-month>.numInputWrapper>input{padding:0 calc(var(--space-unit) * 3) 0 var(--space-unit);font-size:var(--font-size-3) !important;font-weight:var(--font-rg) !important;text-align:center}.flatpickr-weekdays{height:calc(var(--space-unit) * 6);border-bottom:1px solid var(--color-surface03)}.flatpickr-weekday{font-size:var(--font-size-3) !important;font-weight:var(--font-rg) !important}.flatpickr-day,.flatpickr-monthSelect-month{width:calc(var(--space-unit) * 6) !important;max-width:100% !important;height:calc(var(--space-unit) * 6) !important;border:none;margin:0 !important;border-radius:0 !important;box-shadow:none !important;font-size:var(--font-size-3) !important;line-height:calc(var(--space-unit) * 6) !important}.flatpickr-day{width:calc(var(--space-unit) * 6) !important;border:none;line-height:calc(var(--space-unit) * 6) !important}.flatpickr-monthSelect-month{width:calc(var(--space-unit) * 14) !important;padding:0 !important;border:2px solid var(--color-surface01) !important;line-height:calc(var(--space-unit) * 5) !important}.flatpickr-day:not(.flatpickr-disabled):hover,.flatpickr-day:not(.flatpickr-disabled):active,.flatpickr-day:not(.flatpickr-disabled):focus,.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:hover,.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:active,.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:focus,.flatpickr-day:not(.flatpickr-disabled).selected:hover,.flatpickr-day:not(.flatpickr-disabled).selected:active,.flatpickr-day:not(.flatpickr-disabled).selected:focus,.flatpickr-monthSelect-month:hover,.flatpickr-monthSelect-month:active,.flatpickr-monthSelect-month:focus{border-color:var(--color-hover-primary) !important;background-color:var(--color-hover-primary) !important;color:var(--color-text-inverse) !important}.flatpickr-day.today,.flatpickr-monthSelect-month.today{border:2px solid var(--color-hover-primary) !important}.flatpickr-day.selected:not(.flatpickr-disabled),.flatpickr-monthSelect-month.selected:not(.flatpickr-disabled){border-color:var(--color-primary01) !important;background-color:var(--color-primary01) !important}.flatpickr-weekday:nth-child(6),.flatpickr-weekday:nth-child(7),.flatpickr-day:nth-child(7n+6),.flatpickr-day:nth-child(7n+7){font-weight:var(--font-sb) !important}.flatpickr-time{display:block;height:90px !important;max-height:90px !important;text-align:left}.flatpickr-time::before{display:block;width:100%;padding-left:var(--space-unit);color:var(--color-default-text) !important;content:"Orario";font-size:var(--font-size-1);font-weight:var(--font-sb);text-transform:uppercase}.flatpickr-time.time24hr{margin:calc(var(--space-unit) * 2) !important}.flatpickr-time.time24hr>.numInputWrapper>input:hover,.flatpickr-time.time24hr>.numInputWrapper>input:focus,.flatpickr-time.time24hr>.numInputWrapper:hover{background-color:var(--color-surface01) !important}.flatpickr-time.time24hr>div{width:calc(var(--space-unit) * 10) !important;height:calc(var(--space-unit) * 5.5) !important;margin-right:var(--space-unit) !important;margin-left:var(--space-unit) !important}.flatpickr-time-separator{display:flex;height:calc(var(--space-unit) * 5.5) !important;align-items:center;justify-content:center;font-weight:unset !important}.flatpickr-minute,.flatpickr-hour{font-size:var(--font-size-3) !important;font-weight:var(--font-rg) !important;outline:1px solid black !important}.numInputWrapper:hover .flatpickr-minute,.numInputWrapper:hover .flatpickr-hour,.flatpickr-minute:focus,.flatpickr-hour:focus{outline:1px solid var(--color-primary01) !important}.arrowUp,.arrowDown{width:calc(var(--space-unit) * 2) !important;height:calc(var(--space-unit) * 2) !important;padding:0 !important;border:none !important;opacity:1 !important}.arrowUp{margin-top:calc(var(--space-unit) / 2) !important;margin-right:calc(var(--space-unit) / 2) !important}.arrowDown{top:auto !important;margin-top:calc(var(--space-unit) * 3) !important;margin-right:calc(var(--space-unit) / 2) !important}.arrowUp:hover,.arrowDown:hover{border-color:var(--color-primary03) !important;background-color:var(--color-primary03) !important;border-radius:var(--border-radius);color:var(--color-hover-primary) !important}.arrowUp:active,.arrowDown:active{border-color:var(--color-surface01) !important;background-color:var(--color-surface01) !important;border-radius:var(--border-radius);box-shadow:var(--shadow-2) !important;color:var(--color-primary01) !important}.arrowUp::after,.arrowDown::after{padding:2.5px !important;border:solid var(--color-primary01) !important;border-width:0 1px 1px 0 !important}.arrowUp::after{top:0 !important;margin-top:6px !important;margin-left:5.5px !important;transform:rotate(-135deg)}.arrowDown::after{top:0 !important;left:5.5px !important;margin-top:4px !important;transform:rotate(45deg)}.flatpickr-day:not(.flatpickr-disabled).inRange:hover,.flatpickr-day:not(.flatpickr-disabled).today.inRange:hover,.flatpickr-day.prevMonthDay:not(.flatpickr-disabled).inRange:hover,.flatpickr-monthSelect-month:not(.flatpickr-disabled).inRange:hover{border-color:var(--color-hover-primary) !important;background-color:var(--color-hover-primary) !important}.flatpickr-day:not(.flatpickr-disabled).inRange,.flatpickr-day:not(.flatpickr-disabled).today.inRange,.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.inRange,.flatpickr-monthSelect-month:not(.flatpickr-disabled).inRange{border-color:var(--color-primary03);background-color:var(--color-primary03)}.flatpickr-day:not(.flatpickr-disabled).startRange,.flatpickr-day:not(.flatpickr-disabled).endRange,.flatpickr-monthSelect-month:not(.flatpickr-disabled).startRange,.flatpickr-monthSelect-month:not(.flatpickr-disabled).endRange{border-color:var(--color-primary01) !important;background-color:var(--color-primary01) !important}.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.selected.startRange,.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.selected.endRange{border-color:var(--color-primary01) !important;background-color:var(--color-primary01) !important}.flatpickr-range.second-input{cursor:pointer}.range-pickers-container{display:flex;gap:16px}';const m=h;const k=class{constructor(a){t(this,a);this.dateSelect=r(this,"dateSelect",7);this.rangePickerId=undefined;this.firstAriaLabel=undefined;this.firstLabel=undefined;this.secondAriaLabel=undefined;this.secondLabel=undefined;this.mode=c.DATE;this.firstPickerReadOnly=false;this.lastPickerReadOnly=false;this.firstPickerPlaceholder="";this.lastPickerPlaceholder="";this.flatpickrPosition=s.BOTTOM;this.activeInput="start-input";this.firstInputError=false;this.lastInputError=false}handleClick(){this.getFocusedInput()}handleKeyDown(t){var r,a,e,i,n,o;const l=this.activeInput==="start-input"?this.firstPicker:this.lastPicker;this.getFocusedInput();if(t.key==="Escape"){document.activeElement.classList.contains(`${this.rangePickerId}-1`)&&((r=this.firstPicker)===null||r===void 0?void 0:r.close());document.activeElement.classList.contains(`${this.rangePickerId}-2`)&&((a=this.lastPicker)===null||a===void 0?void 0:a.close())}if(t.key==="Enter"||t.key===" "){if(document.activeElement.classList.contains(`${this.rangePickerId}-1`)||document.activeElement.classList.contains(`${this.rangePickerId}-2`)){l===null||l===void 0?void 0:l.open()}const r=document.activeElement.classList.contains("reset-icon");if(r){if(this.activeInput==="start-input"){this.firstInputError=false;(e=this.firstPicker)===null||e===void 0?void 0:e.clear();this.printDate(null,((i=this.lastPicker)===null||i===void 0?void 0:i.selectedDates[0])||null)}if(this.activeInput==="end-input"){this.lastInputError=false;(n=this.firstPicker)===null||n===void 0?void 0:n.clear();this.printDate(((o=this.firstPicker)===null||o===void 0?void 0:o.selectedDates[0])||null,null)}}const a=document.activeElement.classList.contains("flatpickr-prev-month");const p=document.activeElement.classList.contains("flatpickr-next-month");const c=a||p;c&&t.key===" "&&t.preventDefault();a&&(l===null||l===void 0?void 0:l.changeMonth(-1));p&&(l===null||l===void 0?void 0:l.changeMonth(1))}}componentDidLoad(){this.setupPickers()}setupFirstPickersReadOnly(){var t;(t=this.firstPicker)===null||t===void 0?void 0:t.set("clickOpens",!this.firstPickerReadOnly)}setupLastPickersReadOnly(){var t;(t=this.lastPicker)===null||t===void 0?void 0:t.set("clickOpens",!this.lastPickerReadOnly)}setupPickers(){const t={enableTime:this.mode===c.DATE_TIME,locale:l.exports.Italian,allowInput:true,wrap:true,dateFormat:this.mode===c.DATE_TIME?"d-m-Y - H:i":"d-m-Y",ariaDateFormat:"d F Y",minuteIncrement:1,time_24hr:true,onValueUpdate:()=>{const t=this.activeInput==="start-input";const r=this.firstPicker.selectedDates[0];const a=this.lastPicker.selectedDates[0];if(+r>+a){if(t){this.firstInputError=true;this.printDate(null,a||null)}else{this.lastInputError=true;this.printDate(r||null,null)}}else{this.lastInputError=false;this.firstInputError=false;this.printDate(r||null,a||null)}this.setRangeStyle(0);this.setRangeStyle(1)},onChange:(t,r,a)=>{this.onDateSelect();this.setRangeStyle(a.input.classList.contains("start-input")?0:1)},onOpen:(t,r,a)=>{n(this.element,this.mode);this.flatpickrPosition=p(this.element,this.mode);this.setRangeStyle(a.input.classList.contains("start-input")?0:1);this.getFocusedInput()},onYearChange:(t,r,a)=>{this.setRangeStyle(a.input.classList.contains("start-input")?0:1)},onMonthChange:(t,r,a)=>{this.setRangeStyle(a.input.classList.contains("start-input")?0:1)},onKeyDown:()=>{n(this.element,this.mode)}};this.firstPicker=i(`.${this.rangePickerId}-1-container`,Object.assign(Object.assign({},Object.assign(Object.assign({},t),{clickOpens:!this.firstPickerReadOnly})),{mode:"single",appendTo:this.element.querySelector(`.${this.rangePickerId}-1-wrapper`)}));this.lastPicker=i(`.${this.rangePickerId}-2-container`,Object.assign(Object.assign({},Object.assign(Object.assign({},t),{clickOpens:!this.lastPickerReadOnly})),{mode:"single",appendTo:this.element.querySelector(`.${this.rangePickerId}-2-wrapper`)}));this.element.querySelectorAll(".flatpickr-weekday").forEach((t=>{t.innerHTML=t.innerHTML.trim().charAt(0)}))}onDateSelect(){const t=this.activeInput==="start-input";const r=this.firstPicker.selectedDates[0];const a=this.lastPicker.selectedDates[0];if(+r>+a){if(t){this.firstInputError=true;this.printDate(null,a||null)}else{this.lastInputError=true;this.printDate(r||null,null)}}else{this.lastInputError=false;this.firstInputError=false;this.printDate(r||null,a||null)}}disableDates(t,r){const a=this.element.getElementsByClassName("flatpickr-calendar")[r];Array.from(a.getElementsByClassName("flatpickr-day")).forEach((a=>{const e=this.getDateWithoutTime(this.replaceMonths(a.ariaLabel,null));const i=this.getDateWithoutTime(t);const n=r===0?e>i:e<i;if(n){a.classList.toggle("flatpickr-disabled",true)}else{a.classList.toggle("flatpickr-disabled",false)}}));n(this.element,this.mode)}formatDate(t){if(this.mode===c.DATE){return`${i.formatDate(t,"d-m-Y")}`}return`${i.formatDate(t,"d-m-Y - H:i")}`}printDate(t,r){const a=t?this.formatDate(t):null;const e=r?this.formatDate(r):null;this.dateSelect.emit([a,e])}getDateWithoutTime(t){const r=new Date(t.getFullYear(),t.getMonth(),t.getDate(),0,0);return r}replaceMonths(t,r){const a=t.split(" ")[1];const e={Gennaio:"01",Febbraio:"02",Marzo:"03",Aprile:"04",Maggio:"05",Giugno:"06",Luglio:"07",Agosto:"08",Settembre:"09",Ottobre:"10",Novembre:"11",Dicembre:"12"};const i=t.replace(a,e[a]).split(" ");return new Date(parseInt(i[2]),parseInt(i[1])-1,parseInt(i[0]),r?parseInt(r.split(":")[0]):0,r?parseInt(r.split(":")[1]):0)}getFocusedInput(){const t=document.activeElement.closest("z-input");if(!t){return}if(t===null||t===void 0?void 0:t.classList.contains("start-input")){this.activeInput="start-input"}else if(t.classList.contains("end-input")){this.activeInput="end-input"}}setRangeStyle(t){Array.from(this.element.getElementsByClassName("flatpickr-calendar")).forEach((r=>{Array.from(r.getElementsByClassName("flatpickr-day")).forEach((r=>{const a=this.firstPicker.selectedDates.length===1;const e=this.lastPicker.selectedDates.length===1;let i;let n;const o=this.getDateWithoutTime(this.replaceMonths(r.ariaLabel,null));if(a){i=this.getDateWithoutTime(this.firstPicker.selectedDates[0]);if(+o===+i){r.classList.toggle("startRange",true)}else{r.classList.toggle("startRange",false)}}if(e){n=this.getDateWithoutTime(this.lastPicker.selectedDates[0]);if(+o===+n){r.classList.toggle("endRange",true)}else{r.classList.toggle("endRange",false)}}if(a&&e){if(o>i&&o<n){r.classList.toggle("inRange",true)}else{r.classList.toggle("inRange",false)}}if(t===0&&e){this.disableDates(this.lastPicker.selectedDates[0],t)}if(t===1&&a){this.disableDates(this.firstPicker.selectedDates[0],t)}}))}))}onStopTyping(t){const r=t.detail.value.replace("/","-");const a=r.split("-");const e=this.mode===c.DATE_TIME?`T${a[3]}:00`:"";const i=`${a[2]}-${a[1]}-${a[0]}${e}`.split(" ").join("");const n=o(r,this.mode===c.DATE_TIME);const l=Date.parse(i).toString();if(this.activeInput==="start-input"){if(r===""){this.firstInputError=false;this.firstPicker.setDate([]);this.printDate(null,this.lastPicker.selectedDates[0]||null)}else if(!n){this.firstInputError=true;this.printDate(null,this.lastPicker.selectedDates[0]||null)}else if(n){if(this.lastPicker.selectedDates.length===1){if(+l<=+this.lastPicker.selectedDates[0]){this.firstInputError=false;this.firstPicker.setDate([r]);this.printDate(new Date(i),this.lastPicker.selectedDates[0])}else{this.firstInputError=true;this.printDate(null,this.lastPicker.selectedDates[0])}}else{this.firstInputError=false;this.firstPicker.setDate([r]);this.printDate(new Date(i),null)}}}else if(r===""){this.lastInputError=false;this.lastPicker.setDate([]);this.printDate(this.firstPicker.selectedDates[0]||null,null)}else if(!n){this.lastInputError=true;this.printDate(this.firstPicker.selectedDates[0]||null,null)}else if(n){if(this.firstPicker.selectedDates.length===1){if(+l>=+this.firstPicker.selectedDates[0]){this.lastInputError=false;this.lastPicker.setDate([r]);this.printDate(this.firstPicker.selectedDates[0],new Date(i))}else{this.lastInputError=true;this.printDate(this.firstPicker.selectedDates[0],null)}}else{this.lastInputError=false;this.lastPicker.setDate([r]);this.printDate(null,new Date(i))}}this.setRangeStyle(this.activeInput==="start-input"?0:1)}render(){const t={type:d.TEXT,icon:"event",tabindex:"0",message:false,onStopTyping:this.onStopTyping.bind(this),value:""};return a("div",{key:"a53d148ab03744a1f3db628f7b246c24c5974c64",class:{["range-pickers-container"]:true,[this.mode]:true,[this.activeInput]:true,[this.flatpickrPosition]:true}},a("div",{key:"b48ad8c0946dbf4d293ab727d48434377754bcd2",class:`${this.rangePickerId}-1-wrapper`},a("div",{key:"fdf59e2f5910fa066ab81ad9e43af5e88f26ec17",class:`${this.rangePickerId}-1-container`},a("z-input",Object.assign({key:"d850efc6a9d2d1405b201fc200cd1b624e0fd3db"},t,{placeholder:this.firstPickerPlaceholder,readonly:this.firstPickerReadOnly,"data-input":"data-input",class:`start-input ${this.rangePickerId}-1`,ariaLabel:this.firstAriaLabel,label:this.firstLabel,status:this.firstInputError&&f.ERROR,onStartTyping:()=>{this.firstInputError=false}})))),a("div",{key:"5d033db058bb143ac0cca9020605f6ab9153cc0d",class:`${this.rangePickerId}-2-wrapper`},a("div",{key:"eabdc4b1a5703a349c8b3d978970b77278352a53",class:`${this.rangePickerId}-2-container`},a("z-input",Object.assign({key:"bfd97975a2dd54710ce8da89c8debb68b7fc3af3"},t,{placeholder:this.lastPickerPlaceholder,readonly:this.lastPickerReadOnly,"data-input":"data-input",class:`end-input ${this.rangePickerId}-2`,ariaLabel:this.secondAriaLabel,label:this.secondLabel,status:this.lastInputError&&f.ERROR,onStartTyping:()=>{this.lastInputError=false}})))))}get element(){return e(this)}static get watchers(){return{firstPickerReadOnly:["setupFirstPickersReadOnly"],lastPickerReadOnly:["setupLastPickersReadOnly"],mode:["setupPickers"]}}};k.style=m;export{k as z_range_picker};
+//# sourceMappingURL=p-4374d3f3.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZRangePickerStyle0","ZRangePicker","ZRangePickerMode","DATE","ZDatePickerPosition","BOTTOM","handleClick","this","getFocusedInput","handleKeyDown","ev","currentPicker","activeInput","firstPicker","lastPicker","key","document","activeElement","classList","contains","rangePickerId","_a","close","_b","open","isCrossIconEntered","firstInputError","_c","clear","printDate","_d","selectedDates","lastInputError","_e","_f","isPrevArrowEntered","isNextArrowEntered","arrowPressed","preventDefault","changeMonth","componentDidLoad","setupPickers","setupFirstPickersReadOnly","set","firstPickerReadOnly","setupLastPickersReadOnly","lastPickerReadOnly","config","enableTime","mode","DATE_TIME","locale","Italian","allowInput","wrap","dateFormat","ariaDateFormat","minuteIncrement","time_24hr","onValueUpdate","firstInputActive","firstDate","lastDate","setRangeStyle","onChange","_selectedDates","_dateStr","instance","onDateSelect","input","onOpen","setAriaOptions","element","flatpickrPosition","setFlatpickrPosition","onYearChange","onMonthChange","onKeyDown","flatpickr","Object","assign","clickOpens","appendTo","querySelector","querySelectorAll","forEach","innerHTML","trim","charAt","disableDates","date","index","calendar","getElementsByClassName","Array","from","calendarDate","getDateWithoutTime","replaceMonths","ariaLabel","breakpoint","inRange","toggle","formatDate","firstDateString","lastDateString","dateSelect","emit","newDate","Date","getFullYear","getMonth","getDate","time","month","split","months","Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre","pieces","replace","parseInt","focusedZInput","closest","hasFirstDate","length","hasLastDate","onStopTyping","value","text","detail","englishData","englishParsedData","join","isValidDate","validateDate","parse","toString","setDate","render","zInputProps","type","InputType","TEXT","icon","tabindex","message","bind","h","class","placeholder","firstPickerPlaceholder","readonly","firstAriaLabel","label","firstLabel","status","InputStatus","ERROR","onStartTyping","lastPickerPlaceholder","secondAriaLabel","secondLabel"],"sources":["src/components/date-picker/styles.css?tag=z-range-picker","src/components/date-picker/z-range-picker/index.tsx"],"sourcesContent":["@import \"~flatpickr/dist/flatpickr.min.css\";\n@import \"~flatpickr/dist/plugins/monthSelect/style.css\";\n\n/* stylelint-disable selector-class-pattern -- we have no control over flatpickr css classes naming */\n\n:host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --z-range-picker--toggle-height: 0;\n}\n\nz-date-picker {\n  position: relative;\n}\n\nz-date-picker > div > * {\n  cursor: pointer !important;\n}\n\nz-range-picker {\n  position: relative;\n}\n\n.flatpickr-toggle-container {\n  width: fit-content;\n}\n\n.range-pickers-container > div {\n  position: relative;\n}\n\n.hidden-input {\n  position: absolute;\n  bottom: 0;\n  width: 0;\n  height: 0;\n  visibility: hidden !important;\n}\n\n/* Calendar container selectors */\n.flatpickr-calendar::before,\n.flatpickr-calendar::after {\n  display: none;\n}\n\n.flatpickr-calendar {\n  position: absolute !important;\n  top: var(--z-range-picker--toggle-height) !important;\n  left: 0 !important;\n  padding-top: calc(var(--space-unit) * 2);\n  border-radius: 2px;\n  box-shadow: var(--shadow-2);\n  font-family: var(--font-family-sans) !important;\n}\n\n.months.top > .flatpickr-calendar {\n  top: -288px !important;\n}\n\n.date.top > .flatpickr-calendar,\n.date.top > div > .flatpickr-calendar {\n  top: -401px !important;\n}\n\n.date-time.top > .flatpickr-calendar,\n.date-time.top > div > .flatpickr-calendar {\n  top: -523px !important;\n}\n\n.flatpickr-calendar,\n.flatpickr-innerContainer,\n.flatpickr-days,\n.dayContainer,\n.flatpickr-rContainer,\n.flatpickr-monthSelect-months {\n  width: calc(var(--space-unit) * 42) !important;\n  max-width: calc(var(--space-unit) * 42) !important;\n}\n\n.flatpickr-monthSelect-months {\n  box-sizing: border-box;\n  padding: 0 !important;\n  margin: calc(var(--space-unit) * 2) 0 !important;\n}\n\n/* Months and year row containers selectors */\n.flatpickr-months {\n  position: relative;\n  height: calc(var(--space-unit) * 6) !important;\n  align-items: center;\n  margin-bottom: var(--space-unit) 0 !important;\n}\n\n.flatpickr-month {\n  overflow: visible !important;\n  height: calc(var(--space-unit) * 6) !important;\n}\n\n.flatpickr-current-month {\n  left: 0 !important;\n  display: flex !important;\n  width: fill-available;\n  height: calc(var(--space-unit) * 6);\n  align-items: baseline;\n  justify-content: space-evenly;\n  padding-top: 0;\n}\n\n/* Months arrows selectors */\n.flatpickr-next-month,\n.flatpickr-prev-month {\n  position: static !important;\n  display: flex;\n  width: calc(var(--space-unit) * 4) !important;\n  height: calc(var(--space-unit) * 4) !important;\n  align-items: center;\n  justify-content: center;\n  padding: 0 !important;\n}\n\n.flatpickr-prev-month {\n  margin-left: var(--space-unit);\n}\n\n.flatpickr-next-month {\n  margin-right: var(--space-unit);\n}\n\n.flatpickr-next-month > svg,\n.flatpickr-prev-month > svg {\n  width: calc(var(--space-unit) * 2) !important;\n  height: calc(var(--space-unit) * 2) !important;\n  fill: var(--color-primary01);\n}\n\n.flatpickr-next-month:hover,\n.flatpickr-prev-month:hover,\n.flatpickr-next-month:focus,\n.flatpickr-prev-month:focus {\n  border: none !important;\n  border-color: var(--color-primary03) !important;\n  background-color: var(--color-primary03) !important;\n  border-radius: var(--border-radius);\n  color: var(--color-hover-primary) !important;\n  outline: none !important;\n}\n\n.flatpickr-next-month:hover svg,\n.flatpickr-prev-month:hover svg {\n  fill: var(--color-hover-primary) !important;\n}\n\n.flatpickr-next-month:active,\n.flatpickr-prev-month:active {\n  border-color: var(--color-surface01) !important;\n  background-color: var(--color-surface01) !important;\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-2) !important;\n  color: var(--color-primary01) !important;\n}\n\n.flatpickr-next-month:focus svg,\n.flatpickr-prev-month:focus svg {\n  fill: var(--color-primary01) !important;\n}\n\n/* Months dropdown selectors */\n.flatpickr-monthDropdown-months {\n  width: 108px !important;\n  height: calc(var(--space-unit) * 5.5) !important;\n  padding-left: var(--space-unit) !important;\n  background: var(--color-surface01) !important;\n  color: var(--color-default-text) !important;\n  font-size: var(--font-size-3) !important;\n  font-weight: var(--font-rg) !important;\n  outline: 1px solid black !important;\n}\n\n.flatpickr-monthDropdown-months:hover,\n.flatpickr-monthDropdown-months:focus {\n  outline: 1px solid var(--color-primary01) !important;\n}\n\n/* Year toggle selectors */\n.flatpickr-current-month > .numInputWrapper {\n  display: flex;\n  width: calc(var(--space-unit) * 10);\n  height: calc(var(--space-unit) * 5.5) !important;\n  background: var(--color-surface01) !important;\n  color: var(--color-default-text);\n  outline: 1px solid black !important;\n}\n\n.flatpickr-current-month > .numInputWrapper:hover,\n.flatpickr-current-month > .numInputWrapper:focus-within {\n  outline: 1px solid var(--color-primary01) !important;\n}\n\n.flatpickr-current-month > .numInputWrapper > input {\n  padding: 0 calc(var(--space-unit) * 3) 0 var(--space-unit);\n  font-size: var(--font-size-3) !important;\n  font-weight: var(--font-rg) !important;\n  text-align: center;\n}\n\n/* Weekdays selectors */\n.flatpickr-weekdays {\n  height: calc(var(--space-unit) * 6);\n  border-bottom: 1px solid var(--color-surface03);\n}\n\n.flatpickr-weekday {\n  font-size: var(--font-size-3) !important;\n  font-weight: var(--font-rg) !important;\n}\n\n/* Calendar days and months selectors */\n.flatpickr-day,\n.flatpickr-monthSelect-month {\n  width: calc(var(--space-unit) * 6) !important;\n  max-width: 100% !important;\n  height: calc(var(--space-unit) * 6) !important;\n  border: none;\n  margin: 0 !important;\n  border-radius: 0 !important;\n  box-shadow: none !important;\n  font-size: var(--font-size-3) !important;\n  line-height: calc(var(--space-unit) * 6) !important;\n}\n\n.flatpickr-day {\n  width: calc(var(--space-unit) * 6) !important;\n  border: none;\n  line-height: calc(var(--space-unit) * 6) !important;\n}\n\n.flatpickr-monthSelect-month {\n  width: calc(var(--space-unit) * 14) !important;\n  padding: 0 !important;\n  border: 2px solid var(--color-surface01) !important;\n  line-height: calc(var(--space-unit) * 5) !important;\n}\n\n.flatpickr-day:not(.flatpickr-disabled):hover,\n.flatpickr-day:not(.flatpickr-disabled):active,\n.flatpickr-day:not(.flatpickr-disabled):focus,\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:hover,\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:active,\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:focus,\n.flatpickr-day:not(.flatpickr-disabled).selected:hover,\n.flatpickr-day:not(.flatpickr-disabled).selected:active,\n.flatpickr-day:not(.flatpickr-disabled).selected:focus,\n.flatpickr-monthSelect-month:hover,\n.flatpickr-monthSelect-month:active,\n.flatpickr-monthSelect-month:focus {\n  border-color: var(--color-hover-primary) !important;\n  background-color: var(--color-hover-primary) !important;\n  color: var(--color-text-inverse) !important;\n}\n\n.flatpickr-day.today,\n.flatpickr-monthSelect-month.today {\n  border: 2px solid var(--color-hover-primary) !important;\n}\n\n.flatpickr-day.selected:not(.flatpickr-disabled),\n.flatpickr-monthSelect-month.selected:not(.flatpickr-disabled) {\n  border-color: var(--color-primary01) !important;\n  background-color: var(--color-primary01) !important;\n}\n\n.flatpickr-weekday:nth-child(6),\n.flatpickr-weekday:nth-child(7),\n.flatpickr-day:nth-child(7n + 6),\n.flatpickr-day:nth-child(7n + 7) {\n  font-weight: var(--font-sb) !important;\n}\n\n/* Date and time selectors */\n.flatpickr-time {\n  display: block;\n  height: 90px !important;\n  max-height: 90px !important;\n  text-align: left;\n}\n\n.flatpickr-time::before {\n  display: block;\n  width: 100%;\n  padding-left: var(--space-unit);\n  color: var(--color-default-text) !important;\n  content: \"Orario\";\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  text-transform: uppercase;\n}\n\n.flatpickr-time.time24hr {\n  margin: calc(var(--space-unit) * 2) !important;\n}\n\n.flatpickr-time.time24hr > .numInputWrapper > input:hover,\n.flatpickr-time.time24hr > .numInputWrapper > input:focus,\n.flatpickr-time.time24hr > .numInputWrapper:hover {\n  background-color: var(--color-surface01) !important;\n}\n\n.flatpickr-time.time24hr > div {\n  width: calc(var(--space-unit) * 10) !important;\n  height: calc(var(--space-unit) * 5.5) !important;\n  margin-right: var(--space-unit) !important;\n  margin-left: var(--space-unit) !important;\n}\n\n.flatpickr-time-separator {\n  display: flex;\n  height: calc(var(--space-unit) * 5.5) !important;\n  align-items: center;\n  justify-content: center;\n  font-weight: unset !important;\n}\n\n.flatpickr-minute,\n.flatpickr-hour {\n  font-size: var(--font-size-3) !important;\n  font-weight: var(--font-rg) !important;\n  outline: 1px solid black !important;\n}\n\n.numInputWrapper:hover .flatpickr-minute,\n.numInputWrapper:hover .flatpickr-hour,\n.flatpickr-minute:focus,\n.flatpickr-hour:focus {\n  outline: 1px solid var(--color-primary01) !important;\n}\n\n/* toggle arrows selectors */\n.arrowUp,\n.arrowDown {\n  width: calc(var(--space-unit) * 2) !important;\n  height: calc(var(--space-unit) * 2) !important;\n  padding: 0 !important;\n  border: none !important;\n  opacity: 1 !important;\n}\n\n.arrowUp {\n  margin-top: calc(var(--space-unit) / 2) !important;\n  margin-right: calc(var(--space-unit) / 2) !important;\n}\n\n.arrowDown {\n  top: auto !important;\n  margin-top: calc(var(--space-unit) * 3) !important;\n  margin-right: calc(var(--space-unit) / 2) !important;\n}\n\n.arrowUp:hover,\n.arrowDown:hover {\n  border-color: var(--color-primary03) !important;\n  background-color: var(--color-primary03) !important;\n  border-radius: var(--border-radius);\n  color: var(--color-hover-primary) !important;\n}\n\n.arrowUp:active,\n.arrowDown:active {\n  border-color: var(--color-surface01) !important;\n  background-color: var(--color-surface01) !important;\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-2) !important;\n  color: var(--color-primary01) !important;\n}\n\n.arrowUp::after,\n.arrowDown::after {\n  padding: 2.5px !important;\n  border: solid var(--color-primary01) !important;\n  border-width: 0 1px 1px 0 !important;\n}\n\n.arrowUp::after {\n  top: 0 !important;\n  margin-top: 6px !important;\n  margin-left: 5.5px !important;\n  transform: rotate(-135deg);\n}\n\n.arrowDown::after {\n  top: 0 !important;\n  left: 5.5px !important;\n  margin-top: 4px !important;\n  transform: rotate(45deg);\n}\n\n/* range-date-picker selectors */\n\n.flatpickr-day:not(.flatpickr-disabled).inRange:hover,\n.flatpickr-day:not(.flatpickr-disabled).today.inRange:hover,\n.flatpickr-day.prevMonthDay:not(.flatpickr-disabled).inRange:hover,\n.flatpickr-monthSelect-month:not(.flatpickr-disabled).inRange:hover {\n  border-color: var(--color-hover-primary) !important;\n  background-color: var(--color-hover-primary) !important;\n}\n\n.flatpickr-day:not(.flatpickr-disabled).inRange,\n.flatpickr-day:not(.flatpickr-disabled).today.inRange,\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.inRange,\n.flatpickr-monthSelect-month:not(.flatpickr-disabled).inRange {\n  border-color: var(--color-primary03);\n  background-color: var(--color-primary03);\n}\n\n.flatpickr-day:not(.flatpickr-disabled).startRange,\n.flatpickr-day:not(.flatpickr-disabled).endRange,\n.flatpickr-monthSelect-month:not(.flatpickr-disabled).startRange,\n.flatpickr-monthSelect-month:not(.flatpickr-disabled).endRange {\n  border-color: var(--color-primary01) !important;\n  background-color: var(--color-primary01) !important;\n}\n\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.selected.startRange,\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.selected.endRange {\n  border-color: var(--color-primary01) !important;\n  background-color: var(--color-primary01) !important;\n}\n\n.flatpickr-range.second-input {\n  cursor: pointer;\n}\n\n.range-pickers-container {\n  display: flex;\n  gap: 16px;\n}\n","import {Component, Element, Event, EventEmitter, Listen, Prop, State, Watch, h} from \"@stencil/core\";\n\nimport flatpickr from \"flatpickr\";\nimport {Italian} from \"flatpickr/dist/l10n/it.js\";\n\nimport {InputStatus, InputType, ZDatePickerPosition, ZRangePickerMode} from \"../../../beans\";\nimport {setAriaOptions, setFlatpickrPosition, validateDate} from \"../utils\";\n\n@Component({\n  tag: \"z-range-picker\",\n  styleUrl: \"../styles.css\",\n  shadow: false,\n})\nexport class ZRangePicker {\n  @Element() element: HTMLZRangePickerElement;\n\n  /** unique id */\n  @Prop()\n  rangePickerId: string;\n\n  /** first z-input aria label */\n  @Prop()\n  firstAriaLabel?: string;\n\n  /** first z-input label */\n  @Prop()\n  firstLabel?: string;\n\n  /** second z-input aria label */\n  @Prop()\n  secondAriaLabel?: string;\n\n  /** second z-input label */\n  @Prop()\n  secondLabel?: string;\n\n  /** [Optional] datepicker mode: date or datetime */\n  @Prop()\n  mode: ZRangePickerMode = ZRangePickerMode.DATE;\n\n  /** readonly mode */\n  @Prop()\n  firstPickerReadOnly = false;\n\n  /** readonly mode */\n  @Prop()\n  lastPickerReadOnly = false;\n\n  /** readonly mode */\n  @Prop()\n  firstPickerPlaceholder = \"\";\n\n  /** readonly mode */\n  @Prop()\n  lastPickerPlaceholder = \"\";\n\n  @State()\n  flatpickrPosition: ZDatePickerPosition = ZDatePickerPosition.BOTTOM;\n\n  @State()\n  activeInput = \"start-input\";\n\n  @State()\n  firstInputError = false;\n\n  @State()\n  lastInputError = false;\n\n  private firstPicker;\n\n  private lastPicker;\n\n  /** emitted when date changes, returns an array with the two selected dates */\n  @Event()\n  dateSelect: EventEmitter;\n\n  @Listen(\"click\", {target: \"body\", capture: true})\n  handleClick(): void {\n    this.getFocusedInput();\n  }\n\n  @Listen(\"keyup\", {target: \"body\", capture: true})\n  handleKeyDown(ev: KeyboardEvent): void {\n    const currentPicker = this.activeInput === \"start-input\" ? this.firstPicker : this.lastPicker;\n\n    this.getFocusedInput();\n\n    if (ev.key === \"Escape\") {\n      document.activeElement.classList.contains(`${this.rangePickerId}-1`) && this.firstPicker?.close();\n\n      document.activeElement.classList.contains(`${this.rangePickerId}-2`) && this.lastPicker?.close();\n    }\n\n    if (ev.key === \"Enter\" || ev.key === \" \") {\n      if (\n        document.activeElement.classList.contains(`${this.rangePickerId}-1`) ||\n        document.activeElement.classList.contains(`${this.rangePickerId}-2`)\n      ) {\n        currentPicker?.open();\n      }\n\n      const isCrossIconEntered = document.activeElement.classList.contains(\"reset-icon\");\n\n      if (isCrossIconEntered) {\n        if (this.activeInput === \"start-input\") {\n          this.firstInputError = false;\n          this.firstPicker?.clear();\n          this.printDate(null, this.lastPicker?.selectedDates[0] || null);\n        }\n        if (this.activeInput === \"end-input\") {\n          this.lastInputError = false;\n          this.firstPicker?.clear();\n          this.printDate(this.firstPicker?.selectedDates[0] || null, null);\n        }\n      }\n\n      const isPrevArrowEntered = document.activeElement.classList.contains(\"flatpickr-prev-month\");\n      const isNextArrowEntered = document.activeElement.classList.contains(\"flatpickr-next-month\");\n      const arrowPressed = isPrevArrowEntered || isNextArrowEntered;\n\n      arrowPressed && ev.key === \" \" && ev.preventDefault();\n\n      isPrevArrowEntered && currentPicker?.changeMonth(-1);\n      isNextArrowEntered && currentPicker?.changeMonth(1);\n    }\n  }\n\n  componentDidLoad(): void {\n    this.setupPickers();\n  }\n\n  @Watch(\"firstPickerReadOnly\")\n  setupFirstPickersReadOnly(): void {\n    this.firstPicker?.set(\"clickOpens\", !this.firstPickerReadOnly);\n  }\n\n  @Watch(\"lastPickerReadOnly\")\n  setupLastPickersReadOnly(): void {\n    this.lastPicker?.set(\"clickOpens\", !this.lastPickerReadOnly);\n  }\n\n  @Watch(\"mode\")\n  setupPickers(): void {\n    const config = {\n      enableTime: this.mode === ZRangePickerMode.DATE_TIME,\n      locale: Italian,\n      allowInput: true,\n      wrap: true,\n      dateFormat: this.mode === ZRangePickerMode.DATE_TIME ? \"d-m-Y - H:i\" : \"d-m-Y\",\n      ariaDateFormat: \"d F Y\",\n      minuteIncrement: 1,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      time_24hr: true,\n      onValueUpdate: () => {\n        const firstInputActive = this.activeInput === \"start-input\";\n        const firstDate = this.firstPicker.selectedDates[0];\n        const lastDate = this.lastPicker.selectedDates[0];\n\n        if (+firstDate > +lastDate) {\n          if (firstInputActive) {\n            this.firstInputError = true;\n            this.printDate(null, lastDate || null);\n          } else {\n            this.lastInputError = true;\n            this.printDate(firstDate || null, null);\n          }\n        } else {\n          this.lastInputError = false;\n          this.firstInputError = false;\n          this.printDate(firstDate || null, lastDate || null);\n        }\n        this.setRangeStyle(0);\n        this.setRangeStyle(1);\n      },\n      onChange: (_selectedDates, _dateStr, instance) => {\n        this.onDateSelect();\n        this.setRangeStyle(instance.input.classList.contains(\"start-input\") ? 0 : 1);\n      },\n      onOpen: (_selectedDates, _dateStr, instance) => {\n        setAriaOptions(this.element, this.mode);\n        this.flatpickrPosition = setFlatpickrPosition(this.element, this.mode);\n        this.setRangeStyle(instance.input.classList.contains(\"start-input\") ? 0 : 1);\n        this.getFocusedInput();\n      },\n      onYearChange: (_selectedDates, _dateStr, instance) => {\n        this.setRangeStyle(instance.input.classList.contains(\"start-input\") ? 0 : 1);\n      },\n      onMonthChange: (_selectedDates, _dateStr, instance) => {\n        this.setRangeStyle(instance.input.classList.contains(\"start-input\") ? 0 : 1);\n      },\n      onKeyDown: () => {\n        setAriaOptions(this.element, this.mode);\n      },\n    };\n\n    this.firstPicker = flatpickr(`.${this.rangePickerId}-1-container`, {\n      ...{...config, clickOpens: !this.firstPickerReadOnly},\n      mode: \"single\",\n      appendTo: this.element.querySelector(`.${this.rangePickerId}-1-wrapper`),\n    });\n    this.lastPicker = flatpickr(`.${this.rangePickerId}-2-container`, {\n      ...{...config, clickOpens: !this.lastPickerReadOnly},\n      mode: \"single\",\n      appendTo: this.element.querySelector(`.${this.rangePickerId}-2-wrapper`),\n    });\n\n    this.element.querySelectorAll(\".flatpickr-weekday\").forEach((element) => {\n      element.innerHTML = element.innerHTML.trim().charAt(0);\n    });\n  }\n\n  private onDateSelect(): void {\n    const firstInputActive = this.activeInput === \"start-input\";\n    const firstDate = this.firstPicker.selectedDates[0];\n    const lastDate = this.lastPicker.selectedDates[0];\n\n    if (+firstDate > +lastDate) {\n      if (firstInputActive) {\n        this.firstInputError = true;\n        this.printDate(null, lastDate || null);\n      } else {\n        this.lastInputError = true;\n        this.printDate(firstDate || null, null);\n      }\n    } else {\n      this.lastInputError = false;\n      this.firstInputError = false;\n      this.printDate(firstDate || null, lastDate || null);\n    }\n  }\n\n  private disableDates(date, index): void {\n    const calendar = this.element.getElementsByClassName(\"flatpickr-calendar\")[index];\n\n    Array.from(calendar.getElementsByClassName(\"flatpickr-day\")).forEach((element: Element) => {\n      const calendarDate = this.getDateWithoutTime(this.replaceMonths(element.ariaLabel, null));\n\n      const breakpoint = this.getDateWithoutTime(date);\n      const inRange = index === 0 ? calendarDate > breakpoint : calendarDate < breakpoint;\n\n      if (inRange) {\n        element.classList.toggle(\"flatpickr-disabled\", true);\n      } else {\n        element.classList.toggle(\"flatpickr-disabled\", false);\n      }\n    });\n    setAriaOptions(this.element, this.mode);\n  }\n\n  private formatDate(date): string {\n    if (this.mode === ZRangePickerMode.DATE) {\n      return `${flatpickr.formatDate(date, \"d-m-Y\")}`;\n    }\n\n    return `${flatpickr.formatDate(date, \"d-m-Y - H:i\")}`;\n  }\n\n  private printDate(firstDate, lastDate): void {\n    const firstDateString = firstDate ? this.formatDate(firstDate) : null;\n    const lastDateString = lastDate ? this.formatDate(lastDate) : null;\n\n    this.dateSelect.emit([firstDateString, lastDateString]);\n  }\n\n  private getDateWithoutTime(date): Date {\n    const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0);\n\n    return newDate;\n  }\n\n  /** Replace month word to month number */\n  private replaceMonths(date, time): Date {\n    const month = date.split(\" \")[1];\n    const months = {\n      /* eslint-disable @typescript-eslint/naming-convention */\n      Gennaio: \"01\",\n      Febbraio: \"02\",\n      Marzo: \"03\",\n      Aprile: \"04\",\n      Maggio: \"05\",\n      Giugno: \"06\",\n      Luglio: \"07\",\n      Agosto: \"08\",\n      Settembre: \"09\",\n      Ottobre: \"10\",\n      Novembre: \"11\",\n      Dicembre: \"12\",\n      /* eslint-enable @typescript-eslint/naming-convention */\n    };\n\n    const pieces = date.replace(month, months[month]).split(\" \");\n\n    return new Date(\n      parseInt(pieces[2]),\n      parseInt(pieces[1]) - 1,\n      parseInt(pieces[0]),\n      time ? parseInt(time.split(\":\")[0]) : 0,\n      time ? parseInt(time.split(\":\")[1]) : 0\n    );\n  }\n\n  /** Get the current focused input, first or last */\n  private getFocusedInput(): string {\n    const focusedZInput = document.activeElement.closest(\"z-input\");\n    if (!focusedZInput) {\n      return;\n    }\n\n    if (focusedZInput?.classList.contains(\"start-input\")) {\n      this.activeInput = \"start-input\";\n    } else if (focusedZInput.classList.contains(\"end-input\")) {\n      this.activeInput = \"end-input\";\n    }\n  }\n\n  /** Set style of the days between the two selected dates */\n  private setRangeStyle(index): void {\n    Array.from(this.element.getElementsByClassName(\"flatpickr-calendar\")).forEach((element: Element) => {\n      Array.from(element.getElementsByClassName(\"flatpickr-day\")).forEach((element: Element) => {\n        const hasFirstDate = this.firstPicker.selectedDates.length === 1;\n        const hasLastDate = this.lastPicker.selectedDates.length === 1;\n        let firstDate;\n        let lastDate;\n        const date = this.getDateWithoutTime(this.replaceMonths(element.ariaLabel, null));\n\n        if (hasFirstDate) {\n          firstDate = this.getDateWithoutTime(this.firstPicker.selectedDates[0]);\n          if (+date === +firstDate) {\n            element.classList.toggle(\"startRange\", true);\n          } else {\n            element.classList.toggle(\"startRange\", false);\n          }\n        }\n\n        if (hasLastDate) {\n          lastDate = this.getDateWithoutTime(this.lastPicker.selectedDates[0]);\n          if (+date === +lastDate) {\n            element.classList.toggle(\"endRange\", true);\n          } else {\n            element.classList.toggle(\"endRange\", false);\n          }\n        }\n\n        if (hasFirstDate && hasLastDate) {\n          if (date > firstDate && date < lastDate) {\n            element.classList.toggle(\"inRange\", true);\n          } else {\n            element.classList.toggle(\"inRange\", false);\n          }\n        }\n\n        if (index === 0 && hasLastDate) {\n          this.disableDates(this.lastPicker.selectedDates[0], index);\n        }\n        if (index === 1 && hasFirstDate) {\n          this.disableDates(this.firstPicker.selectedDates[0], index);\n        }\n      });\n    });\n  }\n\n  private onStopTyping(value): void {\n    const text = value.detail.value.replace(\"/\", \"-\");\n    const englishData = text.split(\"-\");\n    const time = this.mode === ZRangePickerMode.DATE_TIME ? `T${englishData[3]}:00` : \"\";\n    const englishParsedData = `${englishData[2]}-${englishData[1]}-${englishData[0]}${time}`.split(\" \").join(\"\");\n\n    const isValidDate = validateDate(text, this.mode === ZRangePickerMode.DATE_TIME);\n\n    const date = Date.parse(englishParsedData).toString();\n\n    if (this.activeInput === \"start-input\") {\n      if (text === \"\") {\n        this.firstInputError = false;\n        this.firstPicker.setDate([]);\n        this.printDate(null, this.lastPicker.selectedDates[0] || null);\n      } else if (!isValidDate) {\n        this.firstInputError = true;\n        this.printDate(null, this.lastPicker.selectedDates[0] || null);\n      } else if (isValidDate) {\n        if (this.lastPicker.selectedDates.length === 1) {\n          if (+date <= +this.lastPicker.selectedDates[0]) {\n            this.firstInputError = false;\n            this.firstPicker.setDate([text]);\n            this.printDate(new Date(englishParsedData), this.lastPicker.selectedDates[0]);\n          } else {\n            this.firstInputError = true;\n            this.printDate(null, this.lastPicker.selectedDates[0]);\n          }\n        } else {\n          this.firstInputError = false;\n          this.firstPicker.setDate([text]);\n          this.printDate(new Date(englishParsedData), null);\n        }\n      }\n    } else if (text === \"\") {\n      this.lastInputError = false;\n      this.lastPicker.setDate([]);\n      this.printDate(this.firstPicker.selectedDates[0] || null, null);\n    } else if (!isValidDate) {\n      this.lastInputError = true;\n      this.printDate(this.firstPicker.selectedDates[0] || null, null);\n    } else if (isValidDate) {\n      if (this.firstPicker.selectedDates.length === 1) {\n        if (+date >= +this.firstPicker.selectedDates[0]) {\n          this.lastInputError = false;\n          this.lastPicker.setDate([text]);\n          this.printDate(this.firstPicker.selectedDates[0], new Date(englishParsedData));\n        } else {\n          this.lastInputError = true;\n          this.printDate(this.firstPicker.selectedDates[0], null);\n        }\n      } else {\n        this.lastInputError = false;\n        this.lastPicker.setDate([text]);\n        this.printDate(null, new Date(englishParsedData));\n      }\n    }\n\n    this.setRangeStyle(this.activeInput === \"start-input\" ? 0 : 1);\n  }\n\n  render(): HTMLDivElement {\n    const zInputProps = {\n      type: InputType.TEXT,\n      icon: \"event\",\n      tabindex: \"0\",\n      message: false,\n      onStopTyping: this.onStopTyping.bind(this),\n      value: \"\",\n    };\n\n    return (\n      <div\n        class={{\n          [\"range-pickers-container\"]: true,\n          [this.mode]: true,\n          [this.activeInput]: true,\n          [this.flatpickrPosition]: true,\n        }}\n      >\n        <div class={`${this.rangePickerId}-1-wrapper`}>\n          <div class={`${this.rangePickerId}-1-container`}>\n            <z-input\n              {...zInputProps}\n              placeholder={this.firstPickerPlaceholder}\n              readonly={this.firstPickerReadOnly}\n              data-input=\"data-input\"\n              class={`start-input ${this.rangePickerId}-1`}\n              ariaLabel={this.firstAriaLabel}\n              label={this.firstLabel}\n              status={this.firstInputError && InputStatus.ERROR}\n              onStartTyping={() => {\n                this.firstInputError = false;\n              }}\n            />\n          </div>\n        </div>\n        <div class={`${this.rangePickerId}-2-wrapper`}>\n          <div class={`${this.rangePickerId}-2-container`}>\n            <z-input\n              {...zInputProps}\n              placeholder={this.lastPickerPlaceholder}\n              readonly={this.lastPickerReadOnly}\n              data-input=\"data-input\"\n              class={`end-input ${this.rangePickerId}-2`}\n              ariaLabel={this.secondAriaLabel}\n              label={this.secondLabel}\n              status={this.lastInputError && InputStatus.ERROR}\n              onStartTyping={() => {\n                this.lastInputError = false;\n              }}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/web-components-library/p-4c462e7f.js

@@ -0,0 +1,2 @@
+import{r as o,h as s,a as r}from"./p-75c4a726.js";const e=":host{--z-table--cells-bottom-border-size:var(\n    --border-size-medium\n  );--z-table--cells-background:var(\n    --color-background\n  );display:block;box-sizing:border-box}:host([sticky]){position:sticky;z-index:2;top:0;box-shadow:0 2px 4px -2px var(--shadow-color-base)}";const a=e;const c=class{constructor(s){o(this,s);this.sticky=false}render(){return s(r,{key:"ef0a3c17f7163b6bdb0d43d21cb1ac6607f53e7c",role:"rowgroup"},s("slot",{key:"80b4a406f26e0c637972e663d99707431d39e9a4"}))}};c.style=a;export{c as Z};
+//# sourceMappingURL=p-4c462e7f.js.map

package/dist/web-components-library/p-4c462e7f.js.map

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

package/dist/web-components-library/p-50bf57b4.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as r}from"./p-75c4a726.js";import{L as a}from"./p-b34993de.js";const i=":host{--card-overflow:hidden}div{display:flex;overflow:var(--card-overflow);width:auto;width:256px;height:522px;box-sizing:border-box;flex-direction:column;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius)}div.real,div.trial,div.temp{border-color:var(--blue100)}div.faded{border:var(--border-size-medium) solid var(--color-background)}div.highlighted{box-shadow:var(--shadow-4);outline:none}div.pressed{box-shadow:var(--shadow-8);outline:none}div:focus{box-shadow:var(--shadow-focus-primary);outline:none}";const t=i;const o=class{constructor(r){e(this,r);this.faded=undefined;this.cardtype=undefined;this.ispressed=false;this.ishighlighted=false}retrieveClass(){let e="";if(this.cardtype===a.REAL){e+="real"}else if(this.cardtype===a.TRIAL){e+="trial"}else if(this.cardtype===a.TEMP){e+="temp"}if(this.faded){e+=" faded"}else if(this.ispressed){e+=" pressed"}else if(this.ishighlighted){e+=" highlighted"}return e}render(){return r("div",{key:"d999d04c93a5a556d397ec0458a8db7b252e4f4c",class:this.retrieveClass(),tabindex:"0"},r("slot",{key:"bebbc05f7f4a7e57a0b0379abc0a5b3d71432309"}))}};o.style=t;const d=":host{width:auto;height:340px}:host>div{position:relative;display:flex;width:auto;height:340px;align-items:center;justify-content:center}";const s=d;const n=class{constructor(r){e(this,r)}render(){return r("div",{key:"87bccb8aa58d306d1dd01960d83b87f6c72916a6"},r("slot",{key:"f30fbd1e1bebda1bab8dffeab7f7f6691eddf487",name:"alert"}),r("slot",{key:"1c12604a64392bea5f30af724bb10ad074336246",name:"cover"}))}};n.style=s;const c="img{display:block;max-width:100%;height:340px;margin:auto;object-fit:cover}img.faded{opacity:0.3}";const l=c;const h=class{constructor(r){e(this,r);this.img=undefined;this.titolo=undefined;this.faded=undefined;this.defaultimg=undefined}hadleOnImageError(){this.img=this.defaultimg}render(){return r("img",{key:"e8bb33422b5ec5cd69aa639b75bac7d36efb7eb0",class:this.faded&&"faded",onError:this.hadleOnImageError.bind(this),alt:this.titolo,src:this.img})}};h.style=l;const b='header{position:relative;display:flex;width:auto;height:calc(var(--space-unit) * 6);flex-direction:row;align-items:flex-start;justify-content:space-between;border-bottom:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius)}slot[name="aria-heading"]::slotted(*){position:absolute;overflow:hidden !important;width:1px !important;height:1px !important;padding:0 !important;border:0 none !important;margin:-1px !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important}header.real,header.trial,header.temp{border-bottom:var(--border-size-medium) solid var(--blue100);background-color:var(--color-primary03)}.card-title{overflow:hidden;height:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2);margin:0;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:12px;font-weight:var(--font-sb);letter-spacing:0.22px;line-height:calc(var(--space-unit) * 2);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.faded{border-bottom:var(--border-size-medium) solid var(--color-background)}.faded.real,.faded.trial,.faded.temp{border-top:var(--border-size-medium) solid var(--blue100);border-right:var(--border-size-medium) solid var(--blue100);border-left:var(--border-size-medium) solid var(--blue100)}';const f=b;const u=class{constructor(r){e(this,r);this.titolo=undefined;this.faded=undefined;this.cardtype=undefined;this.allowTooltip=false}getTitle(){return this.allowTooltip?this.titolo:""}componentDidLoad(){if(this.elementHasEllipsis()){this.allowTooltip=true}}elementHasEllipsis(){return this.ellipsis.offsetWidth<this.ellipsis.scrollWidth}retrieveClass(){return{real:this.cardtype===a.REAL,trial:this.cardtype===a.TRIAL,temp:this.cardtype===a.TEMP,faded:this.faded}}render(){return r("header",{key:"4dd5f09942f07568a180ac4bc2079aa3ebb5caf5",class:this.retrieveClass()},r("slot",{key:"09f9e26d737c37eb81b0f88430baeb731275a118",name:"aria-heading"}),r("span",{key:"a6401d5728990d95a9963ef9feb4496accfb9676",class:"card-title",ref:e=>this.ellipsis=e,title:this.getTitle()},this.titolo),r("slot",{key:"98e8d0b79de7170ac81aceed3fe07275b80f7d08",name:"icon"}))}};u.style=f;export{o as z_myz_card,n as z_myz_card_body,h as z_myz_card_cover,u as z_myz_card_header};
+//# sourceMappingURL=p-50bf57b4.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMyzCardStyle0","ZMyzCardComponent","retrieveClass","elemClasses","this","cardtype","LicenseType","REAL","TRIAL","TEMP","faded","ispressed","ishighlighted","render","h","key","class","tabindex","ZMyzCardBodyStyle0","ZMyzCardBody","name","ZMyzCardCoverStyle0","ZMyzCardCover","hadleOnImageError","img","defaultimg","onError","bind","alt","titolo","src","ZMyzCardHeaderStyle0","ZMyzCardHeader","getTitle","allowTooltip","componentDidLoad","elementHasEllipsis","ellipsis","offsetWidth","scrollWidth","real","trial","temp","ref","el","title"],"sources":["src/snowflakes/myz/card/z-myz-card/styles.css?tag=z-myz-card&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card/index.tsx","src/snowflakes/myz/card/z-myz-card-body/styles.css?tag=z-myz-card-body&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-body/index.tsx","src/snowflakes/myz/card/z-myz-card-cover/styles.css?tag=z-myz-card-cover&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-cover/index.tsx","src/snowflakes/myz/card/z-myz-card-header/styles.css?tag=z-myz-card-header&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-header/index.tsx"],"sourcesContent":[":host {\n  --card-overflow: hidden;\n}\n\ndiv {\n  display: flex;\n  overflow: var(--card-overflow);\n  width: auto;\n  width: 256px; /* TODO: width must be 100% - must be handled in dashboard */\n  height: 522px;\n  box-sizing: border-box;\n  flex-direction: column;\n  border: var(--border-size-medium) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n}\n\ndiv.real,\ndiv.trial,\ndiv.temp {\n  border-color: var(--blue100);\n}\n\n/* HIDDEN status */\ndiv.faded {\n  border: var(--border-size-medium) solid var(--color-background);\n}\n\n/* HIGHLIGHTED status */\ndiv.highlighted {\n  box-shadow: var(--shadow-4);\n  outline: none;\n}\n\n/* PRESSED status */\ndiv.pressed {\n  box-shadow: var(--shadow-8);\n  outline: none;\n}\n\ndiv:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/**\n * @slot  - generic card slot\n */\n@Component({\n  tag: \"z-myz-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardComponent {\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** graphic variant (optional) */\n  @Prop()\n  cardtype?: LicenseType;\n\n  /** pressed status */\n  @Prop()\n  ispressed = false;\n\n  /** highlighted status */\n  @Prop()\n  ishighlighted = false;\n\n  private retrieveClass(): string {\n    let elemClasses = \"\";\n\n    if (this.cardtype === LicenseType.REAL) {\n      elemClasses += \"real\";\n    } else if (this.cardtype === LicenseType.TRIAL) {\n      elemClasses += \"trial\";\n    } else if (this.cardtype === LicenseType.TEMP) {\n      elemClasses += \"temp\";\n    }\n\n    if (this.faded) {\n      elemClasses += \" faded\";\n    } else if (this.ispressed) {\n      elemClasses += \" pressed\";\n    } else if (this.ishighlighted) {\n      elemClasses += \" highlighted\";\n    }\n\n    return elemClasses;\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={this.retrieveClass()}\n        tabindex=\"0\"\n      >\n        <slot />\n      </div>\n    );\n  }\n}\n",":host {\n  width: auto;\n  height: 340px;\n}\n\n:host > div {\n  position: relative;\n  display: flex;\n  width: auto;\n  height: 340px;\n  align-items: center;\n  justify-content: center;\n}\n","import {Component, h} from \"@stencil/core\";\n\n/**\n * @slot alert - card alert slot\n * @slot cover - book cover slot\n */\n@Component({\n  tag: \"z-myz-card-body\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardBody {\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <slot name=\"alert\"></slot>\n        <slot name=\"cover\" />\n      </div>\n    );\n  }\n}\n","img {\n  display: block;\n  max-width: 100%;\n  height: 340px;\n  margin: auto;\n  object-fit: cover;\n}\n\nimg.faded {\n  opacity: 0.3;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-myz-card-cover\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardCover {\n  /** image source */\n  @Prop()\n  img: string;\n\n  /** cover alt title */\n  @Prop()\n  titolo: string;\n\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** default error image source */\n  @Prop()\n  defaultimg: string;\n\n  private hadleOnImageError(): void {\n    this.img = this.defaultimg;\n  }\n\n  render(): HTMLImageElement {\n    return (\n      <img\n        class={this.faded && \"faded\"}\n        onError={this.hadleOnImageError.bind(this)}\n        alt={this.titolo}\n        src={this.img}\n      />\n    );\n  }\n}\n","header {\n  position: relative;\n  display: flex;\n  width: auto;\n  height: calc(var(--space-unit) * 6);\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius);\n}\n\nslot[name=\"aria-heading\"]::slotted(*) {\n  position: absolute;\n  overflow: hidden !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  border: 0 none !important;\n  margin: -1px !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n}\n\nheader.real,\nheader.trial,\nheader.temp {\n  border-bottom: var(--border-size-medium) solid var(--blue100);\n  background-color: var(--color-primary03);\n}\n\n.card-title {\n  overflow: hidden;\n  height: calc(var(--space-unit) * 2);\n  padding: calc(var(--space-unit) * 2);\n  margin: 0;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 12px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.22px;\n  line-height: calc(var(--space-unit) * 2);\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.faded {\n  border-bottom: var(--border-size-medium) solid var(--color-background);\n}\n\n.faded.real,\n.faded.trial,\n.faded.temp {\n  border-top: var(--border-size-medium) solid var(--blue100);\n  border-right: var(--border-size-medium) solid var(--blue100);\n  border-left: var(--border-size-medium) solid var(--blue100);\n}\n","import {Component, Prop, State, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/**\n * @slot icon - card header icon slot\n */\n@Component({\n  tag: \"z-myz-card-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardHeader {\n  /** volume title */\n  @Prop()\n  titolo: string;\n\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** card graphic variant (optional) */\n  @Prop()\n  cardtype?: LicenseType;\n\n  @State()\n  allowTooltip = false;\n\n  private ellipsis?: HTMLElement;\n\n  private getTitle(): string {\n    return this.allowTooltip ? this.titolo : \"\";\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis()) {\n      this.allowTooltip = true;\n    }\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  private retrieveClass(): JSXBase.HTMLAttributes[\"class\"] {\n    return {\n      real: this.cardtype === LicenseType.REAL,\n      trial: this.cardtype === LicenseType.TRIAL,\n      temp: this.cardtype === LicenseType.TEMP,\n      faded: this.faded,\n    };\n  }\n\n  render(): HTMLElement {\n    return (\n      <header class={this.retrieveClass()}>\n        <slot name=\"aria-heading\" />\n        <span\n          class=\"card-title\"\n          ref={(el) => (this.ellipsis = el as HTMLElement)}\n          title={this.getTitle()}\n        >\n          {this.titolo}\n        </span>\n        <slot name=\"icon\" />\n      </header>\n    );\n  }\n}\n"],"mappings":"+EAAA,MAAMA,EAAY,mlBAClB,MAAAC,EAAeD,E,MCUFE,EAAiB,M,qFAWhB,M,mBAII,K,CAER,aAAAC,GACN,IAAIC,EAAc,GAElB,GAAIC,KAAKC,WAAaC,EAAYC,KAAM,CACtCJ,GAAe,M,MACV,GAAIC,KAAKC,WAAaC,EAAYE,MAAO,CAC9CL,GAAe,O,MACV,GAAIC,KAAKC,WAAaC,EAAYG,KAAM,CAC7CN,GAAe,M,CAGjB,GAAIC,KAAKM,MAAO,CACdP,GAAe,Q,MACV,GAAIC,KAAKO,UAAW,CACzBR,GAAe,U,MACV,GAAIC,KAAKQ,cAAe,CAC7BT,GAAe,c,CAGjB,OAAOA,C,CAGT,MAAAU,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,MAAOZ,KAAKF,gBACZe,SAAS,KAETH,EAAA,QAAAC,IAAA,6C,aCxDR,MAAMhB,EAAY,4IAClB,MAAAmB,EAAenB,E,MCUFoB,EAAY,M,yBACvB,MAAAN,GACE,OACEC,EAAA,OAAAC,IAAA,4CACED,EAAA,QAAAC,IAAA,2CAAMK,KAAK,UACXN,EAAA,QAAAC,IAAA,2CAAMK,KAAK,U,aChBnB,MAAMrB,EAAY,oGAClB,MAAAsB,EAAetB,E,MCMFuB,EAAa,M,iHAiBhB,iBAAAC,GACNnB,KAAKoB,IAAMpB,KAAKqB,U,CAGlB,MAAAZ,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,MAAOZ,KAAKM,OAAS,QACrBgB,QAAStB,KAAKmB,kBAAkBI,KAAKvB,MACrCwB,IAAKxB,KAAKyB,OACVC,IAAK1B,KAAKoB,K,aClClB,MAAMzB,EAAY,23CAClB,MAAAgC,EAAehC,E,MCWFiC,EAAc,M,8GAcV,K,CAIP,QAAAC,GACN,OAAO7B,KAAK8B,aAAe9B,KAAKyB,OAAS,E,CAG3C,gBAAAM,GACE,GAAI/B,KAAKgC,qBAAsB,CAC7BhC,KAAK8B,aAAe,I,EAIhB,kBAAAE,GACN,OAAOhC,KAAKiC,SAASC,YAAclC,KAAKiC,SAASE,W,CAG3C,aAAArC,GACN,MAAO,CACLsC,KAAMpC,KAAKC,WAAaC,EAAYC,KACpCkC,MAAOrC,KAAKC,WAAaC,EAAYE,MACrCkC,KAAMtC,KAAKC,WAAaC,EAAYG,KACpCC,MAAON,KAAKM,M,CAIhB,MAAAG,GACE,OACEC,EAAA,UAAAC,IAAA,2CAAQC,MAAOZ,KAAKF,iBAClBY,EAAA,QAAAC,IAAA,2CAAMK,KAAK,iBACXN,EAAA,QAAAC,IAAA,2CACEC,MAAM,aACN2B,IAAMC,GAAQxC,KAAKiC,SAAWO,EAC9BC,MAAOzC,KAAK6B,YAEX7B,KAAKyB,QAERf,EAAA,QAAAC,IAAA,2CAAMK,KAAK,S","ignoreList":[]}

package/dist/web-components-library/p-52be7378.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i,a as t,g as o}from"./p-75c4a726.js";import{H as r,e as a}from"./p-b34993de.js";const n=':host{--z-info-reveal-panel-width:384px;--trigger-size:44px;position:relative}:host *{box-sizing:border-box}button{--trigger-icon-size:calc(var(--trigger-size) / 2);display:flex;align-items:center;justify-content:center;padding:0;border:none;background-color:transparent;cursor:pointer;font-family:inherit;letter-spacing:inherit}button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-info-reveal-trigger{min-width:var(--trigger-size);height:var(--trigger-size);padding:calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);background-color:var(--color-surface05);border-radius:var(--border-radius);color:var(--color-text-inverse);column-gap:var(--space-unit);font-weight:var(--font-sb);line-height:1rem}:host([size="big"]) .z-info-reveal-trigger{font-size:var(--font-size-2)}:host([size="small"]) .z-info-reveal-trigger{--trigger-size:36px;font-size:var(--font-size-2)}:host([size="x-small"]) .z-info-reveal-trigger{--trigger-size:32px;padding:var(--space-unit);font-size:var(--font-size-1)}:host>.z-info-reveal-trigger z-icon{--z-icon-width:var(--trigger-icon-size);--z-icon-height:var(--trigger-icon-size);display:flex;fill:var(--color-inverse-icon)}:host([size="small"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:18px}:host([size="x-small"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:16px}.z-info-reveal-panel{position:absolute;z-index:99;display:flex;width:var(--z-info-reveal-panel-width);height:fit-content;align-items:flex-start;padding:calc(var(--space-unit) * 1.5);background-color:var(--color-surface05);border-radius:var(--border-radius);box-shadow:var(--shadow-4);color:var(--color-text-inverse);column-gap:var(--space-unit)}.z-info-reveal-panel[hidden]{display:none}:host([position="top_left"]) .z-info-reveal-panel,:host([position="top_right"]) .z-info-reveal-panel{top:0}:host([position="bottom_left"]) .z-info-reveal-panel,:host([position="bottom_right"]) .z-info-reveal-panel{bottom:0}:host([position="top_right"]) .z-info-reveal-panel,:host([position="bottom_right"]) .z-info-reveal-panel{right:0}:host([position="top_left"]) .z-info-reveal-panel,:host([position="bottom_left"]) .z-info-reveal-panel{left:0}.z-info-reveal-panel .z-info-reveal-close{margin-left:auto}.z-info-reveal-panel z-icon{fill:var(--color-inverse-icon)}@media (max-width: 767px){.z-info-reveal-panel{position:fixed;top:auto !important;bottom:auto !important;left:var(--grid-margin) !important;width:calc(100% - (var(--grid-margin) * 2)) !important;max-width:none !important;margin-top:calc(var(--trigger-size) * -1)}}';const s=n;const l=class{constructor(i){e(this,i);this.icon="informationsource";this.position=r.BOTTOM_RIGHT;this.label=undefined;this.ariaLabel="Apri pannello informazioni";this.size=a.BIG;this.open=false}adjustPanelPosition(){if(!this.open||!this.panel){return}const e=this.host.getBoundingClientRect();const i=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--grid-margin"),10);const t=document.documentElement.offsetWidth;const o=Math.round((this.position.includes("left")?t-e.left:e.right)-i);this.panel.style.maxWidth=`${o}px`}togglePanel(){this.open=!this.open}closePanel(){this.open=false}handleEscapeKey(e){if(e.key==="Escape"&&this.open){this.closePanel()}}render(){return i(t,{key:"7098ea723139c78a7ecca1bbc924d5e17925bdc5",open:this.open},i("button",{key:"8f798611b1069939b18ab3bdc9c197bec5fc6d20",class:"z-info-reveal-trigger",type:"button",onClick:this.togglePanel.bind(this),"aria-label":!this.label?this.ariaLabel:undefined,"aria-expanded":this.open?"true":"false","aria-controls":"z-info-reveal-panel"},this.icon&&i("z-icon",{key:"2db6409fe7db09738f83135e58300c235ce988db",name:this.icon}),this.label&&i("span",{key:"71ca110cd12256dcfe5e7b37026537fb5ea324b8",class:"z-info-reveal-label"},this.label)),i("div",{key:"1385b98d28160c1e5578d47f63ba37f26e63eeb8",class:"z-info-reveal-panel",id:"z-info-reveal-panel",ref:e=>this.panel=e,hidden:!this.open},i("slot",{key:"dbbcff160f1dceaa336362f5a43436d57f357e01"}),i("button",{key:"e6f4778d55de1de95fa3d509ed01c3b555ff225b",class:"z-info-reveal-close",type:"button",onClick:this.closePanel.bind(this),"aria-label":"Chiudi pannello informazioni"},i("z-icon",{key:"51b13036bb93efce68db3f0cbf5d9f718ddcb266",name:"multiply"}))))}get host(){return o(this)}static get watchers(){return{position:["adjustPanelPosition"],open:["adjustPanelPosition"]}}};l.style=s;export{l as z_info_reveal};
+//# sourceMappingURL=p-52be7378.entry.js.map