@zanichelli/albe-web-components 7.3.7 → 7.4.0
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.
- package/CHANGELOG.md +2540 -0
- package/dist/cjs/{breakpoints-88c4fd6c.js → breakpoints-ebe1a437.js} +3 -1
- package/dist/cjs/{index-2dfdb7e2.js → index-b7c319f2.js} +11 -0
- package/dist/cjs/index-e3299e0a.js +2 -6
- package/dist/cjs/index.cjs.js +15 -3
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{utils-b447f1da.js → utils-38f8555a.js} +5 -3
- package/dist/cjs/{utils-f21f9a4f.js → utils-938e5834.js} +1 -1
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/z-anchor-navigation.cjs.entry.js +1 -1
- package/dist/cjs/{z-app-header_11.cjs.entry.js → z-app-header_13.cjs.entry.js} +572 -23
- package/dist/cjs/z-aria-alert.cjs.entry.js +1 -1
- package/dist/cjs/z-avatar.cjs.entry.js +1 -1
- package/dist/cjs/z-button-sort.cjs.entry.js +1 -1
- package/dist/cjs/z-card.cjs.entry.js +1 -1
- package/dist/cjs/z-carousel.cjs.entry.js +1 -1
- package/dist/cjs/z-chip.cjs.entry.js +4 -4
- package/dist/cjs/z-combobox.cjs.entry.js +3 -3
- package/dist/cjs/z-contextual-menu.cjs.entry.js +1 -1
- package/dist/cjs/z-cover-hero.cjs.entry.js +1 -1
- package/dist/cjs/z-date-picker.cjs.entry.js +2 -2
- package/dist/cjs/z-dragdrop-area_2.cjs.entry.js +1 -1
- package/dist/cjs/z-file-upload.cjs.entry.js +4 -4
- package/dist/cjs/z-file.cjs.entry.js +2 -2
- package/dist/cjs/z-info-reveal.cjs.entry.js +1 -1
- package/dist/cjs/z-messages-pocket.cjs.entry.js +1 -1
- package/dist/cjs/z-myz-card-alert.cjs.entry.js +1 -1
- package/dist/cjs/z-myz-card-dictionary.cjs.entry.js +1 -1
- package/dist/cjs/z-myz-card-footer.cjs.entry.js +1 -1
- package/dist/cjs/z-myz-card-info.cjs.entry.js +3 -3
- package/dist/cjs/z-myz-card_4.cjs.entry.js +1 -1
- package/dist/cjs/z-myz-list-item.cjs.entry.js +3 -3
- package/dist/cjs/z-navigation-tab-link.cjs.entry.js +1 -1
- package/dist/cjs/z-navigation-tab.cjs.entry.js +1 -1
- package/dist/cjs/z-navigation-tabs.cjs.entry.js +1 -1
- package/dist/cjs/z-otp.cjs.entry.js +1 -1
- package/dist/cjs/z-pagination.cjs.entry.js +1 -1
- package/dist/cjs/z-pocket_3.cjs.entry.js +3 -3
- package/dist/cjs/z-range-picker.cjs.entry.js +2 -2
- package/dist/cjs/z-section-title.cjs.entry.js +1 -1
- package/dist/cjs/z-select.cjs.entry.js +3 -3
- package/dist/cjs/z-skip-to-content.cjs.entry.js +3 -3
- package/dist/cjs/z-slideshow.cjs.entry.js +3 -3
- package/dist/cjs/z-table-cell.cjs.entry.js +1 -1
- package/dist/cjs/z-table-header.cjs.entry.js +3 -3
- package/dist/cjs/z-table-row.cjs.entry.js +1 -1
- package/dist/cjs/z-table.cjs.entry.js +2 -2
- package/dist/cjs/z-toast-notification-list.cjs.entry.js +1 -1
- package/dist/cjs/z-toast-notification.cjs.entry.js +2 -2
- package/dist/cjs/z-toggle-switch.cjs.entry.js +3 -3
- package/dist/cjs/z-tooltip.cjs.entry.js +1 -1
- package/dist/collection/beans/index.js +11 -0
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/buttons/z-chip/index.js +1 -1
- package/dist/collection/components/file-upload/z-file-upload/index.js +1 -1
- package/dist/collection/components/z-breadcrumb/index.js +421 -0
- package/dist/collection/components/z-breadcrumb/styles.css +139 -0
- package/dist/collection/constants/breakpoints.js +3 -2
- package/dist/collection/utils/utils.js +4 -2
- package/dist/esm/breakpoints-9b81eb1b.js +5 -0
- package/dist/esm/{index-f3202f58.js → index-7e4df1be.js} +12 -1
- package/dist/esm/index-a2ca4b97.js +2 -6
- package/dist/esm/index.js +3 -3
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{utils-930405dd.js → utils-af924ea4.js} +1 -1
- package/dist/esm/{utils-0cfc97ad.js → utils-b7bdd1bf.js} +6 -4
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/z-anchor-navigation.entry.js +1 -1
- package/dist/esm/{z-app-header_11.entry.js → z-app-header_13.entry.js} +571 -24
- package/dist/esm/z-aria-alert.entry.js +1 -1
- package/dist/esm/z-avatar.entry.js +1 -1
- package/dist/esm/z-button-sort.entry.js +1 -1
- package/dist/esm/z-card.entry.js +1 -1
- package/dist/esm/z-carousel.entry.js +1 -1
- package/dist/esm/z-chip.entry.js +4 -4
- package/dist/esm/z-combobox.entry.js +3 -3
- package/dist/esm/z-contextual-menu.entry.js +1 -1
- package/dist/esm/z-cover-hero.entry.js +1 -1
- package/dist/esm/z-date-picker.entry.js +2 -2
- package/dist/esm/z-dragdrop-area_2.entry.js +1 -1
- package/dist/esm/z-file-upload.entry.js +4 -4
- package/dist/esm/z-file.entry.js +2 -2
- package/dist/esm/z-info-reveal.entry.js +1 -1
- package/dist/esm/z-messages-pocket.entry.js +1 -1
- package/dist/esm/z-myz-card-alert.entry.js +1 -1
- package/dist/esm/z-myz-card-dictionary.entry.js +1 -1
- package/dist/esm/z-myz-card-footer.entry.js +1 -1
- package/dist/esm/z-myz-card-info.entry.js +3 -3
- package/dist/esm/z-myz-card_4.entry.js +1 -1
- package/dist/esm/z-myz-list-item.entry.js +3 -3
- package/dist/esm/z-navigation-tab-link.entry.js +1 -1
- package/dist/esm/z-navigation-tab.entry.js +1 -1
- package/dist/esm/z-navigation-tabs.entry.js +1 -1
- package/dist/esm/z-otp.entry.js +1 -1
- package/dist/esm/z-pagination.entry.js +1 -1
- package/dist/esm/z-pocket_3.entry.js +3 -3
- package/dist/esm/z-range-picker.entry.js +2 -2
- package/dist/esm/z-section-title.entry.js +1 -1
- package/dist/esm/z-select.entry.js +3 -3
- package/dist/esm/z-skip-to-content.entry.js +3 -3
- package/dist/esm/z-slideshow.entry.js +3 -3
- package/dist/esm/z-table-cell.entry.js +1 -1
- package/dist/esm/z-table-header.entry.js +3 -3
- package/dist/esm/z-table-row.entry.js +1 -1
- package/dist/esm/z-table.entry.js +2 -2
- package/dist/esm/z-toast-notification-list.entry.js +1 -1
- package/dist/esm/z-toast-notification.entry.js +2 -2
- package/dist/esm/z-toggle-switch.entry.js +3 -3
- package/dist/esm/z-tooltip.entry.js +1 -1
- package/dist/types/beans/index.d.ts +15 -1
- package/dist/types/components/z-breadcrumb/index.d.ts +58 -0
- package/dist/types/components.d.ts +78 -1
- package/dist/types/constants/breakpoints.d.ts +3 -2
- package/dist/web-components-library/index.esm.js +1 -1
- package/dist/web-components-library/p-0235869e.entry.js +1 -0
- package/dist/web-components-library/p-0397366d.js +1 -0
- package/dist/web-components-library/{p-39c52a0d.entry.js → p-0418f9fb.entry.js} +1 -1
- package/dist/web-components-library/{p-b85be817.entry.js → p-079357ba.entry.js} +1 -1
- package/dist/web-components-library/{p-c736b92c.entry.js → p-0b822ad0.entry.js} +1 -1
- package/{www/build/p-cf53ce51.entry.js → dist/web-components-library/p-0c0735e5.entry.js} +1 -1
- package/dist/web-components-library/{p-5449fd41.entry.js → p-10f2be79.entry.js} +1 -1
- package/dist/web-components-library/p-14ab82cd.entry.js +1 -0
- package/dist/web-components-library/{p-6736e894.entry.js → p-14db3f16.entry.js} +1 -1
- package/dist/web-components-library/p-1cc1a418.js +1 -0
- package/dist/web-components-library/{p-93191e1d.entry.js → p-1e7ef8ca.entry.js} +1 -1
- package/dist/web-components-library/{p-74c27fc5.entry.js → p-227667b6.entry.js} +1 -1
- package/dist/web-components-library/{p-daf06f6f.entry.js → p-27100ea1.entry.js} +1 -1
- package/dist/web-components-library/{p-0c07b4f9.entry.js → p-2f547970.entry.js} +1 -1
- package/dist/web-components-library/{p-515b46d9.entry.js → p-4610db36.entry.js} +1 -1
- package/dist/web-components-library/{p-2c871e12.entry.js → p-485bff7b.entry.js} +1 -1
- package/dist/web-components-library/{p-a93e5cad.entry.js → p-4b9882b3.entry.js} +1 -1
- package/dist/web-components-library/p-515c2acf.entry.js +1 -0
- package/dist/web-components-library/p-685ae50d.entry.js +1 -0
- package/dist/web-components-library/{p-4c85652a.entry.js → p-6be6a2f4.entry.js} +1 -1
- package/{www/build/p-82291408.entry.js → dist/web-components-library/p-7ac431a5.entry.js} +1 -1
- package/{www/build/p-c64c5cbb.entry.js → dist/web-components-library/p-8f7680ef.entry.js} +1 -1
- package/dist/web-components-library/{p-562eb005.entry.js → p-910ca14c.entry.js} +1 -1
- package/dist/web-components-library/{p-adce9752.entry.js → p-9fee86aa.entry.js} +1 -1
- package/dist/web-components-library/{p-eb293bba.entry.js → p-a19a70a0.entry.js} +1 -1
- package/{www/build/p-9566edeb.entry.js → dist/web-components-library/p-a250409a.entry.js} +1 -1
- package/dist/web-components-library/p-a4b91a8f.entry.js +1 -0
- package/dist/web-components-library/{p-c085be1d.entry.js → p-ac5dda12.entry.js} +1 -1
- package/dist/web-components-library/{p-84116d2d.entry.js → p-af5103a0.entry.js} +1 -1
- package/dist/web-components-library/p-b497e33e.js +1 -0
- package/{www/build/p-ffc56e80.entry.js → dist/web-components-library/p-bda48953.entry.js} +1 -1
- package/dist/web-components-library/{p-7d8711d1.entry.js → p-c241bab0.entry.js} +1 -1
- package/dist/web-components-library/{p-8d4b2131.entry.js → p-c47d529f.entry.js} +1 -1
- package/dist/web-components-library/{p-1505703f.entry.js → p-c8b36560.entry.js} +1 -1
- package/dist/web-components-library/p-c8bdfb84.entry.js +1 -0
- package/dist/web-components-library/{p-33251591.entry.js → p-cd456854.entry.js} +1 -1
- package/dist/web-components-library/{p-66c4eda8.entry.js → p-cfc9cf52.entry.js} +1 -1
- package/dist/web-components-library/{p-5d651052.entry.js → p-d011d1b5.entry.js} +1 -1
- package/{www/build/p-8539c6f2.entry.js → dist/web-components-library/p-d966a1b9.entry.js} +1 -1
- package/dist/web-components-library/{p-9c3f4437.entry.js → p-d98d3cf1.entry.js} +1 -1
- package/dist/web-components-library/{p-3bd60dc8.entry.js → p-e606b019.entry.js} +1 -1
- package/dist/web-components-library/{p-32c36f6c.entry.js → p-ec5242da.entry.js} +1 -1
- package/dist/web-components-library/{p-e9bf5f75.js → p-ee918c17.js} +1 -1
- package/dist/web-components-library/{p-a4e68d80.entry.js → p-f5a247b9.entry.js} +1 -1
- package/{www/build/p-642d6be4.entry.js → dist/web-components-library/p-fd8eae32.entry.js} +1 -1
- package/dist/web-components-library/{p-c75451cc.entry.js → p-ff838f90.entry.js} +1 -1
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/react/components.d.ts +1 -0
- package/react/components.js +3 -2
- package/react/components.js.map +1 -1
- package/src-react/index.ts +1 -0
- package/www/build/index.esm.js +1 -1
- package/www/build/p-0235869e.entry.js +1 -0
- package/www/build/p-0397366d.js +1 -0
- package/www/build/{p-39c52a0d.entry.js → p-0418f9fb.entry.js} +1 -1
- package/www/build/{p-b85be817.entry.js → p-079357ba.entry.js} +1 -1
- package/www/build/{p-c736b92c.entry.js → p-0b822ad0.entry.js} +1 -1
- package/{dist/web-components-library/p-cf53ce51.entry.js → www/build/p-0c0735e5.entry.js} +1 -1
- package/www/build/{p-5449fd41.entry.js → p-10f2be79.entry.js} +1 -1
- package/www/build/p-14ab82cd.entry.js +1 -0
- package/www/build/{p-6736e894.entry.js → p-14db3f16.entry.js} +1 -1
- package/www/build/p-1cc1a418.js +1 -0
- package/www/build/{p-93191e1d.entry.js → p-1e7ef8ca.entry.js} +1 -1
- package/www/build/{p-74c27fc5.entry.js → p-227667b6.entry.js} +1 -1
- package/www/build/{p-daf06f6f.entry.js → p-27100ea1.entry.js} +1 -1
- package/www/build/{p-0c07b4f9.entry.js → p-2f547970.entry.js} +1 -1
- package/www/build/{p-515b46d9.entry.js → p-4610db36.entry.js} +1 -1
- package/www/build/{p-2c871e12.entry.js → p-485bff7b.entry.js} +1 -1
- package/www/build/{p-a93e5cad.entry.js → p-4b9882b3.entry.js} +1 -1
- package/www/build/p-515c2acf.entry.js +1 -0
- package/www/build/p-685ae50d.entry.js +1 -0
- package/www/build/{p-4c85652a.entry.js → p-6be6a2f4.entry.js} +1 -1
- package/{dist/web-components-library/p-82291408.entry.js → www/build/p-7ac431a5.entry.js} +1 -1
- package/{dist/web-components-library/p-c64c5cbb.entry.js → www/build/p-8f7680ef.entry.js} +1 -1
- package/www/build/{p-562eb005.entry.js → p-910ca14c.entry.js} +1 -1
- package/www/build/{p-adce9752.entry.js → p-9fee86aa.entry.js} +1 -1
- package/www/build/{p-eb293bba.entry.js → p-a19a70a0.entry.js} +1 -1
- package/{dist/web-components-library/p-9566edeb.entry.js → www/build/p-a250409a.entry.js} +1 -1
- package/www/build/p-a4b91a8f.entry.js +1 -0
- package/www/build/{p-c085be1d.entry.js → p-ac5dda12.entry.js} +1 -1
- package/www/build/{p-84116d2d.entry.js → p-af5103a0.entry.js} +1 -1
- package/www/build/p-b497e33e.js +1 -0
- package/{dist/web-components-library/p-ffc56e80.entry.js → www/build/p-bda48953.entry.js} +1 -1
- package/www/build/{p-7d8711d1.entry.js → p-c241bab0.entry.js} +1 -1
- package/www/build/{p-8d4b2131.entry.js → p-c47d529f.entry.js} +1 -1
- package/www/build/{p-1505703f.entry.js → p-c8b36560.entry.js} +1 -1
- package/www/build/p-c8bdfb84.entry.js +1 -0
- package/www/build/{p-33251591.entry.js → p-cd456854.entry.js} +1 -1
- package/www/build/{p-66c4eda8.entry.js → p-cfc9cf52.entry.js} +1 -1
- package/www/build/{p-5d651052.entry.js → p-d011d1b5.entry.js} +1 -1
- package/{dist/web-components-library/p-8539c6f2.entry.js → www/build/p-d966a1b9.entry.js} +1 -1
- package/www/build/{p-9c3f4437.entry.js → p-d98d3cf1.entry.js} +1 -1
- package/www/build/p-e35c7022.js +1 -0
- package/www/build/{p-3bd60dc8.entry.js → p-e606b019.entry.js} +1 -1
- package/www/build/{p-32c36f6c.entry.js → p-ec5242da.entry.js} +1 -1
- package/www/build/{p-e9bf5f75.js → p-ee918c17.js} +1 -1
- package/www/build/{p-a4e68d80.entry.js → p-f5a247b9.entry.js} +1 -1
- package/{dist/web-components-library/p-642d6be4.entry.js → www/build/p-fd8eae32.entry.js} +1 -1
- package/www/build/{p-c75451cc.entry.js → p-ff838f90.entry.js} +1 -1
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +127 -1
- package/dist/cjs/z-popover.cjs.entry.js +0 -328
- package/dist/esm/breakpoints-c386984e.js +0 -4
- package/dist/esm/z-popover.entry.js +0 -324
- package/dist/web-components-library/p-06de959d.entry.js +0 -1
- package/dist/web-components-library/p-1b4d5a24.entry.js +0 -1
- package/dist/web-components-library/p-6816cba3.entry.js +0 -1
- package/dist/web-components-library/p-6b454593.js +0 -1
- package/dist/web-components-library/p-7a276150.entry.js +0 -1
- package/dist/web-components-library/p-7c94ae08.entry.js +0 -1
- package/dist/web-components-library/p-98eac308.entry.js +0 -1
- package/dist/web-components-library/p-b1068026.js +0 -1
- package/dist/web-components-library/p-d69e14fb.js +0 -1
- package/dist/web-components-library/p-dcea357f.entry.js +0 -1
- package/www/build/p-06de959d.entry.js +0 -1
- package/www/build/p-1b4d5a24.entry.js +0 -1
- package/www/build/p-6816cba3.entry.js +0 -1
- package/www/build/p-6b454593.js +0 -1
- package/www/build/p-7a276150.entry.js +0 -1
- package/www/build/p-7c94ae08.entry.js +0 -1
- package/www/build/p-98eac308.entry.js +0 -1
- package/www/build/p-b1068026.js +0 -1
- package/www/build/p-d69e14fb.js +0 -1
- package/www/build/p-dcea357f.entry.js +0 -1
- package/www/build/p-f8cba0b0.js +0 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
|
|
2
|
-
import { e as ControlSize, B as ButtonVariant, O as OffCanvasVariant, w as TransitionDirection,
|
|
2
|
+
import { e as ControlSize, B as ButtonVariant, O as OffCanvasVariant, w as TransitionDirection, W as BreadcrumbPathStyle, X as BreadcrumbHomepageVariant, q as Device, P as PopoverPosition, g as KeyboardCode, m as ListDividerType, i as ListSize, c as ButtonType, D as DividerSize, h as DividerOrientation, l as LabelPosition, I as InputType, n as ListType, k as ExpandableListButtonAlign, E as ExpandableListStyle } from './index-7e4df1be.js';
|
|
3
|
+
import { g as getDevice, h as handleKeyboardSubmit, r as randomId, b as boolean, a as handleEnterKeydSubmit } from './utils-b7bdd1bf.js';
|
|
3
4
|
import { I as ICONS } from './icons-6cd265c6.js';
|
|
4
|
-
import
|
|
5
|
-
import './breakpoints-c386984e.js';
|
|
5
|
+
import './breakpoints-9b81eb1b.js';
|
|
6
6
|
|
|
7
|
-
const stylesCss$
|
|
7
|
+
const stylesCss$c = ":host{--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-content-max-width:100%;--app-header-height:auto;--app-header-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-surface01);--app-header-stucked-bg:var(--color-surface01);--app-header-text-color:var(--color-text01);--app-header-title-font-size:var(--app-header-typography-3-size);--app-header-title-lineheight:var(--app-header-typography-3-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-3-tracking);--app-header-stucked-text-color:var(--color-text01);position:relative;display:block;height:var(--app-header-height);color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:var(--grid-margin);margin:0 auto;background:var(--app-header-bg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5)}.hero-container+.heading-panel{background:transparent}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-title{display:flex;max-width:100%;flex-direction:row;align-items:flex-start;column-gap:calc(var(--space-unit) * 2)}::slotted([slot=\"title\"]),.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){margin:0;font-family:\"IBM Plex Serif\", serif;font-weight:var(--font-bd)}::slotted([slot=\"title\"]){font-size:var(--app-header-title-font-size);letter-spacing:var(--app-header-title-letter-spacing);line-height:var(--app-header-title-lineheight)}.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){font-size:var(--app-header-typography-3-size);letter-spacing:var(--app-header-typography-3-tracking);line-height:var(--app-header-typography-3-lineheight)}:host(:not([menu-length=\"0\"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2))}::slotted([slot=\"subtitle\"]){margin:0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;font-weight:500;line-height:26px}.menu-container{display:flex;width:100%;flex:1 auto;flex-flow:row wrap}.menu-container ::slotted([open]){position:relative;z-index:3}z-searchbar{z-index:0;display:flex;width:auto;min-width:calc(var(--space-unit) * 32);flex:1 auto;align-items:center;margin-left:auto}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto;column-gap:calc(var(--space-unit) * 2)}.heading-stuck .heading-title>*,.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heading-stuck-content z-button{margin-left:auto}.drawer-trigger{padding:0;border:0;margin:0;appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentcolor}.heading-container :is(.drawer-trigger,z-button.search-page-button){display:flex;height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));align-items:center}.heading-container z-button.search-page-button{margin-left:auto}.drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column;row-gap:calc(var(--space-unit) * 2.5)}.drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-size:inherit;outline:none}.drawer-close:focus-visible{box-shadow:var(--shadow-focus-primary)}.hero-container{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu){--z-menu-label-color:var(--color-white)}:host([overlay]) .hero-container::after{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:var(--color-black);content:\"\";opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;-webkit-user-drag:none}@media (min-width: 768px){:host{--app-header-title-font-size:var(--app-header-typography-6-size);--app-header-title-lineheight:var(--app-header-typography-6-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-6-tracking)}.heading-panel{flex-flow:row wrap;align-items:center;padding-bottom:calc(var(--space-unit) * 2)}.heading-container{margin-right:auto}:host(:is([flow=\"offcanvas\"],[menu-length=\"0\"])) :is(.heading-container,.menu-container){width:auto}:host(:not([flow=\"offcanvas\"])) .heading-subtitle{padding-left:0}.menu-container{flex:initial;align-items:center}:host([menu-length=\"0\"]) .menu-container:not(:empty){height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight))}:host(:not([flow=\"offcanvas\"])) .menu-container{gap:var(--space-unit) calc(var(--space-unit) * 5)}:host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger{display:none}}@media (min-width: 1152px){:host{--app-header-title-font-size:var(--app-header-typography-7-size);--app-header-title-lineheight:var(--app-header-typography-7-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-7-tracking)}.heading-panel{justify-content:flex-start;padding-bottom:calc(var(--space-unit) * 3)}.heading-container,.menu-container{width:auto}:host([flow=\"stack\"]) .heading-panel{flex-flow:column;align-items:flex-start}:host([flow=\"stack\"]) .menu-container{width:100%}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-panel{row-gap:calc(var(--space-unit) * 3)}z-searchbar{min-width:calc(var(--space-unit) * 45);flex:initial}}@media (min-width: 1366px){:host{--app-header-title-font-size:var(--app-header-typography-9-size);--app-header-title-lineheight:var(--app-header-typography-9-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-9-tracking)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
|
|
8
8
|
|
|
9
9
|
const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
|
|
10
10
|
const ZAppHeader = class {
|
|
@@ -177,9 +177,236 @@ const ZAppHeader = class {
|
|
|
177
177
|
"stuck": ["onStuckMode"]
|
|
178
178
|
}; }
|
|
179
179
|
};
|
|
180
|
-
ZAppHeader.style = stylesCss$
|
|
180
|
+
ZAppHeader.style = stylesCss$c;
|
|
181
181
|
|
|
182
|
-
const stylesCss$
|
|
182
|
+
const stylesCss$b = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;height:30px;align-items:center;padding-left:calc(var(--space-unit) / 2);overflow-x:hidden}li{display:flex;align-items:baseline}:host a:focus,:host button:focus{box-shadow:var(--shadow-focus-primary);outline:0}:host a{color:var(--color-link-primary);font-size:var(--font-size-2);text-decoration:none;white-space:nowrap}:host a.homepage-icon{display:list-item}:host a.homepage-text{display:initial}:host a.missing-path{color:var(--color-text01)}:host a.text-ellipsis{display:-webkit-box !important;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:normal}:host ol{display:flex;padding:0;margin:0;list-style-type:none}:host ol>li:not(:last-child){margin-right:var(--space-unit)}nav.underlined>ol>li a:not(.missing-path),nav.underlined>ol>li button{text-decoration:underline}nav.semibold>ol>li a:not(.missing-path),nav.semibold>ol>li button{font-weight:var(--font-sb)}:host z-icon{margin-right:var(--space-unit);--z-icon-width:12px;--z-icon-height:12px}:host button.dots{display:inline-block;color:var(--color-link-primary);cursor:pointer}:host .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}:host .popover-content a{font-weight:var(--font-rg);text-decoration:none}:host .hidden-paths-popover{--z-popover-theme--surface:var(--color-surface02);--z-popover-padding:0}:host .full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}:host .tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){:host ol>li+li::before{display:inline-block;width:10px;height:10px;flex:1;color:var(--color-disabled03);content:\"\\203A\"}:host a.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover)}}";
|
|
183
|
+
|
|
184
|
+
const ZBreadcrumb = class {
|
|
185
|
+
constructor(hostRef) {
|
|
186
|
+
registerInstance(this, hostRef);
|
|
187
|
+
this.clickOnNode = createEvent(this, "clickOnNode", 7);
|
|
188
|
+
/** [optional] Sets the path style */
|
|
189
|
+
this.pathStyle = BreadcrumbPathStyle.UNDERLINED;
|
|
190
|
+
/** [optional] Variant of first node */
|
|
191
|
+
this.homepageVariant = BreadcrumbHomepageVariant.ICON;
|
|
192
|
+
/** [optional] Sets max number of element to show */
|
|
193
|
+
this.maxNodesToShow = 5;
|
|
194
|
+
/** [optional] Controls the behaviour on <a> tag click/enter */
|
|
195
|
+
this.preventFollowUrl = false;
|
|
196
|
+
/** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */
|
|
197
|
+
this.overflowMenuItemRows = 0;
|
|
198
|
+
/** [optional] Sets the maximun number of chars per single node */
|
|
199
|
+
this.truncateChar = 30;
|
|
200
|
+
/** Detect whether the length of the nodes shown exceeds the container length */
|
|
201
|
+
this.hasOverflow = false;
|
|
202
|
+
this.popoverEllipsisOpen = false;
|
|
203
|
+
this.collapsedElements = [];
|
|
204
|
+
this.currentIndex = 0;
|
|
205
|
+
this.truncatePosition = null;
|
|
206
|
+
}
|
|
207
|
+
handleResize() {
|
|
208
|
+
this.viewPortWidth = getDevice();
|
|
209
|
+
if (this.viewPortWidth !== Device.MOBILE &&
|
|
210
|
+
this.wrapElement &&
|
|
211
|
+
this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {
|
|
212
|
+
this.hasOverflow = true;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
// eslint-disable-next-line lines-between-class-members
|
|
216
|
+
handlePropChange() {
|
|
217
|
+
this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
|
|
218
|
+
}
|
|
219
|
+
handleResizeUp(newValue, oldValue) {
|
|
220
|
+
if (newValue === Device.MOBILE ||
|
|
221
|
+
(oldValue === Device.MOBILE && newValue === Device.TABLET) ||
|
|
222
|
+
(oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||
|
|
223
|
+
(oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||
|
|
224
|
+
(oldValue === Device.TABLET && newValue === Device.DESKTOP) ||
|
|
225
|
+
(oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||
|
|
226
|
+
(oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)) {
|
|
227
|
+
this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
componentWillLoad() {
|
|
231
|
+
this.viewPortWidth = getDevice();
|
|
232
|
+
this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
|
|
233
|
+
}
|
|
234
|
+
componentWillRender() {
|
|
235
|
+
if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {
|
|
236
|
+
this.checkEllipsisOrOverflowMenu();
|
|
237
|
+
this.hasOverflow = false;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
componentDidRender() {
|
|
241
|
+
if (this.collapsedElementsRef) {
|
|
242
|
+
this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"));
|
|
243
|
+
}
|
|
244
|
+
if (this.viewPortWidth !== Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {
|
|
245
|
+
this.hasOverflow = true;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
initializeBreadcrumb(isMobile) {
|
|
249
|
+
if (isMobile) {
|
|
250
|
+
this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);
|
|
251
|
+
}
|
|
252
|
+
else {
|
|
253
|
+
this.pathsList = this.getPathsItemsList();
|
|
254
|
+
}
|
|
255
|
+
this.totalLenght = this.pathsList.length;
|
|
256
|
+
this.homepageNode = this.pathsList.shift();
|
|
257
|
+
this.pathListCopy = JSON.parse(JSON.stringify(this.pathsList));
|
|
258
|
+
this.collapsedElements = [];
|
|
259
|
+
if (this.totalLenght > this.maxNodesToShow) {
|
|
260
|
+
this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
checkEllipsisOrOverflowMenu() {
|
|
264
|
+
if (this.pathListCopy.length > 0) {
|
|
265
|
+
for (let i = 0; i < this.pathsList.length; i++) {
|
|
266
|
+
if (this.pathsList[i].text.length > this.truncateChar) {
|
|
267
|
+
if (this.truncatePosition !== null) {
|
|
268
|
+
if (this.truncatePosition > 0) {
|
|
269
|
+
const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition);
|
|
270
|
+
arrayToPush.forEach((item) => {
|
|
271
|
+
this.collapsedElements.push(item);
|
|
272
|
+
});
|
|
273
|
+
this.pathsList.splice(0, this.truncatePosition);
|
|
274
|
+
this.truncatePosition = 0;
|
|
275
|
+
return;
|
|
276
|
+
}
|
|
277
|
+
if (this.truncatePosition === 0) {
|
|
278
|
+
const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition + 1);
|
|
279
|
+
this.collapsedElements.push(...arrayToPush);
|
|
280
|
+
this.pathsList.splice(0, this.truncatePosition + 1);
|
|
281
|
+
this.truncatePosition = null;
|
|
282
|
+
return;
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
if (i !== this.pathsList.length - 1) {
|
|
286
|
+
const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);
|
|
287
|
+
this.currentEllipsisText = this.pathsList[i].text;
|
|
288
|
+
this.pathsList[i].text = truncatedString;
|
|
289
|
+
this.pathsList[i].hasTooltip = true;
|
|
290
|
+
this.truncatePosition = i;
|
|
291
|
+
return;
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
truncateWithEllipsis(str, length) {
|
|
298
|
+
const ending = "…";
|
|
299
|
+
if (str.length > length) {
|
|
300
|
+
return str.substring(0, length - 1) + ending;
|
|
301
|
+
}
|
|
302
|
+
return str;
|
|
303
|
+
}
|
|
304
|
+
getPathsItemsList() {
|
|
305
|
+
if (!this.paths) {
|
|
306
|
+
return Array.from(this.hostElement.children).map((item) => {
|
|
307
|
+
return {
|
|
308
|
+
text: item.textContent,
|
|
309
|
+
path: item.href,
|
|
310
|
+
hasTooltip: false,
|
|
311
|
+
};
|
|
312
|
+
});
|
|
313
|
+
}
|
|
314
|
+
const ret = typeof this.paths === "string" ? JSON.parse(this.paths) : this.paths;
|
|
315
|
+
return ret.map((item) => {
|
|
316
|
+
return Object.assign(Object.assign({}, item), { hasTooltip: false });
|
|
317
|
+
});
|
|
318
|
+
}
|
|
319
|
+
renderMobileBreadcrumb() {
|
|
320
|
+
const lastPath = this.pathsList[this.pathsList.length - 1];
|
|
321
|
+
return (h("nav", { "aria-label": "Breadcrumb", class: {
|
|
322
|
+
underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
|
|
323
|
+
semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
|
|
324
|
+
} }, h("ol", null, this.renderNode(lastPath, true))));
|
|
325
|
+
}
|
|
326
|
+
renderHomepageNode(item) {
|
|
327
|
+
return (h("li", null, h("a", { class: {
|
|
328
|
+
"homepage-icon": this.homepageVariant === BreadcrumbHomepageVariant.ICON,
|
|
329
|
+
"homepage-text": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,
|
|
330
|
+
}, href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item) }, this.homepageVariant === BreadcrumbHomepageVariant.ICON ? (h("z-icon", { name: "home", fill: "color-link-primary", height: 16, width: 16 })) : ("Home"))));
|
|
331
|
+
}
|
|
332
|
+
renderNode(item, mobile) {
|
|
333
|
+
return (h("li", null, item.hasTooltip && (h("z-popover", { class: "full-path-tooltip", "bind-to": this.triggerEllipsis, open: this.popoverEllipsisOpen, position: PopoverPosition.BOTTOM, closable: false, showArrow: true }, h("span", { class: "tooltip-content" }, this.currentEllipsisText))), h("a", { class: {
|
|
334
|
+
"missing-path": !item.path,
|
|
335
|
+
"text-ellipsis": mobile,
|
|
336
|
+
}, ref: (val) => (this.triggerEllipsis = val), "aria-current": item.path ? undefined : "page", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onMouseOver: () => {
|
|
337
|
+
if (item.hasTooltip) {
|
|
338
|
+
this.popoverEllipsisOpen = true;
|
|
339
|
+
}
|
|
340
|
+
}, onMouseLeave: () => {
|
|
341
|
+
if (item.hasTooltip) {
|
|
342
|
+
this.popoverEllipsisOpen = false;
|
|
343
|
+
}
|
|
344
|
+
}, innerHTML: mobile ? `<z-icon fill="color-link-primary" name="chevron-left"></z-icon> ${item.text}` : item.text })));
|
|
345
|
+
}
|
|
346
|
+
renderBreadcrumb() {
|
|
347
|
+
return (h("nav", { ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
|
|
348
|
+
underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
|
|
349
|
+
semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
|
|
350
|
+
} }, h("ol", null, this.renderHomepageNode(this.homepageNode), this.collapsedElements.length ? this.renderOverflowMenu() : "", this.pathsList.map((item) => this.renderNode(item, false)))));
|
|
351
|
+
}
|
|
352
|
+
togglePopover() {
|
|
353
|
+
if (!this.collapsedElementsRef.open) {
|
|
354
|
+
this.collapsedElementsRef.open = true;
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
handlePreventFollowUrl(e, item) {
|
|
358
|
+
if (this.preventFollowUrl) {
|
|
359
|
+
e.preventDefault();
|
|
360
|
+
this.clickOnNode.emit(item.path);
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
handleOverflowMenuAccessibility(e) {
|
|
364
|
+
const anchorElementsLenght = this.anchorElements.length;
|
|
365
|
+
if (e.key === KeyboardCode.TAB) {
|
|
366
|
+
e.preventDefault();
|
|
367
|
+
return;
|
|
368
|
+
}
|
|
369
|
+
e.stopPropagation();
|
|
370
|
+
const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
|
|
371
|
+
if (arrows.includes(e.key)) {
|
|
372
|
+
e.preventDefault();
|
|
373
|
+
if (e.key === KeyboardCode.ARROW_DOWN) {
|
|
374
|
+
this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;
|
|
375
|
+
}
|
|
376
|
+
if (e.key === KeyboardCode.ARROW_UP) {
|
|
377
|
+
this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;
|
|
378
|
+
}
|
|
379
|
+
this.anchorElements[this.currentIndex].focus();
|
|
380
|
+
}
|
|
381
|
+
if (e.key === KeyboardCode.ESC) {
|
|
382
|
+
this.triggerButton.focus();
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
renderOverflowMenu() {
|
|
386
|
+
if (this.collapsedElements.length) {
|
|
387
|
+
return (h("li", null, h("z-popover", { class: "hidden-paths-popover", ref: (val) => (this.collapsedElementsRef = val), "bind-to": this.triggerButton, position: PopoverPosition.BOTTOM_RIGHT, closable: true, showArrow: true }, h("div", { class: "popover-content" }, h("z-list", null, h("z-list-group", { dividerType: ListDividerType.ELEMENT, size: ListSize.SMALL }, this.collapsedElements.map((item) => (h("z-list-element", { clickable: true }, h("a", { class: "text-ellipsis", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onKeyDown: (e) => this.handleOverflowMenuAccessibility(e) }, item.text)))))))), h("button", { "aria-label": "Mostra pi\u00F9 breadcrumb", "aria-haspopup": "true", ref: (el) => (this.triggerButton = el), class: "dots", onClick: () => {
|
|
388
|
+
this.togglePopover();
|
|
389
|
+
}, onKeyDown: (e) => {
|
|
390
|
+
handleKeyboardSubmit(e, this.togglePopover.bind(this));
|
|
391
|
+
setTimeout(() => {
|
|
392
|
+
this.anchorElements[0].focus();
|
|
393
|
+
}, 100);
|
|
394
|
+
} }, "...")));
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
render() {
|
|
398
|
+
return (h(Host, { style: { "--line-clamp": `${this.overflowMenuItemRows}` } }, this.viewPortWidth === Device.MOBILE ? this.renderMobileBreadcrumb() : this.renderBreadcrumb()));
|
|
399
|
+
}
|
|
400
|
+
get hostElement() { return getElement(this); }
|
|
401
|
+
static get watchers() { return {
|
|
402
|
+
"paths": ["handlePropChange"],
|
|
403
|
+
"maxNodesToShow": ["handlePropChange"],
|
|
404
|
+
"viewPortWidth": ["handleResizeUp"]
|
|
405
|
+
}; }
|
|
406
|
+
};
|
|
407
|
+
ZBreadcrumb.style = stylesCss$b;
|
|
408
|
+
|
|
409
|
+
const stylesCss$a = ".sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0}[disabled].sc-z-button-h:not([disabled=\"false\"]){pointer-events:none}.sc-z-button-h .z-button--container.sc-z-button{display:inline-flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button z-icon.sc-z-button{--z-icon-right-margin:var(--space-unit)}[size=\"big\"].sc-z-button-h .z-button--container.sc-z-button{min-width:44px;height:44px}[size=\"small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:36px;height:36px}[size=\"x-small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:32px;height:32px}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}[variant=\"primary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}[variant=\"secondary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-primary01)}@media (hover: hover){[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{border-color:var(--color-surface01);background-color:var(--color-surface01);color:var(--color-primary01)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-surface01);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-primary01)}[variant=\"tertiary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-disabled02)}";
|
|
183
410
|
|
|
184
411
|
const ZButton = class {
|
|
185
412
|
constructor(hostRef) {
|
|
@@ -212,9 +439,9 @@ const ZButton = class {
|
|
|
212
439
|
}
|
|
213
440
|
get hostElement() { return getElement(this); }
|
|
214
441
|
};
|
|
215
|
-
ZButton.style = stylesCss$
|
|
442
|
+
ZButton.style = stylesCss$a;
|
|
216
443
|
|
|
217
|
-
const stylesCss$
|
|
444
|
+
const stylesCss$9 = ".sc-z-divider-h{display:block;padding:0;margin:0}.divider-horizontal.sc-z-divider-h{width:100%}.divider-vertical.sc-z-divider-h{height:100%}.divider-small.divider-horizontal.sc-z-divider-h{height:var(--border-size-small)}.divider-medium.divider-horizontal.sc-z-divider-h{height:var(--border-size-medium)}.divider-large.divider-horizontal.sc-z-divider-h{height:var(--border-size-large)}.divider-small.divider-vertical.sc-z-divider-h{width:var(--border-size-small)}.divider-medium.divider-vertical.sc-z-divider-h{width:var(--border-size-medium)}.divider-large.divider-vertical.sc-z-divider-h{width:var(--border-size-large)}";
|
|
218
445
|
|
|
219
446
|
const ZDivider = class {
|
|
220
447
|
constructor(hostRef) {
|
|
@@ -230,9 +457,9 @@ const ZDivider = class {
|
|
|
230
457
|
return (h(Host, { class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
|
|
231
458
|
}
|
|
232
459
|
};
|
|
233
|
-
ZDivider.style = stylesCss$
|
|
460
|
+
ZDivider.style = stylesCss$9;
|
|
234
461
|
|
|
235
|
-
const stylesCss$
|
|
462
|
+
const stylesCss$8 = ":host{margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0);line-height:0;vertical-align:middle}:host svg:not([width]){width:var(--z-icon-width, 18px)}:host svg:not([height]){height:var(--z-icon-height, 18px)}";
|
|
236
463
|
|
|
237
464
|
const ZIcon = class {
|
|
238
465
|
constructor(hostRef) {
|
|
@@ -248,9 +475,9 @@ const ZIcon = class {
|
|
|
248
475
|
return (h(Host, { "aria-hidden": "true" }, h("svg", { viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(ICONS[this.name]))));
|
|
249
476
|
}
|
|
250
477
|
};
|
|
251
|
-
ZIcon.style = stylesCss$
|
|
478
|
+
ZIcon.style = stylesCss$8;
|
|
252
479
|
|
|
253
|
-
const stylesCss$6 = ".sc-z-input-h{display:inline-block;width:inherit}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}input.sc-z-input,textarea.sc-z-input,.textarea-wrapper.sc-z-input{box-sizing:border-box;border:var(--border-size-small) solid var(--color-surface04);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--color-text01);fill:var(--color-icon02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}[size=\"small\"].sc-z-input-h input.sc-z-input,[size=\"small\"].sc-z-input-h textarea.sc-z-input,[size=\"small\"].sc-z-input-h .textarea-wrapper.sc-z-input,[size=\"x-small\"].sc-z-input-h input.sc-z-input,[size=\"x-small\"].sc-z-input-h textarea.sc-z-input,[size=\"x-small\"].sc-z-input-h .textarea-wrapper.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.textarea-wrapper.sc-z-input:focus-within{box-shadow:var(--shadow-focus-primary)}input.sc-z-input:focus:focus-visible,textarea.sc-z-input:focus:focus-visible{color:var(--color-primary02)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--blue500)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{box-shadow:none}.filled.sc-z-input{border-color:var(--color-surface05)}.input-success.sc-z-input{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input.sc-z-input:hover,.textarea-wrapper.sc-z-input:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.readonly.sc-z-input{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) z-icon.sc-z-input{border-color:var(--color-disabled01);box-shadow:none;color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input::placeholder{color:var(--color-text05)}label.input-label.sc-z-input{display:block;padding-bottom:var(--space-unit);color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}[disabled].sc-z-input-h:not([disabled=\"false\"]) label.input-label.sc-z-input{color:var(--color-disabled02)}.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-icon02)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size=\"small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size=\"x-small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input{padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input+button.icon-button.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:hover,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:focus,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:active{background:var(--color-white) !important;background-clip:text !important;-webkit-transition-delay:99999s !important}.textarea-wrapper.sc-z-input{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;resize:none}.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-text01);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled02)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}";
|
|
480
|
+
const stylesCss$7 = ".sc-z-input-h{display:inline-block;width:inherit}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}input.sc-z-input,textarea.sc-z-input,.textarea-wrapper.sc-z-input{box-sizing:border-box;border:var(--border-size-small) solid var(--color-surface04);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--color-text01);fill:var(--color-icon02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}[size=\"small\"].sc-z-input-h input.sc-z-input,[size=\"small\"].sc-z-input-h textarea.sc-z-input,[size=\"small\"].sc-z-input-h .textarea-wrapper.sc-z-input,[size=\"x-small\"].sc-z-input-h input.sc-z-input,[size=\"x-small\"].sc-z-input-h textarea.sc-z-input,[size=\"x-small\"].sc-z-input-h .textarea-wrapper.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.textarea-wrapper.sc-z-input:focus-within{box-shadow:var(--shadow-focus-primary)}input.sc-z-input:focus:focus-visible,textarea.sc-z-input:focus:focus-visible{color:var(--color-primary02)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--blue500)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{box-shadow:none}.filled.sc-z-input{border-color:var(--color-surface05)}.input-success.sc-z-input{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input.sc-z-input:hover,.textarea-wrapper.sc-z-input:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.readonly.sc-z-input{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) z-icon.sc-z-input{border-color:var(--color-disabled01);box-shadow:none;color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input::placeholder{color:var(--color-text05)}label.input-label.sc-z-input{display:block;padding-bottom:var(--space-unit);color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}[disabled].sc-z-input-h:not([disabled=\"false\"]) label.input-label.sc-z-input{color:var(--color-disabled02)}.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-icon02)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size=\"small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size=\"x-small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input{padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input+button.icon-button.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:hover,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:focus,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:active{background:var(--color-white) !important;background-clip:text !important;-webkit-transition-delay:99999s !important}.textarea-wrapper.sc-z-input{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;resize:none}.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-text01);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled02)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}";
|
|
254
481
|
|
|
255
482
|
const ZInput = class {
|
|
256
483
|
constructor(hostRef) {
|
|
@@ -482,9 +709,9 @@ const ZInput = class {
|
|
|
482
709
|
}
|
|
483
710
|
get hostElement() { return getElement(this); }
|
|
484
711
|
};
|
|
485
|
-
ZInput.style = stylesCss$
|
|
712
|
+
ZInput.style = stylesCss$7;
|
|
486
713
|
|
|
487
|
-
const stylesCss$
|
|
714
|
+
const stylesCss$6 = ":host{display:flex;min-height:calc(var(--space-unit) * 2.5);align-items:start;margin-top:var(--space-unit);color:var(--color-text05);fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-2);letter-spacing:0.16px}:host(.small),:host(.x-small){margin-top:calc(var(--space-unit) * 0.5);font-size:var(--font-size-1)}:host([status=\"success\"]){color:var(--color-text-success)}:host([status=\"error\"]){color:var(--color-text-error)}:host([status=\"warning\"]){color:var(--color-warning02)}:host(:focus){outline:none}:host>z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);--z-icon-right-margin:var(--space-unit);margin-top:calc(var(--space-unit) * 0.25)}:host(.small)>z-icon,:host(.x-small)>z-icon{--z-icon-width:14px;--z-icon-height:14px;--z-icon-right-margin:calc(var(--space-unit) * 0.5)}";
|
|
488
715
|
|
|
489
716
|
const ZInputMessage = class {
|
|
490
717
|
constructor(hostRef) {
|
|
@@ -510,9 +737,9 @@ const ZInputMessage = class {
|
|
|
510
737
|
"status": ["onMessageChange"]
|
|
511
738
|
}; }
|
|
512
739
|
};
|
|
513
|
-
ZInputMessage.style = stylesCss$
|
|
740
|
+
ZInputMessage.style = stylesCss$6;
|
|
514
741
|
|
|
515
|
-
const stylesCss$
|
|
742
|
+
const stylesCss$5 = ":host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}";
|
|
516
743
|
|
|
517
744
|
const ZList = class {
|
|
518
745
|
constructor(hostRef) {
|
|
@@ -542,9 +769,9 @@ const ZList = class {
|
|
|
542
769
|
}
|
|
543
770
|
get host() { return getElement(this); }
|
|
544
771
|
};
|
|
545
|
-
ZList.style = stylesCss$
|
|
772
|
+
ZList.style = stylesCss$5;
|
|
546
773
|
|
|
547
|
-
const stylesCss$
|
|
774
|
+
const stylesCss$4 = ":host{outline:none}:host>.container,:host>.container-contextual-menu{--background-color-list-element:var(--bg-white);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02);display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size=\"small\"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size=\"medium\"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size=\"large\"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size=\"x-large\"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([expandable])>.container-contextual-menu,:host([clickable])>.container,:host([clickable])>.container-contextual-menu{cursor:pointer}:host([expandable]:hover)>.container,:host([expandable]:hover)>.container-contextual-menu,:host([clickable]:hover)>.container,:host([clickable]:hover)>.container-contextual-menu{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([expandable]:focus:focus-visible)>.container-contextual-menu,:host([clickable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container-contextual-menu{box-shadow:var(--shadow-focus-primary)}:host([clickable]:not([expandable]))>.container.clicked,:host([clickable]:not([expandable]))>.container-contextual-menu.clicked{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([expandable]:active)>.container-contextual-menu,:host([clickable]:active)>.container,:host([clickable]:active)>.container-contextual-menu{background-color:var(--background-active-color-list-element)}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container,:host>.container-contextual-menu>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded,:host>.container-contextual-menu>.z-list-element-inner-container.expanded{display:block}:host([clickable]:hover)>.container-contextual-menu{background-color:var(--color-surface03)}.container-contextual-menu:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-list-content-container{display:flex;align-items:center}";
|
|
548
775
|
|
|
549
776
|
const ZListElement = class {
|
|
550
777
|
/**
|
|
@@ -709,9 +936,9 @@ const ZListElement = class {
|
|
|
709
936
|
}
|
|
710
937
|
get host() { return getElement(this); }
|
|
711
938
|
};
|
|
712
|
-
ZListElement.style = stylesCss$
|
|
939
|
+
ZListElement.style = stylesCss$4;
|
|
713
940
|
|
|
714
|
-
const stylesCss$
|
|
941
|
+
const stylesCss$3 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.z-list-group-header-container{color:var(--gray700);font-size:var(--font-size-2);font-weight:var(--font-sb) !important;letter-spacing:0.16px;line-height:1.4}:host>.z-list-group-header-container.has-header{padding-top:var(--space-unit);padding-bottom:var(--space-unit)}:host>.z-list-group-header-container.has-header>z-divider{margin-top:var(--space-unit)}";
|
|
715
942
|
|
|
716
943
|
const ZListGroup = class {
|
|
717
944
|
constructor(hostRef) {
|
|
@@ -761,9 +988,9 @@ const ZListGroup = class {
|
|
|
761
988
|
}
|
|
762
989
|
get host() { return getElement(this); }
|
|
763
990
|
};
|
|
764
|
-
ZListGroup.style = stylesCss$
|
|
991
|
+
ZListGroup.style = stylesCss$3;
|
|
765
992
|
|
|
766
|
-
const stylesCss$
|
|
993
|
+
const stylesCss$2 = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;min-width:100%;height:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg);visibility:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01)}[variant=\"pushcontent\"].sc-z-offcanvas-h{display:none}[open].sc-z-offcanvas-h{display:flex;visibility:visible}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;display:flex;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"][transitiondirection=\"left\"].sc-z-offcanvas-h{justify-content:end}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{padding:0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (max-width: 768px){[open][transitiondirection=\"left\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]:not(.skip-animation){width:auto;animation:grow 0.4s ease-out}}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open][variant=\"overlay\"][transitiondirection=\"left\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{transform:translateX(-100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"left\"]>.canvas-container.sc-z-offcanvas{transform:translateX(100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"] .canvas-background.sc-z-offcanvas{transition:visibility 0.4s ease-out;visibility:hidden}";
|
|
767
994
|
|
|
768
995
|
const ZOffcanvas = class {
|
|
769
996
|
constructor(hostRef) {
|
|
@@ -805,7 +1032,327 @@ const ZOffcanvas = class {
|
|
|
805
1032
|
"open": ["onOpenChanged"]
|
|
806
1033
|
}; }
|
|
807
1034
|
};
|
|
808
|
-
ZOffcanvas.style = stylesCss$
|
|
1035
|
+
ZOffcanvas.style = stylesCss$2;
|
|
1036
|
+
|
|
1037
|
+
const stylesCss$1 = ":host{--z-popover-theme--surface:var(--color-surface01);--z-popover-theme--text:var(--color-text01);--z-popover-padding:0;--z-popover-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));position:relative;display:none;min-width:calc(var(--space-unit) * 8);min-height:calc(var(--space-unit) * 4);align-items:center;justify-content:center;padding:var(--z-popover-padding);background:var(--z-popover-theme--surface);border-radius:var(--border-radius-small);color:var(--z-popover-theme--text);fill:currentcolor;filter:var(--z-popover-shadow-filter);font-family:var(--font-family-sans);text-align:center}:host([open][current-position]),:host([open=\"true\"][current-position]){display:flex}:host([center][current-position=\"top\"]),:host([center][current-position=\"bottom\"]){transform:translateX(-50%)}:host([center][current-position=\"right\"]),:host([center][current-position=\"left\"]){transform:translateY(-50%)}:host([current-position^=\"top\"]){margin:0 0 var(--space-unit)}:host([current-position^=\"bottom\"]){margin:var(--space-unit) 0 0}:host([current-position^=\"left\"]){margin:0 var(--space-unit) 0 0}:host([current-position^=\"right\"]){margin:0 0 0 var(--space-unit)}:host([current-position])::before{--arrow-size:6px;--arrow-edge-offset:calc(100% - var(--space-unit) - (var(--arrow-size) / 2));--arrow-center-x-offset:calc(50% - (var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - (var(--arrow-size) / 2));position:absolute;display:block;width:var(--arrow-size);height:var(--arrow-size);background:var(--z-popover-theme--surface);content:\"\";transform:rotate(45deg)}:host([show-arrow=\"false\"])::before,:host(:not([show-arrow]))::before{display:none}:host([current-position^=\"top\"])::before{top:var(--arrow-center-y-offset)}:host([current-position^=\"bottom\"])::before{bottom:var(--arrow-center-y-offset)}:host([current-position=\"top\"])::before,:host([current-position=\"bottom\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before,:host([current-position=\"left\"])::before{bottom:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"top_right\"])::before,:host([current-position=\"bottom_right\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"top_left\"])::before,:host([current-position=\"bottom_left\"])::before{left:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"left_top\"])::before{top:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"right_bottom\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left_top\"])::before,:host([current-position=\"left_bottom\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"right_bottom\"])::before,:host([current-position=\"left_bottom\"])::before{bottom:var(--arrow-edge-offset)}:host([center][current-position=\"top\"])::before,:host([center][current-position=\"bottom\"])::before{right:auto;left:var(--arrow-center-x-offset)}:host([center][current-position=\"right\"])::before,:host([center][current-position=\"left\"])::before{top:var(--arrow-center-x-offset);bottom:auto}::slotted(*){overflow:auto;flex:1 auto}";
|
|
1038
|
+
|
|
1039
|
+
const DOCUMENT_ELEMENT = document.documentElement;
|
|
1040
|
+
function getParentElement(element) {
|
|
1041
|
+
if (element.parentNode.host) {
|
|
1042
|
+
return element.parentNode.host;
|
|
1043
|
+
}
|
|
1044
|
+
return element.parentNode;
|
|
1045
|
+
}
|
|
1046
|
+
/**
|
|
1047
|
+
* Find the closest scrollable parent of a node.
|
|
1048
|
+
*
|
|
1049
|
+
* @param {Element} element The node
|
|
1050
|
+
*/
|
|
1051
|
+
function findScrollableParent(element) {
|
|
1052
|
+
let parent = getParentElement(element);
|
|
1053
|
+
while (parent && parent !== DOCUMENT_ELEMENT) {
|
|
1054
|
+
const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);
|
|
1055
|
+
if (overflow === "hidden" || overflowY === "hidden" || overflowX === "hidden") {
|
|
1056
|
+
return parent;
|
|
1057
|
+
}
|
|
1058
|
+
if ((parent.scrollHeight > parent.clientHeight && overflow !== "visible" && overflowY !== "visible") ||
|
|
1059
|
+
(parent.scrollWidth > parent.clientWidth && overflow !== "visible" && overflowX !== "visible")) {
|
|
1060
|
+
return parent;
|
|
1061
|
+
}
|
|
1062
|
+
parent = getParentElement(parent);
|
|
1063
|
+
}
|
|
1064
|
+
return DOCUMENT_ELEMENT;
|
|
1065
|
+
}
|
|
1066
|
+
/**
|
|
1067
|
+
* Calculate computed offset.
|
|
1068
|
+
* It includes matrix transformations.
|
|
1069
|
+
* @param element The target element.
|
|
1070
|
+
* @param targetParentOffset The relative offset parent.
|
|
1071
|
+
* @return A client rect object.
|
|
1072
|
+
*/
|
|
1073
|
+
function computeOffset(element, targetParentOffset) {
|
|
1074
|
+
const rect = element.getBoundingClientRect();
|
|
1075
|
+
const width = rect.width;
|
|
1076
|
+
const height = rect.height;
|
|
1077
|
+
let top = 0;
|
|
1078
|
+
let left = 0;
|
|
1079
|
+
let offsetParent = element;
|
|
1080
|
+
while (offsetParent && offsetParent != targetParentOffset) {
|
|
1081
|
+
left += offsetParent.offsetLeft;
|
|
1082
|
+
// document.body sometimes has offsetTop == 0 but still has an
|
|
1083
|
+
// offset because of children margins!
|
|
1084
|
+
if (offsetParent === document.body) {
|
|
1085
|
+
top += offsetParent.getBoundingClientRect().top + window.scrollY;
|
|
1086
|
+
}
|
|
1087
|
+
else {
|
|
1088
|
+
top += offsetParent.offsetTop;
|
|
1089
|
+
}
|
|
1090
|
+
if (window.DOMMatrix) {
|
|
1091
|
+
const style = window.getComputedStyle(offsetParent);
|
|
1092
|
+
const transform = style.transform || style.webkitTransform;
|
|
1093
|
+
const domMatrix = new DOMMatrix(transform);
|
|
1094
|
+
if (domMatrix) {
|
|
1095
|
+
left += domMatrix.m41;
|
|
1096
|
+
if (offsetParent !== document.body) {
|
|
1097
|
+
top += domMatrix.m42;
|
|
1098
|
+
}
|
|
1099
|
+
}
|
|
1100
|
+
}
|
|
1101
|
+
if (!offsetParent.offsetParent) {
|
|
1102
|
+
break;
|
|
1103
|
+
}
|
|
1104
|
+
offsetParent = offsetParent.offsetParent;
|
|
1105
|
+
}
|
|
1106
|
+
let parentWidth;
|
|
1107
|
+
let parentHeight;
|
|
1108
|
+
if (offsetParent === document.body) {
|
|
1109
|
+
parentWidth = window.innerWidth;
|
|
1110
|
+
parentHeight = window.innerHeight;
|
|
1111
|
+
}
|
|
1112
|
+
else {
|
|
1113
|
+
parentWidth = offsetParent.offsetWidth;
|
|
1114
|
+
parentHeight = offsetParent.offsetHeight;
|
|
1115
|
+
}
|
|
1116
|
+
const right = parentWidth - left - rect.width;
|
|
1117
|
+
const bottom = parentHeight - top - rect.height;
|
|
1118
|
+
return { top, right, bottom, left, width, height };
|
|
1119
|
+
}
|
|
1120
|
+
const ZPopover = class {
|
|
1121
|
+
constructor(hostRef) {
|
|
1122
|
+
registerInstance(this, hostRef);
|
|
1123
|
+
this.positionChange = createEvent(this, "positionChange", 7);
|
|
1124
|
+
this.openChange = createEvent(this, "openChange", 7);
|
|
1125
|
+
/** Popover position. */
|
|
1126
|
+
this.position = PopoverPosition.AUTO;
|
|
1127
|
+
/**
|
|
1128
|
+
* The open state of the popover.
|
|
1129
|
+
*/
|
|
1130
|
+
this.open = false;
|
|
1131
|
+
/**
|
|
1132
|
+
* Whether to show popover's arrow.
|
|
1133
|
+
*/
|
|
1134
|
+
this.showArrow = false;
|
|
1135
|
+
/**
|
|
1136
|
+
* Whether to center the popup on the main side (according to "position").
|
|
1137
|
+
*/
|
|
1138
|
+
this.center = false;
|
|
1139
|
+
/**
|
|
1140
|
+
* If true, the popover can be closed by clicking outside of it or pressing the escape key.
|
|
1141
|
+
* Otherwise, it will be closed only programmatically (by setting `open` to `false`).
|
|
1142
|
+
*/
|
|
1143
|
+
this.closable = true;
|
|
1144
|
+
}
|
|
1145
|
+
closePopoverWithKeyboard(e) {
|
|
1146
|
+
if (this.closable && e.key === KeyboardCode.ESC) {
|
|
1147
|
+
this.open = false;
|
|
1148
|
+
}
|
|
1149
|
+
}
|
|
1150
|
+
/**
|
|
1151
|
+
* Close the popover when clicking outside of its content.
|
|
1152
|
+
* Stop event propagation if the click was fired by popover's trigger element,
|
|
1153
|
+
* to prevent close and reopen glitches.
|
|
1154
|
+
* @param {MouseEvent} e
|
|
1155
|
+
*/
|
|
1156
|
+
handleOutsideClick(e) {
|
|
1157
|
+
if (!this.closable || !this.open) {
|
|
1158
|
+
return;
|
|
1159
|
+
}
|
|
1160
|
+
if (!e.composedPath().includes(this.host)) {
|
|
1161
|
+
const target = e.target;
|
|
1162
|
+
const triggerElemClicked = this.bindTo instanceof HTMLElement ? this.bindTo.contains(target) : target.closest(this.bindTo);
|
|
1163
|
+
if (triggerElemClicked) {
|
|
1164
|
+
e.stopPropagation();
|
|
1165
|
+
}
|
|
1166
|
+
this.open = false;
|
|
1167
|
+
this.positionChange.emit({ position: this.currentPosition });
|
|
1168
|
+
}
|
|
1169
|
+
}
|
|
1170
|
+
validatePosition(newValue) {
|
|
1171
|
+
if (newValue && !Object.values(PopoverPosition).includes(newValue)) {
|
|
1172
|
+
this.position = PopoverPosition.AUTO;
|
|
1173
|
+
}
|
|
1174
|
+
this.currentPosition = this.position;
|
|
1175
|
+
this.positionChange.emit({ position: this.currentPosition });
|
|
1176
|
+
}
|
|
1177
|
+
/**
|
|
1178
|
+
* Setup popover behaviors on opening.
|
|
1179
|
+
*/
|
|
1180
|
+
onOpen() {
|
|
1181
|
+
cancelAnimationFrame(this.animationFrameRequestId);
|
|
1182
|
+
if (this.open) {
|
|
1183
|
+
const setPosition = () => {
|
|
1184
|
+
if (this.open) {
|
|
1185
|
+
this.setPosition();
|
|
1186
|
+
this.animationFrameRequestId = requestAnimationFrame(setPosition);
|
|
1187
|
+
}
|
|
1188
|
+
};
|
|
1189
|
+
setPosition();
|
|
1190
|
+
}
|
|
1191
|
+
else if (this.host.hasAttribute("current-position")) {
|
|
1192
|
+
this.host.removeAttribute("current-position");
|
|
1193
|
+
this.currentPosition = undefined;
|
|
1194
|
+
}
|
|
1195
|
+
this.openChange.emit({ open: this.open });
|
|
1196
|
+
}
|
|
1197
|
+
disconnectedCallback() {
|
|
1198
|
+
cancelAnimationFrame(this.animationFrameRequestId);
|
|
1199
|
+
}
|
|
1200
|
+
/**
|
|
1201
|
+
* Set the position of the popover.
|
|
1202
|
+
*/
|
|
1203
|
+
setPosition() {
|
|
1204
|
+
let element;
|
|
1205
|
+
if (typeof this.bindTo === "string") {
|
|
1206
|
+
element = this.host.ownerDocument.querySelector(this.bindTo);
|
|
1207
|
+
}
|
|
1208
|
+
else if (this.bindTo) {
|
|
1209
|
+
element = this.bindTo;
|
|
1210
|
+
}
|
|
1211
|
+
else {
|
|
1212
|
+
element = this.host.parentElement;
|
|
1213
|
+
}
|
|
1214
|
+
if (!element) {
|
|
1215
|
+
return;
|
|
1216
|
+
}
|
|
1217
|
+
const scrollContainer = findScrollableParent(element);
|
|
1218
|
+
const scrollingBoundingRect = scrollContainer.getBoundingClientRect();
|
|
1219
|
+
const offsetContainer = this.host.offsetParent;
|
|
1220
|
+
const relativeBoundingRect = offsetContainer
|
|
1221
|
+
? computeOffset(offsetContainer, scrollContainer)
|
|
1222
|
+
: { top: 0, right: 0, bottom: 0, left: 0 };
|
|
1223
|
+
const boundingRect = computeOffset(element, scrollContainer);
|
|
1224
|
+
const top = boundingRect.top - scrollContainer.scrollTop;
|
|
1225
|
+
const bottom = scrollingBoundingRect.height - (boundingRect.top + boundingRect.height) + scrollContainer.scrollTop;
|
|
1226
|
+
const left = boundingRect.left - scrollContainer.scrollLeft;
|
|
1227
|
+
const right = scrollingBoundingRect.width - (boundingRect.left + boundingRect.width) + scrollContainer.scrollLeft;
|
|
1228
|
+
const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);
|
|
1229
|
+
const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);
|
|
1230
|
+
const availableTop = Math.min(top, top + scrollingBoundingRect.top);
|
|
1231
|
+
const availableBottom = Math.min(bottom, bottom - overflowBottom);
|
|
1232
|
+
const availableLeft = Math.min(left, left + scrollingBoundingRect.left);
|
|
1233
|
+
const availableRight = Math.min(right, right - overflowRight);
|
|
1234
|
+
const availableHeight = availableTop + availableBottom + boundingRect.height;
|
|
1235
|
+
const availableWidth = availableLeft + availableRight + boundingRect.width;
|
|
1236
|
+
let position = this.currentPosition;
|
|
1237
|
+
const positions = [];
|
|
1238
|
+
if (this.position === PopoverPosition.AUTO) {
|
|
1239
|
+
/**
|
|
1240
|
+
* The `AUTO` position tries to place the popover in the 'safest' area,
|
|
1241
|
+
* where there's more space available.
|
|
1242
|
+
*/
|
|
1243
|
+
if (availableLeft / availableWidth > 0.6) {
|
|
1244
|
+
positions.push(PopoverPosition.LEFT);
|
|
1245
|
+
}
|
|
1246
|
+
else if (availableLeft / availableWidth < 0.4) {
|
|
1247
|
+
positions.push(PopoverPosition.RIGHT);
|
|
1248
|
+
}
|
|
1249
|
+
if (availableTop / availableHeight > 0.9) {
|
|
1250
|
+
positions.unshift(PopoverPosition.TOP);
|
|
1251
|
+
}
|
|
1252
|
+
else if (availableTop / availableHeight > 0.6) {
|
|
1253
|
+
positions.push(PopoverPosition.TOP);
|
|
1254
|
+
}
|
|
1255
|
+
else if (availableTop / availableHeight < 0.1) {
|
|
1256
|
+
positions.unshift(PopoverPosition.BOTTOM);
|
|
1257
|
+
}
|
|
1258
|
+
else {
|
|
1259
|
+
positions.push(PopoverPosition.BOTTOM);
|
|
1260
|
+
}
|
|
1261
|
+
position = positions.join("_");
|
|
1262
|
+
}
|
|
1263
|
+
const style = this.host.style;
|
|
1264
|
+
style.position = "absolute";
|
|
1265
|
+
const offsetTop = boundingRect.top - relativeBoundingRect.top;
|
|
1266
|
+
const offsetRight = boundingRect.right - relativeBoundingRect.right;
|
|
1267
|
+
const offsetBottom = boundingRect.bottom - relativeBoundingRect.bottom;
|
|
1268
|
+
const offsetLeft = boundingRect.left - relativeBoundingRect.left;
|
|
1269
|
+
const offsetModifier = this.center ? 0.5 : 0;
|
|
1270
|
+
const sizeModifier = this.center ? 0.5 : 0;
|
|
1271
|
+
if (position === PopoverPosition.TOP || position === PopoverPosition.TOP_RIGHT) {
|
|
1272
|
+
style.top = "auto";
|
|
1273
|
+
style.right = "auto";
|
|
1274
|
+
style.bottom = `${offsetBottom + boundingRect.height}px`;
|
|
1275
|
+
style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
|
|
1276
|
+
style.maxHeight = `${availableTop}px`;
|
|
1277
|
+
if (position === PopoverPosition.TOP_RIGHT) {
|
|
1278
|
+
style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
|
|
1279
|
+
}
|
|
1280
|
+
}
|
|
1281
|
+
else if (position === PopoverPosition.TOP_LEFT) {
|
|
1282
|
+
style.top = "auto";
|
|
1283
|
+
style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
|
|
1284
|
+
style.bottom = `${offsetBottom + boundingRect.height}px`;
|
|
1285
|
+
style.left = "auto";
|
|
1286
|
+
style.maxWidth = `${availableLeft}px`;
|
|
1287
|
+
style.maxHeight = `${availableTop}px`;
|
|
1288
|
+
}
|
|
1289
|
+
else if (position === PopoverPosition.BOTTOM || position === PopoverPosition.BOTTOM_RIGHT) {
|
|
1290
|
+
style.top = `${offsetTop + boundingRect.height}px`;
|
|
1291
|
+
style.right = "auto";
|
|
1292
|
+
style.bottom = "auto";
|
|
1293
|
+
style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
|
|
1294
|
+
style.maxHeight = `${availableBottom}px`;
|
|
1295
|
+
if (position === PopoverPosition.BOTTOM_RIGHT) {
|
|
1296
|
+
style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
|
|
1297
|
+
}
|
|
1298
|
+
}
|
|
1299
|
+
else if (position === PopoverPosition.BOTTOM_LEFT) {
|
|
1300
|
+
style.top = `${offsetTop + boundingRect.height}px`;
|
|
1301
|
+
style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
|
|
1302
|
+
style.bottom = "auto";
|
|
1303
|
+
style.left = "auto";
|
|
1304
|
+
style.maxWidth = `${availableLeft}px`;
|
|
1305
|
+
style.maxHeight = `${availableBottom}px`;
|
|
1306
|
+
}
|
|
1307
|
+
else if (position === PopoverPosition.RIGHT || position === PopoverPosition.RIGHT_BOTTOM) {
|
|
1308
|
+
style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
|
|
1309
|
+
style.right = "auto";
|
|
1310
|
+
style.bottom = "auto";
|
|
1311
|
+
style.left = `${offsetLeft + boundingRect.width}px`;
|
|
1312
|
+
style.maxWidth = `${availableRight}px`;
|
|
1313
|
+
style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
|
|
1314
|
+
}
|
|
1315
|
+
else if (position === PopoverPosition.RIGHT_TOP) {
|
|
1316
|
+
style.top = "auto";
|
|
1317
|
+
style.right = "auto";
|
|
1318
|
+
style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
|
|
1319
|
+
style.left = `${offsetLeft + boundingRect.width}px`;
|
|
1320
|
+
style.maxWidth = `${availableRight}px`;
|
|
1321
|
+
style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
|
|
1322
|
+
}
|
|
1323
|
+
else if (position === PopoverPosition.LEFT || position === PopoverPosition.LEFT_BOTTOM) {
|
|
1324
|
+
style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
|
|
1325
|
+
style.right = `${offsetRight + boundingRect.width}px`;
|
|
1326
|
+
style.bottom = "auto";
|
|
1327
|
+
style.left = "auto";
|
|
1328
|
+
style.maxWidth = `${availableLeft}px`;
|
|
1329
|
+
style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
|
|
1330
|
+
}
|
|
1331
|
+
else if (position === PopoverPosition.LEFT_TOP) {
|
|
1332
|
+
style.top = "auto";
|
|
1333
|
+
style.right = `${offsetRight + boundingRect.width}px`;
|
|
1334
|
+
style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
|
|
1335
|
+
style.left = "auto";
|
|
1336
|
+
style.maxWidth = `${availableLeft}px`;
|
|
1337
|
+
style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
|
|
1338
|
+
}
|
|
1339
|
+
this.currentPosition = position || this.position;
|
|
1340
|
+
this.host.setAttribute("current-position", this.currentPosition);
|
|
1341
|
+
}
|
|
1342
|
+
componentWillLoad() {
|
|
1343
|
+
this.validatePosition(this.position);
|
|
1344
|
+
this.onOpen();
|
|
1345
|
+
}
|
|
1346
|
+
render() {
|
|
1347
|
+
return h("slot", null);
|
|
1348
|
+
}
|
|
1349
|
+
get host() { return getElement(this); }
|
|
1350
|
+
static get watchers() { return {
|
|
1351
|
+
"position": ["validatePosition"],
|
|
1352
|
+
"open": ["onOpen"]
|
|
1353
|
+
}; }
|
|
1354
|
+
};
|
|
1355
|
+
ZPopover.style = stylesCss$1;
|
|
809
1356
|
|
|
810
1357
|
const stylesCss = ":host{z-index:10;display:flex;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.results-wrapper{position:absolute;top:calc(100% - 1px);left:0;width:100%;padding:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;background:var(--color-surface01)}.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.results::-webkit-scrollbar-track{background-color:transparent}.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}.results .category-heading>*{display:block}.results .category-heading>.category{color:var(--color-text05);font-style:italic}.results .category-heading>.subcategory{margin-top:var(--space-unit);color:var(--color-text01);text-transform:uppercase}.results z-list-element{display:block}.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;color:var(--color-text01);column-gap:calc(var(--space-unit) * 1.5);fill:var(--color-icon02);font-size:var(--font-size-2);line-height:var(--font-size-3)}.results .item.ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item>.item-label mark{background:var(--color-primary03)}.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}.results .item-show-all{text-align:center}.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}.results .item.ellipsis>.item-label{height:24px}}@media (min-width: 1152px){.results .item{cursor:pointer}.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}:host([size=\"small\"]) .results :is(.item,.category-heading),:host([size=\"x-small\"]) .results :is(.item,.category-heading){font-size:var(--font-size-2)}:host([size=\"small\"]) .results .item:not(.has-category),:host([size=\"x-small\"]) .results .item:not(.has-category){--z-icon-height:16px;--z-icon-width:16px}:host([size=\"small\"])::part(list-item-container){min-height:calc(var(--space-unit) * 4.5);padding:0}:host([size=\"x-small\"])::part(list-item-container){min-height:calc(var(--space-unit) * 4);padding:0}";
|
|
811
1358
|
|
|
@@ -1033,4 +1580,4 @@ const ZSearchbar = class {
|
|
|
1033
1580
|
};
|
|
1034
1581
|
ZSearchbar.style = stylesCss;
|
|
1035
1582
|
|
|
1036
|
-
export { ZAppHeader as z_app_header, ZButton as z_button, ZDivider as z_divider, ZIcon as z_icon, ZInput as z_input, ZInputMessage as z_input_message, ZList as z_list, ZListElement as z_list_element, ZListGroup as z_list_group, ZOffcanvas as z_offcanvas, ZSearchbar as z_searchbar };
|
|
1583
|
+
export { ZAppHeader as z_app_header, ZBreadcrumb as z_breadcrumb, ZButton as z_button, ZDivider as z_divider, ZIcon as z_icon, ZInput as z_input, ZInputMessage as z_input_message, ZList as z_list, ZListElement as z_list_element, ZListGroup as z_list_group, ZOffcanvas as z_offcanvas, ZPopover as z_popover, ZSearchbar as z_searchbar };
|