@zanichelli/albe-web-components 2.33.4 → 2.34.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 +1229 -0
- package/dist/cjs/_commonjsHelpers-119ffc74.js +17 -0
- package/dist/cjs/{hammer-6e321f0b.js → hammer-54230951.js} +2 -15
- package/dist/cjs/icons-74891aae.js +477 -0
- package/dist/cjs/index-9651dba8.js +60 -0
- package/dist/cjs/{index-11a8a536.js → index-de6c491e.js} +8 -8
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{utils-00e14fba.js → utils-12053886.js} +1 -1
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/z-alert.cjs.entry.js +19 -0
- package/dist/cjs/z-app-switcher.cjs.entry.js +29 -0
- package/dist/cjs/z-app-topbar.cjs.entry.js +41 -0
- package/dist/cjs/z-aria-alert.cjs.entry.js +1 -1
- package/dist/cjs/z-avatar.cjs.entry.js +43 -0
- package/dist/cjs/z-body_14.cjs.entry.js +513 -0
- package/dist/cjs/z-button-filter_5.cjs.entry.js +620 -0
- package/dist/cjs/z-button-sort.cjs.entry.js +54 -0
- package/dist/cjs/z-card.cjs.entry.js +58 -0
- package/dist/cjs/z-chip.cjs.entry.js +24 -0
- package/dist/cjs/z-combobox.cjs.entry.js +170 -0
- package/dist/cjs/z-contextual-menu.cjs.entry.js +40 -0
- package/dist/cjs/z-cookiebar.cjs.entry.js +1 -1
- package/dist/cjs/z-divider.cjs.entry.js +26 -0
- package/dist/cjs/z-footer-link_3.cjs.entry.js +49 -0
- package/dist/cjs/z-footer.cjs.entry.js +102 -0
- package/dist/cjs/z-ghost-loading.cjs.entry.js +19 -0
- package/dist/cjs/z-icon-package.cjs.entry.js +23 -0
- package/dist/cjs/z-info-box.cjs.entry.js +25 -0
- package/dist/cjs/z-link.cjs.entry.js +71 -0
- package/dist/cjs/z-list_3.cjs.entry.js +226 -0
- package/dist/cjs/z-logo.cjs.entry.js +28 -0
- package/dist/cjs/z-menu-dropdown_2.cjs.entry.js +89 -0
- package/dist/cjs/z-menu-section.cjs.entry.js +46 -0
- package/dist/cjs/z-menu.cjs.entry.js +110 -0
- package/dist/cjs/z-messages-pocket.cjs.entry.js +1 -1
- package/dist/cjs/z-modal-login.cjs.entry.js +1 -1
- package/dist/cjs/z-modal.cjs.entry.js +36 -0
- package/dist/cjs/z-myz-card-alert.cjs.entry.js +63 -0
- package/dist/cjs/z-myz-card-dictionary.cjs.entry.js +1 -1
- package/dist/cjs/z-myz-card-footer.cjs.entry.js +52 -0
- package/dist/cjs/z-myz-card-icon.cjs.entry.js +21 -0
- package/dist/cjs/z-myz-card-info.cjs.entry.js +2 -2
- package/dist/cjs/z-myz-card-list.cjs.entry.js +37 -0
- package/dist/cjs/z-myz-card_4.cjs.entry.js +101 -0
- package/dist/cjs/z-myz-list-item.cjs.entry.js +37 -0
- package/dist/cjs/z-myz-topbar.cjs.entry.js +1 -1
- package/dist/cjs/z-navigation-tabs.cjs.entry.js +1 -1
- package/dist/cjs/z-notification.cjs.entry.js +42 -0
- package/dist/cjs/z-otp.cjs.entry.js +1 -1
- package/dist/cjs/z-pagination-bar.cjs.entry.js +128 -0
- package/dist/cjs/z-pagination-page.cjs.entry.js +25 -0
- package/dist/cjs/z-panel-elem.cjs.entry.js +30 -0
- package/dist/cjs/z-pocket_3.cjs.entry.js +4 -3
- package/dist/cjs/z-registro-table-expanded-row.cjs.entry.js +19 -0
- package/dist/cjs/z-slideshow.cjs.entry.js +2 -2
- package/dist/cjs/z-status-tag.cjs.entry.js +29 -0
- package/dist/cjs/z-stepper-item.cjs.entry.js +22 -0
- package/dist/cjs/z-stepper.cjs.entry.js +19 -0
- package/dist/cjs/z-toast-notification-list.cjs.entry.js +1 -1
- package/dist/cjs/z-toast-notification.cjs.entry.js +3 -2
- package/dist/cjs/z-toggle-button.cjs.entry.js +36 -0
- package/dist/cjs/z-tooltip.cjs.entry.js +274 -0
- package/dist/cjs/z-user-dropdown.cjs.entry.js +95 -0
- package/dist/collection/beans/index.js +8 -8
- package/dist/collection/snowflakes/registro-table/z-registro-table-cell/index.js +26 -1
- package/dist/collection/snowflakes/registro-table/z-registro-table-cell/styles.css +19 -1
- package/dist/collection/snowflakes/registro-table/z-registro-table-header/index.js +22 -18
- package/dist/collection/snowflakes/registro-table/z-registro-table-header/styles.css +9 -13
- package/dist/esm/_commonjsHelpers-8b28c6fa.js +15 -0
- package/dist/esm/{hammer-c807d0b5.js → hammer-501342a9.js} +2 -14
- package/dist/esm/icons-9a191d79.js +475 -0
- package/dist/esm/{index-4952bfe3.js → index-09b57d95.js} +9 -9
- package/dist/esm/index-aa3a4feb.js +58 -0
- package/dist/esm/index.js +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{utils-889efe17.js → utils-f0067254.js} +2 -2
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/z-alert.entry.js +15 -0
- package/dist/esm/z-app-switcher.entry.js +25 -0
- package/dist/esm/z-app-topbar.entry.js +37 -0
- package/dist/esm/z-aria-alert.entry.js +1 -1
- package/dist/esm/z-avatar.entry.js +39 -0
- package/dist/esm/z-body_14.entry.js +496 -0
- package/dist/esm/z-button-filter_5.entry.js +612 -0
- package/dist/esm/z-button-sort.entry.js +50 -0
- package/dist/esm/z-card.entry.js +54 -0
- package/dist/esm/z-chip.entry.js +20 -0
- package/dist/esm/z-combobox.entry.js +166 -0
- package/dist/esm/z-contextual-menu.entry.js +36 -0
- package/dist/esm/z-cookiebar.entry.js +1 -1
- package/dist/esm/z-divider.entry.js +22 -0
- package/dist/esm/z-footer-link_3.entry.js +43 -0
- package/dist/esm/z-footer.entry.js +98 -0
- package/dist/esm/z-ghost-loading.entry.js +15 -0
- package/dist/esm/z-icon-package.entry.js +19 -0
- package/dist/esm/z-info-box.entry.js +21 -0
- package/dist/esm/z-link.entry.js +67 -0
- package/dist/esm/z-list_3.entry.js +220 -0
- package/dist/esm/z-logo.entry.js +24 -0
- package/dist/esm/z-menu-dropdown_2.entry.js +84 -0
- package/dist/esm/z-menu-section.entry.js +42 -0
- package/dist/esm/z-menu.entry.js +106 -0
- package/dist/esm/z-messages-pocket.entry.js +1 -1
- package/dist/esm/z-modal-login.entry.js +1 -1
- package/dist/esm/z-modal.entry.js +32 -0
- package/dist/esm/z-myz-card-alert.entry.js +59 -0
- package/dist/esm/z-myz-card-dictionary.entry.js +1 -1
- package/dist/esm/z-myz-card-footer.entry.js +48 -0
- package/dist/esm/z-myz-card-icon.entry.js +17 -0
- package/dist/esm/z-myz-card-info.entry.js +2 -2
- package/dist/esm/z-myz-card-list.entry.js +33 -0
- package/dist/esm/z-myz-card_4.entry.js +94 -0
- package/dist/esm/z-myz-list-item.entry.js +33 -0
- package/dist/esm/z-myz-topbar.entry.js +1 -1
- package/dist/esm/z-navigation-tabs.entry.js +1 -1
- package/dist/esm/z-notification.entry.js +38 -0
- package/dist/esm/z-otp.entry.js +1 -1
- package/dist/esm/z-pagination-bar.entry.js +124 -0
- package/dist/esm/z-pagination-page.entry.js +21 -0
- package/dist/esm/z-panel-elem.entry.js +26 -0
- package/dist/esm/z-pocket_3.entry.js +4 -3
- package/dist/esm/z-registro-table-expanded-row.entry.js +15 -0
- package/dist/esm/z-slideshow.entry.js +2 -2
- package/dist/esm/z-status-tag.entry.js +25 -0
- package/dist/esm/z-stepper-item.entry.js +18 -0
- package/dist/esm/z-stepper.entry.js +15 -0
- package/dist/esm/z-toast-notification-list.entry.js +1 -1
- package/dist/esm/z-toast-notification.entry.js +3 -2
- package/dist/esm/z-toggle-button.entry.js +32 -0
- package/dist/esm/z-tooltip.entry.js +270 -0
- package/dist/esm/z-user-dropdown.entry.js +91 -0
- package/dist/types/beans/index.d.ts +7 -7
- package/dist/types/components.d.ts +17 -9
- package/dist/types/snowflakes/registro-table/z-registro-table-cell/index.d.ts +3 -0
- package/dist/types/snowflakes/registro-table/z-registro-table-header/index.d.ts +3 -3
- package/dist/web-components-library/index.esm.js +1 -1
- package/dist/web-components-library/p-01d11ec3.entry.js +1 -0
- package/dist/web-components-library/p-0455dc43.entry.js +1 -0
- package/dist/web-components-library/{p-fcf19092.entry.js → p-05f4fa42.entry.js} +1 -1
- package/dist/web-components-library/p-08158e57.entry.js +1 -0
- package/dist/web-components-library/p-0ce6293a.entry.js +1 -0
- package/dist/web-components-library/{p-65c08b33.js → p-0e6906af.js} +1 -1
- package/dist/web-components-library/p-0fe60379.entry.js +1 -0
- package/dist/web-components-library/p-10ad64bc.entry.js +1 -0
- package/dist/web-components-library/p-166a212e.entry.js +1 -0
- package/dist/web-components-library/p-18705ae9.entry.js +1 -0
- package/{www/build/p-9912e411.js → dist/web-components-library/p-1d371408.js} +2 -2
- package/dist/web-components-library/p-250926fe.entry.js +1 -0
- package/dist/web-components-library/p-255c9150.entry.js +1 -0
- package/dist/web-components-library/p-3247dee9.js +7 -0
- package/dist/web-components-library/{p-40972dfd.entry.js → p-34f4e805.entry.js} +1 -1
- package/dist/web-components-library/p-35fd465c.entry.js +1 -0
- package/dist/web-components-library/{p-d1fed95b.entry.js → p-400e26c7.entry.js} +1 -1
- package/dist/web-components-library/p-4a414eb2.entry.js +1 -0
- package/dist/web-components-library/p-4ce8c176.entry.js +1 -0
- package/dist/web-components-library/p-4f66fee4.js +1 -0
- package/dist/web-components-library/p-5bbbc979.entry.js +1 -0
- package/dist/web-components-library/{p-e64c06a4.entry.js → p-5e2762e6.entry.js} +1 -1
- package/dist/web-components-library/p-5fa8dc13.entry.js +1 -0
- package/dist/web-components-library/p-60e40371.entry.js +1 -0
- package/dist/web-components-library/p-6583cbec.entry.js +1 -0
- package/dist/web-components-library/p-71cc7ed0.entry.js +1 -0
- package/dist/web-components-library/p-74fb3d69.entry.js +1 -0
- package/dist/web-components-library/p-7e926220.entry.js +1 -0
- package/dist/web-components-library/p-80589729.entry.js +1 -0
- package/dist/web-components-library/p-82a59ded.entry.js +1 -0
- package/dist/web-components-library/p-880a50a6.entry.js +1 -0
- package/dist/web-components-library/p-94814f44.entry.js +1 -0
- package/dist/web-components-library/{p-8c24ac2e.entry.js → p-957f298f.entry.js} +1 -1
- package/dist/web-components-library/{p-d430b1aa.entry.js → p-9959e453.entry.js} +1 -1
- package/dist/web-components-library/p-9d9dc98f.entry.js +1 -0
- package/dist/web-components-library/p-a15f8b52.entry.js +1 -0
- package/dist/web-components-library/p-a7733104.entry.js +1 -0
- package/dist/web-components-library/{p-3ea97390.entry.js → p-a82c9a77.entry.js} +1 -1
- package/dist/web-components-library/p-aa0f7169.entry.js +1 -0
- package/dist/web-components-library/p-ac3bc4c2.entry.js +1 -0
- package/dist/web-components-library/p-b13d5b98.entry.js +1 -0
- package/dist/web-components-library/{p-6e8f444c.entry.js → p-b630127d.entry.js} +1 -1
- package/dist/web-components-library/p-b68038b5.js +1 -0
- package/dist/web-components-library/p-b78fb152.entry.js +1 -0
- package/dist/web-components-library/p-c92c3f20.entry.js +1 -0
- package/dist/web-components-library/p-cc6363b9.entry.js +1 -0
- package/dist/web-components-library/p-cf914ea7.entry.js +1 -0
- package/dist/web-components-library/p-cfebc80e.entry.js +1 -0
- package/dist/web-components-library/{p-0bf8988b.entry.js → p-d227a145.entry.js} +1 -1
- package/dist/web-components-library/p-d83eee10.entry.js +1 -0
- package/dist/web-components-library/p-db5863cf.entry.js +1 -0
- package/dist/web-components-library/p-e1f1f39e.entry.js +1 -0
- package/dist/web-components-library/{p-798d5c2f.entry.js → p-e29fe790.entry.js} +1 -1
- package/dist/web-components-library/p-ebcad010.entry.js +1 -0
- package/dist/web-components-library/p-f3354152.entry.js +1 -0
- package/dist/web-components-library/p-f77f6f60.entry.js +1 -0
- package/dist/web-components-library/p-f8446b1e.entry.js +1 -0
- package/dist/web-components-library/p-f90dd488.js +1 -0
- package/dist/web-components-library/p-fc47897e.entry.js +1 -0
- package/dist/web-components-library/p-fce08912.entry.js +1 -0
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/index.esm.js +1 -1
- package/www/build/p-01d11ec3.entry.js +1 -0
- package/www/build/p-0455dc43.entry.js +1 -0
- package/www/build/{p-fcf19092.entry.js → p-05f4fa42.entry.js} +1 -1
- package/www/build/p-08158e57.entry.js +1 -0
- package/www/build/p-0ce6293a.entry.js +1 -0
- package/www/build/{p-65c08b33.js → p-0e6906af.js} +1 -1
- package/www/build/p-0fe60379.entry.js +1 -0
- package/www/build/p-10ad64bc.entry.js +1 -0
- package/www/build/p-166a212e.entry.js +1 -0
- package/www/build/p-18705ae9.entry.js +1 -0
- package/{dist/web-components-library/p-9912e411.js → www/build/p-1d371408.js} +2 -2
- package/www/build/p-250926fe.entry.js +1 -0
- package/www/build/p-255c9150.entry.js +1 -0
- package/www/build/p-3247dee9.js +7 -0
- package/www/build/{p-40972dfd.entry.js → p-34f4e805.entry.js} +1 -1
- package/www/build/p-35fd465c.entry.js +1 -0
- package/www/build/{p-d1fed95b.entry.js → p-400e26c7.entry.js} +1 -1
- package/www/build/p-4a414eb2.entry.js +1 -0
- package/www/build/p-4ce8c176.entry.js +1 -0
- package/www/build/p-4f66fee4.js +1 -0
- package/www/build/p-5bbbc979.entry.js +1 -0
- package/www/build/{p-e64c06a4.entry.js → p-5e2762e6.entry.js} +1 -1
- package/www/build/p-5fa8dc13.entry.js +1 -0
- package/www/build/p-60e40371.entry.js +1 -0
- package/www/build/p-6583cbec.entry.js +1 -0
- package/www/build/p-71cc7ed0.entry.js +1 -0
- package/www/build/p-74fb3d69.entry.js +1 -0
- package/www/build/p-7e926220.entry.js +1 -0
- package/www/build/p-80589729.entry.js +1 -0
- package/www/build/p-82a59ded.entry.js +1 -0
- package/www/build/p-880a50a6.entry.js +1 -0
- package/www/build/p-94814f44.entry.js +1 -0
- package/www/build/{p-8c24ac2e.entry.js → p-957f298f.entry.js} +1 -1
- package/www/build/{p-d430b1aa.entry.js → p-9959e453.entry.js} +1 -1
- package/www/build/p-9d9dc98f.entry.js +1 -0
- package/www/build/p-a15f8b52.entry.js +1 -0
- package/www/build/p-a7733104.entry.js +1 -0
- package/www/build/{p-3ea97390.entry.js → p-a82c9a77.entry.js} +1 -1
- package/www/build/p-aa0f7169.entry.js +1 -0
- package/www/build/p-ac3bc4c2.entry.js +1 -0
- package/www/build/p-b13d5b98.entry.js +1 -0
- package/www/build/{p-6e8f444c.entry.js → p-b630127d.entry.js} +1 -1
- package/www/build/p-b68038b5.js +1 -0
- package/www/build/p-b78fb152.entry.js +1 -0
- package/www/build/p-c92c3f20.entry.js +1 -0
- package/www/build/p-cc6363b9.entry.js +1 -0
- package/www/build/p-cf914ea7.entry.js +1 -0
- package/www/build/p-cfebc80e.entry.js +1 -0
- package/www/build/{p-0bf8988b.entry.js → p-d227a145.entry.js} +1 -1
- package/www/build/p-d83eee10.entry.js +1 -0
- package/www/build/p-db5863cf.entry.js +1 -0
- package/www/build/p-e1f1f39e.entry.js +1 -0
- package/www/build/{p-798d5c2f.entry.js → p-e29fe790.entry.js} +1 -1
- package/www/build/p-eaf64f7c.js +1 -0
- package/www/build/p-ebcad010.entry.js +1 -0
- package/www/build/p-f3354152.entry.js +1 -0
- package/www/build/p-f77f6f60.entry.js +1 -0
- package/www/build/p-f8446b1e.entry.js +1 -0
- package/www/build/p-f90dd488.js +1 -0
- package/www/build/p-fc47897e.entry.js +1 -0
- package/www/build/p-fce08912.entry.js +1 -0
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +2 -454
- package/dist/cjs/z-alert_66.cjs.entry.js +0 -3735
- package/dist/esm/z-alert_66.entry.js +0 -3666
- package/dist/web-components-library/p-04c73ec1.entry.js +0 -1
- package/dist/web-components-library/p-43d00d2f.entry.js +0 -1
- package/dist/web-components-library/p-57ceab75.entry.js +0 -7
- package/dist/web-components-library/p-881b4877.js +0 -1
- package/dist/web-components-library/p-b4420ba3.entry.js +0 -1
- package/www/build/p-002ed333.js +0 -1
- package/www/build/p-04c73ec1.entry.js +0 -1
- package/www/build/p-43d00d2f.entry.js +0 -1
- package/www/build/p-57ceab75.entry.js +0 -7
- package/www/build/p-881b4877.js +0 -1
- package/www/build/p-b4420ba3.entry.js +0 -1
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-fa9e549c.js';
|
|
2
|
+
import { r as ListSize, E as ExpandableListButtonAlign, s as ListDividerType, t as DividerSize, u as ExpandableListStyle, K as KeyboardKeys } from './index-09b57d95.js';
|
|
3
|
+
|
|
4
|
+
const stylesCss$2 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:flex;flex-direction:column}";
|
|
5
|
+
|
|
6
|
+
const ZList = class {
|
|
7
|
+
constructor(hostRef) {
|
|
8
|
+
registerInstance(this, hostRef);
|
|
9
|
+
/**
|
|
10
|
+
* [optional] Sets size of inside elements.
|
|
11
|
+
*/
|
|
12
|
+
this.size = ListSize.medium;
|
|
13
|
+
}
|
|
14
|
+
setChildrenSizeType() {
|
|
15
|
+
const children = this.host.children;
|
|
16
|
+
for (let i = 0; i < children.length - 1; i++) {
|
|
17
|
+
children[i].setAttribute("size", this.size);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
componentDidLoad() {
|
|
21
|
+
this.setChildrenSizeType();
|
|
22
|
+
}
|
|
23
|
+
render() {
|
|
24
|
+
return (h(Host, { role: "list" }, h("slot", null)));
|
|
25
|
+
}
|
|
26
|
+
get host() { return getElement(this); }
|
|
27
|
+
};
|
|
28
|
+
ZList.style = stylesCss$2;
|
|
29
|
+
|
|
30
|
+
const stylesCss$1 = ":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);font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}:host([size=\"small\"])>.container{padding:calc(var(--space-unit) / 2) 0;min-height:calc(var(--space-unit) * 4)}:host([size=\"medium\"])>.container{padding:var(--space-unit) 0;min-height:calc(var(--space-unit) * 5)}:host([size=\"large\"])>.container{padding:calc(var(--space-unit) * 2) 0;min-height:calc(var(--space-unit) * 7)}:host([size=\"x-large\"])>.container{padding:calc(var(--space-unit) * 3) 0;min-height:calc(var(--space-unit) * 9)}: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([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}";
|
|
31
|
+
|
|
32
|
+
const ZListElement = class {
|
|
33
|
+
/**
|
|
34
|
+
* Constructor.
|
|
35
|
+
*/
|
|
36
|
+
constructor(hostRef) {
|
|
37
|
+
registerInstance(this, hostRef);
|
|
38
|
+
this.accessibleFocus = createEvent(this, "accessibleFocus", 7);
|
|
39
|
+
this.clickItem = createEvent(this, "clickItem", 7);
|
|
40
|
+
/**
|
|
41
|
+
* [optional] Align expandable button left or right.
|
|
42
|
+
*/
|
|
43
|
+
this.alignButton = ExpandableListButtonAlign.left;
|
|
44
|
+
/**
|
|
45
|
+
* [optional] Sets element clickable.
|
|
46
|
+
*/
|
|
47
|
+
this.clickable = false;
|
|
48
|
+
/**
|
|
49
|
+
* [optional] Sets the divider color.
|
|
50
|
+
*/
|
|
51
|
+
this.dividerColor = "color-surface03";
|
|
52
|
+
/**
|
|
53
|
+
* [optional] Sets the position where to insert the divider.
|
|
54
|
+
*/
|
|
55
|
+
this.dividerType = ListDividerType.none;
|
|
56
|
+
/**
|
|
57
|
+
* [optional] Sets the divider size.
|
|
58
|
+
*/
|
|
59
|
+
this.dividerSize = DividerSize.small;
|
|
60
|
+
/**
|
|
61
|
+
* [optional] Sets element as expandable.
|
|
62
|
+
*/
|
|
63
|
+
this.expandable = false;
|
|
64
|
+
/**
|
|
65
|
+
* [optional] Sets expandable style to element.
|
|
66
|
+
*/
|
|
67
|
+
this.expandableStyle = ExpandableListStyle.accordion;
|
|
68
|
+
/**
|
|
69
|
+
* [optional] Sets size of inside elements.
|
|
70
|
+
*/
|
|
71
|
+
this.size = ListSize.medium;
|
|
72
|
+
/**
|
|
73
|
+
* [optional] Sets text color of the element.
|
|
74
|
+
*/
|
|
75
|
+
this.color = "none";
|
|
76
|
+
/**
|
|
77
|
+
* [optional] Sets disabled style of the element.
|
|
78
|
+
*/
|
|
79
|
+
this.disabled = false;
|
|
80
|
+
/**
|
|
81
|
+
* [optional] If is used in ZContextualMenu component
|
|
82
|
+
*/
|
|
83
|
+
this.isContextualMenu = false;
|
|
84
|
+
this.showInnerContent = false;
|
|
85
|
+
this.openElementConfig = {
|
|
86
|
+
accordion: {
|
|
87
|
+
open: "minus-circled",
|
|
88
|
+
close: "plus-circled",
|
|
89
|
+
},
|
|
90
|
+
menu: {
|
|
91
|
+
open: "chevron-up",
|
|
92
|
+
close: "chevron-down",
|
|
93
|
+
},
|
|
94
|
+
};
|
|
95
|
+
this.handleClick = this.handleClick.bind(this);
|
|
96
|
+
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
97
|
+
}
|
|
98
|
+
accessibleFocusHandler(e) {
|
|
99
|
+
if (this.listElementId === e.detail) {
|
|
100
|
+
const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);
|
|
101
|
+
toFocus.focus();
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* Handler for click on element. If element is expandable, change state.
|
|
106
|
+
* @returns void
|
|
107
|
+
*/
|
|
108
|
+
handleClick() {
|
|
109
|
+
this.clickItem.emit(this.listElementId);
|
|
110
|
+
if (!this.expandable) {
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
this.showInnerContent = !this.showInnerContent;
|
|
114
|
+
}
|
|
115
|
+
calculateClass() {
|
|
116
|
+
if (this.isContextualMenu) {
|
|
117
|
+
return "container-contextual-menu";
|
|
118
|
+
}
|
|
119
|
+
return "container";
|
|
120
|
+
}
|
|
121
|
+
handleKeyDown(event) {
|
|
122
|
+
const expandByKey = event.code === KeyboardKeys.ENTER;
|
|
123
|
+
switch (event.code) {
|
|
124
|
+
case KeyboardKeys.ARROW_DOWN:
|
|
125
|
+
event.preventDefault();
|
|
126
|
+
this.accessibleFocus.emit(this.listElementId + 1);
|
|
127
|
+
break;
|
|
128
|
+
case KeyboardKeys.ARROW_UP:
|
|
129
|
+
event.preventDefault();
|
|
130
|
+
this.accessibleFocus.emit(this.listElementId - 1);
|
|
131
|
+
break;
|
|
132
|
+
case KeyboardKeys.ENTER:
|
|
133
|
+
event.preventDefault();
|
|
134
|
+
this.clickItem.emit(this.listElementId);
|
|
135
|
+
break;
|
|
136
|
+
}
|
|
137
|
+
if (!this.expandable || !expandByKey) {
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
this.showInnerContent = !this.showInnerContent;
|
|
141
|
+
}
|
|
142
|
+
/**
|
|
143
|
+
* Renders button to expand element.
|
|
144
|
+
* @returns expadable button
|
|
145
|
+
*/
|
|
146
|
+
renderExpandableButton() {
|
|
147
|
+
if (!this.expandable) {
|
|
148
|
+
return null;
|
|
149
|
+
}
|
|
150
|
+
return (h("z-icon", { name: this.showInnerContent
|
|
151
|
+
? this.openElementConfig[this.expandableStyle].open
|
|
152
|
+
: this.openElementConfig[this.expandableStyle].close }));
|
|
153
|
+
}
|
|
154
|
+
/**
|
|
155
|
+
* Renders expanded content if element is expandable.
|
|
156
|
+
* @returns expanded content
|
|
157
|
+
*/
|
|
158
|
+
renderExpandedContent() {
|
|
159
|
+
if (!this.expandable) {
|
|
160
|
+
return null;
|
|
161
|
+
}
|
|
162
|
+
return (h("div", { class: {
|
|
163
|
+
"z-list-element-inner-container": true,
|
|
164
|
+
expanded: this.showInnerContent,
|
|
165
|
+
} }, h("slot", { name: "inner-content" })));
|
|
166
|
+
}
|
|
167
|
+
render() {
|
|
168
|
+
return (h(Host, { role: "listitem", "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, h("div", { class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}` }, h("div", { class: "z-list-element-container" }, this.renderExpandableButton(), h("slot", null)), this.renderExpandedContent()), this.dividerType === ListDividerType.element && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
|
|
169
|
+
}
|
|
170
|
+
get host() { return getElement(this); }
|
|
171
|
+
};
|
|
172
|
+
ZListElement.style = stylesCss$1;
|
|
173
|
+
|
|
174
|
+
const stylesCss = ":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;line-height:1.4;letter-spacing:0.16px}: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)}";
|
|
175
|
+
|
|
176
|
+
const ZListGroup = class {
|
|
177
|
+
constructor(hostRef) {
|
|
178
|
+
registerInstance(this, hostRef);
|
|
179
|
+
/**
|
|
180
|
+
* [optional] Sets size of inside elements.
|
|
181
|
+
*/
|
|
182
|
+
this.size = ListSize.medium;
|
|
183
|
+
/**
|
|
184
|
+
* [optional] Sets the position where to insert the divider.
|
|
185
|
+
*/
|
|
186
|
+
this.dividerType = ListDividerType.none;
|
|
187
|
+
/**
|
|
188
|
+
* [optional] Sets the divider size.
|
|
189
|
+
*/
|
|
190
|
+
this.dividerSize = DividerSize.small;
|
|
191
|
+
/**
|
|
192
|
+
* [optional] Sets the divider color.
|
|
193
|
+
*/
|
|
194
|
+
this.dividerColor = "gray200";
|
|
195
|
+
}
|
|
196
|
+
componentDidLoad() {
|
|
197
|
+
const children = this.host.children;
|
|
198
|
+
for (let i = 0; i < children.length; i++) {
|
|
199
|
+
if (children.length - 1 > i) {
|
|
200
|
+
children[i].setAttribute("divider-type", this.dividerType);
|
|
201
|
+
children[i].setAttribute("divider-size", this.dividerSize);
|
|
202
|
+
children[i].setAttribute("divider-color", this.dividerColor);
|
|
203
|
+
}
|
|
204
|
+
children[i].setAttribute("size", this.size);
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
componentWillLoad() {
|
|
208
|
+
this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
|
|
209
|
+
}
|
|
210
|
+
render() {
|
|
211
|
+
return (h(Host, { role: "group" }, h("div", { class: {
|
|
212
|
+
"z-list-group-header-container": true,
|
|
213
|
+
"has-header": this.hasHeader,
|
|
214
|
+
} }, h("slot", { name: "header-title" }), this.dividerType === ListDividerType.header && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))), h("slot", null)));
|
|
215
|
+
}
|
|
216
|
+
get host() { return getElement(this); }
|
|
217
|
+
};
|
|
218
|
+
ZListGroup.style = stylesCss;
|
|
219
|
+
|
|
220
|
+
export { ZList as z_list, ZListElement as z_list_element, ZListGroup as z_list_group };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-fa9e549c.js';
|
|
2
|
+
|
|
3
|
+
const stylesCss = ":host{display:inline-block;vertical-align:top;width:255px;height:64px}img{display:block;margin:auto;width:100%;height:100%;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")}a{display:block;width:100%;height:100%}:host(.mobile){width:31px;height:40px}:host(.mobile) img{content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")}";
|
|
4
|
+
|
|
5
|
+
const ZLogo = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
}
|
|
9
|
+
render() {
|
|
10
|
+
const style = {};
|
|
11
|
+
if (this.width) {
|
|
12
|
+
style["width"] = style["max-width"] = `${this.width}px`;
|
|
13
|
+
}
|
|
14
|
+
if (this.height) {
|
|
15
|
+
style["height"] = style["max-height"] = `${this.height}px`;
|
|
16
|
+
}
|
|
17
|
+
return (h(Host, { style: style, class: { "mobile": !!this.mobileLogo } }, this.link ?
|
|
18
|
+
h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt })) :
|
|
19
|
+
h("img", { alt: this.imageAlt })));
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
ZLogo.style = stylesCss;
|
|
23
|
+
|
|
24
|
+
export { ZLogo as z_logo };
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { r as registerInstance, h } from './index-fa9e549c.js';
|
|
2
|
+
import { k as keybordKeyCodeEnum } from './index-09b57d95.js';
|
|
3
|
+
import { g as getElementTree, h as handleKeyboardSubmit, d as getClickedElement } from './utils-f0067254.js';
|
|
4
|
+
import './breakpoints-c386984e.js';
|
|
5
|
+
|
|
6
|
+
const stylesCss$1 = ":host{font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:12px;height:32px;width:inherit;letter-spacing:0.17px}a,a:visited,a:active{color:inherit;text-decoration:none}:host>a{display:block;background:var(--bg-grey-050);color:var(--text-grey-800);border-radius:var(--border-radius);border:var(--border-size-small) solid transparent;outline:none}:host>a::-moz-focus-inner{border:0}:host>a:hover,:host>a.menu-opened:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}:host>a:focus{color:var(--myz-blue);fill:var(--myz-blue);border:var(--border-size-small) solid var(--myz-blue);box-shadow:0px 0px 2px 2px var(--myz-blue-light)}:host>a:active{color:var(--myz-blue-light);fill:var(--myz-blue-light);border:var(--border-size-small) solid var(--myz-blue-light);box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.4)}div.container{display:flex;align-items:center;justify-content:space-between;height:32px;position:relative;padding:0 var(--basex1)}div.container>span.user-wrapper{display:flex}div.container>span.user-wrapper>span.user{padding:0 var(--basex1);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;width:30px}div.container>span.arrow{display:flex;justify-content:center;align-items:center}div.container>span.arrow>z-icon{transform:rotate(360deg);transition:all 200ms linear}ul{list-style:none;padding:0 calc(var(--space-unit) * 2);margin:0px}li{height:var(--basex3);display:flex;align-items:center;padding:calc(var(--space-unit) / 4) 0;width:max-content}.menu-opened{padding-bottom:calc(var(--space-unit) * 2);width:auto !important;min-width:147px;position:inherit}.menu-opened a,.menu-opened a:active,.menu-opened a:visited{color:var(--myz-blue);fill:var(--myz-blue)}.menu-opened a:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}.menu-opened>div.container{margin-bottom:var(--basex1)}.menu-opened>div.container>span.user-wrapper>span.user{width:auto}.menu-opened>div.container>span.arrow>z-icon{transform:rotate(180deg);transition:all 200ms linear}@media only screen and (min-width: 1152px){:host>a{width:147px;padding:0 calc(var(--space-unit) / 4)}:host>a.menu-opened{width:147px;padding-bottom:calc(var(--space-unit) * 2)}div.container>span.user-wrapper>span.user{width:80px}}";
|
|
7
|
+
|
|
8
|
+
const ZMenuDropdown = class {
|
|
9
|
+
constructor(hostRef) {
|
|
10
|
+
registerInstance(this, hostRef);
|
|
11
|
+
this.ismenuopen = false;
|
|
12
|
+
this.handleToggle = this.handleToggle.bind(this);
|
|
13
|
+
this.handleFocus = this.handleFocus.bind(this);
|
|
14
|
+
}
|
|
15
|
+
componentWillRender() {
|
|
16
|
+
this.linkarray =
|
|
17
|
+
typeof this.menucontent === "string"
|
|
18
|
+
? JSON.parse(this.menucontent)
|
|
19
|
+
: this.menucontent;
|
|
20
|
+
}
|
|
21
|
+
renderMenuOpen() {
|
|
22
|
+
if (this.ismenuopen) {
|
|
23
|
+
return (h("ul", null, this.linkarray.map(bean => (h("li", null, h("z-link", { htmlid: bean.id, href: bean.link, icon: bean.icon }, bean.label))))));
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
renderButtonMenu() {
|
|
27
|
+
return (h("span", { class: "arrow" }, h("z-icon", { name: "caret-down", width: 14, height: 14 })));
|
|
28
|
+
}
|
|
29
|
+
retriveMenuClass() {
|
|
30
|
+
if (this.ismenuopen)
|
|
31
|
+
return "menu-opened";
|
|
32
|
+
}
|
|
33
|
+
handleToggle() {
|
|
34
|
+
this.ismenuopen = !this.ismenuopen;
|
|
35
|
+
}
|
|
36
|
+
handleFocus(e) {
|
|
37
|
+
if (e instanceof KeyboardEvent && e.keyCode !== keybordKeyCodeEnum.TAB)
|
|
38
|
+
return;
|
|
39
|
+
const tree = getElementTree(getClickedElement());
|
|
40
|
+
const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-menu-dropdown");
|
|
41
|
+
if (!menuParent) {
|
|
42
|
+
document.removeEventListener("click", this.handleFocus);
|
|
43
|
+
document.removeEventListener("keyup", this.handleFocus);
|
|
44
|
+
this.ismenuopen = false;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
render() {
|
|
48
|
+
return (h("a", { class: this.retriveMenuClass(), role: "button", tabindex: "0", onFocus: () => {
|
|
49
|
+
document.addEventListener("click", this.handleFocus);
|
|
50
|
+
document.addEventListener("keyup", this.handleFocus);
|
|
51
|
+
}, onKeyUp: (e) => handleKeyboardSubmit(e, this.handleToggle) }, h("div", { class: "container", onClick: () => this.handleToggle() }, h("span", { class: "user-wrapper" }, h("z-icon", { name: "user-avatar", width: 14, height: 14 }), h("span", { class: "user" }, this.nomeutente)), this.renderButtonMenu()), this.renderMenuOpen()));
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
ZMenuDropdown.style = stylesCss$1;
|
|
55
|
+
|
|
56
|
+
const stylesCss = "ul{margin:0;padding:0}";
|
|
57
|
+
|
|
58
|
+
const ZMyzList = class {
|
|
59
|
+
constructor(hostRef) {
|
|
60
|
+
registerInstance(this, hostRef);
|
|
61
|
+
}
|
|
62
|
+
componentWillLoad() {
|
|
63
|
+
if (this.inputrawdata) {
|
|
64
|
+
this.parseinputrawdata(this.inputrawdata);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
parseinputrawdata(inputrawdata) {
|
|
68
|
+
this.list = [...JSON.parse(inputrawdata)];
|
|
69
|
+
}
|
|
70
|
+
oninputrawdataChange(newValue) {
|
|
71
|
+
this.parseinputrawdata(newValue);
|
|
72
|
+
}
|
|
73
|
+
render() {
|
|
74
|
+
const lastElem = this.list ? this.list.length - 1 : -1;
|
|
75
|
+
return (h("ul", null, this.list &&
|
|
76
|
+
this.list.map((bean, i) => (h("z-myz-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
|
|
77
|
+
}
|
|
78
|
+
static get watchers() { return {
|
|
79
|
+
"inputrawdata": ["oninputrawdataChange"]
|
|
80
|
+
}; }
|
|
81
|
+
};
|
|
82
|
+
ZMyzList.style = stylesCss;
|
|
83
|
+
|
|
84
|
+
export { ZMenuDropdown as z_menu_dropdown, ZMyzList as z_myz_list };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fa9e549c.js';
|
|
2
|
+
|
|
3
|
+
const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){font-family:var(--font-family-sans);font-weight:var(--font-rg);color:var(--color-text01)}:host([active]) .label,:host([open]) .label,.label:hover{border-color:var(--color-secondary01)}.label{display:flex;align-items:center;width:100%;margin:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);text-align:left;background:transparent;border-radius:0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);cursor:pointer}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{outline:none;box-shadow:var(--shadow-focus-primary)}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:currentColor}.items{display:flex;flex-direction:column;width:100%;padding:calc(var(--space-unit) * 0.5);padding-bottom:calc(var(--space-unit) * 2)}.items>::slotted([slot='item']){display:inline-flex;margin:0;padding:calc(var(--space-unit) * 0.5);font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot='item']:last-child){padding-bottom:0}.items>::slotted([slot='item']:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot='item']:hover){color:var(--color-secondary01)}";
|
|
4
|
+
|
|
5
|
+
const ZMenuSection = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.opened = createEvent(this, "opened", 7);
|
|
9
|
+
this.closed = createEvent(this, "closed", 7);
|
|
10
|
+
}
|
|
11
|
+
toggle() {
|
|
12
|
+
if (!this.hasContent) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
this.open = !this.open;
|
|
16
|
+
this.open ? this.opened.emit() : this.closed.emit();
|
|
17
|
+
}
|
|
18
|
+
/** Close the list when a click is performed outside of this Element. */
|
|
19
|
+
handleClick(ev) {
|
|
20
|
+
if (!this.open || this.hostElement.contains(ev.target)) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
this.open = false;
|
|
24
|
+
this.closed.emit();
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Check if some content slot is set.
|
|
28
|
+
*/
|
|
29
|
+
checkContent() {
|
|
30
|
+
this.hasContent = !!this.hostElement.querySelectorAll('[slot="item"]').length;
|
|
31
|
+
}
|
|
32
|
+
componentWillLoad() {
|
|
33
|
+
this.checkContent();
|
|
34
|
+
}
|
|
35
|
+
render() {
|
|
36
|
+
return h(Host, { role: "menu", open: this.open }, h("button", { class: "label", "aria-pressed": this.open ? 'true' : 'false', onClick: this.toggle.bind(this) }, h("slot", null), this.hasContent && h("z-icon", { name: this.open ? 'chevron-up' : 'chevron-down' })), this.open && h("div", { class: "items" }, h("slot", { name: "item", onSlotchange: this.checkContent.bind(this) })));
|
|
37
|
+
}
|
|
38
|
+
get hostElement() { return getElement(this); }
|
|
39
|
+
};
|
|
40
|
+
ZMenuSection.style = stylesCss;
|
|
41
|
+
|
|
42
|
+
export { ZMenuSection as z_menu_section };
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-fa9e549c.js';
|
|
2
|
+
|
|
3
|
+
const stylesCss = ":host,::slotted(*),*{box-sizing:border-box}:host{display:inline-flex;flex-direction:column;position:relative}::slotted(a){color:var(--color-text01);text-decoration:none}::slotted(*){font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{margin:0;padding:0;color:inherit;background:transparent;border:0;border-radius:0;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;box-shadow:var(--shadow-focus-primary);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5)}.menu-label .menu-label-content{display:flex;align-items:center;padding:var(--space-unit) 0;border-bottom:var(--border-size-large) solid var(--color-surface05)}:host([active]) .menu-label-content,:host([open]) .menu-label-content,.menu-label:hover .menu-label-content,.menu-label:focus-within .menu-label-content{border-color:var(--color-secondary01)}.menu-label ::slotted(*){width:100%;margin:0;appearance:none;font-size:var(--font-size-5);line-height:1.2;outline:none}.menu-label z-icon{margin-left:calc(var(--space-unit) * 4);fill:currentColor}.content{background:var(--color-surface01)}.content[hidden]{display:none}:host([floating]) .content{width:375px;max-width:100vw;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host(:not([floating])) .content{width:100%}:host([floating]) .content{position:absolute;top:100%;left:0;box-shadow:var(--shadow-2);min-width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot='header']){width:calc(var(--space-unit) * 11.25);object-fit:contain;height:auto}.header ::slotted([slot='header']:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-weight:var(--font-sb);font-size:var(--font-size-3);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot='item']){display:inline-flex;width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25;outline:none}.items>::slotted([slot='item']:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot='item']:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot='item']:hover),.items>::slotted([slot='item']:active){border-color:var(--color-secondary01)}";
|
|
4
|
+
|
|
5
|
+
const ZMenu = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.opened = createEvent(this, "opened", 7);
|
|
9
|
+
this.closed = createEvent(this, "closed", 7);
|
|
10
|
+
/**
|
|
11
|
+
* Flag to set the display mode of the list.
|
|
12
|
+
* If true, the list will be absolutely positioned under the menu label,
|
|
13
|
+
* stacked beneath it otherwise.
|
|
14
|
+
* @default false
|
|
15
|
+
*/
|
|
16
|
+
this.floating = false;
|
|
17
|
+
/**
|
|
18
|
+
* The opening state of the menu.
|
|
19
|
+
* @default false
|
|
20
|
+
*/
|
|
21
|
+
this.open = false;
|
|
22
|
+
this.toggle = this.toggle.bind(this);
|
|
23
|
+
this.checkContent = this.checkContent.bind(this);
|
|
24
|
+
this.onItemsChange = this.onItemsChange.bind(this);
|
|
25
|
+
}
|
|
26
|
+
toggle() {
|
|
27
|
+
if (!this.hasContent) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
this.open = !this.open;
|
|
31
|
+
this.open ? this.opened.emit() : this.closed.emit();
|
|
32
|
+
}
|
|
33
|
+
/** Close the floating list when a click is performed outside of this Element. */
|
|
34
|
+
handleClick(ev) {
|
|
35
|
+
if (!this.floating ||
|
|
36
|
+
!this.open ||
|
|
37
|
+
this.hostElement.contains(ev.target)) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
this.reflow();
|
|
41
|
+
this.open = false;
|
|
42
|
+
this.closed.emit();
|
|
43
|
+
}
|
|
44
|
+
onOpenChanged() {
|
|
45
|
+
if (this.open) {
|
|
46
|
+
this.reflow(true);
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
cancelAnimationFrame(this.raf);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
componentWillLoad() {
|
|
53
|
+
this.checkContent();
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Correctly set position of the floating menu in order to prevent overflow.
|
|
57
|
+
* @param live Should run the method on every refresh frame.
|
|
58
|
+
*/
|
|
59
|
+
reflow(live = false) {
|
|
60
|
+
if (this.content) {
|
|
61
|
+
const { style } = this.content;
|
|
62
|
+
const { left } = this.hostElement.getBoundingClientRect();
|
|
63
|
+
const widthPx = getComputedStyle(this.content).width;
|
|
64
|
+
const width = widthPx ? parseFloat(widthPx.replace('px', '')) : 375;
|
|
65
|
+
const safeScrollbarSpace = 30;
|
|
66
|
+
style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;
|
|
67
|
+
}
|
|
68
|
+
if (live) {
|
|
69
|
+
this.raf = requestAnimationFrame(this.reflow.bind(this, live));
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* Check if some content slot is set.
|
|
74
|
+
*/
|
|
75
|
+
checkContent() {
|
|
76
|
+
this.hasHeader = !!this.hostElement.querySelectorAll('[slot="header"]').length;
|
|
77
|
+
this.hasContent = !!this.hostElement.querySelectorAll('[slot="item"]').length || this.hasHeader;
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* Set `menuitem` role to all menu items.
|
|
81
|
+
*/
|
|
82
|
+
onItemsChange() {
|
|
83
|
+
this.checkContent();
|
|
84
|
+
const items = this.hostElement.querySelectorAll('[slot="item"]');
|
|
85
|
+
items === null || items === void 0 ? void 0 : items.forEach((item) => item.setAttribute('role', 'menuitem'));
|
|
86
|
+
}
|
|
87
|
+
renderMenuLabel() {
|
|
88
|
+
if (this.hasContent) {
|
|
89
|
+
return h("button", { class: "menu-label", "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Chiudi menù' : 'Apri menù', onClick: this.toggle }, h("div", { class: "menu-label-content" }, h("slot", null), h("z-icon", { name: this.open ? 'chevron-up' : 'chevron-down' })));
|
|
90
|
+
}
|
|
91
|
+
return h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", null)));
|
|
92
|
+
}
|
|
93
|
+
render() {
|
|
94
|
+
return [
|
|
95
|
+
this.renderMenuLabel(),
|
|
96
|
+
h("div", { class: "content", ref: (el) => { this.content = el; }, hidden: !this.open }, this.hasHeader && h("header", { class: "header" }, h("slot", { name: "header", onSlotchange: this.checkContent })), h("div", { class: "items", role: "menu" }, h("slot", { name: "item", onSlotchange: this.onItemsChange })))
|
|
97
|
+
];
|
|
98
|
+
}
|
|
99
|
+
get hostElement() { return getElement(this); }
|
|
100
|
+
static get watchers() { return {
|
|
101
|
+
"open": ["onOpenChanged"]
|
|
102
|
+
}; }
|
|
103
|
+
};
|
|
104
|
+
ZMenu.style = stylesCss;
|
|
105
|
+
|
|
106
|
+
export { ZMenu as z_menu };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-fa9e549c.js';
|
|
2
|
-
import {
|
|
2
|
+
import { h as PocketStatusEnum } from './index-09b57d95.js';
|
|
3
3
|
|
|
4
4
|
const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-pocket{width:100%}:host>z-pocket.closed{width:158px}:host>z-pocket>z-pocket-header{font-size:12px;font-weight:var(--font-sb);color:var(--color-primary01);fill:var(--color-primary01)}:host>z-pocket>z-pocket-header span.badge{background:var(--color-secondary02);color:var(--color-surface01);border-radius:50%;padding:0 calc(var(--space-unit)* 0.5);display:inline-block;margin-left:var(--space-unit)}:host>z-pocket>z-pocket-header>z-icon{margin-left:var(--space-unit)}:host>z-pocket>z-pocket-body>div.body{overflow:hidden;margin:0 var(--space-unit);padding:var(--space-unit)}:host>z-pocket.preview>z-pocket-body{position:relative}:host>z-pocket.preview>z-pocket-body>div.gradient{background-image:linear-gradient(rgba(255, 0, 0, 0), white);position:absolute;top:0;left:0;right:0;bottom:0}:host>z-pocket.open>z-pocket-body>div.body{max-height:calc(100vh - 166px);overflow:auto;scrollbar-width:none}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>z-pocket{width:768px;margin:0 calc((100% - 768px) / 2)}:host>z-pocket.closed{margin:0 calc((100% - 158px) / 2)}:host>z-pocket.open>z-pocket-body>div.body{max-height:326px}}@media only screen and (min-width: 1152px){:host>z-pocket.open>z-pocket-body>div.body{scrollbar-width:thin;scrollbar-color:var(--color-primary01) var(--color-surface03)}:host ::-webkit-scrollbar{background:linear-gradient(\n 90deg,\n var(--color-surface01) 2px,\n var(--color-surface03) 4px,\n var(--color-surface01) 8px\n );border-radius:var(--radius-base);width:10px}:host ::-webkit-scrollbar-thumb{background-color:var(--color-primary01);border-radius:var(--radius-base);width:var(--space-unit)}}";
|
|
5
5
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-fa9e549c.js';
|
|
2
|
-
import {
|
|
2
|
+
import { i as InputStatusEnum, a as ButtonVariantEnum } from './index-09b57d95.js';
|
|
3
3
|
|
|
4
4
|
const stylesCss = ".sc-z-modal-login-h{font-family:var(--dashboard-font);font-weight:var(--font-rg)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login{color:var(--text-grey-800);padding:calc(var(--space-unit) * 4) calc(var(--space-unit) * 2)\n calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch}z-button.sc-z-modal-login,z-input.sc-z-modal-login,.sc-z-modal-login-s>z-button,.sc-z-modal-login-s>z-input{display:inline-block;width:100%}z-link.sc-z-modal-login,.sc-z-modal-login-s>z-link{font-size:12px}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch}div.wrapper>form>div.username.sc-z-modal-login-s>z-input,div.wrapper>form>div.password.sc-z-modal-login-s>z-input,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.username.sc-z-modal-login z-input.sc-z-modal-login,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.password.sc-z-modal-login z-input.sc-z-modal-login{margin-bottom:var(--space-unit)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>z-link.forget.sc-z-modal-login{font-size:12px;align-self:flex-end}div.wrapper>form>div.login.sc-z-modal-login-s>z-button,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.login.sc-z-modal-login z-button.sc-z-modal-login{margin:calc(var(--space-unit) * 3) 0;align-self:flex-start}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>hr.sc-z-modal-login{width:100%;margin-bottom:calc(var(--space-unit) * 3);border:none;border-top:var(--border-size-medium) solid var(--bg-grey-200);margin-block-start:unset}div.wrapper>div.signup.sc-z-modal-login-s>z-button,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.signup.sc-z-modal-login z-button.sc-z-modal-login{display:inline-block;margin:calc(var(--space-unit) * 2) 0}.sc-z-modal-login-h div.providers.sc-z-modal-login{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:calc(var(--space-unit) * 2) 0px}slot-fb[name=\"provider\"].sc-z-modal-login{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:calc(var(--space-unit) * 2) 0px}.sc-z-modal-login-h div.providers.sc-z-modal-login>z-body.sc-z-modal-login{padding-top:calc(var(--space-unit) * 2)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.providers.sc-z-modal-login .zd.sc-z-modal-login{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;align-content:center}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.providers.sc-z-modal-login .zd.sc-z-modal-login>svg.sc-z-modal-login{margin-right:var(--space-unit)}@media only screen and (min-width: 768px){z-button.sc-z-modal-login,.sc-z-modal-login-s>z-button{width:initial}.sc-z-modal-login-h div.wrapper.sc-z-modal-login{width:396px;padding:calc(var(--space-unit) * 3)}.sc-z-modal-login-h div.providers.sc-z-modal-login{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:var(--space-unit);justify-content:center;align-items:center}.sc-z-modal-login-h div.providers.sc-z-modal-login>z-body.sc-z-modal-login{grid-column-start:1;grid-column-end:3;padding-bottom:var(--space-unit)}.sc-z-modal-login-s>[slot=\"provider\"]{width:100%}slot-fb[name=\"provider\"].sc-z-modal-login{grid-column-start:1;grid-column-end:3;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:var(--space-unit);justify-content:center;align-items:center}slot-fb[name=\"provider\"].sc-z-modal-login>*.sc-z-modal-login{width:100%}}@media only screen and (min-width: 1366px){.sc-z-modal-login-h div.wrapper.sc-z-modal-login{width:477px;padding:calc(var(--space-unit) * 4)}}";
|
|
5
5
|
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { r as registerInstance, c as createEvent, h } from './index-fa9e549c.js';
|
|
2
|
+
|
|
3
|
+
const stylesCss = ":host{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;flex-direction:row;justify-content:center;width:100%;height:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.modal-background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.modal-container{display:flex;flex-direction:column;z-index:1010;width:100%;height:100vh;overflow:-moz-scrollbars-none;overflow:hidden}.modal-container>header{display:flex;flex-wrap:nowrap;flex-direction:row;align-items:flex-start;justify-content:flex-start;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);background:var(--color-surface02)}.modal-container>header button{margin:0;padding:0;border:none;background:transparent;cursor:pointer;margin-left:auto}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.5);--z-icon-height:calc(var(--space-unit) * 2.5);display:flex;fill:var(--color-icon01)}.modal-container>header>div{display:flex;flex-direction:column;width:100%;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header h2{margin:0;padding:0;font-weight:var(--font-rg);color:var(--color-text01)}.modal-container>header h1{font-size:var(--font-size-5);line-height:1.4;letter-spacing:0}.modal-container>header h2{font-size:var(--font-size-3);line-height:1.5;letter-spacing:0}.modal-container>header>div *:empty{display:none}.modal-container>header h1+h2{margin-top:calc(var(--space-unit) * 0.5)}.modal-container>.modal-content{flex:1 auto;background:var(--color-surface01);overflow:auto;overflow-x:hidden}.modal-container .modal-content::-webkit-scrollbar{background:linear-gradient(\n to right,\n transparent 0 3px,\n var(--gray200) 3px 7px,\n transparent 7px 10px\n );width:10px;border-radius:var(--border-radius)}.modal-container .modal-content::-webkit-scrollbar-track{background-color:transparent}.modal-container .modal-content::-webkit-scrollbar-thumb{background-color:var(--color-primary01);border-radius:var(--border-radius);width:10px}.modal-container .modal-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container .modal-content{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-container{position:fixed;top:calc(var(--space-unit) * 6);left:50%;transform:translateX(-50%);width:auto;height:auto;min-width:calc(var(--space-unit) * 40);min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius)}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 768px) and (max-width: 1151px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 4)}.modal-container>header h1{font-size:var(--font-size-6);line-height:1.33;letter-spacing:0}.modal-container>header h2{font-size:var(--font-size-4);line-height:1.5;letter-spacing:0}.modal-container>header h1+h2{margin-top:0}}";
|
|
4
|
+
|
|
5
|
+
const ZModal = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.modalClose = createEvent(this, "modalClose", 7);
|
|
9
|
+
this.modalHeaderActive = createEvent(this, "modalHeaderActive", 7);
|
|
10
|
+
this.modalBackgroundClick = createEvent(this, "modalBackgroundClick", 7);
|
|
11
|
+
/** aria-label for close button (optional) */
|
|
12
|
+
this.closeButtonLabel = "close modal";
|
|
13
|
+
}
|
|
14
|
+
emitModalClose() {
|
|
15
|
+
this.modalClose.emit({ modalid: this.modalid });
|
|
16
|
+
}
|
|
17
|
+
emitModalHeaderActive() {
|
|
18
|
+
this.modalHeaderActive.emit({ modalid: this.modalid });
|
|
19
|
+
}
|
|
20
|
+
emitBackgroundClick() {
|
|
21
|
+
this.modalBackgroundClick.emit({ modalid: this.modalid });
|
|
22
|
+
}
|
|
23
|
+
render() {
|
|
24
|
+
return [
|
|
25
|
+
h("div", { class: "modal-container", id: this.modalid, role: "dialog" }, h("header", { onClick: this.emitModalHeaderActive.bind(this) }, h("div", null, this.modaltitle && h("h1", null, this.modaltitle), this.modalsubtitle && h("h2", null, this.modalsubtitle)), h("slot", { name: "modalCloseButton" }, h("button", { "aria-label": this.closeButtonLabel, onClick: this.emitModalClose.bind(this) }, h("z-icon", { name: "multiply-circle-filled" })))), h("div", { class: "modal-content" }, h("slot", { name: "modalContent" }))),
|
|
26
|
+
h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: this.emitBackgroundClick.bind(this) })
|
|
27
|
+
];
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
ZModal.style = stylesCss;
|
|
31
|
+
|
|
32
|
+
export { ZModal as z_modal };
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { r as registerInstance, c as createEvent, h } from './index-fa9e549c.js';
|
|
2
|
+
import { j as AlertTypesEnum } from './index-09b57d95.js';
|
|
3
|
+
|
|
4
|
+
const stylesCss = ":host{position:absolute;font-family:var(--font-family-sans);font-weight:var(--font-rg);width:100%;top:0px;left:0px;z-index:2}:host>z-alert{height:calc(var(--space-unit) * 6)}.relativeContainer{position:relative;display:grid;grid-template-columns:18px auto 46px;grid-template-rows:1fr;grid-column-gap:var(--space-unit);align-items:center;padding:0;outline:none}.relativeContainer::-moz-focus-inner{border:0}.alert-external-wrapper.removeAlert{border:var(--border-size-medium) solid var(--color-surface02);border-top:none}:host div.addAlert{background:var(--color-success-inverse)}:host div.removeAlert{background:var(--color-warning-inverse)}:host div>.contentText{color:var(--color-surface05);font-size:14px;letter-spacing:0.16px;line-height:20px}:host div>.contentAction{color:var(--color-primary01);font-size:12px;font-weight:var(--font-sb);height:20px;letter-spacing:0.32px;line-height:20px;cursor:pointer}:host div>z-icon{justify-self:center}";
|
|
5
|
+
|
|
6
|
+
const ZMyzCardAlert = class {
|
|
7
|
+
constructor(hostRef) {
|
|
8
|
+
registerInstance(this, hostRef);
|
|
9
|
+
this.undoAction = createEvent(this, "undoAction", 7);
|
|
10
|
+
}
|
|
11
|
+
emitUndoAction() {
|
|
12
|
+
this.undoAction.emit({ actionType: this.type });
|
|
13
|
+
}
|
|
14
|
+
handleSpaceKeyPress(e) {
|
|
15
|
+
if (e.keyCode == 32 || e.keyCode == 13) {
|
|
16
|
+
e.preventDefault();
|
|
17
|
+
this.emitUndoAction();
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
handleActionButtonClick(e) {
|
|
21
|
+
e.preventDefault();
|
|
22
|
+
this.emitUndoAction();
|
|
23
|
+
}
|
|
24
|
+
retrieveClass() {
|
|
25
|
+
let className = "";
|
|
26
|
+
switch (this.type) {
|
|
27
|
+
case "add":
|
|
28
|
+
className = "addAlert";
|
|
29
|
+
break;
|
|
30
|
+
case "remove":
|
|
31
|
+
className = "removeAlert";
|
|
32
|
+
break;
|
|
33
|
+
default:
|
|
34
|
+
className = "";
|
|
35
|
+
break;
|
|
36
|
+
}
|
|
37
|
+
return className;
|
|
38
|
+
}
|
|
39
|
+
getAlertType() {
|
|
40
|
+
switch (this.type) {
|
|
41
|
+
case "add":
|
|
42
|
+
return AlertTypesEnum.success;
|
|
43
|
+
case "remove":
|
|
44
|
+
return AlertTypesEnum.warning;
|
|
45
|
+
default:
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
render() {
|
|
50
|
+
return (h("div", { class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { type: this.getAlertType() }, h("div", { class: "relativeContainer" }, h("z-icon", { name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { class: "contentText" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { role: "button", tabindex: "0", class: "contentAction", onClick: (e) => {
|
|
51
|
+
this.handleActionButtonClick(e);
|
|
52
|
+
}, onKeyPress: (e) => {
|
|
53
|
+
this.handleSpaceKeyPress(e);
|
|
54
|
+
} }, this.actiontext))))));
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
ZMyzCardAlert.style = stylesCss;
|
|
58
|
+
|
|
59
|
+
export { ZMyzCardAlert as z_myz_card_alert };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h } from './index-fa9e549c.js';
|
|
2
|
-
import {
|
|
2
|
+
import { a as ButtonVariantEnum } from './index-09b57d95.js';
|
|
3
3
|
|
|
4
4
|
const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:relative;height:522px;width:100%;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out}:host>div .content{position:relative;height:522px;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out;z-index:2}:host>div .content.flipped{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);margin-top:-2px}:host>div .front,:host>div .back{position:absolute;height:100%;width:100%;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host>div .front{z-index:2;top:0;left:0;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}:host>div .front z-button{position:absolute;z-index:3;top:calc(var(--space-unit) * 0.5);left:calc(-1 * var(--space-unit))}:host>div .back{padding:0 var(--space-unit);margin-left:calc(-1 * var(--space-unit));z-index:1;top:0;left:0;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);display:flex;justify-content:center}.hideInfo{display:none}";
|
|
5
5
|
|