@zanichelli/albe-web-components 6.10.0-RC1 → 6.10.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 +49 -0
- package/dist/cjs/index-e3299e0a.js +14 -6
- package/dist/cjs/index.cjs.js +6 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/{z-app-header_3.cjs.entry.js → z-app-header_2.cjs.entry.js} +4 -80
- package/dist/cjs/z-body.cjs.entry.js +18 -0
- package/dist/cjs/z-combobox.cjs.entry.js +9 -7
- package/dist/cjs/z-dragdrop-area_2.cjs.entry.js +77 -8
- package/dist/cjs/z-file-upload.cjs.entry.js +11 -11
- package/dist/cjs/z-heading.cjs.entry.js +18 -0
- package/dist/cjs/z-input_2.cjs.entry.js +19 -12
- package/dist/cjs/z-myz-list-item.cjs.entry.js +1 -1
- package/dist/cjs/z-select.cjs.entry.js +16 -8
- package/dist/cjs/z-table-empty-box.cjs.entry.js +1 -1
- package/dist/cjs/z-table.cjs.entry.js +1 -1
- package/dist/cjs/{z-body_2.cjs.entry.js → z-typography.cjs.entry.js} +0 -12
- package/dist/collection/beans/index.js +1 -0
- package/dist/collection/collection-manifest.json +3 -3
- package/dist/collection/components/file-upload/z-dragdrop-area/index.js +1 -1
- package/dist/collection/components/file-upload/z-file-upload/index.js +10 -10
- package/dist/collection/components/file-upload/z-file-upload/styles.css +2 -2
- package/dist/collection/components/inputs/z-combobox/index.js +32 -7
- package/dist/collection/components/inputs/z-combobox/styles.css +31 -3
- package/dist/collection/components/inputs/z-input/index.js +42 -11
- package/dist/collection/components/inputs/z-input/styles.css +59 -0
- package/dist/collection/components/inputs/z-input-message/styles.css +15 -0
- package/dist/collection/components/inputs/z-select/index.js +39 -8
- package/dist/collection/components/inputs/z-select/styles.css +9 -0
- package/dist/collection/components/modal/z-modal/index.js +50 -36
- package/dist/collection/components/modal/z-modal/styles.css +5 -1
- package/dist/collection/components/z-table/z-table/index.js +1 -1
- package/dist/collection/components/z-table/z-table-empty-box/index.js +1 -1
- package/dist/collection/{components → deprecated}/typography/z-body/index.js +0 -0
- package/dist/collection/{components → deprecated}/typography/z-heading/index.js +0 -0
- package/dist/collection/{components → deprecated}/typography/z-typography/index.js +0 -0
- package/dist/collection/{components → deprecated}/typography/z-typography/styles.css +0 -0
- package/dist/collection/snowflakes/myz/list/z-myz-list-item/styles.css +19 -0
- package/dist/esm/index-a2ca4b97.js +14 -6
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/polyfills/css-shim.js +0 -0
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/{z-app-header_3.entry.js → z-app-header_2.entry.js} +5 -80
- package/dist/esm/z-body.entry.js +14 -0
- package/dist/esm/z-combobox.entry.js +10 -8
- package/dist/esm/z-dragdrop-area_2.entry.js +78 -9
- package/dist/esm/z-file-upload.entry.js +11 -11
- package/dist/esm/z-heading.entry.js +14 -0
- package/dist/esm/z-input_2.entry.js +20 -13
- package/dist/esm/z-myz-list-item.entry.js +1 -1
- package/dist/esm/z-select.entry.js +17 -9
- package/dist/esm/z-table-empty-box.entry.js +1 -1
- package/dist/esm/z-table.entry.js +1 -1
- package/dist/esm/{z-body_2.entry.js → z-typography.entry.js} +1 -12
- package/dist/types/beans/index.d.ts +1 -0
- package/dist/types/components/buttons/z-button/index.d.ts +0 -0
- package/dist/types/components/buttons/z-button-sort/index.d.ts +0 -0
- package/dist/types/components/buttons/z-chip/index.d.ts +0 -0
- package/dist/types/components/buttons/z-toggle-button/index.d.ts +0 -0
- package/dist/types/components/buttons/z-toggle-switch/index.d.ts +0 -0
- package/dist/types/components/date-picker/utils.d.ts +0 -0
- package/dist/types/components/date-picker/z-date-picker/index.d.ts +0 -0
- package/dist/types/components/date-picker/z-range-picker/index.d.ts +0 -0
- package/dist/types/components/file-upload/z-dragdrop-area/index.d.ts +0 -0
- package/dist/types/components/file-upload/z-file/index.d.ts +0 -0
- package/dist/types/components/file-upload/z-file-upload/index.d.ts +0 -0
- package/dist/types/components/icons/icons.d.ts +0 -0
- package/dist/types/components/icons/z-icon/index.d.ts +0 -0
- package/dist/types/components/index.d.ts +0 -0
- package/dist/types/components/indicators/z-stepper/index.d.ts +0 -0
- package/dist/types/components/indicators/z-stepper-item/index.d.ts +0 -0
- package/dist/types/components/inputs/z-combobox/index.d.ts +3 -1
- package/dist/types/components/inputs/z-input/index.d.ts +3 -1
- package/dist/types/components/inputs/z-input-message/index.d.ts +0 -0
- package/dist/types/components/inputs/z-searchbar/index.d.ts +0 -0
- package/dist/types/components/inputs/z-select/index.d.ts +4 -1
- package/dist/types/components/list/z-list/index.d.ts +0 -0
- package/dist/types/components/list/z-list-element/index.d.ts +0 -0
- package/dist/types/components/list/z-list-group/index.d.ts +0 -0
- package/dist/types/components/list/z-toast-notification-list/index.d.ts +0 -0
- package/dist/types/components/logo/z-logo/index.d.ts +0 -0
- package/dist/types/components/modal/z-modal/index.d.ts +15 -12
- package/dist/types/components/navigation/tabs/z-navigation-tab/index.d.ts +0 -0
- package/dist/types/components/navigation/tabs/z-navigation-tab-link/index.d.ts +0 -0
- package/dist/types/components/navigation/tabs/z-navigation-tabs/index.d.ts +0 -0
- package/dist/types/components/navigation/z-app-header/index.d.ts +0 -0
- package/dist/types/components/navigation/z-app-switcher/index.d.ts +0 -0
- package/dist/types/components/navigation/z-link/index.d.ts +0 -0
- package/dist/types/components/navigation/z-menu/index.d.ts +0 -0
- package/dist/types/components/navigation/z-menu-section/index.d.ts +0 -0
- package/dist/types/components/notification/z-info-box/index.d.ts +0 -0
- package/dist/types/components/notification/z-notification/index.d.ts +0 -0
- package/dist/types/components/notification/z-toast-notification/index.d.ts +0 -0
- package/dist/types/components/notification/z-tooltip/index.d.ts +0 -0
- package/dist/types/components/panel/z-panel-elem/index.d.ts +0 -0
- package/dist/types/components/z-anchor-navigation/index.d.ts +0 -0
- package/dist/types/components/z-aria-alert/index.d.ts +0 -0
- package/dist/types/components/z-avatar/index.d.ts +0 -0
- package/dist/types/components/z-card/index.d.ts +0 -0
- package/dist/types/components/z-carousel/index.d.ts +0 -0
- package/dist/types/components/z-contextual-menu/index.d.ts +0 -0
- package/dist/types/components/z-cover-hero/index.d.ts +0 -0
- package/dist/types/components/z-divider/index.d.ts +0 -0
- package/dist/types/components/z-ghost-loading/index.d.ts +0 -0
- package/dist/types/components/z-info-reveal/index.d.ts +0 -0
- package/dist/types/components/z-offcanvas/index.d.ts +0 -0
- package/dist/types/components/z-pagination/index.d.ts +0 -0
- package/dist/types/components/z-popover/index.d.ts +0 -0
- package/dist/types/components/z-section-title/index.d.ts +0 -0
- package/dist/types/components/z-skip-to-content/index.d.ts +0 -0
- package/dist/types/components/z-table/z-table/index.d.ts +0 -0
- package/dist/types/components/z-table/z-table-body/index.d.ts +0 -0
- package/dist/types/components/z-table/z-table-cell/index.d.ts +0 -0
- package/dist/types/components/z-table/z-table-empty-box/index.d.ts +0 -0
- package/dist/types/components/z-table/z-table-expanded-row/index.d.ts +0 -0
- package/dist/types/components/z-table/z-table-footer/index.d.ts +0 -0
- package/dist/types/components/z-table/z-table-head/index.d.ts +0 -0
- package/dist/types/components/z-table/z-table-header/index.d.ts +0 -0
- package/dist/types/components/z-table/z-table-header-row/index.d.ts +0 -0
- package/dist/types/components/z-table/z-table-row/index.d.ts +0 -0
- package/dist/types/components/z-table/z-table-sticky-footer/index.d.ts +0 -0
- package/dist/types/components/z-tag/index.d.ts +0 -0
- package/dist/types/components/z-visually-hidden/index.d.ts +0 -0
- package/dist/types/components.d.ts +31 -7
- package/dist/types/constants/breakpoints.d.ts +0 -0
- package/dist/types/constants/icons.d.ts +0 -0
- package/dist/types/{components → deprecated}/typography/z-body/index.d.ts +0 -0
- package/dist/types/{components → deprecated}/typography/z-heading/index.d.ts +0 -0
- package/dist/types/{components → deprecated}/typography/z-typography/index.d.ts +0 -0
- package/dist/types/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/card/z-myz-card/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/card/z-myz-card-alert/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/card/z-myz-card-body/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/card/z-myz-card-cover/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/card/z-myz-card-dictionary/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/card/z-myz-card-footer/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/card/z-myz-card-footer-sections/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/card/z-myz-card-header/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/card/z-myz-card-icon/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/card/z-myz-card-info/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/card/z-myz-card-list/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/list/z-myz-list/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/list/z-myz-list-item/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/pocket/z-messages-pocket/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/pocket/z-pocket/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/pocket/z-pocket-body/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/pocket/z-pocket-header/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/pocket/z-pocket-message/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/z-alert/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/z-otp/index.d.ts +0 -0
- package/dist/types/snowflakes/myz/z-slideshow/index.d.ts +0 -0
- package/dist/types/stencil-public-runtime.d.ts +0 -0
- package/dist/types/utils/utils.d.ts +0 -0
- package/dist/web-components-library/index.esm.js +1 -1
- package/dist/web-components-library/p-3860061a.entry.js +1 -0
- package/dist/web-components-library/p-4367f978.entry.js +1 -0
- package/dist/web-components-library/p-46fd0ec3.entry.js +1 -0
- package/dist/web-components-library/p-488d2818.entry.js +1 -0
- package/dist/web-components-library/p-52b084fb.entry.js +1 -0
- package/dist/web-components-library/p-5ac6109d.entry.js +1 -0
- package/dist/web-components-library/p-6ea7428a.entry.js +1 -0
- package/dist/web-components-library/p-a7670317.entry.js +1 -0
- package/dist/web-components-library/p-b3c4c5f7.entry.js +1 -0
- package/dist/web-components-library/p-d9a6a204.entry.js +1 -0
- package/dist/web-components-library/p-e78ce8ec.entry.js +1 -0
- package/dist/web-components-library/p-edd53386.entry.js +1 -0
- package/dist/web-components-library/web-components-library.css +0 -0
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/loader/cdn.js +0 -0
- package/loader/index.cjs.js +0 -0
- package/loader/index.d.ts +0 -0
- package/loader/index.es2017.js +0 -0
- package/loader/index.js +0 -0
- package/loader/package.json +0 -0
- package/package.json +1 -1
- package/www/build/index.esm.js +1 -1
- package/www/build/p-32511690.css +1636 -0
- package/www/build/p-3860061a.entry.js +1 -0
- package/www/build/p-4367f978.entry.js +1 -0
- package/www/build/p-46fd0ec3.entry.js +1 -0
- package/www/build/p-488d2818.entry.js +1 -0
- package/www/build/p-50050d26.js +129 -0
- package/www/build/p-52b084fb.entry.js +1 -0
- package/www/build/p-5ac6109d.entry.js +1 -0
- package/www/build/p-6ea7428a.entry.js +1 -0
- package/www/build/p-a7670317.entry.js +1 -0
- package/www/build/p-b3c4c5f7.entry.js +1 -0
- package/www/build/p-d9a6a204.entry.js +1 -0
- package/www/build/p-e78ce8ec.entry.js +1 -0
- package/www/build/p-edd53386.entry.js +1 -0
- package/www/build/web-components-library.css +0 -0
- package/www/build/web-components-library.esm.js +1 -1
- package/www/build/web-components-library.js +0 -0
- package/www/host.config.json +0 -0
- package/www/index.html +1 -24
- package/dist/web-components-library/p-2e5f7ff1.entry.js +0 -1
- package/dist/web-components-library/p-5c62387a.entry.js +0 -1
- package/dist/web-components-library/p-6acb48e3.entry.js +0 -1
- package/dist/web-components-library/p-735bdfa3.entry.js +0 -1
- package/dist/web-components-library/p-7b3b99ee.entry.js +0 -1
- package/dist/web-components-library/p-95b8f109.entry.js +0 -1
- package/dist/web-components-library/p-a79d1412.entry.js +0 -1
- package/dist/web-components-library/p-b17981a4.entry.js +0 -1
- package/dist/web-components-library/p-bb92c90f.entry.js +0 -1
- package/dist/web-components-library/p-ff27c534.entry.js +0 -1
- package/www/build/p-0d36d640.js +0 -1
- package/www/build/p-275801c6.css +0 -1
- package/www/build/p-2e5f7ff1.entry.js +0 -1
- package/www/build/p-5c62387a.entry.js +0 -1
- package/www/build/p-6acb48e3.entry.js +0 -1
- package/www/build/p-735bdfa3.entry.js +0 -1
- package/www/build/p-7b3b99ee.entry.js +0 -1
- package/www/build/p-95b8f109.entry.js +0 -1
- package/www/build/p-a79d1412.entry.js +0 -1
- package/www/build/p-b17981a4.entry.js +0 -1
- package/www/build/p-bb92c90f.entry.js +0 -1
- package/www/build/p-ff27c534.entry.js +0 -1
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
|
|
2
2
|
import { I as ICONS } from './icons-85e529a3.js';
|
|
3
|
-
import { e as KeyboardCode } from './index-968a240f.js';
|
|
4
3
|
|
|
5
|
-
const stylesCss$
|
|
4
|
+
const stylesCss$1 = ":host{--app-header-content-max-width:100%;--app-header-height:auto;--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-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-white);--app-header-stucked-bg:var(--color-white);--app-header-text-color:var(--gray800);--app-header-stucked-text-color:var(--gray800);display:block;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);height:var(--app-header-height);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;justify-content:flex-start;padding:var(--grid-margin);margin:0 auto;background:var(--app-header-bg)}:host(:empty) .heading-panel{padding:0}.heading-title{display:flex;max-width:100%;flex-direction:row;align-items:center}:host(:not([menu-length=\"0\"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 1.5))}.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);padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title,.heading-stuck .heading-title>*,.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]){display:block;overflow:hidden;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.heading-stuck .heading-title>*,::slotted([slot=\"title\"]),::slotted([slot=\"stucked-title\"]){margin:0;font-family:\"IBM Plex Serif\", serif;font-size:var(--app-header-typography-3-size);font-weight:700;letter-spacing:var(--app-header-typography-3-tracking)}::slotted([slot=\"title\"]){line-height:1}::slotted([slot=\"subtitle\"]){margin:var(--space-unit) 0 0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;font-weight:500;line-height:1.2}.heading-container{position:relative;z-index:1;display:flex;max-width:100%;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-right:auto}.menu-container{display:none;flex-flow:row wrap;align-items:baseline}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted(*:not(:last-of-type)){margin-right:calc(var(--space-unit) * 4.5)}.drawer-trigger{padding:0;border:0;margin:0 calc(var(--space-unit) * 1.5) 0 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}.drawer-container{position:fixed;z-index:100;top:var(--app-header-top-offset);left:0;width:100%;height:100%;pointer-events:none}.drawer-container .drawer-overlay{position:absolute;z-index:1;top:0;left:0;display:block;width:100%;height:100%;background:var(--gray900);opacity:0;pointer-events:none;transition:opacity 400ms ease-out}.drawer-panel{position:absolute;z-index:2;top:0;left:0;display:flex;width:375px;max-width:100%;height:100%;flex-direction:column;align-items:flex-start;padding:calc(var(--space-unit) * 2) var(--space-unit);background:var(--color-white);color:var(--gray800);pointer-events:none;transform:translate3d(-100%, 0, 0);transition:transform 400ms ease-out}.drawer-content{display:flex;overflow:auto;width:100%;flex:1 auto;flex-direction:column;padding:calc(var(--space-unit) * 0.5) var(--space-unit)}.drawer-content::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-track{background-color:transparent}.drawer-content::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.drawer-content ::slotted(z-menu){width:100%}.drawer-content ::slotted(z-menu:not(:last-of-type)){margin-bottom:calc(var(--space-unit) * 2.5)}.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:0 0 calc(var(--space-unit) * 2.5) var(--space-unit);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)}:host([drawer-open]) .drawer-container .drawer-overlay{opacity:0.7;pointer-events:all}:host([drawer-open]) .drawer-container .drawer-panel{pointer-events:all;transform:none}.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:not([open])){--color-surface05: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(:not([flow=\"offcanvas\"])) .heading-subtitle{padding-left:0}:host(:not([flow=\"offcanvas\"])) .menu-container{display:flex}:host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger{display:none}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 3)}::slotted([slot=\"title\"]){font-size:var(--app-header-typography-6-size);letter-spacing:var(--app-header-typography-6-tracking)}::slotted([slot=\"subtitle\"]){margin-top:calc(var(--space-unit) * 1.5)}}@media (min-width: 1152px){:host(:not([flow=\"stack\"])) .heading-panel{flex-flow:row wrap}::slotted([slot=\"title\"]){margin-right:var(--grid-gutter);font-size:var(--app-header-typography-7-size);letter-spacing:var(--app-header-typography-7-tracking)}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 2)}.menu-container{margin-top:var(--space-unit)}}@media (min-width: 1366px){::slotted([slot=\"title\"]){font-size:var(--app-header-typography-9-size);letter-spacing:var(--app-header-typography-9-tracking)}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-container:not(:last-child){margin-bottom:0}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
|
|
6
5
|
|
|
7
6
|
const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
|
|
8
7
|
const ZAppHeader = class {
|
|
@@ -126,9 +125,9 @@ const ZAppHeader = class {
|
|
|
126
125
|
"drawerOpen": ["setMenuFloatingMode"]
|
|
127
126
|
}; }
|
|
128
127
|
};
|
|
129
|
-
ZAppHeader.style = stylesCss$
|
|
128
|
+
ZAppHeader.style = stylesCss$1;
|
|
130
129
|
|
|
131
|
-
const stylesCss
|
|
130
|
+
const stylesCss = ":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)}";
|
|
132
131
|
|
|
133
132
|
const ZIcon = class {
|
|
134
133
|
constructor(hostRef) {
|
|
@@ -144,80 +143,6 @@ const ZIcon = class {
|
|
|
144
143
|
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]))));
|
|
145
144
|
}
|
|
146
145
|
};
|
|
147
|
-
ZIcon.style = stylesCss
|
|
146
|
+
ZIcon.style = stylesCss;
|
|
148
147
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
const ZModal = class {
|
|
152
|
-
constructor(hostRef) {
|
|
153
|
-
registerInstance(this, hostRef);
|
|
154
|
-
this.modalClose = createEvent(this, "modalClose", 7);
|
|
155
|
-
this.modalHeaderActive = createEvent(this, "modalHeaderActive", 7);
|
|
156
|
-
this.modalBackgroundClick = createEvent(this, "modalBackgroundClick", 7);
|
|
157
|
-
/** aria-label for close button (optional) */
|
|
158
|
-
this.closeButtonLabel = "chiudi modale";
|
|
159
|
-
/** add role "alertdialog" to dialog (optional, default is false) */
|
|
160
|
-
this.alertdialog = false;
|
|
161
|
-
this.shift = false;
|
|
162
|
-
}
|
|
163
|
-
emitModalClose() {
|
|
164
|
-
this.modalClose.emit({ modalid: this.modalid });
|
|
165
|
-
}
|
|
166
|
-
emitModalHeaderActive() {
|
|
167
|
-
this.modalHeaderActive.emit({ modalid: this.modalid });
|
|
168
|
-
}
|
|
169
|
-
emitBackgroundClick() {
|
|
170
|
-
this.modalBackgroundClick.emit({ modalid: this.modalid });
|
|
171
|
-
}
|
|
172
|
-
/** open modal */
|
|
173
|
-
async openModal() {
|
|
174
|
-
this.open();
|
|
175
|
-
}
|
|
176
|
-
/** close modal */
|
|
177
|
-
async closeModal() {
|
|
178
|
-
this.close();
|
|
179
|
-
}
|
|
180
|
-
componentDidLoad() {
|
|
181
|
-
this.open();
|
|
182
|
-
}
|
|
183
|
-
open() {
|
|
184
|
-
var _a;
|
|
185
|
-
(_a = this.dialog) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
186
|
-
}
|
|
187
|
-
close() {
|
|
188
|
-
var _a;
|
|
189
|
-
(_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
|
|
190
|
-
}
|
|
191
|
-
handleForwardNav(e) {
|
|
192
|
-
var _a;
|
|
193
|
-
if (e.code !== KeyboardCode.TAB || this.shift) {
|
|
194
|
-
return;
|
|
195
|
-
}
|
|
196
|
-
if (e.target === this.modalEnd) {
|
|
197
|
-
(_a = this.closeButton) === null || _a === void 0 ? void 0 : _a.focus();
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
handleBackwardsNav(e) {
|
|
201
|
-
if (e.code !== KeyboardCode.TAB || !this.shift) {
|
|
202
|
-
return;
|
|
203
|
-
}
|
|
204
|
-
if (e.target === this.closeButton) {
|
|
205
|
-
this.modalEnd.focus();
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
render() {
|
|
209
|
-
console.log("render modal - albe pack");
|
|
210
|
-
return (h(Host, null, h("dialog", { "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onKeyDown: (e) => {
|
|
211
|
-
this.shift = !!e.shiftKey;
|
|
212
|
-
this.handleBackwardsNav(e);
|
|
213
|
-
}, onKeyUp: (e) => {
|
|
214
|
-
this.handleForwardNav(e);
|
|
215
|
-
} }, h("div", { class: "modal-container", id: this.modalid }, h("header", { onClick: this.emitModalHeaderActive.bind(this) }, h("div", null, this.modaltitle && h("h1", { id: "modal-title" }, this.modaltitle), this.modalsubtitle && h("h2", { id: "modal-subtitle" }, this.modalsubtitle)), h("slot", { name: "modalCloseButton" }, h("button", { "aria-label": this.closeButtonLabel, onClick: () => this.close(), ref: (el) => (this.closeButton = el) }, h("z-icon", { name: "multiply-circle-filled" })))), h("div", { class: "modal-content", id: "modal-content" }, h("slot", { name: "modalContent" }), h("span", { tabindex: 0, class: "modal-end", ref: (el) => (this.modalEnd = el) }))), h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
|
|
216
|
-
this.emitBackgroundClick();
|
|
217
|
-
this.close();
|
|
218
|
-
} }))));
|
|
219
|
-
}
|
|
220
|
-
};
|
|
221
|
-
ZModal.style = stylesCss;
|
|
222
|
-
|
|
223
|
-
export { ZAppHeader as z_app_header, ZIcon as z_icon, ZModal as z_modal };
|
|
148
|
+
export { ZAppHeader as z_app_header, ZIcon as z_icon };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { r as registerInstance, h } from './index-a2ca4b97.js';
|
|
2
|
+
|
|
3
|
+
const ZBody = class {
|
|
4
|
+
constructor(hostRef) {
|
|
5
|
+
registerInstance(this, hostRef);
|
|
6
|
+
/** Font weight variant */
|
|
7
|
+
this.variant = "regular";
|
|
8
|
+
}
|
|
9
|
+
render() {
|
|
10
|
+
return (h("z-typography", { tabIndex: 0, component: this.component || "span", level: `b${this.level}`, variant: this.variant }, h("slot", null)));
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export { ZBody as z_body };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
|
|
2
|
-
import { I as InputType, K as KeyboardKeyCode, k as ListDividerType } from './index-968a240f.js';
|
|
2
|
+
import { c as ButtonSize, I as InputType, K as KeyboardKeyCode, k as ListDividerType } from './index-968a240f.js';
|
|
3
3
|
import { h as handleKeyboardSubmit } from './utils-6cf7efe2.js';
|
|
4
4
|
import './breakpoints-c386984e.js';
|
|
5
5
|
|
|
6
|
-
const stylesCss = ":host{display:block}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--bg-grey-700);margin:0;background-color:var(--bg-white);border-radius:var(--border-radius-small);cursor:pointer}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--gray700);outline-offset:-2px}:host>div.open>div.header:focus:focus-visible{box-shadow:none}:host>div>div.header:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>
|
|
6
|
+
const stylesCss = ":host{display:block}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--bg-grey-700);margin:0;background-color:var(--bg-white);border-radius:var(--border-radius-small);cursor:pointer}:host([size=\"small\"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header p.body-3{padding:calc(var(--space-unit) * 0.5) 0}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--gray700);outline-offset:-2px}:host>div.open>div.header:focus:focus-visible{box-shadow:none}:host>div>div.header:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>p.body-3{padding:var(--space-unit) 0;margin:0;color:var(--text-grey-800)}:host>div>.header>p.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--text-grey-800);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--blue500);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-disabled01);fill:var(--color-disabled01)}:host>div.disabled .header>p.body-3{color:var(--text-grey-700)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-disabled01)}:host>div.open>.header>z-icon{fill:var(--text-grey-800);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--gray200);border-top:0;background-color:var(--bg-white);border-radius:0}:host>div.open>div.open-combo-data>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--myz-blue) var(--gray200);scrollbar-width:thin}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>ul{max-height:235px;padding:0 3px;margin:0}::-webkit-scrollbar{width:10px;background:linear-gradient(90deg, var(--bg-white) 2px, var(--bg-grey-200) 4px, var(--bg-white) 8px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--myz-blue);border-radius:var(--border-radius)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--myz-blue)}:host>div.open>div.open-combo-data>div.search{overflow:hidden;max-height:auto;margin-top:0;box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%)}:host>div.open>div.open-combo-data>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2);scrollbar-color:var(--myz-blue) var(--bg-grey-200);scrollbar-width:thin}:host>div.open>div.open-combo-data>div.search>div{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div.search>div>a{display:inline-block;height:44px;color:var(--myz-blue);cursor:pointer;font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);text-align:left}:host([size=\"small\"])>div.open>div.open-combo-data>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size=\"x-small\"])>div.open>div.open-combo-data>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}";
|
|
7
7
|
|
|
8
8
|
const ZCombobox = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -29,6 +29,8 @@ const ZCombobox = class {
|
|
|
29
29
|
this.uncheckalltext = "Deseleziona tutti";
|
|
30
30
|
/** max number of checkable items (0 = unlimited) */
|
|
31
31
|
this.maxcheckableitems = 0;
|
|
32
|
+
/** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
|
|
33
|
+
this.size = ButtonSize.BIG;
|
|
32
34
|
this.renderItemsList = []; // used for render only
|
|
33
35
|
this.itemsList = [];
|
|
34
36
|
this.inputType = InputType.TEXT;
|
|
@@ -113,7 +115,7 @@ const ZCombobox = class {
|
|
|
113
115
|
if (ev.keyCode === KeyboardKeyCode.SPACE) {
|
|
114
116
|
ev.preventDefault();
|
|
115
117
|
}
|
|
116
|
-
}, onKeyUp: (ev) => handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, h("
|
|
118
|
+
}, onKeyUp: (ev) => handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, h("p", { class: "body-3" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
|
|
117
119
|
}
|
|
118
120
|
renderContent() {
|
|
119
121
|
if (!this.isopen) {
|
|
@@ -128,7 +130,7 @@ const ZCombobox = class {
|
|
|
128
130
|
return (h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
|
|
129
131
|
}
|
|
130
132
|
renderItem(item, index, length) {
|
|
131
|
-
return (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: index !== length - 1 }, h("z-input", { type: InputType.CHECKBOX, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter })));
|
|
133
|
+
return (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: index !== length - 1, class: this.size }, h("z-input", { type: InputType.CHECKBOX, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter, size: this.size === ButtonSize.X_SMALL ? ButtonSize.SMALL : this.size })));
|
|
132
134
|
}
|
|
133
135
|
renderList(items) {
|
|
134
136
|
if (!items) {
|
|
@@ -154,12 +156,12 @@ const ZCombobox = class {
|
|
|
154
156
|
return group;
|
|
155
157
|
}, {});
|
|
156
158
|
const listGroups = Object.entries(newData).map(([key, value]) => {
|
|
157
|
-
return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("
|
|
159
|
+
return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), value.map((item) => item)));
|
|
158
160
|
});
|
|
159
161
|
return h("ul", null, listGroups);
|
|
160
162
|
}
|
|
161
163
|
renderNoSearchResults() {
|
|
162
|
-
return (h("ul", null, h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle" })));
|
|
164
|
+
return (h("ul", null, h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle", class: this.size })));
|
|
163
165
|
}
|
|
164
166
|
renderCloseButton() {
|
|
165
167
|
return (h("div", null, h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
|
|
@@ -168,7 +170,7 @@ const ZCombobox = class {
|
|
|
168
170
|
if (!this.isopen) {
|
|
169
171
|
return;
|
|
170
172
|
}
|
|
171
|
-
return (h("z-input", { htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, onInputChange: (e) => {
|
|
173
|
+
return (h("z-input", { htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, size: this.size, onInputChange: (e) => {
|
|
172
174
|
if (e.detail.keycode === 27) {
|
|
173
175
|
return this.closeFilterItems();
|
|
174
176
|
}
|
|
@@ -180,7 +182,7 @@ const ZCombobox = class {
|
|
|
180
182
|
return;
|
|
181
183
|
}
|
|
182
184
|
const allChecked = this.selectedCounter === this.itemsList.length;
|
|
183
|
-
return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: `combo-checkbox-${this.inputid}-check-all`, label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length })));
|
|
185
|
+
return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: `combo-checkbox-${this.inputid}-check-all`, label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ButtonSize.X_SMALL ? ButtonSize.SMALL : this.size })));
|
|
184
186
|
}
|
|
185
187
|
render() {
|
|
186
188
|
return (h("div", { "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2ca4b97.js';
|
|
2
|
+
import { e as KeyboardCode } from './index-968a240f.js';
|
|
2
3
|
|
|
3
|
-
const stylesCss = ":host{margin-top:calc(var(--space-unit) * 3);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.dragdrop{position:relative;display:flex;height:228px;flex-direction:column;border-color:var(--color-surface04);background-color:var(--color-surface02);background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='2' ry='2' stroke='%23CACCCEFF' stroke-width='2' stroke-dasharray='15%2c 10%2c 14%2c 11' stroke-dashoffset='3' stroke-linecap='square'/%3e%3c/svg%3e\");border-radius:2px;color:var(--color-text01)}:host>.dragdrop.dragover *{pointer-events:none}:host>.dragdrop .dragover-container{position:absolute;z-index:10;top:0;left:0;display:none;width:100%;height:100%;background-color:var(--color-primary03);box-shadow:var(--shadow-focus-primary)}:host>.dragdrop .dragover-container .dragover-message{padding:10px 28px;background-color:var(--color-link-primary);color:var(--color-text04)}:host>.dragdrop.dragover .dragover-container{display:flex;align-items:center;justify-content:center}";
|
|
4
|
+
const stylesCss$1 = ":host{margin-top:calc(var(--space-unit) * 3);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.dragdrop{position:relative;display:flex;height:228px;flex-direction:column;border-color:var(--color-surface04);background-color:var(--color-surface02);background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='2' ry='2' stroke='%23CACCCEFF' stroke-width='2' stroke-dasharray='15%2c 10%2c 14%2c 11' stroke-dashoffset='3' stroke-linecap='square'/%3e%3c/svg%3e\");border-radius:2px;color:var(--color-text01)}:host>.dragdrop.dragover *{pointer-events:none}:host>.dragdrop .dragover-container{position:absolute;z-index:10;top:0;left:0;display:none;width:100%;height:100%;background-color:var(--color-primary03);box-shadow:var(--shadow-focus-primary)}:host>.dragdrop .dragover-container .dragover-message{padding:10px 28px;background-color:var(--color-link-primary);color:var(--color-text04)}:host>.dragdrop.dragover .dragover-container{display:flex;align-items:center;justify-content:center}";
|
|
4
5
|
|
|
5
6
|
const ZDragdropArea = class {
|
|
6
7
|
constructor(hostRef) {
|
|
@@ -11,7 +12,7 @@ const ZDragdropArea = class {
|
|
|
11
12
|
this.fileDropped.emit(files);
|
|
12
13
|
}
|
|
13
14
|
renderOnDragOverMessage() {
|
|
14
|
-
return (h("div", { class: "dragover-container" }, h("div", { class: "dragover-message" }, h("
|
|
15
|
+
return (h("div", { class: "dragover-container" }, h("div", { class: "dragover-message" }, h("span", { class: "body-2-sb" }, "Rilascia i file in questa area per allegarli."))));
|
|
15
16
|
}
|
|
16
17
|
render() {
|
|
17
18
|
return (h("div", { tabIndex: 0, ref: (val) => (this.dragDropContainer = val), class: "dragdrop", onDragOver: (e) => {
|
|
@@ -28,17 +29,85 @@ const ZDragdropArea = class {
|
|
|
28
29
|
} }, this.renderOnDragOverMessage(), h("slot", null)));
|
|
29
30
|
}
|
|
30
31
|
};
|
|
31
|
-
ZDragdropArea.style = stylesCss;
|
|
32
|
+
ZDragdropArea.style = stylesCss$1;
|
|
32
33
|
|
|
33
|
-
const
|
|
34
|
+
const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>dialog{padding:0;border:none}:host>dialog::backdrop{display:none}.modal-background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.modal-container{z-index:1010;display:flex;overflow:-moz-scrollbars-none;overflow:hidden;width:100%;height:100vh;flex-direction:column}.modal-container>header{display:flex;flex-flow:row nowrap;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{padding:0;border:none;margin:0;margin-left:auto;background:transparent;cursor:pointer}.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;width:100%;flex-direction:column;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header h2{padding:0;margin:0;color:var(--color-text01);font-weight:var(--font-rg)}.modal-container>header h1{font-size:var(--font-size-5);letter-spacing:0;line-height:1.4}.modal-container>header h2{font-size:var(--font-size-3);letter-spacing:0;line-height:1.5}.modal-container>header>div *:empty{display:none}.modal-container>header h1+h2{margin-top:calc(var(--space-unit) * 0.5)}.modal-container>.modal-content{overflow:auto;flex:1 auto;background:var(--color-surface01);overflow-x:hidden}.modal-container .modal-content::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.modal-container .modal-content::-webkit-scrollbar-track{background-color:transparent}.modal-container .modal-content::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.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%;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius);transform:translateX(-50%)}.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);letter-spacing:0;line-height:1.33}.modal-container>header h2{font-size:var(--font-size-4);letter-spacing:0;line-height:1.5}.modal-container>header h1+h2{margin-top:0}}";
|
|
35
|
+
|
|
36
|
+
const FOCUSABLE_ELEMENTS_SELECTOR = ':is(button, input, select, textarea, [contenteditable=""], [contenteditable="true"], a[href], [tabindex], summary):not([disabled], [disabled=""], [tabindex="-1"], [aria-hidden="true"], [hidden])';
|
|
37
|
+
const ZModal = class {
|
|
34
38
|
constructor(hostRef) {
|
|
35
39
|
registerInstance(this, hostRef);
|
|
36
|
-
|
|
37
|
-
this.
|
|
40
|
+
this.modalClose = createEvent(this, "modalClose", 7);
|
|
41
|
+
this.modalHeaderActive = createEvent(this, "modalHeaderActive", 7);
|
|
42
|
+
this.modalBackgroundClick = createEvent(this, "modalBackgroundClick", 7);
|
|
43
|
+
/** aria-label for close button (optional) */
|
|
44
|
+
this.closeButtonLabel = "chiudi modale";
|
|
45
|
+
/** add role "alertdialog" to dialog (optional, default is false) */
|
|
46
|
+
this.alertdialog = false;
|
|
47
|
+
}
|
|
48
|
+
emitModalClose() {
|
|
49
|
+
this.modalClose.emit({ modalid: this.modalid });
|
|
50
|
+
}
|
|
51
|
+
emitModalHeaderActive() {
|
|
52
|
+
this.modalHeaderActive.emit({ modalid: this.modalid });
|
|
53
|
+
}
|
|
54
|
+
emitBackgroundClick() {
|
|
55
|
+
this.modalBackgroundClick.emit({ modalid: this.modalid });
|
|
56
|
+
}
|
|
57
|
+
componentDidLoad() {
|
|
58
|
+
this.open();
|
|
59
|
+
}
|
|
60
|
+
/** open modal */
|
|
61
|
+
async open() {
|
|
62
|
+
var _a;
|
|
63
|
+
(_a = this.dialog) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
64
|
+
}
|
|
65
|
+
/** close modal */
|
|
66
|
+
async close() {
|
|
67
|
+
var _a;
|
|
68
|
+
(_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* Get a list of focusable elements in the dialog.
|
|
72
|
+
* Remove elements with `display: none` from the list, because they're not focusable.
|
|
73
|
+
*
|
|
74
|
+
* N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.
|
|
75
|
+
* Adding focusable elements after the `modalContent` slot would break the order of elements in the list.
|
|
76
|
+
*/
|
|
77
|
+
get focusableElements() {
|
|
78
|
+
return [
|
|
79
|
+
...Array.from(this.host.shadowRoot.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR)),
|
|
80
|
+
...Array.from(this.host.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR)),
|
|
81
|
+
].filter((element) => getComputedStyle(element).display !== "none");
|
|
82
|
+
}
|
|
83
|
+
handleKeyDown(e) {
|
|
84
|
+
if (e.code !== KeyboardCode.TAB) {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
const focusableElements = this.focusableElements;
|
|
88
|
+
const shadowActiveElement = this.host.shadowRoot.activeElement;
|
|
89
|
+
const activeElement = this.host.ownerDocument.activeElement;
|
|
90
|
+
const firstFocusableElement = focusableElements[0];
|
|
91
|
+
const lastFocusableElement = focusableElements[focusableElements.length - 1];
|
|
92
|
+
if (e.shiftKey && (shadowActiveElement == firstFocusableElement || activeElement == firstFocusableElement)) {
|
|
93
|
+
// shift + tab was pressed and current active element is the first focusable element
|
|
94
|
+
e.preventDefault();
|
|
95
|
+
lastFocusableElement.focus();
|
|
96
|
+
}
|
|
97
|
+
else if (!e.shiftKey && (shadowActiveElement == lastFocusableElement || activeElement == lastFocusableElement)) {
|
|
98
|
+
// shift + tab was pressed and current active element is the first focusable element
|
|
99
|
+
e.preventDefault();
|
|
100
|
+
firstFocusableElement.focus();
|
|
101
|
+
}
|
|
38
102
|
}
|
|
39
103
|
render() {
|
|
40
|
-
return (h("
|
|
104
|
+
return (h("dialog", { "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose() }, h("div", { class: "modal-container", id: this.modalid }, h("header", { onClick: this.emitModalHeaderActive.bind(this) }, h("div", null, this.modaltitle && h("h1", { id: "modal-title" }, this.modaltitle), this.modalsubtitle && h("h2", { id: "modal-subtitle" }, this.modalsubtitle)), h("slot", { name: "modalCloseButton" }, h("button", { "aria-label": this.closeButtonLabel, onClick: () => this.close() }, h("z-icon", { name: "multiply-circle-filled" })))), h("div", { class: "modal-content", id: "modal-content" }, h("slot", { name: "modalContent" }))), h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
|
|
105
|
+
this.emitBackgroundClick();
|
|
106
|
+
this.close();
|
|
107
|
+
} })));
|
|
41
108
|
}
|
|
109
|
+
get host() { return getElement(this); }
|
|
42
110
|
};
|
|
111
|
+
ZModal.style = stylesCss;
|
|
43
112
|
|
|
44
|
-
export { ZDragdropArea as z_dragdrop_area,
|
|
113
|
+
export { ZDragdropArea as z_dragdrop_area, ZModal as z_modal };
|
|
@@ -3,7 +3,7 @@ import { v as ZFileUploadType, o as Device, D as DividerSize } from './index-968
|
|
|
3
3
|
import { g as getDevice } from './utils-6cf7efe2.js';
|
|
4
4
|
import './breakpoints-c386984e.js';
|
|
5
5
|
|
|
6
|
-
const stylesCss = ":host{color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.container{display:flex;flex-direction:column}:host .modal-wrapper{display:flex;align-items:center;justify-content:center}:host .modal-wrapper>.files-wrapper{display:flex;flex-direction:column;margin:calc(var(--space-unit) * 4);gap:var(--space-unit)}:host .text-container{display:flex;flex-direction:column;margin:auto}:host .text-container
|
|
6
|
+
const stylesCss = ":host{color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.container{display:flex;flex-direction:column}:host .modal-wrapper{display:flex;align-items:center;justify-content:center}:host .modal-wrapper>.files-wrapper{display:flex;flex-direction:column;margin:calc(var(--space-unit) * 4);gap:var(--space-unit)}:host .text-container{display:flex;flex-direction:column;margin:auto}:host .text-container .body-1{text-align:center}:host .text-container .upload-link{color:var(--color-link-primary);cursor:pointer}:host .text-container .upload-link-text{margin-bottom:var(--space-unit)}input#file-elem{display:none}#title{display:inline-block;margin-bottom:var(--space-unit)}:host>.container>z-button{display:inline-block;margin-top:calc(var(--space-unit) * 3)}:host>.container>.files-container.hidden{display:none}:host>.container>.files-container>.heading-4-sb{display:inline-block;margin:calc(var(--space-unit) * 3) 0}:host>.container>.files-container>.files-wrapper{display:flex;flex-wrap:wrap;column-gap:calc(var(--space-unit) * 2);row-gap:calc(var(--space-unit) * 2)}:host>.container>.files-container>z-divider{margin-top:calc(var(--space-unit) * 3);margin-bottom:0}@media only screen and (min-width: 768px){:host>.container>z-button{align-self:flex-start}}";
|
|
7
7
|
|
|
8
8
|
const ZFileUpload = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -98,10 +98,10 @@ const ZFileUpload = class {
|
|
|
98
98
|
return errors;
|
|
99
99
|
}
|
|
100
100
|
renderTitle() {
|
|
101
|
-
return (h("
|
|
101
|
+
return (h("h2", { class: "heading-2-sb", id: "title" }, this.mainTitle));
|
|
102
102
|
}
|
|
103
|
-
renderDescription(
|
|
104
|
-
return
|
|
103
|
+
renderDescription(cssClass) {
|
|
104
|
+
return h("span", { class: cssClass }, this.description);
|
|
105
105
|
}
|
|
106
106
|
renderAllowedFileExtensions() {
|
|
107
107
|
let fileFormatString = "";
|
|
@@ -117,10 +117,10 @@ const ZFileUpload = class {
|
|
|
117
117
|
fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;
|
|
118
118
|
}
|
|
119
119
|
const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;
|
|
120
|
-
return h("
|
|
120
|
+
return h("span", { class: "body-3" }, fileFormatString || fileWeightString ? finalString : null);
|
|
121
121
|
}
|
|
122
122
|
renderFileSection() {
|
|
123
|
-
return (h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, h("
|
|
123
|
+
return (h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, h("h4", { class: "heading-4-sb" }, "File appena caricati"), h("div", { class: "files-wrapper" }, h("slot", { name: "files" })), h("z-divider", { size: DividerSize.MEDIUM })));
|
|
124
124
|
}
|
|
125
125
|
renderInput() {
|
|
126
126
|
return (h("input", Object.assign({}, this.inputAttributes, { onChange: () => this.fileInputHandler(), accept: this.acceptedFormat, ref: (val) => (this.input = val) })));
|
|
@@ -139,17 +139,17 @@ const ZFileUpload = class {
|
|
|
139
139
|
renderUploadLink() {
|
|
140
140
|
return [
|
|
141
141
|
this.renderInput(),
|
|
142
|
-
h("
|
|
142
|
+
h("span", { class: "body-1 upload-link-text" }, "Trascinalo qui o", " ", h("span", { tabIndex: 0, class: "body-1-sb upload-link", onClick: () => this.input.click(), onKeyPress: (e) => {
|
|
143
143
|
if (e.code == "Space" || e.code == "Enter") {
|
|
144
144
|
e.preventDefault();
|
|
145
145
|
this.input.click();
|
|
146
146
|
}
|
|
147
|
-
},
|
|
147
|
+
}, ref: (val) => (this.uploadLink = val) }, "caricalo"), " ", "dal tuo computer"),
|
|
148
148
|
];
|
|
149
149
|
}
|
|
150
150
|
renderDefaultMode() {
|
|
151
151
|
return [
|
|
152
|
-
this.renderDescription("
|
|
152
|
+
this.renderDescription("body-3-sb"),
|
|
153
153
|
this.renderAllowedFileExtensions(),
|
|
154
154
|
this.renderFileSection(),
|
|
155
155
|
this.renderUploadButton(),
|
|
@@ -158,7 +158,7 @@ const ZFileUpload = class {
|
|
|
158
158
|
renderDragDropMode() {
|
|
159
159
|
return [
|
|
160
160
|
this.renderFileSection(),
|
|
161
|
-
h("z-dragdrop-area", null, h("div", { class: "text-container" }, this.renderDescription("
|
|
161
|
+
h("z-dragdrop-area", null, h("div", { class: "text-container" }, this.renderDescription("body-1"), this.renderUploadLink(), this.renderAllowedFileExtensions())),
|
|
162
162
|
];
|
|
163
163
|
}
|
|
164
164
|
formatErrorString(key, value) {
|
|
@@ -168,7 +168,7 @@ const ZFileUpload = class {
|
|
|
168
168
|
}
|
|
169
169
|
handleErrorModalContent() {
|
|
170
170
|
return (h("div", { slot: "modalContent" }, h("div", { class: "modal-wrapper" }, h("div", { class: "files" }, Array.from(this.invalidFiles).map(([key, value]) => {
|
|
171
|
-
return
|
|
171
|
+
return h("span", { class: "body-3" }, this.formatErrorString(key, value));
|
|
172
172
|
})))));
|
|
173
173
|
}
|
|
174
174
|
render() {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { r as registerInstance, h } from './index-a2ca4b97.js';
|
|
2
|
+
|
|
3
|
+
const ZHeading = class {
|
|
4
|
+
constructor(hostRef) {
|
|
5
|
+
registerInstance(this, hostRef);
|
|
6
|
+
/** Font weight variant */
|
|
7
|
+
this.variant = "regular";
|
|
8
|
+
}
|
|
9
|
+
render() {
|
|
10
|
+
return (h("z-typography", { tabIndex: 0, component: this.component || `h${this.level}`, level: `h${this.level}`, variant: this.variant }, h("slot", null)));
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export { ZHeading as z_heading };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-a2ca4b97.js';
|
|
2
|
-
import { j as LabelPosition, I as InputType } from './index-968a240f.js';
|
|
2
|
+
import { j as LabelPosition, c as ButtonSize, I as InputType } from './index-968a240f.js';
|
|
3
3
|
import { r as randomId, b as boolean } from './utils-6cf7efe2.js';
|
|
4
4
|
import './breakpoints-c386984e.js';
|
|
5
5
|
|
|
6
|
-
const stylesCss$1 = ".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}.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;pointer-events: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}.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>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}.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)}.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)}";
|
|
6
|
+
const stylesCss$1 = ".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;pointer-events: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)}";
|
|
7
7
|
|
|
8
8
|
const ZInput = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -30,6 +30,8 @@ const ZInput = class {
|
|
|
30
30
|
this.labelPosition = LabelPosition.RIGHT;
|
|
31
31
|
/** render clear icon when typing (optional): available for text */
|
|
32
32
|
this.hasclearicon = true;
|
|
33
|
+
/** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
|
|
34
|
+
this.size = ButtonSize.BIG;
|
|
33
35
|
this.isTyping = false;
|
|
34
36
|
this.passwordHidden = true;
|
|
35
37
|
this.typingtimeout = 300;
|
|
@@ -167,22 +169,22 @@ const ZInput = class {
|
|
|
167
169
|
if (!this.icon) {
|
|
168
170
|
return;
|
|
169
171
|
}
|
|
170
|
-
return (h("button", { type: "button", class: "icon-button input-icon", tabIndex: -1 }, h("z-icon", { name: this.icon })));
|
|
172
|
+
return (h("button", { type: "button", class: "icon-button input-icon", tabIndex: -1 }, h("z-icon", { name: this.icon, class: this.size })));
|
|
171
173
|
}
|
|
172
174
|
renderResetIcon() {
|
|
173
175
|
if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {
|
|
174
176
|
return;
|
|
175
177
|
}
|
|
176
|
-
return (h("button", { type: "button", class: "icon-button reset-icon", "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") }, h("z-icon", { name: "multiply" })));
|
|
178
|
+
return (h("button", { type: "button", class: "icon-button reset-icon", "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") }, h("z-icon", { name: "multiply", class: this.size })));
|
|
177
179
|
}
|
|
178
180
|
renderShowHidePassword() {
|
|
179
|
-
return (h("button", { type: "button", class: "icon-button toggle-password-icon", disabled: this.disabled, "aria-label": this.passwordHidden ? "mostra password" : "nascondi password", onClick: () => (this.passwordHidden = !this.passwordHidden) }, h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled" })));
|
|
181
|
+
return (h("button", { type: "button", class: "icon-button toggle-password-icon", disabled: this.disabled, "aria-label": this.passwordHidden ? "mostra password" : "nascondi password", onClick: () => (this.passwordHidden = !this.passwordHidden) }, h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled", class: this.size })));
|
|
180
182
|
}
|
|
181
183
|
renderMessage() {
|
|
182
184
|
if (boolean(this.message) === false) {
|
|
183
185
|
return;
|
|
184
186
|
}
|
|
185
|
-
return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status }));
|
|
187
|
+
return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size }));
|
|
186
188
|
}
|
|
187
189
|
/* END text/password/email/number */
|
|
188
190
|
/* START textarea */
|
|
@@ -202,7 +204,7 @@ const ZInput = class {
|
|
|
202
204
|
"checkbox-label": true,
|
|
203
205
|
"after": this.labelPosition === LabelPosition.RIGHT,
|
|
204
206
|
"before": this.labelPosition === LabelPosition.LEFT,
|
|
205
|
-
} }, h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox", "aria-hidden": "true" }), this.label && h("span", { innerHTML: this.label }))));
|
|
207
|
+
} }, h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox", "aria-hidden": "true", class: this.size }), this.label && h("span", { innerHTML: this.label }))));
|
|
206
208
|
}
|
|
207
209
|
/* END checkbox */
|
|
208
210
|
/* START radio */
|
|
@@ -211,26 +213,31 @@ const ZInput = class {
|
|
|
211
213
|
"radio-label": true,
|
|
212
214
|
"after": this.labelPosition === LabelPosition.RIGHT,
|
|
213
215
|
"before": this.labelPosition === LabelPosition.LEFT,
|
|
214
|
-
} }, h("z-icon", { name: this.checked ? "radio-button-checked" : "radio-button", "aria-hidden": "true" }), this.label && h("span", { innerHTML: this.label }))));
|
|
216
|
+
} }, h("z-icon", { name: this.checked ? "radio-button-checked" : "radio-button", "aria-hidden": "true", class: this.size }), this.label && h("span", { innerHTML: this.label }))));
|
|
215
217
|
}
|
|
216
218
|
/* END radio */
|
|
217
219
|
render() {
|
|
220
|
+
let input;
|
|
218
221
|
switch (this.type) {
|
|
219
222
|
case InputType.TEXTAREA:
|
|
220
|
-
|
|
223
|
+
input = this.renderTextarea();
|
|
224
|
+
break;
|
|
221
225
|
case InputType.CHECKBOX:
|
|
222
|
-
|
|
226
|
+
input = this.renderCheckbox();
|
|
227
|
+
break;
|
|
223
228
|
case InputType.RADIO:
|
|
224
|
-
|
|
229
|
+
input = this.renderRadio();
|
|
230
|
+
break;
|
|
225
231
|
default:
|
|
226
|
-
|
|
232
|
+
input = this.renderInputText(this.type);
|
|
227
233
|
}
|
|
234
|
+
return h(Host, null, input);
|
|
228
235
|
}
|
|
229
236
|
get hostElement() { return getElement(this); }
|
|
230
237
|
};
|
|
231
238
|
ZInput.style = stylesCss$1;
|
|
232
239
|
|
|
233
|
-
const stylesCss = ":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([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)}";
|
|
240
|
+
const stylesCss = ":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)}";
|
|
234
241
|
|
|
235
242
|
const ZInputMessage = class {
|
|
236
243
|
constructor(hostRef) {
|
|
@@ -3,7 +3,7 @@ import { h as handleKeyboardSubmit } from './utils-6cf7efe2.js';
|
|
|
3
3
|
import './index-968a240f.js';
|
|
4
4
|
import './breakpoints-c386984e.js';
|
|
5
5
|
|
|
6
|
-
const stylesCss = ":host li{all:unset;all:reset;width:100%;line-height:14px;list-style-type:none}:host li>span{display:flex;padding:calc(var(--space-unit) * 2) 0;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:16px;font-weight:var(--font-rg);letter-spacing:0.23px;line-height:14px}:host li>span.border{border-bottom:2px solid var(--bg-grey-200)}:host li span:hover,a:hover{color:var(--myz-blue);fill:var(--myz-blue)}a,a:visited,a:active{color:inherit;fill:inherit;text-decoration:none}:host li span z-icon{width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);padding:0 calc(var(--space-unit) * 1.5) 0 0;background-repeat:no-repeat;background-size:contain;color:var(--myz-blue);fill:var(--myz-blue)}";
|
|
6
|
+
const stylesCss = ":host li{all:unset;all:reset;width:100%;line-height:14px;list-style-type:none}:host li>span{display:flex;padding:calc(var(--space-unit) * 2) 0;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:16px;font-weight:var(--font-rg);letter-spacing:0.23px;line-height:14px}:host(.small) li>span{padding:calc(var(--space-unit) * 1.5) 0;font-size:var(--font-size-2)}:host(.x-small) li>span{padding:var(--space-unit) 0;font-size:var(--font-size-2)}:host(.small) li>span>z-icon,:host(.x-small) li>span>z-icon{--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:calc(var(--space-unit) * 0.5);padding:0}:host li>span.border{border-bottom:2px solid var(--bg-grey-200)}:host li span:hover,a:hover{color:var(--myz-blue);fill:var(--myz-blue)}a,a:visited,a:active{color:inherit;fill:inherit;text-decoration:none}:host li span z-icon{width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);padding:0 calc(var(--space-unit) * 1.5) 0 0;background-repeat:no-repeat;background-size:contain;color:var(--myz-blue);fill:var(--myz-blue)}";
|
|
7
7
|
|
|
8
8
|
const ZMyzListItem = class {
|
|
9
9
|
constructor(hostRef) {
|