npm - @zanichelli/albe-web-components - Versions diffs - 15.0.1-RC → 15.0.2 - Mend

@zanichelli/albe-web-components 15.0.1-RC → 15.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (372) hide show

package/dist/esm/z-navigation-tabs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-navigation-tabs.entry.js","mappings":"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","names":[],"sources":["src/components/z-navigation-tabs/styles.css?tag=z-navigation-tabs","src/components/z-navigation-tabs/index.tsx"],"sourcesContent":["z-navigation-tabs {\n --z-navigation-tabs-nav-buttons-bg: ;\n --z-navigation-tabs-nav-buttons-fg: ;\n\n position: relative;\n z-index: 0;\n display: flex;\n overflow: hidden;\n flex-direction: row;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\nz-navigation-tabs,\nz-navigation-tabs * {\n box-sizing: border-box;\n}\n\nz-navigation-tabs > nav::-webkit-scrollbar {\n display: none;\n}\n\nz-navigation-tabs .navigation-button {\n position: absolute;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: 0;\n background-color: var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));\n border-radius: var(--border-no-radius);\n box-shadow: 0 0 4px 1px var(--shadow-color-base);\n cursor: pointer;\n fill: var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));\n outline: none;\n}\n\nz-navigation-tabs .navigation-button:disabled {\n display: none;\n}\n\nz-navigation-tabs > nav {\n z-index: 0;\n display: flex;\n overflow: auto;\n align-items: center;\n justify-content: flex-start;\n scroll-behavior: smooth;\n\n /* hide scrollbar in Firefox /\n scrollbar-width: none;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav {\n width: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button {\n top: 0;\n width: calc(var(--space-unit) 4);\n height: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child {\n left: 0;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child {\n right: 0;\n}\n\n/* Orientation vertical /\nz-navigation-tabs[orientation=\"vertical\"] {\n width: fit-content;\n flex-direction: column;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav {\n height: 100%;\n flex-direction: column;\n align-items: stretch;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button {\n left: 0;\n width: 100%;\n height: calc(var(--space-unit) 4);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child {\n top: 0;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child {\n bottom: 0;\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button {\n height: calc(var(--space-unit) * 4);\n}\n\n/* Style for the tabs /\n\nz-navigation-tabs > nav > {\n position: relative;\n z-index: 0;\n display: inline-flex;\n width: auto;\n align-items: center;\n justify-content: center;\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n border: none;\n margin: 0;\n background-color: unset;\n border-radius: var(--border-no-radius);\n color: var(--color-primary01);\n cursor: pointer;\n fill: currentcolor;\n font-family: var(--font-family-sans);\n font-size: inherit;\n gap: var(--space-unit);\n letter-spacing: inherit;\n line-height: inherit;\n outline: none;\n text-align: center;\n white-space: nowrap;\n}\n\nz-navigation-tabs > nav > a {\n text-decoration: none;\n}\n\nz-navigation-tabs > nav > :focus:focus-visible {\n z-index: 1;\n box-shadow: inset 0 0 4px 3px var(--color-highlight);\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover {\n background-color: var(--color-surface02);\n}\n\nz-navigation-tabs > nav > button[disabled] {\n color: var(--color-disabled03);\n cursor: not-allowed;\n fill: currentcolor;\n pointer-events: all;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover,\nnav > [aria-selected=\"true\"] {\n color: var(--color-hover-secondary);\n fill: currentcolor;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover::after,\nnav > [aria-selected=\"true\"]::after {\n position: absolute;\n background-color: var(--color-hover-secondary);\n content: \"\";\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n bottom: 0;\n left: 0;\n width: 100%;\n height: var(--border-size-large);\n}\n\nz-navigation-tabs > nav > z-icon {\n --z-icon-width: calc(var(--space-unit) * 2);\n --z-icon-height: calc(var(--space-unit) * 2);\n\n display: flex;\n margin: 0;\n}\n\n/* `small` size (only available for horizontal orientation) /\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > {\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n height: var(--border-size-medium);\n}\n\nz-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"]) > nav > * z-icon {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n}\n\n/* Orientation Vertical /\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > {\n padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * > :not(z-icon) {\n display: none;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"vertical\"] > nav > [aria-selected=\"true\"]::after {\n top: 0;\n right: 0;\n width: var(--border-size-large);\n height: 100%;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\n\n/*\n Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.\n * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.\n /\n@Component({\n tag: \"z-navigation-tabs\",\n styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs {\n /\n Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n /\n @Prop()\n ariaLabel = \"\";\n\n /\n Navigation tabs orientation.\n /\n @Prop({reflect: true})\n orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n /\n Navigation tabs size.\n /\n @Prop({reflect: true})\n size? = NavigationTabsSize.BIG;\n\n /\n Index of the selected tab.\n * Useful to programmatically select a tab.\n * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n /\n @Prop({mutable: true})\n selectedTab: number = undefined;\n\n /\n Emitted when the selected tab changes.\n * Contains the index of the new selected tab in the `detail` of the event.\n /\n @Event()\n selected: EventEmitter<number>;\n\n /\n Whether to show navigation buttons.\n /\n @State()\n canNavigate: boolean;\n\n /\n Whether backwards navigation is allowed.\n /\n @State()\n canNavigatePrev: boolean;\n\n /\n Whether forward navigation is allowed.\n /\n @State()\n canNavigateNext: boolean;\n\n @Element() host: HTMLZNavigationTabsElement;\n\n /\n Index of the last tab that held focus.\n /\n private focusedTab = undefined;\n\n /\n Reference to the `<nav>` element\n /\n private nav: HTMLElement;\n\n /\n Getter for the direction to check based on current orientation.\n /\n get direction(): string {\n return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n }\n\n /\n Getter for the dimension to check based on current orientation.\n /\n get dimension(): string {\n return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n }\n\n get tabs(): HTMLElement[] {\n return Array.from(this.nav.children) as HTMLElement[];\n }\n\n private resizeObserver: ResizeObserver;\n\n /\n Scroll into view to center the tab.\n /\n private scrollToTab(tabElement: HTMLElement): void {\n const scrollOptions = (\n this.orientation === NavigationTabsOrientation.HORIZONTAL\n ? {block: \"nearest\", inline: \"center\"}\n : {block: \"center\", inline: \"nearest\"}\n ) as ScrollIntoViewOptions;\n\n tabElement.scrollIntoView({\n behavior: \"smooth\",\n ...scrollOptions,\n });\n }\n\n /\n Scroll the navigation bar half of its size backward.\n /\n private navigateBackwards(): void {\n this.nav.scrollBy({\n [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n behavior: \"smooth\",\n });\n }\n\n /\n Scroll the navigation bar half of its size forward.\n /\n private navigateForward(): void {\n this.nav.scrollBy({\n [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n behavior: \"smooth\",\n });\n }\n\n /\n Check if a keyboard event was triggered by an arrow key.\n /\n private isArrowNavigation(e: KeyboardEvent): boolean {\n return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n }\n\n /\n Check if the navigation buttons are needed.\n /\n private checkScrollVisible(): void {\n if (!this.nav) {\n return;\n }\n\n this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n }\n\n /\n Check if navigation buttons can be enabled for each direction.\n /\n @Watch(\"canNavigate\")\n checkScrollEnabled(): void {\n if (!this.nav) {\n return;\n }\n\n this.canNavigateNext =\n this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n }\n\n /\n When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n /\n @Watch(\"selectedTab\")\n onTabSelected(): void {\n this.tabs.forEach((tab, i) => {\n const zicon = tab.querySelector(\"z-icon\");\n const strokeIcon = zicon?.getAttribute(\"name\").replace(\"-filled\", \"\");\n if (i !== this.selectedTab) {\n tab.setAttribute(\"aria-selected\", \"false\");\n tab.tabIndex = -1;\n zicon?.setAttribute(\"name\", strokeIcon);\n\n return;\n }\n\n zicon?.setAttribute(\"name\", `${strokeIcon}-filled`);\n tab.setAttribute(\"aria-selected\", \"true\");\n });\n this.selected.emit(this.selectedTab);\n if (this.selectedTab !== undefined) {\n this.scrollToTab(this.tabs[this.selectedTab]);\n }\n }\n\n /\n Handle click on the tabs.\n * @param event `click` event triggered by a child tab\n /\n @Listen(\"click\")\n handleTabClick(event: MouseEvent): void {\n const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n if (!this.tabs.some((child) => child.contains(clickedTab))) {\n return;\n }\n\n this.selectedTab = this.tabs.indexOf(clickedTab);\n }\n\n /\n When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n /\n @Listen(\"focusin\")\n onTabFocusIn(event: FocusEvent): void {\n const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n if (focused === -1) {\n return;\n }\n\n if (this.selectedTab !== undefined) {\n this.tabs[this.selectedTab].tabIndex = -1;\n }\n this.focusedTab = focused;\n this.tabs[this.focusedTab].tabIndex = -1;\n this.scrollToTab(this.tabs[this.focusedTab]);\n }\n\n /\n Handle keyboard navigation through tabs with arrow keys.\n /\n @Listen(\"keydown\")\n navigateThroughTabs(event: KeyboardEvent): void \| boolean {\n if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) \|\| !this.isArrowNavigation(event)) {\n return true;\n }\n\n event.preventDefault();\n if (\n (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) \|\|\n (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n ) {\n // Move forward\n this.focusedTab++;\n if (this.focusedTab >= this.tabs.length) {\n this.focusedTab = 0;\n }\n } else if (\n (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) \|\|\n (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n ) {\n // Move backward\n this.focusedTab--;\n if (this.focusedTab < 0) {\n this.focusedTab = this.tabs.length - 1;\n }\n }\n // Ignore disabled tabs\n if (\n this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n ) {\n return this.navigateThroughTabs(event);\n }\n\n this.tabs[this.focusedTab].focus();\n this.scrollToTab(this.tabs[this.focusedTab]);\n }\n\n /\n If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n */\n @Listen(\"focusout\")\n onTabFocusOut(event: FocusEvent): void {\n if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n this.focusedTab = undefined;\n }\n }\n\n connectedCallback(): void {\n this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n }\n\n componentDidLoad(): void {\n // Set role and tabindex to each slotted tab\n this.tabs.forEach((tab) => {\n tab.setAttribute(\"role\", \"tab\");\n tab.tabIndex = -1;\n });\n\n const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n if (preselectedTab !== -1) {\n this.selectedTab = preselectedTab;\n this.tabs[preselectedTab].tabIndex = 0;\n this.onTabSelected();\n } else {\n this.tabs[0].tabIndex = 0;\n }\n\n this.resizeObserver.observe(this.nav);\n }\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n render(): HTMLZNavigationTabsElement {\n return (\n <Host\n class={{\n \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n }}\n scrollable={this.canNavigate}\n >\n <button\n class=\"navigation-button\"\n onClick={this.navigateBackwards.bind(this)}\n tabIndex={-1}\n disabled={!this.canNavigatePrev}\n aria-label=\"Mostra elementi precedenti\"\n hidden={!this.canNavigate}\n >\n <z-icon\n name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n width={16}\n height={16}\n />\n </button>\n\n <nav\n role=\"tablist\"\n aria-label={this.ariaLabel}\n ref={(el) => (this.nav = el ?? this.nav)}\n onScroll={this.checkScrollEnabled.bind(this)}\n aria-orientation={this.orientation}\n >\n <slot></slot>\n </nav>\n\n <button\n class=\"navigation-button\"\n onClick={this.navigateForward.bind(this)}\n tabIndex={-1}\n disabled={!this.canNavigateNext}\n aria-label=\"Mostra elementi successivi\"\n hidden={!this.canNavigate}\n >\n <z-icon\n name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n width={16}\n height={16}\n />\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-navigation-tabs.entry.js","mappings":"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","names":[],"sources":["src/components/z-navigation-tabs/styles.css?tag=z-navigation-tabs","src/components/z-navigation-tabs/index.tsx"],"sourcesContent":["z-navigation-tabs {\n --z-navigation-tabs-nav-buttons-bg: ;\n --z-navigation-tabs-nav-buttons-fg: ;\n\n position: relative;\n z-index: 0;\n display: flex;\n overflow: hidden;\n flex-direction: row;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\nz-navigation-tabs,\nz-navigation-tabs * {\n box-sizing: border-box;\n}\n\nz-navigation-tabs > nav::-webkit-scrollbar {\n display: none;\n}\n\nz-navigation-tabs .navigation-button {\n position: absolute;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: 0;\n background-color: var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));\n border-radius: var(--border-no-radius);\n box-shadow: 0 0 4px 1px var(--shadow-color-base);\n cursor: pointer;\n fill: var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));\n outline: none;\n}\n\nz-navigation-tabs .navigation-button:disabled {\n display: none;\n}\n\nz-navigation-tabs > nav {\n z-index: 0;\n display: flex;\n overflow: auto;\n align-items: center;\n justify-content: flex-start;\n scroll-behavior: smooth;\n\n /* hide scrollbar in Firefox /\n scrollbar-width: none;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav {\n width: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button {\n top: 0;\n width: calc(var(--space-unit) 4);\n height: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child {\n left: 0;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child {\n right: 0;\n}\n\n/* Orientation vertical /\nz-navigation-tabs[orientation=\"vertical\"] {\n width: fit-content;\n flex-direction: column;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav {\n height: 100%;\n flex-direction: column;\n align-items: stretch;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button {\n left: 0;\n width: 100%;\n height: calc(var(--space-unit) 4);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child {\n top: 0;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child {\n bottom: 0;\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button {\n height: calc(var(--space-unit) * 4);\n}\n\n/* Style for the tabs /\n\nz-navigation-tabs > nav > {\n position: relative;\n z-index: 0;\n display: inline-flex;\n width: auto;\n align-items: center;\n justify-content: center;\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n border: none;\n margin: 0;\n background-color: unset;\n border-radius: var(--border-no-radius);\n color: var(--color-primary01);\n cursor: pointer;\n fill: currentcolor;\n font-family: var(--font-family-sans);\n font-size: inherit;\n gap: var(--space-unit);\n letter-spacing: inherit;\n line-height: inherit;\n outline: none;\n text-align: center;\n white-space: nowrap;\n}\n\nz-navigation-tabs > nav > a {\n text-decoration: none;\n}\n\nz-navigation-tabs > nav > :focus:focus-visible {\n z-index: 1;\n box-shadow: inset 0 0 4px 3px var(--blue800);\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover {\n background-color: var(--color-surface02);\n}\n\nz-navigation-tabs > nav > button[disabled] {\n color: var(--color-disabled03);\n cursor: not-allowed;\n fill: currentcolor;\n pointer-events: all;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover,\nnav > [aria-selected=\"true\"] {\n color: var(--color-hover-secondary);\n fill: currentcolor;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover::after,\nnav > [aria-selected=\"true\"]::after {\n position: absolute;\n background-color: var(--color-hover-secondary);\n content: \"\";\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n bottom: 0;\n left: 0;\n width: 100%;\n height: var(--border-size-large);\n}\n\nz-navigation-tabs > nav > z-icon {\n --z-icon-width: calc(var(--space-unit) * 2);\n --z-icon-height: calc(var(--space-unit) * 2);\n\n display: flex;\n margin: 0;\n}\n\n/* `small` size (only available for horizontal orientation) /\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > {\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n height: var(--border-size-medium);\n}\n\nz-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"]) > nav > * z-icon {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n}\n\n/* Orientation Vertical /\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > {\n padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * > :not(z-icon) {\n display: none;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"vertical\"] > nav > [aria-selected=\"true\"]::after {\n top: 0;\n right: 0;\n width: var(--border-size-large);\n height: 100%;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\n\n/*\n Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.\n * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.\n /\n@Component({\n tag: \"z-navigation-tabs\",\n styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs {\n /\n Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n /\n @Prop()\n ariaLabel = \"\";\n\n /\n Navigation tabs orientation.\n /\n @Prop({reflect: true})\n orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n /\n Navigation tabs size.\n /\n @Prop({reflect: true})\n size? = NavigationTabsSize.BIG;\n\n /\n Index of the selected tab.\n * Useful to programmatically select a tab.\n * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n /\n @Prop({mutable: true})\n selectedTab: number = undefined;\n\n /\n Emitted when the selected tab changes.\n * Contains the index of the new selected tab in the `detail` of the event.\n /\n @Event()\n selected: EventEmitter<number>;\n\n /\n Whether to show navigation buttons.\n /\n @State()\n canNavigate: boolean;\n\n /\n Whether backwards navigation is allowed.\n /\n @State()\n canNavigatePrev: boolean;\n\n /\n Whether forward navigation is allowed.\n /\n @State()\n canNavigateNext: boolean;\n\n @Element() host: HTMLZNavigationTabsElement;\n\n /\n Index of the last tab that held focus.\n /\n private focusedTab = undefined;\n\n /\n Reference to the `<nav>` element\n /\n private nav: HTMLElement;\n\n /\n Getter for the direction to check based on current orientation.\n /\n get direction(): string {\n return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n }\n\n /\n Getter for the dimension to check based on current orientation.\n /\n get dimension(): string {\n return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n }\n\n get tabs(): HTMLElement[] {\n return Array.from(this.nav.children) as HTMLElement[];\n }\n\n private resizeObserver: ResizeObserver;\n\n /\n Scroll into view to center the tab.\n /\n private scrollToTab(tabElement: HTMLElement): void {\n const scrollOptions = (\n this.orientation === NavigationTabsOrientation.HORIZONTAL\n ? {block: \"nearest\", inline: \"center\"}\n : {block: \"center\", inline: \"nearest\"}\n ) as ScrollIntoViewOptions;\n\n tabElement.scrollIntoView({\n behavior: \"smooth\",\n ...scrollOptions,\n });\n }\n\n /\n Scroll the navigation bar half of its size backward.\n /\n private navigateBackwards(): void {\n this.nav.scrollBy({\n [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n behavior: \"smooth\",\n });\n }\n\n /\n Scroll the navigation bar half of its size forward.\n /\n private navigateForward(): void {\n this.nav.scrollBy({\n [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n behavior: \"smooth\",\n });\n }\n\n /\n Check if a keyboard event was triggered by an arrow key.\n /\n private isArrowNavigation(e: KeyboardEvent): boolean {\n return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n }\n\n /\n Check if the navigation buttons are needed.\n /\n private checkScrollVisible(): void {\n if (!this.nav) {\n return;\n }\n\n this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n }\n\n /\n Check if navigation buttons can be enabled for each direction.\n /\n @Watch(\"canNavigate\")\n checkScrollEnabled(): void {\n if (!this.nav) {\n return;\n }\n\n this.canNavigateNext =\n this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n }\n\n /\n When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n /\n @Watch(\"selectedTab\")\n onTabSelected(): void {\n this.tabs.forEach((tab, i) => {\n const zicon = tab.querySelector(\"z-icon\");\n const strokeIcon = zicon?.getAttribute(\"name\").replace(\"-filled\", \"\");\n if (i !== this.selectedTab) {\n tab.setAttribute(\"aria-selected\", \"false\");\n tab.tabIndex = -1;\n zicon?.setAttribute(\"name\", strokeIcon);\n\n return;\n }\n\n zicon?.setAttribute(\"name\", `${strokeIcon}-filled`);\n tab.setAttribute(\"aria-selected\", \"true\");\n });\n this.selected.emit(this.selectedTab);\n if (this.selectedTab !== undefined) {\n this.scrollToTab(this.tabs[this.selectedTab]);\n }\n }\n\n /\n Handle click on the tabs.\n * @param event `click` event triggered by a child tab\n /\n @Listen(\"click\")\n handleTabClick(event: MouseEvent): void {\n const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n if (!this.tabs.some((child) => child.contains(clickedTab))) {\n return;\n }\n\n this.selectedTab = this.tabs.indexOf(clickedTab);\n }\n\n /\n When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n /\n @Listen(\"focusin\")\n onTabFocusIn(event: FocusEvent): void {\n const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n if (focused === -1) {\n return;\n }\n\n if (this.selectedTab !== undefined) {\n this.tabs[this.selectedTab].tabIndex = -1;\n }\n this.focusedTab = focused;\n this.tabs[this.focusedTab].tabIndex = -1;\n this.scrollToTab(this.tabs[this.focusedTab]);\n }\n\n /\n Handle keyboard navigation through tabs with arrow keys.\n /\n @Listen(\"keydown\")\n navigateThroughTabs(event: KeyboardEvent): void \| boolean {\n if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) \|\| !this.isArrowNavigation(event)) {\n return true;\n }\n\n event.preventDefault();\n if (\n (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) \|\|\n (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n ) {\n // Move forward\n this.focusedTab++;\n if (this.focusedTab >= this.tabs.length) {\n this.focusedTab = 0;\n }\n } else if (\n (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) \|\|\n (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n ) {\n // Move backward\n this.focusedTab--;\n if (this.focusedTab < 0) {\n this.focusedTab = this.tabs.length - 1;\n }\n }\n // Ignore disabled tabs\n if (\n this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n ) {\n return this.navigateThroughTabs(event);\n }\n\n this.tabs[this.focusedTab].focus();\n this.scrollToTab(this.tabs[this.focusedTab]);\n }\n\n /\n If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n */\n @Listen(\"focusout\")\n onTabFocusOut(event: FocusEvent): void {\n if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n this.focusedTab = undefined;\n }\n }\n\n connectedCallback(): void {\n this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n }\n\n componentDidLoad(): void {\n // Set role and tabindex to each slotted tab\n this.tabs.forEach((tab) => {\n tab.setAttribute(\"role\", \"tab\");\n tab.tabIndex = -1;\n });\n\n const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n if (preselectedTab !== -1) {\n this.selectedTab = preselectedTab;\n this.tabs[preselectedTab].tabIndex = 0;\n this.onTabSelected();\n } else {\n this.tabs[0].tabIndex = 0;\n }\n\n this.resizeObserver.observe(this.nav);\n }\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n render(): HTMLZNavigationTabsElement {\n return (\n <Host\n class={{\n \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n }}\n scrollable={this.canNavigate}\n >\n <button\n class=\"navigation-button\"\n onClick={this.navigateBackwards.bind(this)}\n tabIndex={-1}\n disabled={!this.canNavigatePrev}\n aria-label=\"Mostra elementi precedenti\"\n hidden={!this.canNavigate}\n >\n <z-icon\n name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n width={16}\n height={16}\n />\n </button>\n\n <nav\n role=\"tablist\"\n aria-label={this.ariaLabel}\n ref={(el) => (this.nav = el ?? this.nav)}\n onScroll={this.checkScrollEnabled.bind(this)}\n aria-orientation={this.orientation}\n >\n <slot></slot>\n </nav>\n\n <button\n class=\"navigation-button\"\n onClick={this.navigateForward.bind(this)}\n tabIndex={-1}\n disabled={!this.canNavigateNext}\n aria-label=\"Mostra elementi successivi\"\n hidden={!this.canNavigate}\n >\n <z-icon\n name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n width={16}\n height={16}\n />\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-notification.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, a as Host } from './index-ab5f1eaa.js';
-const stylesCss = ":host{--z-notification--top-offset:0;display:-ms-flexbox;display:flex;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:start;align-items:flex-start;padding:calc(var(--space-unit) * 2);border-bottom:var(--border-size-medium) solid var(--color-surface03);font-family:var(--font-family-sans);outline:none}:host[sticky]{position:-webkit-sticky;position:sticky;top:var(--z-notification--top-offset)}:host[sticky],:host([showshadow]){-webkit-box-shadow:var(--shadow-3);box-shadow:var(--shadow-3)}:host([type=\"success\"]){background:var(--color-success-inverse)}:host([type=\"warning\"]){background:var(--color-warning-inverse)}:host([type=\"error\"]){background:var(--color-error-inverse)}.status-icon,.close-button{display:-ms-flexbox;display:flex;height:20px;-ms-flex-align:center;align-items:center}:host([type=\"success\"]) .status-icon{fill:var(--color-success01)}:host([type=\"warning\"]) .status-icon{fill:var(--color-warning02)}:host([type=\"error\"]) .status-icon{fill:var(--color-error01)}:host>button,.content-container>button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:-ms-flexbox;display:flex;-ms-flex:1 auto;flex:1 auto;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:baseline;align-items:baseline;-ms-flex-pack:justify;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{max-width:800px;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:20px}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:16px}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media and (min-width: 768px){.content-container{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}";
+const stylesCss = ":host{--z-notification--top-offset:0;display:-ms-flexbox;display:flex;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:start;align-items:flex-start;padding:calc(var(--space-unit) * 2);border-bottom:var(--border-size-medium) solid var(--color-surface03);font-family:var(--font-family-sans);outline:none}:host[sticky]{position:-webkit-sticky;position:sticky;top:var(--z-notification--top-offset)}:host[sticky],:host([showshadow]){-webkit-box-shadow:var(--shadow-3);box-shadow:var(--shadow-3)}:host([type=\"success\"]){background:var(--color-success-inverse)}:host([type=\"warning\"]){background:var(--color-warning-inverse)}:host([type=\"error\"]){background:var(--color-error-inverse)}.status-icon,.close-button{display:-ms-flexbox;display:flex;height:20px;-ms-flex-align:center;align-items:center}:host([type=\"success\"]) .status-icon{fill:var(--color-success01)}:host([type=\"warning\"]) .status-icon{fill:var(--color-warning02)}:host([type=\"error\"]) .status-icon{fill:var(--color-error01)}:host>button,.content-container>button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:-ms-flexbox;display:flex;-ms-flex:1 auto;flex:1 auto;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:baseline;align-items:baseline;-ms-flex-pack:justify;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{max-width:800px;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:20px}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:16px}.action-button:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none !important}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media only screen and (min-width: 768px){.content-container{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}";
 const ZNotificationStyle0 = stylesCss;
 const ZNotification = class {

package/dist/esm/z-notification.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-notification.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,~~q/DAAq/D~~,CAAC;~~AACxgE~~,4BAAe,SAAS;;MCYX,aAAa;IAgChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;KAChC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;KAC/B;IAED;;;;;;;yBA/BsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;QAqBtB,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,eAAe,KACnB,+DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH,EACD,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACL,CAAC,EAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,KACxB,+DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG,EACL,IAAI,CAAC,SAAS,KACb,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAEpC,+DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACI,EACP;KACH;;;;;;","names":[],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n --z-notification--top-offset: 0;\n\n display: flex;\n width: 100%;\n box-sizing: border-box;\n align-items: flex-start;\n padding: calc(var(--space-unit) * 2);\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n font-family: var(--font-family-sans);\n outline: none;\n}\n\n:host[sticky] {\n position: sticky;\n top: var(--z-notification--top-offset);\n}\n\n:host[sticky],\n:host([showshadow]) {\n box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n background: var(--color-success-inverse);\n}\n\n:host([type=\"warning\"]) {\n background: var(--color-warning-inverse);\n}\n\n:host([type=\"error\"]) {\n background: var(--color-error-inverse);\n}\n\n.status-icon,\n.close-button {\n /* simulate the line-height of the text\n to make the icon look correctly aligned with it. /\n display: flex;\n height: 20px;\n align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n fill: var(--color-success01);\n}\n\n:host([type=\"warning\"]) .status-icon {\n fill: var(--color-warning02);\n}\n\n:host([type=\"error\"]) .status-icon {\n fill: var(--color-error01);\n}\n\n:host > button,\n.content-container > button {\n padding: 0;\n border: none;\n margin: 0;\n background: transparent;\n cursor: pointer;\n font-family: inherit;\n}\n\n.status-icon + .content-container {\n margin-left: var(--space-unit);\n}\n\n.content-container {\n display: flex;\n flex: 1 auto;\n flex-wrap: wrap;\n align-items: baseline;\n justify-content: space-between;\n row-gap: calc(var(--space-unit) 2);\n}\n\n.content-text {\n max-width: 800px;\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 20px;\n}\n\n.action-button {\n color: var(--color-primary01);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n letter-spacing: 0.32px;\n line-height: 16px;\n}\n\n.content-container + .close-button {\n margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint /\n@media and (min-width: 768px) {\n .content-container {\n flex-wrap: nowrap;\n }\n\n .content-text + .action-button {\n margin-left: calc(var(--space-unit) 5);\n }\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/*\n Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n /\n@Component({\n tag: \"z-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZNotification {\n /* Name of the icon on the left of the content /\n @Prop()\n contenticonname?: string;\n\n /* Action button text /\n @Prop()\n actiontext?: string;\n\n /* Alert variant type /\n @Prop({reflect: true})\n type: NotificationType;\n\n /* Enable close icon /\n @Prop()\n showclose?: boolean = false;\n\n /\n Enable shadow.\n * @deprecated shadow is available only for the `sticky` version of the notification.\n /\n @Prop({reflect: true})\n showshadow?: boolean = false;\n\n /* Enable sticky notification bar. /\n @Prop({reflect: true})\n sticky?: boolean = false;\n\n /* Call to action clicked /\n @Event()\n notificationAction: EventEmitter;\n\n private handleActionButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationAction.emit();\n }\n\n /* Close button clicked */\n @Event()\n notificationClose: EventEmitter;\n\n private handleCloseButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationClose.emit();\n }\n\n constructor() {\n this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n }\n\n render(): HTMLZNotificationElement {\n return (\n <Host>\n {this.contenticonname && (\n <z-icon\n class=\"status-icon\"\n name={this.contenticonname}\n width={16}\n height={16}\n />\n )}\n <div class=\"content-container\">\n <div class=\"content-text\">\n <slot></slot>\n </div>\n {!!this.actiontext?.trim() && (\n <button\n class=\"action-button\"\n type=\"button\"\n onClick={this.handleActionButtonClick}\n >\n {this.actiontext}\n </button>\n )}\n </div>\n {this.showclose && (\n <button\n class=\"close-button\"\n type=\"button\"\n onClick={this.handleCloseButtonClick}\n >\n <z-icon\n name=\"multiply-circle\"\n width={16}\n height={16}\n />\n </button>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-notification.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,ooEAAooE,CAAC;AACvpE,4BAAe,SAAS;;MCYX,aAAa;IAgChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;KAChC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;KAC/B;IAED;;;;;;;yBA/BsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;QAqBtB,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,eAAe,KACnB,+DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH,EACD,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACL,CAAC,EAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,KACxB,+DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG,EACL,IAAI,CAAC,SAAS,KACb,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAEpC,+DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACI,EACP;KACH;;;;;;","names":[],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n --z-notification--top-offset: 0;\n\n display: flex;\n width: 100%;\n box-sizing: border-box;\n align-items: flex-start;\n padding: calc(var(--space-unit) * 2);\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n font-family: var(--font-family-sans);\n outline: none;\n}\n\n:host[sticky] {\n position: sticky;\n top: var(--z-notification--top-offset);\n}\n\n:host[sticky],\n:host([showshadow]) {\n box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n background: var(--color-success-inverse);\n}\n\n:host([type=\"warning\"]) {\n background: var(--color-warning-inverse);\n}\n\n:host([type=\"error\"]) {\n background: var(--color-error-inverse);\n}\n\n.status-icon,\n.close-button {\n /* simulate the line-height of the text\n to make the icon look correctly aligned with it. /\n display: flex;\n height: 20px;\n align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n fill: var(--color-success01);\n}\n\n:host([type=\"warning\"]) .status-icon {\n fill: var(--color-warning02);\n}\n\n:host([type=\"error\"]) .status-icon {\n fill: var(--color-error01);\n}\n\n:host > button,\n.content-container > button {\n padding: 0;\n border: none;\n margin: 0;\n background: transparent;\n cursor: pointer;\n font-family: inherit;\n}\n\n.status-icon + .content-container {\n margin-left: var(--space-unit);\n}\n\n.content-container {\n display: flex;\n flex: 1 auto;\n flex-wrap: wrap;\n align-items: baseline;\n justify-content: space-between;\n row-gap: calc(var(--space-unit) 2);\n}\n\n.content-text {\n max-width: 800px;\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 20px;\n}\n\n.action-button {\n color: var(--color-primary01);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n letter-spacing: 0.32px;\n line-height: 16px;\n}\n\n.action-button:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n.content-container + .close-button {\n margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint /\n@media only screen and (min-width: 768px) {\n .content-container {\n flex-wrap: nowrap;\n }\n\n .content-text + .action-button {\n margin-left: calc(var(--space-unit) 5);\n }\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/*\n Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n /\n@Component({\n tag: \"z-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZNotification {\n /* Name of the icon on the left of the content /\n @Prop()\n contenticonname?: string;\n\n /* Action button text /\n @Prop()\n actiontext?: string;\n\n /* Alert variant type /\n @Prop({reflect: true})\n type: NotificationType;\n\n /* Enable close icon /\n @Prop()\n showclose?: boolean = false;\n\n /\n Enable shadow.\n * @deprecated shadow is available only for the `sticky` version of the notification.\n /\n @Prop({reflect: true})\n showshadow?: boolean = false;\n\n /* Enable sticky notification bar. /\n @Prop({reflect: true})\n sticky?: boolean = false;\n\n /* Call to action clicked /\n @Event()\n notificationAction: EventEmitter;\n\n private handleActionButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationAction.emit();\n }\n\n /* Close button clicked */\n @Event()\n notificationClose: EventEmitter;\n\n private handleCloseButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationClose.emit();\n }\n\n constructor() {\n this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n }\n\n render(): HTMLZNotificationElement {\n return (\n <Host>\n {this.contenticonname && (\n <z-icon\n class=\"status-icon\"\n name={this.contenticonname}\n width={16}\n height={16}\n />\n )}\n <div class=\"content-container\">\n <div class=\"content-text\">\n <slot></slot>\n </div>\n {!!this.actiontext?.trim() && (\n <button\n class=\"action-button\"\n type=\"button\"\n onClick={this.handleActionButtonClick}\n >\n {this.actiontext}\n </button>\n )}\n </div>\n {this.showclose && (\n <button\n class=\"close-button\"\n type=\"button\"\n onClick={this.handleCloseButtonClick}\n >\n <z-icon\n name=\"multiply-circle\"\n width={16}\n height={16}\n />\n </button>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-otp.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h } from './index-ab5f1eaa.js';
 import { f as InputStatus } from './index-2255c6c8.js';
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-error01);background-color:var(--color-error-inverse);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";
+const stylesCss = "input:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none !important}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-error01);background-color:var(--color-error-inverse);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";
 const ZOtpStyle0 = stylesCss;
 const ZOtp = class {

package/dist/esm/z-otp.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-otp.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,~~2xBAA2xB~~,CAAC;~~AAC9yB~~,mBAAe,SAAS;;MCOX,IAAI;;;;wBAGK,CAAC;;;;IAkBb,eAAe,CAAC,KAAa;QACnC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC;KAC9B;IAED,iBAAiB;QACf,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;KACzC;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,eAAe,IACxB,4DAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACpB,aACE,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC,KAAK,GAAG,OAAO,GAAG,IAAI,EACxD,SAAS,EAAE,CAAC,CAAgB;gBAC1B,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;oBAClB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;iBAC3B;aACF,EACD,OAAO,EAAE,CAAC,CAAgB;gBACxB,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;oBAClB,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;iBACrD;aACF,EACD,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;gBACnD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;aACzC,EACD,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,GAAG,EACb,SAAS,EAAC,GAAG,EACb,YAAY,EAAC,KAAK,EAClB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAClC,CACH,CAAC,CACE,EACN,wEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACF,CACf,EACN;KACH;;;;;;","names":[],"sources":["src/snowflakes/myz/z-otp/styles.css?tag=z-otp&encapsulation=shadow","src/snowflakes/myz/z-otp/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n.digits-container {\n display: flex;\n justify-content: flex-start;\n}\n\ninput {\n width: calc(var(--space-unit) * 5);\n height: 72px;\n box-sizing: border-box;\n padding: 0;\n caret-color: transparent;\n color: var(--color-surface05);\n font-family: var(--font-family-sans);\n font-size: 32px;\n font-weight: 300;\n text-align: center;\n}\n\ninput.error {\n border: 1px solid;\n border-color: var(--color-error01);\n background-color: var(--color-error-inverse);\n border-radius: 4px;\n}\n\ninput:not(:last-of-type) {\n margin-right: var(--space-unit);\n}\n\n/* Tablet breakpoint /\n@media only screen and (min-width: 768px) {\n input:not(:last-of-type) {\n margin-right: calc(var(--space-unit) 2);\n }\n}\n\n/* Desktop breakpoint /\n@media only screen and (min-width: 1025px) {\n input {\n width: calc(var(--space-unit) 6);\n }\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\n\n@Component({\n tag: \"z-otp\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZOtp {\n /** Input number /\n @Prop()\n inputNum?: number = 6;\n\n /* Input status /\n @Prop()\n status?: InputStatus;\n\n /* Input message /\n @Prop()\n message?: string;\n\n private otp: string[];\n\n private otpRef: HTMLInputElement[];\n\n /* Otp change event */\n @Event()\n otpChange: EventEmitter;\n\n private emitInputChange(value: string): void {\n this.otpChange.emit({value});\n }\n\n componentWillLoad(): void {\n this.otp = [...Array(this.inputNum)];\n this.otpRef = [...Array(this.inputNum)];\n }\n\n render(): HTMLDivElement {\n return (\n <div class=\"otp-container\">\n <div class=\"digits-container\">\n {this.otp.map((_val, i) => (\n <input\n class={this.status == InputStatus.ERROR ? \"error\" : null}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.keyCode > 47) {\n this.otpRef[i].value = \"\";\n }\n }}\n onKeyUp={(e: KeyboardEvent) => {\n if (e.keyCode > 47) {\n i < this.inputNum - 1 && this.otpRef[i + 1].focus();\n }\n }}\n onInput={(e: InputEvent) => {\n this.otp[i] = (e.target as HTMLInputElement).value;\n this.emitInputChange(this.otp.join(\"\"));\n }}\n type=\"text\"\n minlength=\"1\"\n maxlength=\"1\"\n autoComplete=\"off\"\n ref={(el) => (this.otpRef[i] = el)}\n />\n ))}\n </div>\n <z-input-message\n message={this.message}\n status={this.status}\n ></z-input-message>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-otp.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,q5BAAq5B,CAAC;AACx6B,mBAAe,SAAS;;MCOX,IAAI;;;;wBAGK,CAAC;;;;IAkBb,eAAe,CAAC,KAAa;QACnC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC;KAC9B;IAED,iBAAiB;QACf,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;KACzC;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,eAAe,IACxB,4DAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACpB,aACE,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC,KAAK,GAAG,OAAO,GAAG,IAAI,EACxD,SAAS,EAAE,CAAC,CAAgB;gBAC1B,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;oBAClB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;iBAC3B;aACF,EACD,OAAO,EAAE,CAAC,CAAgB;gBACxB,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;oBAClB,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;iBACrD;aACF,EACD,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;gBACnD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;aACzC,EACD,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,GAAG,EACb,SAAS,EAAC,GAAG,EACb,YAAY,EAAC,KAAK,EAClB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAClC,CACH,CAAC,CACE,EACN,wEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACF,CACf,EACN;KACH;;;;;;","names":[],"sources":["src/snowflakes/myz/z-otp/styles.css?tag=z-otp&encapsulation=shadow","src/snowflakes/myz/z-otp/index.tsx"],"sourcesContent":["input:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n:host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n.digits-container {\n display: flex;\n justify-content: flex-start;\n}\n\ninput {\n width: calc(var(--space-unit) * 5);\n height: 72px;\n box-sizing: border-box;\n padding: 0;\n caret-color: transparent;\n color: var(--color-surface05);\n font-family: var(--font-family-sans);\n font-size: 32px;\n font-weight: 300;\n text-align: center;\n}\n\ninput.error {\n border: 1px solid;\n border-color: var(--color-error01);\n background-color: var(--color-error-inverse);\n border-radius: 4px;\n}\n\ninput:not(:last-of-type) {\n margin-right: var(--space-unit);\n}\n\n/* Tablet breakpoint /\n@media only screen and (min-width: 768px) {\n input:not(:last-of-type) {\n margin-right: calc(var(--space-unit) 2);\n }\n}\n\n/* Desktop breakpoint /\n@media only screen and (min-width: 1025px) {\n input {\n width: calc(var(--space-unit) 6);\n }\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\n\n@Component({\n tag: \"z-otp\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZOtp {\n /** Input number /\n @Prop()\n inputNum?: number = 6;\n\n /* Input status /\n @Prop()\n status?: InputStatus;\n\n /* Input message /\n @Prop()\n message?: string;\n\n private otp: string[];\n\n private otpRef: HTMLInputElement[];\n\n /* Otp change event */\n @Event()\n otpChange: EventEmitter;\n\n private emitInputChange(value: string): void {\n this.otpChange.emit({value});\n }\n\n componentWillLoad(): void {\n this.otp = [...Array(this.inputNum)];\n this.otpRef = [...Array(this.inputNum)];\n }\n\n render(): HTMLDivElement {\n return (\n <div class=\"otp-container\">\n <div class=\"digits-container\">\n {this.otp.map((_val, i) => (\n <input\n class={this.status == InputStatus.ERROR ? \"error\" : null}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.keyCode > 47) {\n this.otpRef[i].value = \"\";\n }\n }}\n onKeyUp={(e: KeyboardEvent) => {\n if (e.keyCode > 47) {\n i < this.inputNum - 1 && this.otpRef[i + 1].focus();\n }\n }}\n onInput={(e: InputEvent) => {\n this.otp[i] = (e.target as HTMLInputElement).value;\n this.emitInputChange(this.otp.join(\"\"));\n }}\n type=\"text\"\n minlength=\"1\"\n maxlength=\"1\"\n autoComplete=\"off\"\n ref={(el) => (this.otpRef[i] = el)}\n />\n ))}\n </div>\n <z-input-message\n message={this.message}\n status={this.status}\n ></z-input-message>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-range-picker.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ab5f1eaa.js';
-import { f as flatpickr, s as setAriaOptions, v as validateDate, i as it, a as setFlatpickrPosition } from './utils-ba4f0770.js';
+import { f as flatpickr, s as setAriaOptions, v as validateDate, i as it, a as setFlatpickrPosition } from './utils-cd008fbc.js';
 import { H as ZRangePickerMode, G as ZDatePickerPosition, I as InputType, f as InputStatus } from './index-2255c6c8.js';
 const stylesCss = ".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;-ms-flex-wrap:wrap;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;-webkit-box-shadow:none;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;-webkit-box-shadow:-5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;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:-webkit-fit-content;width:-moz-fit-content;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;-webkit-box-shadow:var(--shadow-2);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{-webkit-box-sizing:border-box;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;-ms-flex-align:center;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:-ms-flexbox !important;display:flex !important;width:-webkit-fill-available;width:-moz-available;width:fill-available;height:calc(var(--space-unit) * 6);-ms-flex-align:baseline;align-items:baseline;-ms-flex-pack:space-evenly;justify-content:space-evenly;padding-top:0}.flatpickr-next-month,.flatpickr-prev-month{position:static !important;display:-ms-flexbox;display:flex;width:calc(var(--space-unit) * 4) !important;height:calc(var(--space-unit) * 4) !important;-ms-flex-align:center;align-items:center;-ms-flex-pack: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);-webkit-box-shadow:var(--shadow-2) !important;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:-ms-flexbox;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;-webkit-box-shadow:none !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:-ms-flexbox;display:flex;height:calc(var(--space-unit) * 5.5) !important;-ms-flex-align:center;align-items:center;-ms-flex-pack: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);-webkit-box-shadow:var(--shadow-2) !important;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;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.arrowDown::after{top:0 !important;left:5.5px !important;margin-top:4px !important;-webkit-transform:rotate(45deg);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:-ms-flexbox;display:flex;gap:16px}";

package/dist/esm/z-slideshow.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { p as Device } from './index-2255c6c8.js';
 import { f as convertJson, g as getDevice, a as handleKeyboardSubmit } from './utils-7983d02c.js';
 import './breakpoints-680e0e56.js';
-const stylesCss = ":host{display:block;width:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:-ms-flexbox;display:flex;width:inherit;-ms-flex-direction:column;flex-direction:column}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;z-index:10;top:50%;width:auto;margin:0 var(--space-unit);cursor:pointer;fill:var(--color-primary01);-webkit-transition:0.6s ease;transition:0.6s ease}main .scroll.disabled{opacity:0.5;pointer-events:none}main .scroll.right{right:0}#slides{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;line-height:0px;overflow-y:hidden;-webkit-transition:all 300ms;transition:all 300ms}footer{display:grid;width:100%;height:56px;-ms-flex-align:center;align-items:center;border-top:var(--border-size-medium) solid var(--color-surface02);grid-template:2 / 2;grid-template-areas:\"center center\" \"left right\"}footer>div{width:100%;-ms-flex-align:center;align-items:center}footer .footer-center{grid-area:center}footer .footer-left{grid-area:left}footer .footer-right{grid-area:right}footer .bullet-container{display:-ms-flexbox;display:flex;min-height:60px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0 auto}footer .bullet-container .bullet{width:8px;height:8px;margin:var(--space-unit) 2px;background-color:var(--gray200);border-radius:50%;pointer-events:none}footer .bullet-container .bullet.selected{background-color:var(--gray400)}@media only screen and (min-width: 768px){footer{height:76px;border-top:var(--border-size-medium) solid var(--color-surface02);grid-template:1 / 1fr 2fr 1fr;grid-template-areas:\"left center right\"}footer .bullet-container .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bullet-container .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);cursor:pointer;pointer-events:auto}}";
+const stylesCss = ":host{display:block;width:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:-ms-flexbox;display:flex;width:inherit;-ms-flex-direction:column;flex-direction:column}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;z-index:10;top:50%;width:auto;margin:0 var(--space-unit);cursor:pointer;fill:var(--color-primary01);-webkit-transition:0.6s ease;transition:0.6s ease}main .scroll.disabled{opacity:0.5;pointer-events:none}main .scroll.right{right:0}#slides{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;line-height:0px;overflow-y:hidden;-webkit-transition:all 300ms;transition:all 300ms}footer{display:grid;width:100%;height:56px;-ms-flex-align:center;align-items:center;border-top:var(--border-size-medium) solid var(--color-surface02);grid-template:2 / 2;grid-template-areas:\"center center\" \"left right\"}footer>div{width:100%;-ms-flex-align:center;align-items:center}footer .footer-center{grid-area:center}footer .footer-left{grid-area:left}footer .footer-right{grid-area:right}footer .bullet-container{display:-ms-flexbox;display:flex;min-height:60px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0 auto}footer .bullet-container .bullet{width:8px;height:8px;margin:var(--space-unit) 2px;background-color:var(--gray200);border-radius:50%;pointer-events:none}footer .bullet-container .bullet.selected{background-color:var(--gray400)}main z-icon:focus,footer .bullet-container .bullet:focus{border-radius:50%;-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none !important}@media only screen and (min-width: 768px){footer{height:76px;border-top:var(--border-size-medium) solid var(--color-surface02);grid-template:1 / 1fr 2fr 1fr;grid-template-areas:\"left center right\"}footer .bullet-container .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bullet-container .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);cursor:pointer;pointer-events:auto}}";
 const ZSlideshowStyle0 = stylesCss;
 /**

package/dist/esm/z-slideshow.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-slideshow.entry.js","mappings":"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","names":[],"sources":["src/snowflakes/myz/z-slideshow/styles.css?tag=z-slideshow&encapsulation=shadow","src/snowflakes/myz/z-slideshow/index.tsx"],"sourcesContent":[":host {\n display: block;\n width: inherit;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > div {\n display: flex;\n width: inherit;\n flex-direction: column;\n}\n\nmain {\n position: relative;\n overflow: hidden;\n width: 100%;\n}\n\nmain z-icon.scroll {\n position: absolute;\n z-index: 10;\n top: 50%;\n width: auto;\n margin: 0 var(--space-unit);\n cursor: pointer;\n fill: var(--color-primary01);\n transition: 0.6s ease;\n}\n\nmain .scroll.disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\nmain .scroll.right {\n right: 0;\n}\n\n#slides {\n display: flex;\n flex-wrap: wrap;\n line-height: 0px;\n overflow-y: hidden;\n transition: all 300ms;\n}\n\nfooter {\n display: grid;\n width: 100%;\n height: 56px;\n align-items: center;\n border-top: var(--border-size-medium) solid var(--color-surface02);\n grid-template: 2 / 2;\n grid-template-areas: \"center center\" \"left right\";\n}\n\nfooter > div {\n width: 100%;\n align-items: center;\n}\n\nfooter .footer-center {\n grid-area: center;\n}\n\nfooter .footer-left {\n grid-area: left;\n}\n\nfooter .footer-right {\n grid-area: right;\n}\n\nfooter .bullet-container {\n display: flex;\n min-height: 60px;\n align-items: center;\n justify-content: center;\n margin: 0 auto;\n}\n\nfooter .bullet-container .bullet {\n width: 8px;\n height: 8px;\n margin: var(--space-unit) 2px;\n background-color: var(--gray200);\n border-radius: 50%;\n pointer-events: none;\n}\n\nfooter .bullet-container .bullet.selected {\n background-color: var(--gray400);\n}\n\n/* Tablet breakpoint /\n\n@media only screen and (min-width: 768px) {\n footer {\n height: 76px;\n border-top: var(--border-size-medium) solid var(--color-surface02);\n grid-template: 1 / 1fr 2fr 1fr;\n grid-template-areas: \"left center right\";\n }\n\n footer .bullet-container .bullet {\n width: 10px;\n height: 10px;\n margin: var(--space-unit) 3px;\n }\n}\n\n/ Desktop breakpoint /\n\n@media only screen and (min-width: 1025px) {\n main z-icon.scroll {\n margin: 0 10px;\n }\n\n footer .bullet-container .bullet {\n width: 16px;\n height: 16px;\n margin: var(--space-unit) calc(var(--space-unit) 0.5);\n cursor: pointer;\n pointer-events: auto;\n }\n}\n","import {Component, Element, Prop, State, Watch, h} from \"@stencil/core\";\nimport {Device} from \"../../../beans\";\nimport {convertJson, getDevice, handleKeyboardSubmit} from \"../../../utils/utils\";\n\n/*\n Check if data is an array of strings.\n * @param {unknown} data Data to check\n * @returns {boolean}\n /\nfunction isStringArray(data: unknown): data is string[] {\n return Array.isArray(data) && data.every((datum: unknown): datum is string => typeof datum === \"string\");\n}\n\n/\n @slot footer-right - right content slot in footer\n * @slot footer-left - left content slot in footer\n /\n@Component({\n tag: \"z-slideshow\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZSlideshow {\n @Element() el: HTMLZSlideshowElement;\n\n /* slideshow id /\n @Prop()\n slideshowid: string;\n\n /* array or JSON stringified images urls /\n @Prop()\n data: string[] \| string;\n\n @State()\n device: Device;\n\n @State()\n currentSlide = 0;\n\n private links: string[];\n\n @Watch(\"data\")\n watchData(): void {\n this.parseLinks();\n }\n\n componentWillLoad(): void {\n this.parseLinks();\n\n this.setDevice();\n window.addEventListener(\"resize\", this.handleResize.bind(this));\n }\n\n componentDidRender(): void {\n this.setStyle();\n }\n\n private handleResize(): void {\n this.setDevice();\n this.setStyle();\n }\n\n private parseLinks(): void {\n switch (typeof this.data) {\n case \"string\": {\n const parsed = convertJson(this.data) ?? [];\n if (!isStringArray(parsed)) {\n throw new Error(\"Passed data is invalid\");\n }\n\n this.links = parsed;\n break;\n }\n default:\n this.links = this.data;\n break;\n }\n }\n\n private setStyle(): void {\n const refSlides = this.el.shadowRoot.querySelector(\"#slides\") as HTMLElement;\n if (!refSlides) {\n return;\n }\n\n const allImages = this.el.shadowRoot.querySelectorAll(\".slide\");\n const width = this.el.offsetWidth;\n const fullwidth = width this.links.length;\n\n refSlides.style.width = `${fullwidth}px`;\n refSlides.style.transform = `translate(-${width * this.currentSlide}px)`;\n allImages.forEach((item: HTMLElement) => {\n const img = item.querySelector(\"img\");\n img.style.width = `${width}px`;\n });\n }\n\n private setDevice(): void {\n this.device = getDevice();\n }\n\n private setCurrentSlide(index: number): void {\n this.currentSlide = index;\n }\n\n private getBulletDimension(): number {\n switch (this.device) {\n case Device.MOBILE:\n return 24;\n case Device.TABLET:\n return 32;\n default:\n return 40;\n }\n }\n\n private renderSlides(items: string[]): HTMLElement {\n return (\n <div id=\"slides\">\n {items.map((item: string, i: number) => (\n <div\n id={\"slide\" + i}\n class={`slide ${this.currentSlide !== i && \"hide\"}`}\n >\n <img src={item} />\n </div>\n ))}\n </div>\n );\n }\n\n private renderScroll(direction: \"left\" \| \"right\"): HTMLZIconElement {\n let disabled = false,\n nextSlide = this.currentSlide;\n\n if (direction === \"left\") {\n disabled = this.currentSlide === 0;\n nextSlide--;\n } else if (direction === \"right\") {\n disabled = this.currentSlide === this.links.length - 1;\n nextSlide++;\n }\n\n return (\n <z-icon\n class={`scroll ${direction} ${disabled && \"disabled\"}`}\n width={this.getBulletDimension()}\n height={this.getBulletDimension()}\n name={`chevron-${direction}-circle`}\n onClick={() => {\n !disabled && this.setCurrentSlide(nextSlide);\n }}\n onKeyUp={(e: KeyboardEvent) =>\n !disabled &&\n handleKeyboardSubmit(e, () => {\n this.setCurrentSlide(nextSlide);\n })\n }\n tabindex={0}\n role=\"button\"\n />\n );\n }\n\n private renderSlideshowMain(): HTMLElement {\n return (\n <main>\n {this.renderScroll(\"left\")}\n {this.renderSlides(this.links)}\n {this.renderScroll(\"right\")}\n </main>\n );\n }\n\n private renderBullet(i: number): HTMLElement {\n return (\n <a\n class={`bullet ${this.currentSlide === i && \"selected\"}`}\n onClick={() => this.setCurrentSlide(i)}\n onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, () => this.setCurrentSlide(i))}\n tabindex={0}\n role=\"button\"\n ></a>\n );\n }\n\n private renderSlideshowFooter(): HTMLElement {\n return (\n <footer>\n <div class=\"footer-left\">\n <slot name=\"footer-left\" />\n </div>\n <div class=\"footer-center\">\n <div class=\"bullet-container\">{Object.keys(this.links).map((i) => this.renderBullet(parseInt(i)))}</div>\n </div>\n <div class=\"footer-right\">\n <slot name=\"footer-right\" />\n </div>\n </footer>\n );\n }\n\n render(): HTMLElement {\n if (!this.links \|\| !this.links.length) {\n return <div />;\n }\n\n return (\n <div id={this.slideshowid}>\n {this.renderSlideshowMain()}\n {this.renderSlideshowFooter()}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-slideshow.entry.js","mappings":"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","names":[],"sources":["src/snowflakes/myz/z-slideshow/styles.css?tag=z-slideshow&encapsulation=shadow","src/snowflakes/myz/z-slideshow/index.tsx"],"sourcesContent":[":host {\n display: block;\n width: inherit;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > div {\n display: flex;\n width: inherit;\n flex-direction: column;\n}\n\nmain {\n position: relative;\n overflow: hidden;\n width: 100%;\n}\n\nmain z-icon.scroll {\n position: absolute;\n z-index: 10;\n top: 50%;\n width: auto;\n margin: 0 var(--space-unit);\n cursor: pointer;\n fill: var(--color-primary01);\n transition: 0.6s ease;\n}\n\nmain .scroll.disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\nmain .scroll.right {\n right: 0;\n}\n\n#slides {\n display: flex;\n flex-wrap: wrap;\n line-height: 0px;\n overflow-y: hidden;\n transition: all 300ms;\n}\n\nfooter {\n display: grid;\n width: 100%;\n height: 56px;\n align-items: center;\n border-top: var(--border-size-medium) solid var(--color-surface02);\n grid-template: 2 / 2;\n grid-template-areas: \"center center\" \"left right\";\n}\n\nfooter > div {\n width: 100%;\n align-items: center;\n}\n\nfooter .footer-center {\n grid-area: center;\n}\n\nfooter .footer-left {\n grid-area: left;\n}\n\nfooter .footer-right {\n grid-area: right;\n}\n\nfooter .bullet-container {\n display: flex;\n min-height: 60px;\n align-items: center;\n justify-content: center;\n margin: 0 auto;\n}\n\nfooter .bullet-container .bullet {\n width: 8px;\n height: 8px;\n margin: var(--space-unit) 2px;\n background-color: var(--gray200);\n border-radius: 50%;\n pointer-events: none;\n}\n\nfooter .bullet-container .bullet.selected {\n background-color: var(--gray400);\n}\n\nmain z-icon:focus,\nfooter .bullet-container .bullet:focus {\n border-radius: 50%;\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n/* Tablet breakpoint /\n\n@media only screen and (min-width: 768px) {\n footer {\n height: 76px;\n border-top: var(--border-size-medium) solid var(--color-surface02);\n grid-template: 1 / 1fr 2fr 1fr;\n grid-template-areas: \"left center right\";\n }\n\n footer .bullet-container .bullet {\n width: 10px;\n height: 10px;\n margin: var(--space-unit) 3px;\n }\n}\n\n/ Desktop breakpoint /\n\n@media only screen and (min-width: 1025px) {\n main z-icon.scroll {\n margin: 0 10px;\n }\n\n footer .bullet-container .bullet {\n width: 16px;\n height: 16px;\n margin: var(--space-unit) calc(var(--space-unit) 0.5);\n cursor: pointer;\n pointer-events: auto;\n }\n}\n","import {Component, Element, Prop, State, Watch, h} from \"@stencil/core\";\nimport {Device} from \"../../../beans\";\nimport {convertJson, getDevice, handleKeyboardSubmit} from \"../../../utils/utils\";\n\n/*\n Check if data is an array of strings.\n * @param {unknown} data Data to check\n * @returns {boolean}\n /\nfunction isStringArray(data: unknown): data is string[] {\n return Array.isArray(data) && data.every((datum: unknown): datum is string => typeof datum === \"string\");\n}\n\n/\n @slot footer-right - right content slot in footer\n * @slot footer-left - left content slot in footer\n /\n@Component({\n tag: \"z-slideshow\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZSlideshow {\n @Element() el: HTMLZSlideshowElement;\n\n /* slideshow id /\n @Prop()\n slideshowid: string;\n\n /* array or JSON stringified images urls /\n @Prop()\n data: string[] \| string;\n\n @State()\n device: Device;\n\n @State()\n currentSlide = 0;\n\n private links: string[];\n\n @Watch(\"data\")\n watchData(): void {\n this.parseLinks();\n }\n\n componentWillLoad(): void {\n this.parseLinks();\n\n this.setDevice();\n window.addEventListener(\"resize\", this.handleResize.bind(this));\n }\n\n componentDidRender(): void {\n this.setStyle();\n }\n\n private handleResize(): void {\n this.setDevice();\n this.setStyle();\n }\n\n private parseLinks(): void {\n switch (typeof this.data) {\n case \"string\": {\n const parsed = convertJson(this.data) ?? [];\n if (!isStringArray(parsed)) {\n throw new Error(\"Passed data is invalid\");\n }\n\n this.links = parsed;\n break;\n }\n default:\n this.links = this.data;\n break;\n }\n }\n\n private setStyle(): void {\n const refSlides = this.el.shadowRoot.querySelector(\"#slides\") as HTMLElement;\n if (!refSlides) {\n return;\n }\n\n const allImages = this.el.shadowRoot.querySelectorAll(\".slide\");\n const width = this.el.offsetWidth;\n const fullwidth = width this.links.length;\n\n refSlides.style.width = `${fullwidth}px`;\n refSlides.style.transform = `translate(-${width * this.currentSlide}px)`;\n allImages.forEach((item: HTMLElement) => {\n const img = item.querySelector(\"img\");\n img.style.width = `${width}px`;\n });\n }\n\n private setDevice(): void {\n this.device = getDevice();\n }\n\n private setCurrentSlide(index: number): void {\n this.currentSlide = index;\n }\n\n private getBulletDimension(): number {\n switch (this.device) {\n case Device.MOBILE:\n return 24;\n case Device.TABLET:\n return 32;\n default:\n return 40;\n }\n }\n\n private renderSlides(items: string[]): HTMLElement {\n return (\n <div id=\"slides\">\n {items.map((item: string, i: number) => (\n <div\n id={\"slide\" + i}\n class={`slide ${this.currentSlide !== i && \"hide\"}`}\n >\n <img src={item} />\n </div>\n ))}\n </div>\n );\n }\n\n private renderScroll(direction: \"left\" \| \"right\"): HTMLZIconElement {\n let disabled = false,\n nextSlide = this.currentSlide;\n\n if (direction === \"left\") {\n disabled = this.currentSlide === 0;\n nextSlide--;\n } else if (direction === \"right\") {\n disabled = this.currentSlide === this.links.length - 1;\n nextSlide++;\n }\n\n return (\n <z-icon\n class={`scroll ${direction} ${disabled && \"disabled\"}`}\n width={this.getBulletDimension()}\n height={this.getBulletDimension()}\n name={`chevron-${direction}-circle`}\n onClick={() => {\n !disabled && this.setCurrentSlide(nextSlide);\n }}\n onKeyUp={(e: KeyboardEvent) =>\n !disabled &&\n handleKeyboardSubmit(e, () => {\n this.setCurrentSlide(nextSlide);\n })\n }\n tabindex={0}\n role=\"button\"\n />\n );\n }\n\n private renderSlideshowMain(): HTMLElement {\n return (\n <main>\n {this.renderScroll(\"left\")}\n {this.renderSlides(this.links)}\n {this.renderScroll(\"right\")}\n </main>\n );\n }\n\n private renderBullet(i: number): HTMLElement {\n return (\n <a\n class={`bullet ${this.currentSlide === i && \"selected\"}`}\n onClick={() => this.setCurrentSlide(i)}\n onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, () => this.setCurrentSlide(i))}\n tabindex={0}\n role=\"button\"\n ></a>\n );\n }\n\n private renderSlideshowFooter(): HTMLElement {\n return (\n <footer>\n <div class=\"footer-left\">\n <slot name=\"footer-left\" />\n </div>\n <div class=\"footer-center\">\n <div class=\"bullet-container\">{Object.keys(this.links).map((i) => this.renderBullet(parseInt(i)))}</div>\n </div>\n <div class=\"footer-right\">\n <slot name=\"footer-right\" />\n </div>\n </footer>\n );\n }\n\n render(): HTMLElement {\n if (!this.links \|\| !this.links.length) {\n return <div />;\n }\n\n return (\n <div id={this.slideshowid}>\n {this.renderSlideshowMain()}\n {this.renderSlideshowFooter()}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-stepper.entry.js CHANGED Viewed

@@ -8,7 +8,7 @@ const ZStepper = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'c1069a6d199240aa1e8eb9fe30be9a75b2dabecb', role: "list" }, h("slot", { key: '283f1f42d5f73259b7c04e965bf592e4ba543fc8' })));
+        return (h(Host, { key: '80b89caa35e9adb82ad413783b16eae491a26f48', role: "list" }, h("slot", { key: '140e35a55637873b1eee70d5a7a8c2b03af3eed7' })));
     }
 };
 ZStepper.style = ZStepperStyle0;

package/dist/esm/z-stepper.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-stepper.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4WAA4W,CAAC;AAC/X,uBAAe,SAAS;;MCSX,QAAQ;;;;IACnB,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,8DAAQ,CACH,EACP;KACH;;;;;;","names":[],"sources":["src/components/z-stepper/styles.css?tag=z-stepper&encapsulation=shadow","src/components/z-stepper/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: flex;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n flex-direction: row;\n padding: 0;\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n list-style: none;\n}\n\n@media only screen and (min-width: 768px) {\n :host {\n padding: 0 calc(var(--space-unit) * 2);\n }\n}\n","import {Component, Host, h} from \"@stencil/core\";\n\n/*\n @slot - slot for `z-stepper-item~~`s\~~n */\n@Component({\n tag: \"z-stepper\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZStepper {\n render(): HTMLSlotElement {\n return (\n <Host role=\"list\">\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-stepper.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4WAA4W,CAAC;AAC/X,uBAAe,SAAS;;MCSX,QAAQ;;;;IACnB,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,8DAAQ,CACH,EACP;KACH;;;;;;","names":[],"sources":["src/components/z-stepper/styles.css?tag=z-stepper&encapsulation=shadow","src/components/z-stepper/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: flex;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n flex-direction: row;\n padding: 0;\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n list-style: none;\n}\n\n@media only screen and (min-width: 768px) {\n :host {\n padding: 0 calc(var(--space-unit) * 2);\n }\n}\n","import {Component, Host, h} from \"@stencil/core\";\n\n/*\n @slot - slot for `z-stepper-item`\n */\n@Component({\n tag: \"z-stepper\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZStepper {\n render(): HTMLSlotElement {\n return (\n <Host role=\"list\">\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-toast-notification.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { s as ToastNotificationTransition } from './index-2255c6c8.js';
 import { m as mobileBreakpoint } from './breakpoints-680e0e56.js';
 import { H as Hammer } from './hammer-f1ed46b5.js';
-const stylesCss = ":host{display:inline-block;width:100vw;min-width:200px;--percentuale:0}:host(.slide-in-left){-webkit-animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-in-right){-webkit-animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-in-down){-webkit-animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-in-up){-webkit-animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-left){-webkit-animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-right){-webkit-animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-down){-webkit-animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-up){-webkit-animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes slideinleft{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideinleft{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slideinright{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideinright{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slideinup{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideinup{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideindown{0%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideindown{0%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@-webkit-keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}}@-webkit-keyframes slideoutup{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes slideoutup{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@-webkit-keyframes slideoutdown{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes slideoutdown{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}:host>#external-container{display:-ms-flexbox;display:flex;min-height:52px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);border-radius:4px;-webkit-box-shadow:var(--shadow-3);box-shadow:var(--shadow-3);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px}:host>#external-container.mobile-wrapped>#icon{-ms-flex-item-align:start;align-self:flex-start}:host>#external-container.several-lines-padding{padding:calc(var(--space-unit) * 2)}:host>#external-container>#flex-container{display:-ms-flexbox;display:flex;width:100%;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host>#external-container #text{margin-right:calc(var(--space-unit) * 2);color:var(--color-white);letter-spacing:0.16px;line-height:20px;text-align:left}:host>#external-container #text>.title{margin-right:4px;font-weight:600}:host>#external-container.mobile-wrapped #button ::slotted(z-button){margin-top:calc(var(--space-unit) * 2)}:host>#external-container #icon{margin-left:calc(var(--space-unit) * 2);cursor:pointer;fill:var(--color-white)}:host>#external-container.dark{background:var(--gray800)}:host>#external-container.light{background:var(--color-background)}:host>#external-container.light #icon,:host>#external-container.warning #text,:host>#external-container.warning #icon{fill:var(--color-primary01-icon)}:host>#external-container.light #text,:host>#external-container.warning #text{color:var(--gray800)}:host>#external-container.accent{background:var(--color-primary01)}:host>#external-container.error{background:var(--color-error-default)}:host>#external-container.success{background:var(--color-success-default)}:host>#external-container.warning{background:var(--color-warning-default)}@media only screen and (min-width: 768px){:host{width:unset;max-width:50vw}:host>#external-container>#flex-container{-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host>#external-container #text{width:100%}}@media only screen and (min-width: 1366px){:host{width:unset;max-width:33vw}}";
+const stylesCss = ":host{display:inline-block;width:100vw;min-width:200px;--percentuale:0}:host(.slide-in-left){-webkit-animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-in-right){-webkit-animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-in-down){-webkit-animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-in-up){-webkit-animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-left){-webkit-animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-right){-webkit-animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-down){-webkit-animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.slide-out-up){-webkit-animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes slideinleft{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideinleft{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slideinright{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideinright{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slideinup{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideinup{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideindown{0%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideindown{0%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@-webkit-keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));-webkit-transform:translateX(var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}}@-webkit-keyframes slideoutup{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes slideoutup{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@-webkit-keyframes slideoutdown{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes slideoutdown{0%{opacity:1;-webkit-transform:translateY(var(--percentuale));transform:translateY(var(--percentuale))}100%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}:host>#external-container{display:-ms-flexbox;display:flex;min-height:52px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);border-radius:4px;-webkit-box-shadow:var(--shadow-3);box-shadow:var(--shadow-3);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px}:host>#external-container.mobile-wrapped>#icon{-ms-flex-item-align:start;align-self:flex-start}:host>#external-container.several-lines-padding{padding:calc(var(--space-unit) * 2)}:host>#external-container>#flex-container{display:-ms-flexbox;display:flex;width:100%;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host>#external-container #text{margin-right:calc(var(--space-unit) * 2);color:var(--color-white);letter-spacing:0.16px;line-height:20px;text-align:left}:host>#external-container #text>.title{margin-right:4px;font-weight:600}:host>#external-container.mobile-wrapped #button ::slotted(z-button){margin-top:calc(var(--space-unit) * 2)}:host>#external-container #icon{margin-left:calc(var(--space-unit) * 2);cursor:pointer;fill:var(--color-white)}z-icon{display:inline-block;vertical-align:0}z-icon:focus{padding:calc(var(--space-unit) / 4);border-radius:50%;-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none !important}:host>#external-container.dark{background:var(--gray800)}:host>#external-container.light{background:var(--color-background)}:host>#external-container.light #icon,:host>#external-container.warning #text,:host>#external-container.warning #icon{fill:var(--color-primary01-icon)}:host>#external-container.light #text,:host>#external-container.warning #text{color:var(--gray800)}:host>#external-container.accent{background:var(--color-primary01)}:host>#external-container.error{background:var(--color-error-default)}:host>#external-container.success{background:var(--color-success-default)}:host>#external-container.warning{background:var(--color-warning-default)}@media only screen and (min-width: 768px){:host{width:unset;max-width:50vw}:host>#external-container>#flex-container{-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host>#external-container #text{width:100%}}@media only screen and (min-width: 1366px){:host{width:unset;max-width:33vw}}";
 const ZToastNotificationStyle0 = stylesCss;
 const ZToastNotification = class {

package/dist/esm/z-toast-notification.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-toast-notification.entry.js","mappings":"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","names":[],"sources":["src/components/z-toast-notification/styles.css?tag=z-toast-notification&encapsulation=shadow","src/components/z-toast-notification/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 100vw;\n min-width: 200px;\n\n --percentuale: 0;\n}\n\n:host(.slide-in-left) {\n animation: slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-in-right) {\n animation: slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-in-down) {\n animation: slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-in-up) {\n animation: slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-left) {\n animation: slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-right) {\n animation: slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-down) {\n animation: slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-up) {\n animation: slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n@keyframes slideinleft {\n 0% {\n transform: translateX(100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n@keyframes slideinright {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n@keyframes slideinup {\n 0% {\n opacity: 0;\n transform: translateY(100%);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideindown {\n 0% {\n opacity: 0;\n transform: translateY(-100%);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideoutleft {\n 0% {\n /* stylelint-disable-next-line alpha-value-notation /\n opacity: calc(100% - var(--percentuale));\n transform: translateX(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateX(-100%);\n }\n}\n\n@keyframes slideoutright {\n 0% {\n / stylelint-disable-next-line alpha-value-notation /\n opacity: calc(100% - var(--percentuale));\n transform: translateX(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateX(100%);\n }\n}\n\n@keyframes slideoutup {\n 0% {\n opacity: 1;\n transform: translateY(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateY(-100%);\n }\n}\n\n@keyframes slideoutdown {\n 0% {\n opacity: 1;\n transform: translateY(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateY(100%);\n }\n}\n\n:host > #external-container {\n display: flex;\n min-height: 52px;\n box-sizing: border-box;\n align-items: center;\n justify-content: space-between;\n padding: calc(var(--space-unit) 1) calc(var(--space-unit) * 2);\n border-radius: 4px;\n box-shadow: var(--shadow-3);\n font-family: var(--font-family-sans);\n font-size: 14px;\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n}\n\n:host > #external-container.mobile-wrapped > #icon {\n align-self: flex-start;\n}\n\n:host > #external-container.several-lines-padding {\n padding: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container > #flex-container {\n display: flex;\n width: 100%;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n}\n\n:host > #external-container #text {\n margin-right: calc(var(--space-unit) * 2);\n color: var(--color-white);\n letter-spacing: 0.16px;\n line-height: 20px;\n text-align: left;\n}\n\n:host > #external-container #text > .title {\n margin-right: 4px;\n font-weight: 600;\n}\n\n:host > #external-container.mobile-wrapped #button ::slotted(z-button) {\n margin-top: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container #icon {\n margin-left: calc(var(--space-unit) * 2);\n cursor: pointer;\n fill: var(--color-white);\n}\n\n:host > #external-container.dark {\n background: var(--gray800);\n}\n\n:host > #external-container.light {\n background: var(--color-background);\n}\n\n:host > #external-container.light #icon,\n:host > #external-container.warning #text,\n:host > #external-container.warning #icon {\n fill: var(--color-primary01-icon);\n}\n\n:host > #external-container.light #text,\n:host > #external-container.warning #text {\n color: var(--gray800);\n}\n\n:host > #external-container.accent {\n background: var(--color-primary01);\n}\n\n:host > #external-container.error {\n background: var(--color-error-default);\n}\n\n:host > #external-container.success {\n background: var(--color-success-default);\n}\n\n:host > #external-container.warning {\n background: var(--color-warning-default);\n}\n\n/* Tablet breakpoint /\n@media only screen and (min-width: 768px) {\n :host {\n width: unset;\n max-width: 50vw;\n }\n\n :host > #external-container > #flex-container {\n flex-wrap: nowrap;\n }\n\n :host > #external-container #text {\n width: 100%;\n }\n}\n\n/ Wide breakpoint /\n@media only screen and (min-width: 1366px) {\n :host {\n width: unset;\n max-width: 33vw;\n }\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ToastNotification, ToastNotificationTransition} from \"../../beans\";\nimport {mobileBreakpoint} from \"../../constants/breakpoints\";\n\nimport Hammer from \"hammerjs\";\n\n@Component({\n tag: \"z-toast-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToastNotification {\n @Element() hostElement: HTMLZToastNotificationElement;\n\n /* toast notification's title /\n @Prop()\n heading?: string;\n\n /* toast notification's message /\n @Prop()\n message: string;\n\n /* toggles closing button rendering /\n @Prop()\n closebutton: boolean;\n\n /* toast notification closing timeout (ms) /\n @Prop()\n autoclose?: number;\n\n /* toast notification autoclose can be paused /\n @Prop()\n pauseonfocusloss?: boolean = true;\n\n /* toast notification type: dark, light, accent, error, success, warning /\n @Prop()\n type?: ToastNotification;\n\n /* toast notification can be draggable/\n @Prop()\n isdraggable?: boolean = true;\n\n /* toast notification draggable percentage/\n @Prop()\n draggablepercentage?: number = 80;\n\n /* toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up/\n @Prop()\n transition?: ToastNotificationTransition;\n\n @State()\n percentage: number;\n\n private isTextLong: boolean;\n\n private container!: HTMLElement;\n\n private toastText!: HTMLElement;\n\n private sliderManager: HammerManager;\n\n private elapsedTime: number;\n\n private timeoutHandle: number;\n\n private startTime: number;\n\n private isMobile: boolean;\n\n private isCloseEventCalled = false;\n\n @Watch(\"isdraggable\")\n watchPropIsdraggable(newValue: boolean): void {\n if (newValue) {\n this.sliderManager.get(\"pan\").set({enable: true});\n } else {\n this.sliderManager.get(\"pan\").set({enable: false});\n }\n }\n\n @Watch(\"autoclose\")\n watchPropAutoclose(newValue: number): void {\n clearTimeout(this.timeoutHandle);\n this.startClosingTimeout(newValue);\n }\n\n @Watch(\"pauseonfocusloss\")\n watchPropPauseonfocusloss(newValue: boolean): void {\n if (this.autoclose) {\n if (newValue) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n } else {\n document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n }\n }\n\n /* notification close event /\n @Event()\n toastClose: EventEmitter;\n\n private emitToastClose(cssClass: string): void {\n this.timeoutHandle = null;\n this.elapsedTime = null;\n this.hostElement.classList.add(cssClass);\n this.toastClose.emit();\n }\n\n componentWillLoad(): void {\n this.isMobile = window.innerWidth <= mobileBreakpoint;\n this.validateAutoclose();\n this.percentage = 0;\n }\n\n componentDidLoad(): void {\n this.isTextLong = this.detectWrap() \|\| this.toastText.offsetHeight > 20;\n this.startTime = Date.now();\n if (this.autoclose && this.pauseonfocusloss) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n\n this.isdraggable && this.handleSlideOutDragAnimation();\n }\n\n private visibilityChangeEventHandler(): void {\n if (document.visibilityState === \"hidden\") {\n this.timeoutHandle && this.onBlur();\n } else {\n this.elapsedTime && this.onFocus();\n }\n }\n\n private validateAutoclose(): void {\n if (!this.autoclose && !this.closebutton) {\n console.error(\"At least one between autoclose and closebutton must be present\");\n }\n }\n\n private mapSlideOutClass(): ToastNotificationTransition {\n switch (this.transition) {\n case ToastNotificationTransition.SLIDE_IN_DOWN:\n return ToastNotificationTransition.SLIDE_OUT_UP;\n case ToastNotificationTransition.SLIDE_IN_UP:\n return ToastNotificationTransition.SLIDE_OUT_DOWN;\n case ToastNotificationTransition.SLIDE_IN_LEFT:\n return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n case ToastNotificationTransition.SLIDE_IN_RIGHT:\n return ToastNotificationTransition.SLIDE_OUT_LEFT;\n }\n }\n\n private calculateDraggedPercentage(e): number {\n const bounding = this.hostElement.getBoundingClientRect();\n\n return Math.round((100 e.deltaX) / bounding.width);\n }\n\n private handleSlideOutDragAnimation(): void {\n this.sliderManager = new Hammer(this.hostElement);\n this.sliderManager.get(\"pan\").set({\n direction: Hammer.DIRECTION_HORIZONTAL,\n });\n\n this.sliderManager.on(\"pan\", (e) => {\n this.percentage = this.calculateDraggedPercentage(e);\n this.hostElement.style.transition = \"none\";\n this.hostElement.classList.remove(this.transition);\n const translateObj = {\n translate: `translateX(${this.percentage}%)`,\n translateBack: \"translateX(0)\",\n };\n\n this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n if (e.eventType === Hammer.DIRECTION_LEFT \|\| e.eventType === Hammer.DIRECTION_RIGHT) {\n this.hostElement.style.transform = translateObj.translate;\n if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n this.isCloseEventCalled = true;\n this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\");\n }\n }\n\n if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n this.hostElement.style.transform = translateObj.translateBack;\n this.hostElement.style.transition = \"all 1s\";\n this.hostElement.style.opacity = \"100%\";\n this.percentage = 0;\n }\n });\n }\n\n private onFocus(): void {\n let time = this.autoclose;\n if (this.elapsedTime) {\n time = this.autoclose - this.elapsedTime;\n }\n if (time > 0) {\n this.startClosingTimeout(time);\n }\n }\n\n private onBlur(): void {\n this.elapsedTime = Date.now() - this.startTime;\n clearTimeout(this.timeoutHandle);\n }\n\n private startClosingTimeout(time: number): void {\n this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);\n }\n\n private detectWrap(): boolean {\n const parentWidth = this.container.offsetWidth;\n const children = this.container.children;\n let totalWidth = 0;\n\n for (let i = 0; i < children.length; i++) {\n totalWidth += (children[i] as HTMLElement).offsetWidth;\n }\n\n return totalWidth > parentWidth;\n }\n\n private renderText(): HTMLDivElement {\n return (\n <div\n id=\"text\"\n ref={(el) => (this.toastText = el as HTMLElement)}\n >\n <span class=\"title\">{this.heading}</span>\n <span class=\"message\">{this.message}</span>\n </div>\n );\n }\n\n private renderButton(): HTMLDivElement {\n return (\n <div id=\"button\">\n <slot name=\"button\" />\n </div>\n );\n }\n\n private renderCloseIcon(): HTMLDivElement {\n if (!this.closebutton) {\n return;\n }\n\n return (\n <div id=\"icon\">\n <z-icon\n tabIndex={0}\n name=\"multiply-circled\"\n width={15}\n height={15}\n onClick={() => this.emitToastClose(this.mapSlideOutClass())}\n onKeyPress={(e) => {\n if (e.keyCode == 32 \|\| e.keyCode == 13) {\n e.preventDefault();\n this.emitToastClose(this.mapSlideOutClass());\n }\n }}\n />\n </div>\n );\n }\n\n private renderContainer(): HTMLDivElement {\n return (\n <div\n tabIndex={0}\n id=\"external-container\"\n class={{\n [this.type]: !!this.type,\n \"several-lines-padding\": this.isTextLong,\n }}\n ref={(el) => (this.container = el as HTMLElement)}\n >\n {this.renderText()}\n {this.renderButton()}\n {this.renderCloseIcon()}\n </div>\n );\n }\n\n private renderMobileContainer(): HTMLDivElement {\n return (\n <div\n id=\"external-container\"\n class={{\n [this.type]: !!this.type,\n \"several-lines-padding\": this.isTextLong,\n \"mobile-wrapped\": this.isTextLong,\n }}\n >\n <div\n id=\"flex-container\"\n ref={(el) => (this.container = el as HTMLElement)}\n >\n {this.renderText()}\n {this.renderButton()}\n </div>\n {this.renderCloseIcon()}\n </div>\n );\n }\n\n render(): HTMLZToastNotificationElement {\n return (\n <Host\n style={{\n \"--percentuale\": `${this.percentage}%`,\n }}\n class={this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN}\n onAnimationEnd={(e: AnimationEvent) => {\n if (this.autoclose && e.animationName.includes(\"slidein\")) {\n this.startClosingTimeout(this.autoclose);\n }\n if (e.animationName.includes(\"slideout\")) {\n this.hostElement.parentNode.removeChild(this.hostElement);\n }\n }}\n >\n {this.isMobile ? this.renderMobileContainer() : this.renderContainer()}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-toast-notification.entry.js","mappings":"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","names":[],"sources":["src/components/z-toast-notification/styles.css?tag=z-toast-notification&encapsulation=shadow","src/components/z-toast-notification/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 100vw;\n min-width: 200px;\n\n --percentuale: 0;\n}\n\n:host(.slide-in-left) {\n animation: slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-in-right) {\n animation: slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-in-down) {\n animation: slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-in-up) {\n animation: slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-left) {\n animation: slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-right) {\n animation: slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-down) {\n animation: slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n:host(.slide-out-up) {\n animation: slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n animation-fill-mode: forwards;\n}\n\n@keyframes slideinleft {\n 0% {\n transform: translateX(100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n@keyframes slideinright {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n@keyframes slideinup {\n 0% {\n opacity: 0;\n transform: translateY(100%);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideindown {\n 0% {\n opacity: 0;\n transform: translateY(-100%);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideoutleft {\n 0% {\n /* stylelint-disable-next-line alpha-value-notation /\n opacity: calc(100% - var(--percentuale));\n transform: translateX(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateX(-100%);\n }\n}\n\n@keyframes slideoutright {\n 0% {\n / stylelint-disable-next-line alpha-value-notation /\n opacity: calc(100% - var(--percentuale));\n transform: translateX(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateX(100%);\n }\n}\n\n@keyframes slideoutup {\n 0% {\n opacity: 1;\n transform: translateY(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateY(-100%);\n }\n}\n\n@keyframes slideoutdown {\n 0% {\n opacity: 1;\n transform: translateY(var(--percentuale));\n }\n\n 100% {\n opacity: 0;\n transform: translateY(100%);\n }\n}\n\n:host > #external-container {\n display: flex;\n min-height: 52px;\n box-sizing: border-box;\n align-items: center;\n justify-content: space-between;\n padding: calc(var(--space-unit) 1) calc(var(--space-unit) * 2);\n border-radius: 4px;\n box-shadow: var(--shadow-3);\n font-family: var(--font-family-sans);\n font-size: 14px;\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n}\n\n:host > #external-container.mobile-wrapped > #icon {\n align-self: flex-start;\n}\n\n:host > #external-container.several-lines-padding {\n padding: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container > #flex-container {\n display: flex;\n width: 100%;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n}\n\n:host > #external-container #text {\n margin-right: calc(var(--space-unit) * 2);\n color: var(--color-white);\n letter-spacing: 0.16px;\n line-height: 20px;\n text-align: left;\n}\n\n:host > #external-container #text > .title {\n margin-right: 4px;\n font-weight: 600;\n}\n\n:host > #external-container.mobile-wrapped #button ::slotted(z-button) {\n margin-top: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container #icon {\n margin-left: calc(var(--space-unit) * 2);\n cursor: pointer;\n fill: var(--color-white);\n}\n\nz-icon {\n display: inline-block;\n vertical-align: 0;\n}\n\nz-icon:focus {\n padding: calc(var(--space-unit) / 4);\n border-radius: 50%;\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n:host > #external-container.dark {\n background: var(--gray800);\n}\n\n:host > #external-container.light {\n background: var(--color-background);\n}\n\n:host > #external-container.light #icon,\n:host > #external-container.warning #text,\n:host > #external-container.warning #icon {\n fill: var(--color-primary01-icon);\n}\n\n:host > #external-container.light #text,\n:host > #external-container.warning #text {\n color: var(--gray800);\n}\n\n:host > #external-container.accent {\n background: var(--color-primary01);\n}\n\n:host > #external-container.error {\n background: var(--color-error-default);\n}\n\n:host > #external-container.success {\n background: var(--color-success-default);\n}\n\n:host > #external-container.warning {\n background: var(--color-warning-default);\n}\n\n/* Tablet breakpoint /\n@media only screen and (min-width: 768px) {\n :host {\n width: unset;\n max-width: 50vw;\n }\n\n :host > #external-container > #flex-container {\n flex-wrap: nowrap;\n }\n\n :host > #external-container #text {\n width: 100%;\n }\n}\n\n/ Wide breakpoint /\n@media only screen and (min-width: 1366px) {\n :host {\n width: unset;\n max-width: 33vw;\n }\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ToastNotification, ToastNotificationTransition} from \"../../beans\";\nimport {mobileBreakpoint} from \"../../constants/breakpoints\";\n\nimport Hammer from \"hammerjs\";\n\n@Component({\n tag: \"z-toast-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToastNotification {\n @Element() hostElement: HTMLZToastNotificationElement;\n\n /* toast notification's title /\n @Prop()\n heading?: string;\n\n /* toast notification's message /\n @Prop()\n message: string;\n\n /* toggles closing button rendering /\n @Prop()\n closebutton: boolean;\n\n /* toast notification closing timeout (ms) /\n @Prop()\n autoclose?: number;\n\n /* toast notification autoclose can be paused /\n @Prop()\n pauseonfocusloss?: boolean = true;\n\n /* toast notification type: dark, light, accent, error, success, warning /\n @Prop()\n type?: ToastNotification;\n\n /* toast notification can be draggable/\n @Prop()\n isdraggable?: boolean = true;\n\n /* toast notification draggable percentage/\n @Prop()\n draggablepercentage?: number = 80;\n\n /* toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up/\n @Prop()\n transition?: ToastNotificationTransition;\n\n @State()\n percentage: number;\n\n private isTextLong: boolean;\n\n private container!: HTMLElement;\n\n private toastText!: HTMLElement;\n\n private sliderManager: HammerManager;\n\n private elapsedTime: number;\n\n private timeoutHandle: number;\n\n private startTime: number;\n\n private isMobile: boolean;\n\n private isCloseEventCalled = false;\n\n @Watch(\"isdraggable\")\n watchPropIsdraggable(newValue: boolean): void {\n if (newValue) {\n this.sliderManager.get(\"pan\").set({enable: true});\n } else {\n this.sliderManager.get(\"pan\").set({enable: false});\n }\n }\n\n @Watch(\"autoclose\")\n watchPropAutoclose(newValue: number): void {\n clearTimeout(this.timeoutHandle);\n this.startClosingTimeout(newValue);\n }\n\n @Watch(\"pauseonfocusloss\")\n watchPropPauseonfocusloss(newValue: boolean): void {\n if (this.autoclose) {\n if (newValue) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n } else {\n document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n }\n }\n\n /* notification close event /\n @Event()\n toastClose: EventEmitter;\n\n private emitToastClose(cssClass: string): void {\n this.timeoutHandle = null;\n this.elapsedTime = null;\n this.hostElement.classList.add(cssClass);\n this.toastClose.emit();\n }\n\n componentWillLoad(): void {\n this.isMobile = window.innerWidth <= mobileBreakpoint;\n this.validateAutoclose();\n this.percentage = 0;\n }\n\n componentDidLoad(): void {\n this.isTextLong = this.detectWrap() \|\| this.toastText.offsetHeight > 20;\n this.startTime = Date.now();\n if (this.autoclose && this.pauseonfocusloss) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n\n this.isdraggable && this.handleSlideOutDragAnimation();\n }\n\n private visibilityChangeEventHandler(): void {\n if (document.visibilityState === \"hidden\") {\n this.timeoutHandle && this.onBlur();\n } else {\n this.elapsedTime && this.onFocus();\n }\n }\n\n private validateAutoclose(): void {\n if (!this.autoclose && !this.closebutton) {\n console.error(\"At least one between autoclose and closebutton must be present\");\n }\n }\n\n private mapSlideOutClass(): ToastNotificationTransition {\n switch (this.transition) {\n case ToastNotificationTransition.SLIDE_IN_DOWN:\n return ToastNotificationTransition.SLIDE_OUT_UP;\n case ToastNotificationTransition.SLIDE_IN_UP:\n return ToastNotificationTransition.SLIDE_OUT_DOWN;\n case ToastNotificationTransition.SLIDE_IN_LEFT:\n return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n case ToastNotificationTransition.SLIDE_IN_RIGHT:\n return ToastNotificationTransition.SLIDE_OUT_LEFT;\n }\n }\n\n private calculateDraggedPercentage(e): number {\n const bounding = this.hostElement.getBoundingClientRect();\n\n return Math.round((100 e.deltaX) / bounding.width);\n }\n\n private handleSlideOutDragAnimation(): void {\n this.sliderManager = new Hammer(this.hostElement);\n this.sliderManager.get(\"pan\").set({\n direction: Hammer.DIRECTION_HORIZONTAL,\n });\n\n this.sliderManager.on(\"pan\", (e) => {\n this.percentage = this.calculateDraggedPercentage(e);\n this.hostElement.style.transition = \"none\";\n this.hostElement.classList.remove(this.transition);\n const translateObj = {\n translate: `translateX(${this.percentage}%)`,\n translateBack: \"translateX(0)\",\n };\n\n this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n if (e.eventType === Hammer.DIRECTION_LEFT \|\| e.eventType === Hammer.DIRECTION_RIGHT) {\n this.hostElement.style.transform = translateObj.translate;\n if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n this.isCloseEventCalled = true;\n this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\");\n }\n }\n\n if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n this.hostElement.style.transform = translateObj.translateBack;\n this.hostElement.style.transition = \"all 1s\";\n this.hostElement.style.opacity = \"100%\";\n this.percentage = 0;\n }\n });\n }\n\n private onFocus(): void {\n let time = this.autoclose;\n if (this.elapsedTime) {\n time = this.autoclose - this.elapsedTime;\n }\n if (time > 0) {\n this.startClosingTimeout(time);\n }\n }\n\n private onBlur(): void {\n this.elapsedTime = Date.now() - this.startTime;\n clearTimeout(this.timeoutHandle);\n }\n\n private startClosingTimeout(time: number): void {\n this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);\n }\n\n private detectWrap(): boolean {\n const parentWidth = this.container.offsetWidth;\n const children = this.container.children;\n let totalWidth = 0;\n\n for (let i = 0; i < children.length; i++) {\n totalWidth += (children[i] as HTMLElement).offsetWidth;\n }\n\n return totalWidth > parentWidth;\n }\n\n private renderText(): HTMLDivElement {\n return (\n <div\n id=\"text\"\n ref={(el) => (this.toastText = el as HTMLElement)}\n >\n <span class=\"title\">{this.heading}</span>\n <span class=\"message\">{this.message}</span>\n </div>\n );\n }\n\n private renderButton(): HTMLDivElement {\n return (\n <div id=\"button\">\n <slot name=\"button\" />\n </div>\n );\n }\n\n private renderCloseIcon(): HTMLDivElement {\n if (!this.closebutton) {\n return;\n }\n\n return (\n <div id=\"icon\">\n <z-icon\n tabIndex={0}\n name=\"multiply-circled\"\n width={15}\n height={15}\n onClick={() => this.emitToastClose(this.mapSlideOutClass())}\n onKeyPress={(e) => {\n if (e.keyCode == 32 \|\| e.keyCode == 13) {\n e.preventDefault();\n this.emitToastClose(this.mapSlideOutClass());\n }\n }}\n />\n </div>\n );\n }\n\n private renderContainer(): HTMLDivElement {\n return (\n <div\n tabIndex={0}\n id=\"external-container\"\n class={{\n [this.type]: !!this.type,\n \"several-lines-padding\": this.isTextLong,\n }}\n ref={(el) => (this.container = el as HTMLElement)}\n >\n {this.renderText()}\n {this.renderButton()}\n {this.renderCloseIcon()}\n </div>\n );\n }\n\n private renderMobileContainer(): HTMLDivElement {\n return (\n <div\n id=\"external-container\"\n class={{\n [this.type]: !!this.type,\n \"several-lines-padding\": this.isTextLong,\n \"mobile-wrapped\": this.isTextLong,\n }}\n >\n <div\n id=\"flex-container\"\n ref={(el) => (this.container = el as HTMLElement)}\n >\n {this.renderText()}\n {this.renderButton()}\n </div>\n {this.renderCloseIcon()}\n </div>\n );\n }\n\n render(): HTMLZToastNotificationElement {\n return (\n <Host\n style={{\n \"--percentuale\": `${this.percentage}%`,\n }}\n class={this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN}\n onAnimationEnd={(e: AnimationEvent) => {\n if (this.autoclose && e.animationName.includes(\"slidein\")) {\n this.startClosingTimeout(this.autoclose);\n }\n if (e.animationName.includes(\"slideout\")) {\n this.hostElement.parentNode.removeChild(this.hostElement);\n }\n }}\n >\n {this.isMobile ? this.renderMobileContainer() : this.renderContainer()}\n </Host>\n );\n }\n}\n"],"version":3}