@zanichelli/albe-web-components 6.5.0-offcanvasTest2 → 6.5.0-offcanvasTest3
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/dist/cjs/index-e3299e0a.js +6 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/z-app-header.cjs.entry.js +133 -0
- package/dist/cjs/z-icon_2.cjs.entry.js +86 -0
- package/dist/collection/components/z-offcanvas/index.js +20 -11
- package/dist/collection/components/z-offcanvas/styles.css +1 -10
- package/dist/esm/index-a2ca4b97.js +6 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/z-app-header.entry.js +129 -0
- package/dist/esm/z-icon_2.entry.js +81 -0
- package/dist/types/components/z-offcanvas/index.d.ts +3 -0
- package/dist/web-components-library/p-d3c72572.entry.js +1 -0
- package/dist/web-components-library/p-edf0195b.entry.js +1 -0
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/p-99d3834c.js +129 -0
- package/www/build/p-d3c72572.entry.js +1 -0
- package/www/build/p-e680285b.css +1636 -0
- package/www/build/p-edf0195b.entry.js +1 -0
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +6 -4
- package/dist/cjs/z-app-header_3.cjs.entry.js +0 -204
- package/dist/esm/z-app-header_3.entry.js +0 -198
- package/dist/web-components-library/p-e22ddf5e.entry.js +0 -1
- package/www/build/p-4b159cbd.css +0 -1
- package/www/build/p-adb88e08.js +0 -1
- package/www/build/p-e22ddf5e.entry.js +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,c as t,h as a,H as r,g as i}from"./p-d17ebc2f.js";const n="undefined"!=typeof IntersectionObserver,o=class{constructor(a){e(this,a),this.sticking=t(this,"sticking",7),this.stuck=!1,this.overlay=!1,this.flow="auto",this.drawerOpen=!1,this.stucked=!1,this.observer=n&&new IntersectionObserver((([e])=>{this.stucked=!e.isIntersecting}),{threshold:.5}),this.openDrawer=this.openDrawer.bind(this),this.closeDrawer=this.closeDrawer.bind(this),this.collectMenuElements.bind(this)}emitStickingEvent(){this.sticking.emit(this.stucked)}componentDidLoad(){this.collectMenuElements(),this.onStuckMode()}get title(){const e=this.hostElement.querySelector('[slot="title"]');return null===e?"":e.textContent.trim()}get scrollParent(){const e=this.hostElement.offsetParent;return e===document.body||e===document.documentElement?window:e}collectMenuElements(){const e=this.menuElements=this.hostElement.querySelectorAll('[slot="menu"]');this.menuLength=e.length,this.setMenuFloatingMode()}onStuckMode(){this.stuck?this.enableStuckObserver():this.disableStuckMode()}enableStuckObserver(){this.observer&&this.observer.observe(this.container)}disableStuckMode(){this.stucked=!1,this.observer&&this.observer.unobserve(this.container)}onStucked(){this.scrollParent&&this.emitStickingEvent()}setMenuFloatingMode(){if(0===this.menuElements.length)return;const e=this.menuElements;for(let t=0,a=e.length;t<a;t++)e[t].open=!1,e[t].floating=!this.drawerOpen}render(){return a(r,{"menu-length":this.menuLength},a("div",{class:"heading-panel",ref:e=>this.container=e},a("div",{class:"hero-container"},a("slot",{name:"hero"},this.hero&&a("img",{alt:"",src:this.hero}))),a("div",{class:"heading-container"},a("div",{class:"heading-title"},this.menuLength>0&&a("button",{class:"drawer-trigger","aria-label":"Apri menu",onClick:this.openDrawer},a("z-icon",{name:"burger-menu"})),a("slot",{name:"title"})),a("div",{class:"heading-subtitle"},a("slot",{name:"subtitle"}))),a("div",{class:"menu-container"},!this.drawerOpen&&"offcanvas"!==this.flow&&a("slot",{name:"menu",onSlotchange:()=>this.collectMenuElements()}))),a("div",{class:"drawer-container"},a("div",{class:"drawer-overlay",onClick:this.closeDrawer}),a("div",{class:"drawer-panel"},a("button",{class:"drawer-close","aria-label":"Chiudi menu",onClick:this.closeDrawer},a("z-icon",{name:"close"})),a("div",{class:"drawer-content"},this.drawerOpen&&a("slot",{name:"menu",onSlotchange:()=>this.collectMenuElements()})))),this.stucked&&a("div",{class:"heading-stucked"},this.menuLength>0&&a("button",{class:"drawer-trigger","aria-label":"Apri menu",onClick:this.openDrawer},a("z-icon",{name:"burger-menu"})),a("div",{class:"heading-title"},a("slot",{name:"stucked-title"},this.title))))}openDrawer(){this.drawerOpen=!0}closeDrawer(){this.drawerOpen=!1}get hostElement(){return i(this)}static get watchers(){return{stuck:["onStuckMode"],stucked:["onStucked"],drawerOpen:["setMenuFloatingMode"]}}};o.style=':host{--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%;height:var(--app-header-height);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;justify-content:flex-start;padding:calc(var(--space-unit) * 2) var(--grid-mobile-margin);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-stucked{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;display:flex;width:100%;max-width:100%;flex-direction:row;padding:var(--space-unit) var(--grid-mobile-margin);animation:slide-stucked-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stucked .heading-title,.heading-stucked .heading-title>*,.heading-stucked .heading-title ::slotted([slot="stucked-title"]){display:block;overflow:hidden;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.heading-stucked .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 only screen and (min-width: 768px){.heading-panel{padding:calc(var(--space-unit) * 3) var(--grid-tablet-margin)}.heading-stucked{padding-right:var(--grid-tablet-margin);padding-left:var(--grid-tablet-margin)}: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 only screen and (min-width: 1152px){.heading-panel,.heading-stucked{padding-right:var(--grid-desktop-margin);padding-left:var(--grid-desktop-margin)}:host(:not([flow="stack"])) .heading-panel{flex-flow:row wrap}::slotted([slot="title"]){margin-right:var(--grid-desktop-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 only screen and (min-width: 1366px){.heading-panel,.heading-stucked{padding-right:var(--grid-wide-margin);padding-left:var(--grid-wide-margin)}::slotted([slot="title"]){margin-right:var(--grid-wide-gutter);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-stucked-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}';export{o as z_app_header}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-d17ebc2f.js";(()=>{const t=import.meta.url,i={};return""!==t&&(i.resourcesUrl=new URL(".",t).href),e(i)})().then((e=>t(JSON.parse('[["p-e22ddf5e",[[1,"z-app-header",{"stuck":[516],"hero":[1],"overlay":[516],"flow":[513],"drawerOpen":[516,"drawer-open"],"stucked":[32],"menuLength":[32]}],[6,"z-offcanvas",{"variant":[513],"open":[1540],"transitiondirection":[513]}],[1,"z-icon",{"name":[1],"height":[2],"width":[2],"iconid":[1],"fill":[1]}]]],["p-3d9ecc23",[[2,"z-select",{"htmlid":[1],"items":[1],"name":[1],"label":[1],"ariaLabel":[1,"aria-label"],"disabled":[4],"readonly":[4],"placeholder":[1],"htmltitle":[1],"status":[1],"message":[8],"autocomplete":[4],"noresultslabel":[1],"hasGroupItems":[4,"has-group-items"],"isOpen":[32],"selectedItem":[32],"searchString":[32],"getSelectedItem":[64],"getValue":[64],"setValue":[64]}]]],["p-547d3b1f",[[1,"z-combobox",{"inputid":[1],"items":[1],"label":[1],"hassearch":[4],"searchlabel":[1],"searchplaceholder":[1],"searchtitle":[1],"noresultslabel":[1],"isopen":[1028],"isfixed":[4],"closesearchtext":[1],"hascheckall":[4],"checkalltext":[1],"uncheckalltext":[1],"maxcheckableitems":[2],"hasgroupitems":[4],"searchValue":[32],"selectedCounter":[32],"renderItemsList":[32]},[[0,"inputCheck","inputCheckListener"]]]]],["p-279655eb",[[1,"z-file-upload",{"type":[513],"buttonVariant":[1,"button-variant"],"acceptedFormat":[1,"accepted-format"],"fileMaxSize":[2,"file-max-size"],"mainTitle":[1,"main-title"],"description":[1],"files":[32],"invalidFiles":[32],"getFiles":[64]},[[0,"removeFile","removeFileListener"],[0,"fileDropped","fileDroppedListener"]]]]],["p-f20d1242",[[6,"z-modal-login",{"forgotPasswordUrl":[1,"forgot-password-url"],"heading":[1],"status":[1025],"message":[1],"pwdmessage":[1],"externalProviderCheck":[32]}]]],["p-0843b0e7",[[1,"z-contextual-menu",{"elements":[1],"color":[1],"popoverPosition":[513,"popover-position"]}]]],["p-59cfee8d",[[1,"z-myz-card-dictionary",{"name":[1],"cover":[1],"disabled":[4],"flipped":[1028],"flipbuttonlabel":[1],"hideinfobtn":[4]},[[0,"flipCard","handleFlipCard"]]]]],["p-1ba8d432",[[1,"z-app-topbar",{"theme":[1],"contentMaxWidth":[2,"content-max-width"],"topbarContent":[1,"topbar-content"],"logoLink":[1,"logo-link"],"showAppSwitcher":[4,"show-app-switcher"],"isMobile":[32]},[[9,"resize","handleResize"]]]]],["p-95b8f109",[[4,"z-table",{"lines":[514],"errorMessage":[1,"error-message"],"bordered":[4],"callToActionLabel":[1,"call-to-action-label"],"callToActionTwoLabel":[1,"call-to-action-two-label"],"columnSticky":[4,"column-sticky"],"empty":[4],"error":[4],"errorLink":[1,"error-link"],"headerSticky":[4,"header-sticky"],"message":[1],"subtitle":[1],"hasTableBody":[32],"isMobile":[32]},[[9,"resize","handleResize"],[8,"orientationchange","handleOrientationChange"]]]]],["p-07e18572",[[1,"z-messages-pocket",{"pocketid":[1],"messages":[2],"status":[1025]},[[16,"pocketToggle","handlePocketToggle"]]]]],["p-01f001fd",[[0,"z-pagination",{"label":[1],"navArrows":[4,"nav-arrows"],"totalPages":[2,"total-pages"],"skip":[2],"edges":[4],"split":[2],"visiblePages":[2,"visible-pages"],"currentPage":[1026,"current-page"],"goToPage":[4,"go-to-page"],"_visiblePages":[32],"isMobile":[32],"goToPageValue":[32]},[[9,"resize","onResize"]]]]],["p-3f55dce6",[[4,"z-table-header-row",{"expandable":[516]}]]],["p-93dc6d51",[[4,"z-carousel",{"isLoading":[4,"is-loading"],"label":[1],"single":[4],"arrowsPosition":[1,"arrows-position"],"progressMode":[1,"progress-mode"],"ghostLoadingHeight":[2,"ghost-loading-height"],"current":[32],"items":[32]}]]],["p-b6f36170",[[4,"z-date-picker",{"datePickerId":[1,"date-picker-id"],"ariaLabel":[1,"aria-label"],"label":[1],"mode":[1],"flatpickrPosition":[32],"inputError":[32]},[[18,"keydown","handleKeyDown"]]]]],["p-38a3cf3b",[[2,"z-file",{"fileNumber":[2,"file-number"],"fileName":[1,"file-name"],"allowPopover":[32],"popoverVisible":[32]},[[1,"mouseover","onMouseOver"],[1,"mouseleave","onMouseLeave"],[0,"interactiveIconClick","onInteractiveIconClick"]]]]],["p-2acd6a51",[[0,"z-range-picker",{"rangePickerId":[1,"range-picker-id"],"firstAriaLabel":[1,"first-aria-label"],"firstLabel":[1,"first-label"],"secondAriaLabel":[1,"second-aria-label"],"secondLabel":[1,"second-label"],"mode":[1],"flatpickrPosition":[32],"activeInput":[32],"firstInputError":[32],"lastInputError":[32]},[[18,"click","handleClick"],[18,"keyup","handleKeyDown"]]]]],["p-9ed27651",[[4,"z-table-row",{"expandedType":[513,"expanded-type"],"expanded":[32]}]]],["p-9c28b8fc",[[4,"z-anchor-navigation",{"hideUnselected":[516,"hide-unselected"],"collapsed":[32]}]]],["p-682528b2",[[1,"z-menu-dropdown",{"nomeutente":[1],"menucontent":[1],"buttonid":[1],"ismenuopen":[32]}]]],["p-3a468aa9",[[1,"z-myz-card-alert",{"iconname":[1],"contenttext":[1],"actiontext":[1],"type":[1]}]]],["p-bdc6f2e5",[[1,"z-myz-card-info",{"data":[1],"htmltabindex":[2],"hiddenContent":[32],"tooltip":[32]}]]],["p-e40b16fa",[[1,"z-myz-list",{"inputrawdata":[1],"list":[1040]}]]],["p-5dd9a2c6",[[1,"z-otp",{"inputNum":[2,"input-num"],"status":[1],"message":[1]}]]],["p-c6aad085",[[1,"z-panel-elem",{"elemid":[1],"imgurl":[1],"imgalt":[1],"linkicon":[1],"linklabel":[1],"url":[1],"target":[1],"isdisabled":[4],"descrSlotName":[1,"descr-slot-name"]}]]],["p-8980398c",[[2,"z-skip-to-content",{"variant":[513],"links":[1025],"visible":[32],"visibleLink":[32]},[[4,"focusout","handleFocusOutSkipToContent"],[4,"focusin","handleFocusSkipToContent"]]]]],["p-3c2d438b",[[1,"z-user-dropdown",{"logged":[4],"userFullName":[1,"user-full-name"],"userEmail":[1,"user-email"],"menuContent":[1,"menu-content"],"useInverseColors":[4,"use-inverse-colors"],"isMenuOpen":[32],"isMobile":[32]},[[9,"resize","handleResize"],[8,"orientationchange","handleOrientationChange"],[8,"click","handleClickOutside"]]]]],["p-ede9fbf5",[[1,"z-button-sort",{"buttonid":[1],"label":[1],"desclabel":[1],"counter":[2],"sortlabelasc":[1],"sortlabeldesc":[1],"isselected":[1028],"sortasc":[1028],"allowTooltip":[32]}]]],["p-a82ea410",[[1,"z-card",{"variant":[513],"coverIcon":[1,"cover-icon"],"clickable":[516],"showshadow":[516],"hasCoverImage":[32]},[[0,"click","onClick"]]]]],["p-5b6d2bcf",[[1,"z-icon-package"]]],["p-61424b8a",[[1,"z-info-box",{"boxid":[1],"isclosable":[4]}]]],["p-beba3e67",[[1,"z-info-reveal",{"icon":[1],"position":[513],"label":[1],"open":[32],"currentIndex":[32]}]]],["p-f158d205",[[1,"z-menu",{"active":[516],"floating":[516],"open":[1540],"hasHeader":[32],"hasContent":[32]},[[4,"click","handleClick"]]]]],["p-f95cc914",[[1,"z-menu-section",{"active":[516],"open":[32],"hasContent":[32]},[[4,"click","handleClick"]]]]],["p-05ced71c",[[1,"z-myz-card-icon",{"icon":[1],"isdisabled":[4],"ariaLabel":[1,"aria-label"]}]]],["p-7af991f5",[[0,"z-navigation-tab",{"selected":[1540],"disabled":[516],"orientation":[513],"size":[513],"icon":[1],"label":[1],"htmlTitle":[1,"html-title"]},[[0,"click","onClick"]]]]],["p-8ffc17b7",[[0,"z-navigation-tab-link",{"selected":[1540],"disabled":[516],"orientation":[513],"size":[513],"htmlTitle":[1,"html-title"],"target":[1],"href":[1],"icon":[1],"label":[1]},[[0,"click","onClick"]]]]],["p-6b1a5309",[[1,"z-navigation-tabs",{"orientation":[513],"size":[513],"canNavigate":[32],"canNavigatePrev":[32],"canNavigateNext":[32]},[[9,"resize","checkScrollVisible"],[0,"selected","onTabSelected"]]]]],["p-2efedcf4",[[1,"z-notification",{"contenticonname":[1],"actiontext":[1],"type":[513],"showclose":[4],"showshadow":[516],"sticky":[516]}]]],["p-540c7d73",[[1,"z-pocket-message"]]],["p-214b6cee",[[1,"z-section-title",{"dividerPosition":[1,"divider-position"],"uppercase":[516]}]]],["p-c25b0b2a",[[1,"z-slideshow",{"slideshowid":[1],"data":[1],"device":[32],"currentSlide":[32]}]]],["p-344e7ae7",[[6,"z-tag",{"icon":[1],"expandable":[4]}]]],["p-26f834e5",[[1,"z-toast-notification",{"heading":[1],"message":[1],"closebutton":[4],"autoclose":[2],"pauseonfocusloss":[4],"type":[1],"isdraggable":[4],"draggablepercentage":[2],"transition":[1],"percentage":[32]}]]],["p-9d03a7d6",[[1,"z-toggle-button",{"label":[1],"isdisabled":[4],"avoidclick":[4],"opened":[1028]}]]],["p-9965827d",[[6,"z-toggle-switch",{"disabled":[516],"labelPosition":[513,"label-position"],"checked":[1028],"htmlid":[1]}]]],["p-009c9f67",[[1,"z-tooltip",{"position":[513],"dark":[516],"open":[1540],"bindTo":[1,"bind-to"]},[[0,"openChange","onPopoverOpenChange"]]]]],["p-51e308ca",[[4,"z-aria-alert",{"mode":[1]}]]],["p-8c105bd1",[[1,"z-avatar",{"size":[1],"text":[1],"textColor":[1,"text-color"],"backgroundColor":[1,"background-color"],"image":[1025]}]]],["p-67d6cfcb",[[1,"z-cover-hero",{"variant":[513],"contentPosition":[513,"content-position"]}]]],["p-475ca461",[[1,"z-myz-card-footer",{"titolo":[1],"autori":[1],"isbn":[1],"faded":[4],"cardtype":[1],"opened":[4],"customContent":[4,"custom-content"],"isOpen":[32],"allowTooltipAuthors":[32]},[[0,"toggleClick","handleToggle"]]]]],["p-af4d1987",[[1,"z-myz-card-footer-sections"]]],["p-ce83ce18",[[1,"z-myz-card-list",{"listdata":[1]}]]],["p-73c91de3",[[1,"z-stepper"]]],["p-810bd730",[[1,"z-stepper-item",{"index":[2],"href":[1],"pressed":[4],"disabled":[4]}]]],["p-c4417a91",[[6,"z-table-body"]]],["p-bb0fe7bc",[[1,"z-table-expanded-row",{"colSpan":[2,"col-span"]}]]],["p-eaa4eba8",[[6,"z-table-footer"]]],["p-37e050bd",[[6,"z-table-head"]]],["p-3be171d0",[[6,"z-table-sticky-footer"]]],["p-34c26207",[[1,"z-toast-notification-list",{"position":[513],"newestontop":[4]}]]],["p-f54f63e1",[[1,"z-visually-hidden"]]],["p-8bf0844b",[[1,"z-table-header",{"columnId":[1,"column-id"],"padding":[513],"sortable":[4],"showButton":[4,"show-button"],"defaultSortDirection":[1,"default-sort-direction"],"sortDirection":[1025,"sort-direction"]},[[18,"click","handleOutsideClick"],[18,"click","handleClickHeaders"]]]]],["p-0fa4b50b",[[1,"z-table-cell",{"showButton":[4,"show-button"],"padding":[513],"isMenuOpened":[32]}]]],["p-735bdfa3",[[6,"z-table-empty-box",{"message":[1],"subtitle":[1]}]]],["p-411cbcd6",[[6,"z-chip",{"icon":[1],"type":[513],"interactiveIcon":[513,"interactive-icon"],"disabled":[516]}]]],["p-074ea569",[[1,"z-alert",{"type":[1]}]]],["p-9d57a84c",[[1,"z-ghost-loading"]]],["p-b17981a4",[[1,"z-dragdrop-area"],[1,"z-heading",{"level":[2],"variant":[1],"component":[1]}]]],["p-a2b67e2d",[[1,"z-app-switcher",{"theme":[1],"isopen":[32]}],[1,"z-logo",{"width":[2],"height":[2],"imageAlt":[1,"image-alt"],"link":[1],"targetBlank":[4,"target-blank"],"mobileLogo":[4,"mobile-logo"]}]]],["p-4cd6c6f4",[[1,"z-modal",{"modalid":[1],"modaltitle":[1],"modalsubtitle":[1],"closeButtonLabel":[1,"close-button-label"]}]]],["p-1b6279a6",[[1,"z-myz-list-item",{"text":[1],"link":[1],"linktarget":[1],"icon":[1],"listitemid":[1],"action":[1],"underlined":[4]}]]],["p-20a3247c",[[1,"z-pocket",{"pocketid":[1],"status":[1025],"open":[64],"close":[64]},[[0,"pocketHeaderClick","handlePocketHeaderClick"],[0,"pocketHeaderPan","handlePocketHeaderPan"]]],[1,"z-pocket-body",{"pocketid":[1],"status":[1025]},[[16,"pocketToggle","handlePocketToggle"]]],[1,"z-pocket-header",{"pocketid":[1]}]]],["p-b33f5e6a",[[1,"z-myz-card",{"faded":[4],"cardtype":[1],"ispressed":[4],"ishighlighted":[4]}],[1,"z-myz-card-body"],[1,"z-myz-card-cover",{"img":[1],"titolo":[1],"faded":[4],"defaultimg":[1]}],[1,"z-myz-card-header",{"titolo":[1],"faded":[4],"cardtype":[1],"allowTooltip":[32]}]]],["p-f0653e72",[[1,"z-link",{"htmlid":[1],"href":[1],"target":[1],"htmltabindex":[2],"isdisabled":[4],"isactive":[4],"iswhite":[4],"textcolor":[1],"icon":[1],"big":[516],"iconposition":[1],"underline":[4],"iconSize":[32]}]]],["p-8b960526",[[1,"z-popover",{"position":[513],"open":[1540],"bindTo":[1,"bind-to"],"showArrow":[516,"show-arrow"],"center":[516],"closable":[4],"currentPosition":[32]},[[8,"keyup","closePopoverWithKeyboard"],[18,"click","handleOutsideClick"]]]]],["p-33352f9e",[[2,"z-divider",{"size":[1],"color":[1],"orientation":[1]}]]],["p-9c338aeb",[[1,"z-list-element",{"alignButton":[513,"align-button"],"clickable":[516],"dividerColor":[1,"divider-color"],"dividerType":[1,"divider-type"],"dividerSize":[1,"divider-size"],"expandable":[516],"expandableStyle":[1,"expandable-style"],"listElementId":[514,"list-element-id"],"size":[513],"color":[513],"disabled":[516],"isContextualMenu":[516,"is-contextual-menu"],"listElementPosition":[513,"list-element-position"],"listType":[513,"list-type"],"showInnerContent":[32]},[[4,"accessibleFocus","accessibleFocusHandler"]]],[1,"z-list",{"size":[513],"listType":[513,"list-type"]}],[1,"z-list-group",{"size":[513],"dividerType":[513,"divider-type"],"dividerSize":[513,"divider-size"],"dividerColor":[513,"divider-color"],"listType":[513,"list-type"]}]]],["p-2d1b6c3c",[[6,"z-button",{"ariaLabel":[513,"aria-label"],"href":[1],"target":[1],"htmlid":[1],"name":[1],"disabled":[516],"type":[1],"variant":[513],"icon":[1],"size":[513]}]]],["p-98c94e81",[[2,"z-input",{"htmlid":[1],"type":[1],"name":[1],"label":[1],"ariaLabel":[1,"aria-label"],"value":[1025],"disabled":[516],"readonly":[4],"required":[4],"checked":[1028],"placeholder":[1],"htmltitle":[1],"status":[1],"message":[8],"labelPosition":[1,"label-position"],"autocomplete":[1],"hasclearicon":[4],"icon":[1],"min":[2],"max":[2],"step":[2],"pattern":[1],"isTyping":[32],"passwordHidden":[32],"isChecked":[64]},[[4,"inputCheck","inputCheckListener"]]],[1,"z-input-message",{"message":[1],"status":[513]}]]],["p-a79d1412",[[1,"z-body",{"level":[2],"variant":[1],"component":[1]}],[1,"z-typography",{"level":[1],"variant":[1],"component":[1]}]]]]'),e)));
|
|
1
|
+
import{p as e,b as t}from"./p-d17ebc2f.js";(()=>{const t=import.meta.url,i={};return""!==t&&(i.resourcesUrl=new URL(".",t).href),e(i)})().then((e=>t(JSON.parse('[["p-d3c72572",[[6,"z-offcanvas",{"variant":[513],"open":[1540],"transitiondirection":[513]}],[1,"z-icon",{"name":[1],"height":[2],"width":[2],"iconid":[1],"fill":[1]}]]],["p-3d9ecc23",[[2,"z-select",{"htmlid":[1],"items":[1],"name":[1],"label":[1],"ariaLabel":[1,"aria-label"],"disabled":[4],"readonly":[4],"placeholder":[1],"htmltitle":[1],"status":[1],"message":[8],"autocomplete":[4],"noresultslabel":[1],"hasGroupItems":[4,"has-group-items"],"isOpen":[32],"selectedItem":[32],"searchString":[32],"getSelectedItem":[64],"getValue":[64],"setValue":[64]}]]],["p-547d3b1f",[[1,"z-combobox",{"inputid":[1],"items":[1],"label":[1],"hassearch":[4],"searchlabel":[1],"searchplaceholder":[1],"searchtitle":[1],"noresultslabel":[1],"isopen":[1028],"isfixed":[4],"closesearchtext":[1],"hascheckall":[4],"checkalltext":[1],"uncheckalltext":[1],"maxcheckableitems":[2],"hasgroupitems":[4],"searchValue":[32],"selectedCounter":[32],"renderItemsList":[32]},[[0,"inputCheck","inputCheckListener"]]]]],["p-279655eb",[[1,"z-file-upload",{"type":[513],"buttonVariant":[1,"button-variant"],"acceptedFormat":[1,"accepted-format"],"fileMaxSize":[2,"file-max-size"],"mainTitle":[1,"main-title"],"description":[1],"files":[32],"invalidFiles":[32],"getFiles":[64]},[[0,"removeFile","removeFileListener"],[0,"fileDropped","fileDroppedListener"]]]]],["p-f20d1242",[[6,"z-modal-login",{"forgotPasswordUrl":[1,"forgot-password-url"],"heading":[1],"status":[1025],"message":[1],"pwdmessage":[1],"externalProviderCheck":[32]}]]],["p-0843b0e7",[[1,"z-contextual-menu",{"elements":[1],"color":[1],"popoverPosition":[513,"popover-position"]}]]],["p-59cfee8d",[[1,"z-myz-card-dictionary",{"name":[1],"cover":[1],"disabled":[4],"flipped":[1028],"flipbuttonlabel":[1],"hideinfobtn":[4]},[[0,"flipCard","handleFlipCard"]]]]],["p-1ba8d432",[[1,"z-app-topbar",{"theme":[1],"contentMaxWidth":[2,"content-max-width"],"topbarContent":[1,"topbar-content"],"logoLink":[1,"logo-link"],"showAppSwitcher":[4,"show-app-switcher"],"isMobile":[32]},[[9,"resize","handleResize"]]]]],["p-95b8f109",[[4,"z-table",{"lines":[514],"errorMessage":[1,"error-message"],"bordered":[4],"callToActionLabel":[1,"call-to-action-label"],"callToActionTwoLabel":[1,"call-to-action-two-label"],"columnSticky":[4,"column-sticky"],"empty":[4],"error":[4],"errorLink":[1,"error-link"],"headerSticky":[4,"header-sticky"],"message":[1],"subtitle":[1],"hasTableBody":[32],"isMobile":[32]},[[9,"resize","handleResize"],[8,"orientationchange","handleOrientationChange"]]]]],["p-07e18572",[[1,"z-messages-pocket",{"pocketid":[1],"messages":[2],"status":[1025]},[[16,"pocketToggle","handlePocketToggle"]]]]],["p-01f001fd",[[0,"z-pagination",{"label":[1],"navArrows":[4,"nav-arrows"],"totalPages":[2,"total-pages"],"skip":[2],"edges":[4],"split":[2],"visiblePages":[2,"visible-pages"],"currentPage":[1026,"current-page"],"goToPage":[4,"go-to-page"],"_visiblePages":[32],"isMobile":[32],"goToPageValue":[32]},[[9,"resize","onResize"]]]]],["p-3f55dce6",[[4,"z-table-header-row",{"expandable":[516]}]]],["p-93dc6d51",[[4,"z-carousel",{"isLoading":[4,"is-loading"],"label":[1],"single":[4],"arrowsPosition":[1,"arrows-position"],"progressMode":[1,"progress-mode"],"ghostLoadingHeight":[2,"ghost-loading-height"],"current":[32],"items":[32]}]]],["p-b6f36170",[[4,"z-date-picker",{"datePickerId":[1,"date-picker-id"],"ariaLabel":[1,"aria-label"],"label":[1],"mode":[1],"flatpickrPosition":[32],"inputError":[32]},[[18,"keydown","handleKeyDown"]]]]],["p-38a3cf3b",[[2,"z-file",{"fileNumber":[2,"file-number"],"fileName":[1,"file-name"],"allowPopover":[32],"popoverVisible":[32]},[[1,"mouseover","onMouseOver"],[1,"mouseleave","onMouseLeave"],[0,"interactiveIconClick","onInteractiveIconClick"]]]]],["p-2acd6a51",[[0,"z-range-picker",{"rangePickerId":[1,"range-picker-id"],"firstAriaLabel":[1,"first-aria-label"],"firstLabel":[1,"first-label"],"secondAriaLabel":[1,"second-aria-label"],"secondLabel":[1,"second-label"],"mode":[1],"flatpickrPosition":[32],"activeInput":[32],"firstInputError":[32],"lastInputError":[32]},[[18,"click","handleClick"],[18,"keyup","handleKeyDown"]]]]],["p-9ed27651",[[4,"z-table-row",{"expandedType":[513,"expanded-type"],"expanded":[32]}]]],["p-9c28b8fc",[[4,"z-anchor-navigation",{"hideUnselected":[516,"hide-unselected"],"collapsed":[32]}]]],["p-682528b2",[[1,"z-menu-dropdown",{"nomeutente":[1],"menucontent":[1],"buttonid":[1],"ismenuopen":[32]}]]],["p-3a468aa9",[[1,"z-myz-card-alert",{"iconname":[1],"contenttext":[1],"actiontext":[1],"type":[1]}]]],["p-bdc6f2e5",[[1,"z-myz-card-info",{"data":[1],"htmltabindex":[2],"hiddenContent":[32],"tooltip":[32]}]]],["p-e40b16fa",[[1,"z-myz-list",{"inputrawdata":[1],"list":[1040]}]]],["p-5dd9a2c6",[[1,"z-otp",{"inputNum":[2,"input-num"],"status":[1],"message":[1]}]]],["p-c6aad085",[[1,"z-panel-elem",{"elemid":[1],"imgurl":[1],"imgalt":[1],"linkicon":[1],"linklabel":[1],"url":[1],"target":[1],"isdisabled":[4],"descrSlotName":[1,"descr-slot-name"]}]]],["p-8980398c",[[2,"z-skip-to-content",{"variant":[513],"links":[1025],"visible":[32],"visibleLink":[32]},[[4,"focusout","handleFocusOutSkipToContent"],[4,"focusin","handleFocusSkipToContent"]]]]],["p-3c2d438b",[[1,"z-user-dropdown",{"logged":[4],"userFullName":[1,"user-full-name"],"userEmail":[1,"user-email"],"menuContent":[1,"menu-content"],"useInverseColors":[4,"use-inverse-colors"],"isMenuOpen":[32],"isMobile":[32]},[[9,"resize","handleResize"],[8,"orientationchange","handleOrientationChange"],[8,"click","handleClickOutside"]]]]],["p-edf0195b",[[1,"z-app-header",{"stuck":[516],"hero":[1],"overlay":[516],"flow":[513],"drawerOpen":[516,"drawer-open"],"stucked":[32],"menuLength":[32]}]]],["p-ede9fbf5",[[1,"z-button-sort",{"buttonid":[1],"label":[1],"desclabel":[1],"counter":[2],"sortlabelasc":[1],"sortlabeldesc":[1],"isselected":[1028],"sortasc":[1028],"allowTooltip":[32]}]]],["p-a82ea410",[[1,"z-card",{"variant":[513],"coverIcon":[1,"cover-icon"],"clickable":[516],"showshadow":[516],"hasCoverImage":[32]},[[0,"click","onClick"]]]]],["p-5b6d2bcf",[[1,"z-icon-package"]]],["p-61424b8a",[[1,"z-info-box",{"boxid":[1],"isclosable":[4]}]]],["p-beba3e67",[[1,"z-info-reveal",{"icon":[1],"position":[513],"label":[1],"open":[32],"currentIndex":[32]}]]],["p-f158d205",[[1,"z-menu",{"active":[516],"floating":[516],"open":[1540],"hasHeader":[32],"hasContent":[32]},[[4,"click","handleClick"]]]]],["p-f95cc914",[[1,"z-menu-section",{"active":[516],"open":[32],"hasContent":[32]},[[4,"click","handleClick"]]]]],["p-05ced71c",[[1,"z-myz-card-icon",{"icon":[1],"isdisabled":[4],"ariaLabel":[1,"aria-label"]}]]],["p-7af991f5",[[0,"z-navigation-tab",{"selected":[1540],"disabled":[516],"orientation":[513],"size":[513],"icon":[1],"label":[1],"htmlTitle":[1,"html-title"]},[[0,"click","onClick"]]]]],["p-8ffc17b7",[[0,"z-navigation-tab-link",{"selected":[1540],"disabled":[516],"orientation":[513],"size":[513],"htmlTitle":[1,"html-title"],"target":[1],"href":[1],"icon":[1],"label":[1]},[[0,"click","onClick"]]]]],["p-6b1a5309",[[1,"z-navigation-tabs",{"orientation":[513],"size":[513],"canNavigate":[32],"canNavigatePrev":[32],"canNavigateNext":[32]},[[9,"resize","checkScrollVisible"],[0,"selected","onTabSelected"]]]]],["p-2efedcf4",[[1,"z-notification",{"contenticonname":[1],"actiontext":[1],"type":[513],"showclose":[4],"showshadow":[516],"sticky":[516]}]]],["p-540c7d73",[[1,"z-pocket-message"]]],["p-214b6cee",[[1,"z-section-title",{"dividerPosition":[1,"divider-position"],"uppercase":[516]}]]],["p-c25b0b2a",[[1,"z-slideshow",{"slideshowid":[1],"data":[1],"device":[32],"currentSlide":[32]}]]],["p-344e7ae7",[[6,"z-tag",{"icon":[1],"expandable":[4]}]]],["p-26f834e5",[[1,"z-toast-notification",{"heading":[1],"message":[1],"closebutton":[4],"autoclose":[2],"pauseonfocusloss":[4],"type":[1],"isdraggable":[4],"draggablepercentage":[2],"transition":[1],"percentage":[32]}]]],["p-9d03a7d6",[[1,"z-toggle-button",{"label":[1],"isdisabled":[4],"avoidclick":[4],"opened":[1028]}]]],["p-9965827d",[[6,"z-toggle-switch",{"disabled":[516],"labelPosition":[513,"label-position"],"checked":[1028],"htmlid":[1]}]]],["p-009c9f67",[[1,"z-tooltip",{"position":[513],"dark":[516],"open":[1540],"bindTo":[1,"bind-to"]},[[0,"openChange","onPopoverOpenChange"]]]]],["p-51e308ca",[[4,"z-aria-alert",{"mode":[1]}]]],["p-8c105bd1",[[1,"z-avatar",{"size":[1],"text":[1],"textColor":[1,"text-color"],"backgroundColor":[1,"background-color"],"image":[1025]}]]],["p-67d6cfcb",[[1,"z-cover-hero",{"variant":[513],"contentPosition":[513,"content-position"]}]]],["p-475ca461",[[1,"z-myz-card-footer",{"titolo":[1],"autori":[1],"isbn":[1],"faded":[4],"cardtype":[1],"opened":[4],"customContent":[4,"custom-content"],"isOpen":[32],"allowTooltipAuthors":[32]},[[0,"toggleClick","handleToggle"]]]]],["p-af4d1987",[[1,"z-myz-card-footer-sections"]]],["p-ce83ce18",[[1,"z-myz-card-list",{"listdata":[1]}]]],["p-73c91de3",[[1,"z-stepper"]]],["p-810bd730",[[1,"z-stepper-item",{"index":[2],"href":[1],"pressed":[4],"disabled":[4]}]]],["p-c4417a91",[[6,"z-table-body"]]],["p-bb0fe7bc",[[1,"z-table-expanded-row",{"colSpan":[2,"col-span"]}]]],["p-eaa4eba8",[[6,"z-table-footer"]]],["p-37e050bd",[[6,"z-table-head"]]],["p-3be171d0",[[6,"z-table-sticky-footer"]]],["p-34c26207",[[1,"z-toast-notification-list",{"position":[513],"newestontop":[4]}]]],["p-f54f63e1",[[1,"z-visually-hidden"]]],["p-8bf0844b",[[1,"z-table-header",{"columnId":[1,"column-id"],"padding":[513],"sortable":[4],"showButton":[4,"show-button"],"defaultSortDirection":[1,"default-sort-direction"],"sortDirection":[1025,"sort-direction"]},[[18,"click","handleOutsideClick"],[18,"click","handleClickHeaders"]]]]],["p-0fa4b50b",[[1,"z-table-cell",{"showButton":[4,"show-button"],"padding":[513],"isMenuOpened":[32]}]]],["p-735bdfa3",[[6,"z-table-empty-box",{"message":[1],"subtitle":[1]}]]],["p-411cbcd6",[[6,"z-chip",{"icon":[1],"type":[513],"interactiveIcon":[513,"interactive-icon"],"disabled":[516]}]]],["p-074ea569",[[1,"z-alert",{"type":[1]}]]],["p-9d57a84c",[[1,"z-ghost-loading"]]],["p-b17981a4",[[1,"z-dragdrop-area"],[1,"z-heading",{"level":[2],"variant":[1],"component":[1]}]]],["p-a2b67e2d",[[1,"z-app-switcher",{"theme":[1],"isopen":[32]}],[1,"z-logo",{"width":[2],"height":[2],"imageAlt":[1,"image-alt"],"link":[1],"targetBlank":[4,"target-blank"],"mobileLogo":[4,"mobile-logo"]}]]],["p-4cd6c6f4",[[1,"z-modal",{"modalid":[1],"modaltitle":[1],"modalsubtitle":[1],"closeButtonLabel":[1,"close-button-label"]}]]],["p-1b6279a6",[[1,"z-myz-list-item",{"text":[1],"link":[1],"linktarget":[1],"icon":[1],"listitemid":[1],"action":[1],"underlined":[4]}]]],["p-20a3247c",[[1,"z-pocket",{"pocketid":[1],"status":[1025],"open":[64],"close":[64]},[[0,"pocketHeaderClick","handlePocketHeaderClick"],[0,"pocketHeaderPan","handlePocketHeaderPan"]]],[1,"z-pocket-body",{"pocketid":[1],"status":[1025]},[[16,"pocketToggle","handlePocketToggle"]]],[1,"z-pocket-header",{"pocketid":[1]}]]],["p-b33f5e6a",[[1,"z-myz-card",{"faded":[4],"cardtype":[1],"ispressed":[4],"ishighlighted":[4]}],[1,"z-myz-card-body"],[1,"z-myz-card-cover",{"img":[1],"titolo":[1],"faded":[4],"defaultimg":[1]}],[1,"z-myz-card-header",{"titolo":[1],"faded":[4],"cardtype":[1],"allowTooltip":[32]}]]],["p-f0653e72",[[1,"z-link",{"htmlid":[1],"href":[1],"target":[1],"htmltabindex":[2],"isdisabled":[4],"isactive":[4],"iswhite":[4],"textcolor":[1],"icon":[1],"big":[516],"iconposition":[1],"underline":[4],"iconSize":[32]}]]],["p-8b960526",[[1,"z-popover",{"position":[513],"open":[1540],"bindTo":[1,"bind-to"],"showArrow":[516,"show-arrow"],"center":[516],"closable":[4],"currentPosition":[32]},[[8,"keyup","closePopoverWithKeyboard"],[18,"click","handleOutsideClick"]]]]],["p-33352f9e",[[2,"z-divider",{"size":[1],"color":[1],"orientation":[1]}]]],["p-9c338aeb",[[1,"z-list-element",{"alignButton":[513,"align-button"],"clickable":[516],"dividerColor":[1,"divider-color"],"dividerType":[1,"divider-type"],"dividerSize":[1,"divider-size"],"expandable":[516],"expandableStyle":[1,"expandable-style"],"listElementId":[514,"list-element-id"],"size":[513],"color":[513],"disabled":[516],"isContextualMenu":[516,"is-contextual-menu"],"listElementPosition":[513,"list-element-position"],"listType":[513,"list-type"],"showInnerContent":[32]},[[4,"accessibleFocus","accessibleFocusHandler"]]],[1,"z-list",{"size":[513],"listType":[513,"list-type"]}],[1,"z-list-group",{"size":[513],"dividerType":[513,"divider-type"],"dividerSize":[513,"divider-size"],"dividerColor":[513,"divider-color"],"listType":[513,"list-type"]}]]],["p-2d1b6c3c",[[6,"z-button",{"ariaLabel":[513,"aria-label"],"href":[1],"target":[1],"htmlid":[1],"name":[1],"disabled":[516],"type":[1],"variant":[513],"icon":[1],"size":[513]}]]],["p-98c94e81",[[2,"z-input",{"htmlid":[1],"type":[1],"name":[1],"label":[1],"ariaLabel":[1,"aria-label"],"value":[1025],"disabled":[516],"readonly":[4],"required":[4],"checked":[1028],"placeholder":[1],"htmltitle":[1],"status":[1],"message":[8],"labelPosition":[1,"label-position"],"autocomplete":[1],"hasclearicon":[4],"icon":[1],"min":[2],"max":[2],"step":[2],"pattern":[1],"isTyping":[32],"passwordHidden":[32],"isChecked":[64]},[[4,"inputCheck","inputCheckListener"]]],[1,"z-input-message",{"message":[1],"status":[513]}]]],["p-a79d1412",[[1,"z-body",{"level":[2],"variant":[1],"component":[1]}],[1,"z-typography",{"level":[1],"variant":[1],"component":[1]}]]]]'),e)));
|
package/www/index.html
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Albe test application</title> <link rel="stylesheet" type="text/css" href="/build/p-
|
|
2
|
-
let snafu = document.getElementById(
|
|
3
|
-
snafu.addEventListener(
|
|
4
|
-
|
|
1
|
+
<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Albe test application</title> <link rel="stylesheet" type="text/css" href="/build/p-e680285b.css"> <link rel="modulepreload" href="/build/p-99d3834c.js"><script type="module" src="/build/p-99d3834c.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body> <main> <z-icon aria-label="chiudi" tabindex="0" id="icon-folder" name="folder" height="26" width="26"></z-icon> <z-offcanvas id="offca" variant="overlay"></z-offcanvas> <main></main> <script>
|
|
2
|
+
let snafu = document.getElementById('icon-folder');
|
|
3
|
+
snafu.addEventListener('click', () => {
|
|
4
|
+
console.log('click');
|
|
5
|
+
document.getElementById('offca').setAttribute("open", "");
|
|
5
6
|
});
|
|
7
|
+
|
|
6
8
|
</script> </main> </body></html>
|
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-e3299e0a.js');
|
|
6
|
-
const icons = require('./icons-460f0f1e.js');
|
|
7
|
-
const index$1 = require('./index-fa110f37.js');
|
|
8
|
-
|
|
9
|
-
const stylesCss$2 = ":host{--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%;height:var(--app-header-height);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;justify-content:flex-start;padding:calc(var(--space-unit) * 2) var(--grid-mobile-margin);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-stucked{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;display:flex;width:100%;max-width:100%;flex-direction:row;padding:var(--space-unit) var(--grid-mobile-margin);animation:slide-stucked-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stucked .heading-title,.heading-stucked .heading-title>*,.heading-stucked .heading-title ::slotted([slot=\"stucked-title\"]){display:block;overflow:hidden;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.heading-stucked .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 only screen and (min-width: 768px){.heading-panel{padding:calc(var(--space-unit) * 3) var(--grid-tablet-margin)}.heading-stucked{padding-right:var(--grid-tablet-margin);padding-left:var(--grid-tablet-margin)}: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 only screen and (min-width: 1152px){.heading-panel,.heading-stucked{padding-right:var(--grid-desktop-margin);padding-left:var(--grid-desktop-margin)}:host(:not([flow=\"stack\"])) .heading-panel{flex-flow:row wrap}::slotted([slot=\"title\"]){margin-right:var(--grid-desktop-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 only screen and (min-width: 1366px){.heading-panel,.heading-stucked{padding-right:var(--grid-wide-margin);padding-left:var(--grid-wide-margin)}::slotted([slot=\"title\"]){margin-right:var(--grid-wide-gutter);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-stucked-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
|
|
10
|
-
|
|
11
|
-
const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
|
|
12
|
-
const ZAppHeader = class {
|
|
13
|
-
constructor(hostRef) {
|
|
14
|
-
index.registerInstance(this, hostRef);
|
|
15
|
-
this.sticking = index.createEvent(this, "sticking", 7);
|
|
16
|
-
/**
|
|
17
|
-
* Stuck mode for the header.
|
|
18
|
-
* You can programmatically set it using an IntersectionObserver.
|
|
19
|
-
* **Optional**
|
|
20
|
-
*/
|
|
21
|
-
this.stuck = false;
|
|
22
|
-
/**
|
|
23
|
-
* Should place an overlay over the hero image.
|
|
24
|
-
* Useful for legibility purpose.
|
|
25
|
-
* **Optional**
|
|
26
|
-
*/
|
|
27
|
-
this.overlay = false;
|
|
28
|
-
/**
|
|
29
|
-
* Control menu bar position in the header.
|
|
30
|
-
* - auto: the menu bar is positioned near the title
|
|
31
|
-
* - stack: the menu bar is positioned below the title
|
|
32
|
-
* - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
|
|
33
|
-
*
|
|
34
|
-
* **Optional**
|
|
35
|
-
*/
|
|
36
|
-
this.flow = "auto";
|
|
37
|
-
/**
|
|
38
|
-
* The opening state of the drawer.
|
|
39
|
-
*/
|
|
40
|
-
this.drawerOpen = false;
|
|
41
|
-
/**
|
|
42
|
-
* The stucked state of the bar.
|
|
43
|
-
*/
|
|
44
|
-
this.stucked = false;
|
|
45
|
-
this.observer = SUPPORT_INTERSECTION_OBSERVER &&
|
|
46
|
-
new IntersectionObserver(([entry]) => {
|
|
47
|
-
this.stucked = !entry.isIntersecting;
|
|
48
|
-
}, {
|
|
49
|
-
threshold: 0.5,
|
|
50
|
-
});
|
|
51
|
-
this.openDrawer = this.openDrawer.bind(this);
|
|
52
|
-
this.closeDrawer = this.closeDrawer.bind(this);
|
|
53
|
-
this.collectMenuElements.bind(this);
|
|
54
|
-
}
|
|
55
|
-
emitStickingEvent() {
|
|
56
|
-
this.sticking.emit(this.stucked);
|
|
57
|
-
}
|
|
58
|
-
componentDidLoad() {
|
|
59
|
-
this.collectMenuElements();
|
|
60
|
-
this.onStuckMode();
|
|
61
|
-
}
|
|
62
|
-
get title() {
|
|
63
|
-
const titleElement = this.hostElement.querySelector('[slot="title"]');
|
|
64
|
-
if (titleElement === null) {
|
|
65
|
-
return "";
|
|
66
|
-
}
|
|
67
|
-
return titleElement.textContent.trim();
|
|
68
|
-
}
|
|
69
|
-
get scrollParent() {
|
|
70
|
-
const parent = this.hostElement.offsetParent;
|
|
71
|
-
if (parent === document.body || parent === document.documentElement) {
|
|
72
|
-
return window;
|
|
73
|
-
}
|
|
74
|
-
return parent;
|
|
75
|
-
}
|
|
76
|
-
collectMenuElements() {
|
|
77
|
-
const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot="menu"]'));
|
|
78
|
-
this.menuLength = menuElements.length;
|
|
79
|
-
this.setMenuFloatingMode();
|
|
80
|
-
}
|
|
81
|
-
onStuckMode() {
|
|
82
|
-
if (this.stuck) {
|
|
83
|
-
this.enableStuckObserver();
|
|
84
|
-
}
|
|
85
|
-
else {
|
|
86
|
-
this.disableStuckMode();
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
enableStuckObserver() {
|
|
90
|
-
if (this.observer) {
|
|
91
|
-
this.observer.observe(this.container);
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
disableStuckMode() {
|
|
95
|
-
this.stucked = false;
|
|
96
|
-
if (this.observer) {
|
|
97
|
-
this.observer.unobserve(this.container);
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
onStucked() {
|
|
101
|
-
const scrollParent = this.scrollParent;
|
|
102
|
-
if (!scrollParent) {
|
|
103
|
-
return;
|
|
104
|
-
}
|
|
105
|
-
this.emitStickingEvent();
|
|
106
|
-
}
|
|
107
|
-
setMenuFloatingMode() {
|
|
108
|
-
if (this.menuElements.length === 0) {
|
|
109
|
-
return;
|
|
110
|
-
}
|
|
111
|
-
const elements = this.menuElements;
|
|
112
|
-
for (let i = 0, len = elements.length; i < len; i++) {
|
|
113
|
-
elements[i].open = false;
|
|
114
|
-
elements[i].floating = !this.drawerOpen;
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
render() {
|
|
118
|
-
return (index.h(index.Host, { "menu-length": this.menuLength }, index.h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, index.h("div", { class: "hero-container" }, index.h("slot", { name: "hero" }, this.hero && (index.h("img", { alt: "", src: this.hero })))), index.h("div", { class: "heading-container" }, index.h("div", { class: "heading-title" }, this.menuLength > 0 && (index.h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { name: "burger-menu" }))), index.h("slot", { name: "title" })), index.h("div", { class: "heading-subtitle" }, index.h("slot", { name: "subtitle" }))), index.h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (index.h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() })))), index.h("div", { class: "drawer-container" }, index.h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), index.h("div", { class: "drawer-panel" }, index.h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, index.h("z-icon", { name: "close" })), index.h("div", { class: "drawer-content" }, this.drawerOpen && (index.h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() }))))), this.stucked && (index.h("div", { class: "heading-stucked" }, this.menuLength > 0 && (index.h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { name: "burger-menu" }))), index.h("div", { class: "heading-title" }, index.h("slot", { name: "stucked-title" }, this.title))))));
|
|
119
|
-
}
|
|
120
|
-
openDrawer() {
|
|
121
|
-
this.drawerOpen = true;
|
|
122
|
-
}
|
|
123
|
-
closeDrawer() {
|
|
124
|
-
this.drawerOpen = false;
|
|
125
|
-
}
|
|
126
|
-
get hostElement() { return index.getElement(this); }
|
|
127
|
-
static get watchers() { return {
|
|
128
|
-
"stuck": ["onStuckMode"],
|
|
129
|
-
"stucked": ["onStucked"],
|
|
130
|
-
"drawerOpen": ["setMenuFloatingMode"]
|
|
131
|
-
}; }
|
|
132
|
-
};
|
|
133
|
-
ZAppHeader.style = stylesCss$2;
|
|
134
|
-
|
|
135
|
-
const stylesCss$1 = ":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)}";
|
|
136
|
-
|
|
137
|
-
const ZIcon = class {
|
|
138
|
-
constructor(hostRef) {
|
|
139
|
-
index.registerInstance(this, hostRef);
|
|
140
|
-
}
|
|
141
|
-
selectPathOrPolygon(iconValue) {
|
|
142
|
-
if (iconValue === null || iconValue === void 0 ? void 0 : iconValue.startsWith("M")) {
|
|
143
|
-
return index.h("path", { d: icons.ICONS[this.name] });
|
|
144
|
-
}
|
|
145
|
-
return index.h("polygon", { points: icons.ICONS[this.name] });
|
|
146
|
-
}
|
|
147
|
-
render() {
|
|
148
|
-
return (index.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.ICONS[this.name])));
|
|
149
|
-
}
|
|
150
|
-
};
|
|
151
|
-
ZIcon.style = stylesCss$1;
|
|
152
|
-
|
|
153
|
-
const stylesCss = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;display:none;min-width:100%;height:100%;justify-content:end;font-family:var(--font-family-sans);font-weight:var(--font-rg);background-color:green}.display-flex.sc-z-offcanvas-h{display:flex}.sc-z-offcanvas-h .canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas:focus{background-color:aqua}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:red;transform:translateX(100%)}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-right;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-right{from{transform:translateX(0)}to{transform:translateX(100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-right;animation-timing-function:ease-out;transform:translateX(100%)}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}[transitiondirection=\"right\"].sc-z-offcanvas-h{justify-content:start}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}[transitiondirection=\"right\"][open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-left;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-left;animation-timing-function:ease-out;transform:translateX(-100%)}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]{width:auto;animation-duration:0.4s;animation-name:grow;animation-timing-function:ease-out}}";
|
|
154
|
-
|
|
155
|
-
const ZOffcanvas = class {
|
|
156
|
-
constructor(hostRef) {
|
|
157
|
-
index.registerInstance(this, hostRef);
|
|
158
|
-
this.canvasOpenStatusChanged = index.createEvent(this, "canvasOpenStatusChanged", 7);
|
|
159
|
-
/**
|
|
160
|
-
* Offcanvas variant.
|
|
161
|
-
* Can be one of "overlay", "pushcontent"
|
|
162
|
-
* Default variant: pushcontent
|
|
163
|
-
*/
|
|
164
|
-
this.variant = index$1.OffCanvasVariant.PUSHCONTENT;
|
|
165
|
-
/** open component. Default: false */
|
|
166
|
-
this.open = false;
|
|
167
|
-
/** open content transitioning in a specified direction left | right. Default: left */
|
|
168
|
-
this.transitiondirection = index$1.TransitionDirection.LEFT;
|
|
169
|
-
}
|
|
170
|
-
onOpenChanged() {
|
|
171
|
-
this.canvasOpenStatusChanged.emit(this.open);
|
|
172
|
-
}
|
|
173
|
-
// private handleOpenStatus(): void {
|
|
174
|
-
// if (this.open) {
|
|
175
|
-
// this.hostElement.style.display = "flex";
|
|
176
|
-
// } else if (this.variant === OffCanvasVariant.PUSHCONTENT) {
|
|
177
|
-
// this.hostElement.style.display = "none";
|
|
178
|
-
// document.body.style.overflowX = "hidden";
|
|
179
|
-
// }
|
|
180
|
-
// }
|
|
181
|
-
handleAnimationEnd() {
|
|
182
|
-
if (this.hostElement.hasAttribute("open")) {
|
|
183
|
-
this.hostElement.querySelector(`.canvas-content`).focus();
|
|
184
|
-
}
|
|
185
|
-
else if (this.variant === index$1.OffCanvasVariant.OVERLAY) {
|
|
186
|
-
this.hostElement.style.display = "none";
|
|
187
|
-
document.body.style.overflowX = "initial";
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
render() {
|
|
191
|
-
return (index.h(index.Host, { class: {
|
|
192
|
-
"display-flex": this.open,
|
|
193
|
-
} }, index.h("div", { class: "canvas-container", onAnimationEnd: () => this.handleAnimationEnd() }, index.h("div", { class: "canvas-content" }, index.h("slot", { name: "canvasContent" }))), index.h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) })));
|
|
194
|
-
}
|
|
195
|
-
get hostElement() { return index.getElement(this); }
|
|
196
|
-
static get watchers() { return {
|
|
197
|
-
"open": ["onOpenChanged"]
|
|
198
|
-
}; }
|
|
199
|
-
};
|
|
200
|
-
ZOffcanvas.style = stylesCss;
|
|
201
|
-
|
|
202
|
-
exports.z_app_header = ZAppHeader;
|
|
203
|
-
exports.z_icon = ZIcon;
|
|
204
|
-
exports.z_offcanvas = ZOffcanvas;
|
|
@@ -1,198 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
|
|
2
|
-
import { I as ICONS } from './icons-56ca282c.js';
|
|
3
|
-
import { O as OffCanvasVariant, u as TransitionDirection } from './index-968a240f.js';
|
|
4
|
-
|
|
5
|
-
const stylesCss$2 = ":host{--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%;height:var(--app-header-height);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;justify-content:flex-start;padding:calc(var(--space-unit) * 2) var(--grid-mobile-margin);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-stucked{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;display:flex;width:100%;max-width:100%;flex-direction:row;padding:var(--space-unit) var(--grid-mobile-margin);animation:slide-stucked-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stucked .heading-title,.heading-stucked .heading-title>*,.heading-stucked .heading-title ::slotted([slot=\"stucked-title\"]){display:block;overflow:hidden;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.heading-stucked .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 only screen and (min-width: 768px){.heading-panel{padding:calc(var(--space-unit) * 3) var(--grid-tablet-margin)}.heading-stucked{padding-right:var(--grid-tablet-margin);padding-left:var(--grid-tablet-margin)}: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 only screen and (min-width: 1152px){.heading-panel,.heading-stucked{padding-right:var(--grid-desktop-margin);padding-left:var(--grid-desktop-margin)}:host(:not([flow=\"stack\"])) .heading-panel{flex-flow:row wrap}::slotted([slot=\"title\"]){margin-right:var(--grid-desktop-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 only screen and (min-width: 1366px){.heading-panel,.heading-stucked{padding-right:var(--grid-wide-margin);padding-left:var(--grid-wide-margin)}::slotted([slot=\"title\"]){margin-right:var(--grid-wide-gutter);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-stucked-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
|
|
6
|
-
|
|
7
|
-
const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
|
|
8
|
-
const ZAppHeader = class {
|
|
9
|
-
constructor(hostRef) {
|
|
10
|
-
registerInstance(this, hostRef);
|
|
11
|
-
this.sticking = createEvent(this, "sticking", 7);
|
|
12
|
-
/**
|
|
13
|
-
* Stuck mode for the header.
|
|
14
|
-
* You can programmatically set it using an IntersectionObserver.
|
|
15
|
-
* **Optional**
|
|
16
|
-
*/
|
|
17
|
-
this.stuck = false;
|
|
18
|
-
/**
|
|
19
|
-
* Should place an overlay over the hero image.
|
|
20
|
-
* Useful for legibility purpose.
|
|
21
|
-
* **Optional**
|
|
22
|
-
*/
|
|
23
|
-
this.overlay = false;
|
|
24
|
-
/**
|
|
25
|
-
* Control menu bar position in the header.
|
|
26
|
-
* - auto: the menu bar is positioned near the title
|
|
27
|
-
* - stack: the menu bar is positioned below the title
|
|
28
|
-
* - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
|
|
29
|
-
*
|
|
30
|
-
* **Optional**
|
|
31
|
-
*/
|
|
32
|
-
this.flow = "auto";
|
|
33
|
-
/**
|
|
34
|
-
* The opening state of the drawer.
|
|
35
|
-
*/
|
|
36
|
-
this.drawerOpen = false;
|
|
37
|
-
/**
|
|
38
|
-
* The stucked state of the bar.
|
|
39
|
-
*/
|
|
40
|
-
this.stucked = false;
|
|
41
|
-
this.observer = SUPPORT_INTERSECTION_OBSERVER &&
|
|
42
|
-
new IntersectionObserver(([entry]) => {
|
|
43
|
-
this.stucked = !entry.isIntersecting;
|
|
44
|
-
}, {
|
|
45
|
-
threshold: 0.5,
|
|
46
|
-
});
|
|
47
|
-
this.openDrawer = this.openDrawer.bind(this);
|
|
48
|
-
this.closeDrawer = this.closeDrawer.bind(this);
|
|
49
|
-
this.collectMenuElements.bind(this);
|
|
50
|
-
}
|
|
51
|
-
emitStickingEvent() {
|
|
52
|
-
this.sticking.emit(this.stucked);
|
|
53
|
-
}
|
|
54
|
-
componentDidLoad() {
|
|
55
|
-
this.collectMenuElements();
|
|
56
|
-
this.onStuckMode();
|
|
57
|
-
}
|
|
58
|
-
get title() {
|
|
59
|
-
const titleElement = this.hostElement.querySelector('[slot="title"]');
|
|
60
|
-
if (titleElement === null) {
|
|
61
|
-
return "";
|
|
62
|
-
}
|
|
63
|
-
return titleElement.textContent.trim();
|
|
64
|
-
}
|
|
65
|
-
get scrollParent() {
|
|
66
|
-
const parent = this.hostElement.offsetParent;
|
|
67
|
-
if (parent === document.body || parent === document.documentElement) {
|
|
68
|
-
return window;
|
|
69
|
-
}
|
|
70
|
-
return parent;
|
|
71
|
-
}
|
|
72
|
-
collectMenuElements() {
|
|
73
|
-
const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot="menu"]'));
|
|
74
|
-
this.menuLength = menuElements.length;
|
|
75
|
-
this.setMenuFloatingMode();
|
|
76
|
-
}
|
|
77
|
-
onStuckMode() {
|
|
78
|
-
if (this.stuck) {
|
|
79
|
-
this.enableStuckObserver();
|
|
80
|
-
}
|
|
81
|
-
else {
|
|
82
|
-
this.disableStuckMode();
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
enableStuckObserver() {
|
|
86
|
-
if (this.observer) {
|
|
87
|
-
this.observer.observe(this.container);
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
disableStuckMode() {
|
|
91
|
-
this.stucked = false;
|
|
92
|
-
if (this.observer) {
|
|
93
|
-
this.observer.unobserve(this.container);
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
onStucked() {
|
|
97
|
-
const scrollParent = this.scrollParent;
|
|
98
|
-
if (!scrollParent) {
|
|
99
|
-
return;
|
|
100
|
-
}
|
|
101
|
-
this.emitStickingEvent();
|
|
102
|
-
}
|
|
103
|
-
setMenuFloatingMode() {
|
|
104
|
-
if (this.menuElements.length === 0) {
|
|
105
|
-
return;
|
|
106
|
-
}
|
|
107
|
-
const elements = this.menuElements;
|
|
108
|
-
for (let i = 0, len = elements.length; i < len; i++) {
|
|
109
|
-
elements[i].open = false;
|
|
110
|
-
elements[i].floating = !this.drawerOpen;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
render() {
|
|
114
|
-
return (h(Host, { "menu-length": this.menuLength }, h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { class: "hero-container" }, h("slot", { name: "hero" }, this.hero && (h("img", { alt: "", src: this.hero })))), h("div", { class: "heading-container" }, h("div", { class: "heading-title" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("slot", { name: "title" })), h("div", { class: "heading-subtitle" }, h("slot", { name: "subtitle" }))), h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() })))), h("div", { class: "drawer-container" }, h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), h("div", { class: "drawer-panel" }, h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content" }, this.drawerOpen && (h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() }))))), this.stucked && (h("div", { class: "heading-stucked" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("div", { class: "heading-title" }, h("slot", { name: "stucked-title" }, this.title))))));
|
|
115
|
-
}
|
|
116
|
-
openDrawer() {
|
|
117
|
-
this.drawerOpen = true;
|
|
118
|
-
}
|
|
119
|
-
closeDrawer() {
|
|
120
|
-
this.drawerOpen = false;
|
|
121
|
-
}
|
|
122
|
-
get hostElement() { return getElement(this); }
|
|
123
|
-
static get watchers() { return {
|
|
124
|
-
"stuck": ["onStuckMode"],
|
|
125
|
-
"stucked": ["onStucked"],
|
|
126
|
-
"drawerOpen": ["setMenuFloatingMode"]
|
|
127
|
-
}; }
|
|
128
|
-
};
|
|
129
|
-
ZAppHeader.style = stylesCss$2;
|
|
130
|
-
|
|
131
|
-
const stylesCss$1 = ":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
|
-
|
|
133
|
-
const ZIcon = class {
|
|
134
|
-
constructor(hostRef) {
|
|
135
|
-
registerInstance(this, hostRef);
|
|
136
|
-
}
|
|
137
|
-
selectPathOrPolygon(iconValue) {
|
|
138
|
-
if (iconValue === null || iconValue === void 0 ? void 0 : iconValue.startsWith("M")) {
|
|
139
|
-
return h("path", { d: ICONS[this.name] });
|
|
140
|
-
}
|
|
141
|
-
return h("polygon", { points: ICONS[this.name] });
|
|
142
|
-
}
|
|
143
|
-
render() {
|
|
144
|
-
return (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
|
-
}
|
|
146
|
-
};
|
|
147
|
-
ZIcon.style = stylesCss$1;
|
|
148
|
-
|
|
149
|
-
const stylesCss = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;display:none;min-width:100%;height:100%;justify-content:end;font-family:var(--font-family-sans);font-weight:var(--font-rg);background-color:green}.display-flex.sc-z-offcanvas-h{display:flex}.sc-z-offcanvas-h .canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas:focus{background-color:aqua}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:red;transform:translateX(100%)}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-right;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-right{from{transform:translateX(0)}to{transform:translateX(100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-right;animation-timing-function:ease-out;transform:translateX(100%)}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}[transitiondirection=\"right\"].sc-z-offcanvas-h{justify-content:start}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}[transitiondirection=\"right\"][open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-left;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-left;animation-timing-function:ease-out;transform:translateX(-100%)}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]{width:auto;animation-duration:0.4s;animation-name:grow;animation-timing-function:ease-out}}";
|
|
150
|
-
|
|
151
|
-
const ZOffcanvas = class {
|
|
152
|
-
constructor(hostRef) {
|
|
153
|
-
registerInstance(this, hostRef);
|
|
154
|
-
this.canvasOpenStatusChanged = createEvent(this, "canvasOpenStatusChanged", 7);
|
|
155
|
-
/**
|
|
156
|
-
* Offcanvas variant.
|
|
157
|
-
* Can be one of "overlay", "pushcontent"
|
|
158
|
-
* Default variant: pushcontent
|
|
159
|
-
*/
|
|
160
|
-
this.variant = OffCanvasVariant.PUSHCONTENT;
|
|
161
|
-
/** open component. Default: false */
|
|
162
|
-
this.open = false;
|
|
163
|
-
/** open content transitioning in a specified direction left | right. Default: left */
|
|
164
|
-
this.transitiondirection = TransitionDirection.LEFT;
|
|
165
|
-
}
|
|
166
|
-
onOpenChanged() {
|
|
167
|
-
this.canvasOpenStatusChanged.emit(this.open);
|
|
168
|
-
}
|
|
169
|
-
// private handleOpenStatus(): void {
|
|
170
|
-
// if (this.open) {
|
|
171
|
-
// this.hostElement.style.display = "flex";
|
|
172
|
-
// } else if (this.variant === OffCanvasVariant.PUSHCONTENT) {
|
|
173
|
-
// this.hostElement.style.display = "none";
|
|
174
|
-
// document.body.style.overflowX = "hidden";
|
|
175
|
-
// }
|
|
176
|
-
// }
|
|
177
|
-
handleAnimationEnd() {
|
|
178
|
-
if (this.hostElement.hasAttribute("open")) {
|
|
179
|
-
this.hostElement.querySelector(`.canvas-content`).focus();
|
|
180
|
-
}
|
|
181
|
-
else if (this.variant === OffCanvasVariant.OVERLAY) {
|
|
182
|
-
this.hostElement.style.display = "none";
|
|
183
|
-
document.body.style.overflowX = "initial";
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
render() {
|
|
187
|
-
return (h(Host, { class: {
|
|
188
|
-
"display-flex": this.open,
|
|
189
|
-
} }, h("div", { class: "canvas-container", onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { class: "canvas-content" }, h("slot", { name: "canvasContent" }))), h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) })));
|
|
190
|
-
}
|
|
191
|
-
get hostElement() { return getElement(this); }
|
|
192
|
-
static get watchers() { return {
|
|
193
|
-
"open": ["onOpenChanged"]
|
|
194
|
-
}; }
|
|
195
|
-
};
|
|
196
|
-
ZOffcanvas.style = stylesCss;
|
|
197
|
-
|
|
198
|
-
export { ZAppHeader as z_app_header, ZIcon as z_icon, ZOffcanvas as z_offcanvas };
|