@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.3

package/dist/components/index21.js

@@ -1 +1,62 @@
-import{proxyCustomElement as t,HTMLElement as o,createEvent as i,h as e,transformTag as n}from"@stencil/core/internal/client";import{g as a}from"./index2.js";import{d as r}from"./index3.js";var s=window.CustomEvent;function l(t,o){var i="on"+o.type.toLowerCase();return"function"==typeof t[i]&&t[i](o),t.dispatchEvent(o)}function d(t){for(;t;){if("dialog"===t.localName)return t;t=t.parentElement?t.parentElement:t.parentNode?t.parentNode.host:null}return null}function c(t){for(;t&&t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;t&&t.blur&&t!==document.body&&t.blur()}function h(t,o){for(var i=0;i<t.length;++i)if(t[i]===o)return!0;return!1}function u(t){return!(!t||!t.hasAttribute("method"))&&"dialog"===t.getAttribute("method").toLowerCase()}function m(t){var o=["button","input","keygen","select","textarea"].map((function(t){return t+":not([disabled])"}));o.push('[tabindex]:not([disabled]):not([tabindex=""])');var i=t.querySelector(o.join(", "));if(!i&&"attachShadow"in Element.prototype)for(var e=t.querySelectorAll("*"),n=0;n<e.length&&!(e[n].tagName&&e[n].shadowRoot&&(i=m(e[n].shadowRoot)));n++);return i}function f(t){return t.isConnected||document.body.contains(t)}function b(t){if(t.submitter)return t.submitter;var o=t.target;if(!(o instanceof HTMLFormElement))return null;var i=g.formSubmitter;if(!i){var e=t.target;i=("getRootNode"in e&&e.getRootNode()||document).activeElement}return i&&i.form===o?i:null}function v(t){if(!t.defaultPrevented){var o=t.target,i=g.imagemapUseValue,e=b(t);null===i&&e&&(i=e.value);var n=d(o);n&&"dialog"===(e&&e.getAttribute("formmethod")||o.getAttribute("method"))&&(t.preventDefault(),null!=i?n.close(i):n.close())}}function p(t){if(this.dialog_=t,this.replacedStyleTop_=!1,this.openAsModal_=!1,t.hasAttribute("role")||t.setAttribute("role","dialog"),t.show=this.show.bind(this),t.showModal=this.showModal.bind(this),t.close=this.close.bind(this),t.addEventListener("submit",v,!1),"returnValue"in t||(t.returnValue=""),"MutationObserver"in window)new MutationObserver(this.maybeHideModal.bind(this)).observe(t,{attributes:!0,attributeFilter:["open"]});else{var o,i=!1,e=function(){i?this.downgradeModal():this.maybeHideModal(),i=!1}.bind(this),n=function(n){if(n.target===t){i|="DOMNodeRemoved"===n.type.substr(0,14),window.clearTimeout(o),o=window.setTimeout(e,0)}};["DOMAttrModified","DOMNodeRemoved","DOMNodeRemovedFromDocument"].forEach((function(o){t.addEventListener(o,n)}))}Object.defineProperty(t,"open",{set:this.setOpen.bind(this),get:t.hasAttribute.bind(t,"open")}),this.backdrop_=document.createElement("div"),this.backdrop_.className="backdrop",this.backdrop_.addEventListener("mouseup",this.backdropMouseEvent_.bind(this)),this.backdrop_.addEventListener("mousedown",this.backdropMouseEvent_.bind(this)),this.backdrop_.addEventListener("click",this.backdropMouseEvent_.bind(this))}s&&"object"!=typeof s||((s=function(t,o){o=o||{};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,!!o.bubbles,!!o.cancelable,o.detail||null),i}).prototype=window.Event.prototype),p.prototype={get dialog(){return this.dialog_},maybeHideModal:function(){this.dialog_.hasAttribute("open")&&f(this.dialog_)||this.downgradeModal()},downgradeModal:function(){this.openAsModal_&&(this.openAsModal_=!1,this.dialog_.style.zIndex="",this.replacedStyleTop_&&(this.dialog_.style.top="",this.replacedStyleTop_=!1),this.backdrop_.parentNode&&this.backdrop_.parentNode.removeChild(this.backdrop_),g.dm.removeDialog(this))},setOpen:function(t){t?this.dialog_.hasAttribute("open")||this.dialog_.setAttribute("open",""):(this.dialog_.removeAttribute("open"),this.maybeHideModal())},backdropMouseEvent_:function(t){if(this.dialog_.hasAttribute("tabindex"))this.dialog_.focus();else{var o=document.createElement("div");this.dialog_.insertBefore(o,this.dialog_.firstChild),o.tabIndex=-1,o.focus(),this.dialog_.removeChild(o)}var i=document.createEvent("MouseEvents");i.initMouseEvent(t.type,t.bubbles,t.cancelable,window,t.detail,t.screenX,t.screenY,t.clientX,t.clientY,t.ctrlKey,t.altKey,t.shiftKey,t.metaKey,t.button,t.relatedTarget),this.dialog_.dispatchEvent(i),t.stopPropagation()},focus_:function(){var t=this.dialog_.querySelector("[autofocus]:not([disabled])");!t&&this.dialog_.tabIndex>=0&&(t=this.dialog_),t||(t=m(this.dialog_)),c(document.activeElement),t&&t.focus()},updateZIndex:function(t,o){if(t<o)throw new Error("dialogZ should never be < backdropZ");this.dialog_.style.zIndex=t,this.backdrop_.style.zIndex=o},show:function(){this.dialog_.open||(this.setOpen(!0),this.focus_())},showModal:function(){if(this.dialog_.hasAttribute("open"))throw new Error("Failed to execute 'showModal' on dialog: The element is already open, and therefore cannot be opened modally.");if(!f(this.dialog_))throw new Error("Failed to execute 'showModal' on dialog: The element is not in a Document.");if(!g.dm.pushDialog(this))throw new Error("Failed to execute 'showModal' on dialog: There are too many open modal dialogs.");(function(t){for(;t&&t!==document.body;){var o=window.getComputedStyle(t),i=function(t,i){return!(void 0===o[t]||o[t]===i)};if(o.opacity<1||i("zIndex","auto")||i("transform","none")||i("mixBlendMode","normal")||i("filter","none")||i("perspective","none")||"isolate"===o.isolation||"fixed"===o.position||"touch"===o.webkitOverflowScrolling)return!0;t=t.parentElement}return!1})(this.dialog_.parentElement)&&console.warn("A dialog is being shown inside a stacking context. This may cause it to be unusable. For more information, see this link: https://github.com/GoogleChrome/dialog-polyfill/#stacking-context"),this.setOpen(!0),this.openAsModal_=!0,g.needsCentering(this.dialog_)?(g.reposition(this.dialog_),this.replacedStyleTop_=!0):this.replacedStyleTop_=!1,this.dialog_.parentNode.insertBefore(this.backdrop_,this.dialog_.nextSibling),this.focus_()},close:function(t){if(!this.dialog_.hasAttribute("open"))throw new Error("Failed to execute 'close' on dialog: The element does not have an 'open' attribute, and therefore cannot be closed.");this.setOpen(!1),void 0!==t&&(this.dialog_.returnValue=t);var o=new s("close",{bubbles:!1,cancelable:!1});l(this.dialog_,o)}};var g={reposition:function(t){var o=document.body.scrollTop||document.documentElement.scrollTop,i=o+(window.innerHeight-t.offsetHeight)/2;t.style.top=Math.max(o,i)+"px"},isInlinePositionSetByStylesheet:function(t){for(var o=0;o<document.styleSheets.length;++o){var i=document.styleSheets[o],e=null;try{e=i.cssRules}catch(t){}if(e)for(var n=0;n<e.length;++n){var a=e[n],r=null;try{r=document.querySelectorAll(a.selectorText)}catch(t){}if(r&&h(r,t)){var s=a.style.getPropertyValue("top"),l=a.style.getPropertyValue("bottom");if(s&&"auto"!==s||l&&"auto"!==l)return!0}}}return!1},needsCentering:function(t){return!("absolute"!==window.getComputedStyle(t).position||"auto"!==t.style.top&&""!==t.style.top||"auto"!==t.style.bottom&&""!==t.style.bottom||g.isInlinePositionSetByStylesheet(t))},forceRegisterDialog:function(t){if((window.HTMLDialogElement||t.showModal)&&console.warn("This browser already supports <dialog>, the polyfill may not work correctly",t),"dialog"!==t.localName)throw new Error("Failed to register dialog: The element is not a dialog.");new p(t)},registerDialog:function(t){t.showModal||g.forceRegisterDialog(t)},DialogManager:function(){this.pendingDialogStack=[];var t=this.checkDOM_.bind(this);this.overlay=document.createElement("div"),this.overlay.className="_dialog_overlay",this.overlay.addEventListener("click",function(o){this.forwardTab_=void 0,o.stopPropagation(),t([])}.bind(this)),this.handleKey_=this.handleKey_.bind(this),this.handleFocus_=this.handleFocus_.bind(this),this.zIndexLow_=1e5,this.zIndexHigh_=100150,this.forwardTab_=void 0,"MutationObserver"in window&&(this.mo_=new MutationObserver((function(o){var i=[];o.forEach((function(t){for(var o,e=0;o=t.removedNodes[e];++e)o instanceof Element&&("dialog"===o.localName&&i.push(o),i=i.concat(o.querySelectorAll("dialog")))})),i.length&&t(i)})))}};if(g.DialogManager.prototype.blockDocument=function(){document.documentElement.addEventListener("focus",this.handleFocus_,!0),document.addEventListener("keydown",this.handleKey_),this.mo_&&this.mo_.observe(document,{childList:!0,subtree:!0})},g.DialogManager.prototype.unblockDocument=function(){document.documentElement.removeEventListener("focus",this.handleFocus_,!0),document.removeEventListener("keydown",this.handleKey_),this.mo_&&this.mo_.disconnect()},g.DialogManager.prototype.updateStacking=function(){for(var t,o=this.zIndexHigh_,i=0;t=this.pendingDialogStack[i];++i)t.updateZIndex(--o,--o),0===i&&(this.overlay.style.zIndex=--o);var e=this.pendingDialogStack[0];e?(e.dialog.parentNode||document.body).appendChild(this.overlay):this.overlay.parentNode&&this.overlay.parentNode.removeChild(this.overlay)},g.DialogManager.prototype.containedByTopDialog_=function(t){for(;t=d(t);){for(var o,i=0;o=this.pendingDialogStack[i];++i)if(o.dialog===t)return 0===i;t=t.parentElement}return!1},g.DialogManager.prototype.handleFocus_=function(t){var o=t.composedPath?t.composedPath()[0]:t.target;if(!this.containedByTopDialog_(o)&&document.activeElement!==document.documentElement&&(t.preventDefault(),t.stopPropagation(),c(o),void 0!==this.forwardTab_)){var i=this.pendingDialogStack[0];return i.dialog.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_PRECEDING&&(this.forwardTab_?i.focus_():o!==document.documentElement&&document.documentElement.focus()),!1}},g.DialogManager.prototype.handleKey_=function(t){if(this.forwardTab_=void 0,27===t.keyCode){t.preventDefault(),t.stopPropagation();var o=new s("cancel",{bubbles:!1,cancelable:!0}),i=this.pendingDialogStack[0];i&&l(i.dialog,o)&&i.dialog.close()}else 9===t.keyCode&&(this.forwardTab_=!t.shiftKey)},g.DialogManager.prototype.checkDOM_=function(t){this.pendingDialogStack.slice().forEach((function(o){-1!==t.indexOf(o.dialog)?o.downgradeModal():o.maybeHideModal()}))},g.DialogManager.prototype.pushDialog=function(t){return!(this.pendingDialogStack.length>=(this.zIndexHigh_-this.zIndexLow_)/2-1||(1===this.pendingDialogStack.unshift(t)&&this.blockDocument(),this.updateStacking(),0))},g.DialogManager.prototype.removeDialog=function(t){var o=this.pendingDialogStack.indexOf(t);-1!==o&&(this.pendingDialogStack.splice(o,1),0===this.pendingDialogStack.length&&this.unblockDocument(),this.updateStacking())},g.dm=new g.DialogManager,g.formSubmitter=null,g.imagemapUseValue=null,void 0===window.HTMLDialogElement){var w=document.createElement("form");if(w.setAttribute("method","dialog"),"dialog"!==w.method){var y=Object.getOwnPropertyDescriptor(HTMLFormElement.prototype,"method");if(y){var k=y.get;y.get=function(){return u(this)?"dialog":k.call(this)};var x=y.set;y.set=function(t){return"string"==typeof t&&"dialog"===t.toLowerCase()?this.setAttribute("method",t):x.call(this,t)},Object.defineProperty(HTMLFormElement.prototype,"method",y)}}document.addEventListener("click",(function(t){if(g.formSubmitter=null,g.imagemapUseValue=null,!t.defaultPrevented){var o=t.target;if("composedPath"in t&&(o=t.composedPath().shift()||o),o&&u(o.form)){if(!("submit"===o.type&&["button","input"].indexOf(o.localName)>-1)){if("input"!==o.localName||"image"!==o.type)return;g.imagemapUseValue=t.offsetX+","+t.offsetY}d(o)&&(g.formSubmitter=o)}}}),!1),document.addEventListener("submit",(function(t){var o=t.target;if(!d(o)){var i=b(t);"dialog"===(i&&i.getAttribute("formmethod")||o.getAttribute("method"))&&t.preventDefault()}}));var M=HTMLFormElement.prototype.submit;HTMLFormElement.prototype.submit=function(){if(!u(this))return M.call(this);var t=d(this);t&&t.close()}}const E=':is(button, input, select, textarea, [contenteditable=""], [contenteditable="true"], a[href], [tabindex], summary):not([disabled], [disabled=""], [tabindex="-1"], [aria-hidden="true"], [hidden])',z=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.modalClose=i(this,"modalClose",7),this.modalHeaderActive=i(this,"modalHeaderActive",7),this.modalBackgroundClick=i(this,"modalBackgroundClick",7),this.closeButtonLabel="chiudi modale",this.alertdialog=!1,this.closable=!0,this.scrollInside=!0,this.lockPageScroll=!0}emitModalClose(){this.closable&&(this.modalClose.emit({modalid:this.modalid}),this.resetPageScroll())}emitModalHeaderActive(){this.modalHeaderActive.emit({modalid:this.modalid})}emitBackgroundClick(){this.closable&&(this.modalBackgroundClick.emit({modalid:this.modalid}),this.resetPageScroll())}resetPageScroll(){this.lockPageScroll&&"hidden"===document.body.style.overflowY&&(document.body.style.overflowY="")}componentDidLoad(){"function"!=typeof window.HTMLDialogElement?(this.dialog.localName||Object.defineProperty(this.dialog,"localName",{value:"dialog"}),g.registerDialog(this.dialog),this.dialog.setAttribute("open","true")):this.open(),this.lockPageScroll&&requestAnimationFrame((()=>document.body.style.overflowY="hidden"))}disconnectedCallback(){this.resetPageScroll()}async open(){var t;null===(t=this.dialog)||void 0===t||t.showModal(),this.lockPageScroll&&(document.body.style.overflowY="hidden")}async close(){var t;this.closable&&(null===(t=this.dialog)||void 0===t||t.close(),this.resetPageScroll())}get focusableElements(){return[...Array.from(this.host.shadowRoot.querySelectorAll(E)),...Array.from(this.host.querySelectorAll(E))].filter((t=>"none"!==getComputedStyle(t).display))}handleKeyDown(t){if(t.code!==a.ESC||this.closable||t.preventDefault(),t.code!==a.TAB)return;const o=this.focusableElements,i=this.host.shadowRoot.activeElement,e=this.host.ownerDocument.activeElement,n=o[0],r=o[o.length-1];!t.shiftKey||i!=n&&e!=n?t.shiftKey||i!=r&&e!=r||(t.preventDefault(),n.focus()):(t.preventDefault(),r.focus())}closeButtonSlot(){if(this.closable)return e("slot",{name:"modalCloseButton"},e("button",{"aria-label":this.closeButtonLabel,onClick:()=>this.close()},e("z-icon",{name:"multiply-circle-filled"})))}handleEscape(t){this.closable||t.preventDefault()}render(){return e("dialog",{key:"d958597dcd030d9d837aa27e3d951e58c76d1872",class:{"modal-dialog":!this.scrollInside},"aria-labelledby":"modal-title","aria-describedby":"modal-content",role:this.alertdialog?"alertdialog":void 0,ref:t=>this.dialog=t,onClose:()=>this.emitModalClose(),onCancel:t=>this.handleEscape(t)},e("div",{key:"f2d88dcae992749e9b26053f58b133ea11f42345",class:{"modal-container":!0,"modal-container-scroll-inside":this.scrollInside,"modal-container-scroll-outside":!this.scrollInside},id:this.modalid},e("header",{key:"aee9e10e48814e98b334234742b8d9fddc8bd5b4",onClick:this.emitModalHeaderActive.bind(this)},e("div",{key:"8f8cb63de53e06aba8c24aa775e7462d5c982cab"},this.modaltitle&&e("h1",{key:"7665e53dbf1c7ba2eb9bedc0df36e3b959407f36",id:"modal-title"},this.modaltitle),this.closeButtonSlot()),this.modalsubtitle&&e("div",{key:"d069b4cd21e388262db4734e5f19b27b14381d98",class:"subtitle",id:"modal-subtitle"},this.modalsubtitle)),e("div",{key:"b7e149a290a5261aaecd47ddc1d53498c182c5dd",class:{"modal-content-scroll-inside":this.scrollInside,"modal-content-scroll-outside":!this.scrollInside},id:"modal-content"},e("slot",{key:"3b5126b69ec95efe151a424edc24111978a22a5d",name:"modalContent"}))),e("div",{key:"cd760b0fdb273c8b2166c05834127955c12c6556",class:{"modal-background":!0,"modal-background-scroll-outside":!this.scrollInside},"data-action":"modalBackground","data-modal":this.modalid,onClick:()=>{this.emitBackgroundClick(),this.close()}}))}get host(){return this}static get style(){return':host{font-family:var(--font-family-sans);font-weight:var(--font-rg);}:host>dialog{padding:0;border:none;margin:0;background-color:transparent}:host>dialog:modal{width:100%;max-width:100%;max-height:100%}:host>dialog::backdrop{display:none}:host>dialog+.backdrop{display:none}:host>dialog:not([open]){display:none}:host>dialog[open]{display:block}::slotted([slot="modalContent"]){padding:var(--z-modal-content-padding, calc(var(--space-unit) * 2))}.modal-container{z-index:1010;display:flex;overflow:-moz-scrollbars-none;width:100%;height:100vh;flex-direction:column}.modal-container>.modal-content-scroll-outside{overflow:auto;background:var(--color-surface01)}.modal-container>header{padding:calc(var(--space-unit) * 1.75) calc(var(--space-unit) * 2);background:var(--color-background)}.modal-container>header button{padding:0;border:none;margin:0;margin-left:auto;background:transparent;cursor:pointer}.modal-container>header button:focus-visible{border-radius:50%;box-shadow:var(--shadow-focus-primary);outline:none !important}.modal-container>header button::after{position:absolute;top:6px;right:4px;display:block;width:40px;height:40px;background-color:transparent;content:""}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.25);--z-icon-height:calc(var(--space-unit) * 2.25);display:flex;fill:var(--color-primary01-icon)}.modal-container>header>div{display:flex;width:100%;align-items:baseline;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header .subtitle{padding:0;margin:0;color:var(--color-default-text);font-weight:var(--font-sb)}.modal-container>header h1{font-size:var(--font-size-5);letter-spacing:0;line-height:1.4}.modal-container>header .subtitle{font-size:var(--font-size-3);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}.modal-container>header>div>h1 *:empty{display:none}.modal-container>header h1+.subtitle{margin-top:calc(var(--space-unit) * 0.5)}.modal-container-scroll-inside>.modal-content-scroll-inside{overflow:hidden auto;flex:1 auto;background:var(--color-surface01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){.modal-container-scroll-inside .modal-content-scroll-inside,.modal-container-scroll-outside .modal-content-scroll-outside{scrollbar-color:var(--color-primary01) transparent}}@media only screen and (min-width: 768px){.modal-background{position:fixed;top:0;left:0;overflow:hidden;width:100vw;height:100vh;background-color:var(--gray900);opacity:0.7}.modal-background.modal-background-scroll-outside{position:sticky}.modal-container-scroll-inside{position:fixed;top:calc(var(--space-unit) * 6);left:50%;overflow:hidden;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-scroll-outside{position:absolute;top:calc(var(--space-unit) * 6);left:50%;display:block;overflow:initial;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));transform:translateX(-50%)}.modal-container>.modal-content-scroll-outside{overflow:initial}.modal-container-scroll-outside>header,.modal-container-scroll-inside>header{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.modal-container-scroll-outside::after{display:block;height:calc(var(--space-unit) * 6);content:" "}.modal-dialog{position:fixed;top:0;left:0;height:auto;overflow-x:hidden;overflow-y:auto}.modal-content-scroll-outside{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.modal-dialog::-webkit-scrollbar{display:none}}@media (min-width: 1152px){.modal-container>header{padding-top:calc(var(--space-unit) * 1.5);padding-bottom:calc(var(--space-unit) * 1.5)}.modal-container>header h1{font-size:var(--font-size-6);font-weight:var(--font-sb);letter-spacing:0;line-height:1.333}.modal-container>header .subtitle{font-size:var(--font-size-4);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}.modal-container>header h1+.subtitle{margin-top:0}}'}},[257,"z-modal",{modalid:[1],modaltitle:[1],modalsubtitle:[1],closeButtonLabel:[1,"close-button-label"],alertdialog:[4],closable:[4],scrollInside:[4,"scroll-inside"],lockPageScroll:[4,"lock-page-scroll"],open:[64],close:[64]},[[0,"keydown","handleKeyDown"]]]);function C(){"undefined"!=typeof customElements&&["z-modal","z-icon"].forEach((t=>{switch(t){case"z-modal":customElements.get(n(t))||customElements.define(n(t),z);break;case"z-icon":customElements.get(n(t))||r()}}))}export{z as Z,C as d}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { L as LicenseType } from './index2.js';
+
+const stylesCss = "header{position:relative;display:flex;width:auto;height:calc(var(--space-unit) * 6);flex-direction:row;align-items:flex-start;justify-content:space-between;border-bottom:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius)}slot[name=\"aria-heading\"]::slotted(*){position:absolute;overflow:hidden !important;width:1px !important;height:1px !important;padding:0 !important;border:0 none !important;margin:-1px !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important}header.real,header.trial,header.temp{border-bottom:var(--border-size-medium) solid var(--blue100);background-color:var(--color-primary03)}.card-title{overflow:hidden;height:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2);margin:0;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:12px;font-weight:var(--font-sb);letter-spacing:0.22px;line-height:calc(var(--space-unit) * 2);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.faded{border-bottom:var(--border-size-medium) solid var(--color-background)}.faded.real,.faded.trial,.faded.temp{border-top:var(--border-size-medium) solid var(--blue100);border-right:var(--border-size-medium) solid var(--blue100);border-left:var(--border-size-medium) solid var(--blue100)}";
+const ZMyzCardHeaderStyle0 = stylesCss;
+
+const ZMyzCardHeader = /*@__PURE__*/ proxyCustomElement(class ZMyzCardHeader extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.titolo = undefined;
+        this.faded = undefined;
+        this.cardtype = undefined;
+        this.allowTooltip = false;
+    }
+    getTitle() {
+        return this.allowTooltip ? this.titolo : "";
+    }
+    componentDidLoad() {
+        if (this.elementHasEllipsis()) {
+            this.allowTooltip = true;
+        }
+    }
+    elementHasEllipsis() {
+        return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
+    }
+    retrieveClass() {
+        return {
+            real: this.cardtype === LicenseType.REAL,
+            trial: this.cardtype === LicenseType.TRIAL,
+            temp: this.cardtype === LicenseType.TEMP,
+            faded: this.faded,
+        };
+    }
+    render() {
+        return (h("header", { key: '3a55d0bf3dfd589c1880526191ddbdd311ba6b86', class: this.retrieveClass() }, h("slot", { key: 'faedfbb21b4fd7f56bd08093e5347a4655797008', name: "aria-heading" }), h("span", { key: '53805e713dec6b891a878388d98f9f0749951f31', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { key: '68479fd579921c6fd623fa92b27dafd24bc41d18', name: "icon" })));
+    }
+    static get style() { return ZMyzCardHeaderStyle0; }
+}, [1, "z-myz-card-header", {
+        "titolo": [1],
+        "faded": [4],
+        "cardtype": [1],
+        "allowTooltip": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-myz-card-header"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-myz-card-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMyzCardHeader);
+            }
+            break;
+    } });
+}
+
+export { ZMyzCardHeader as Z, defineCustomElement as d };
+
+//# sourceMappingURL=index21.js.map

package/dist/components/index21.js.map

@@ -0,0 +1 @@
+{"file":"index21.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,43CAA43C,CAAC;AAC/4C,6BAAe,SAAS;;MCWX,cAAc;;;;;;;;4BAcV,KAAK;;IAIZ,QAAQ;QACd,OAAO,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;KAC7C;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,EAAE;YAC7B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;KACF;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;KAC9D;IAEO,aAAa;QACnB,OAAO;YACL,IAAI,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,IAAI;YACxC,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,KAAK;YAC1C,IAAI,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,IAAI;YACxC,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC;KACH;IAED,MAAM;QACJ,QACE,+DAAQ,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IACjC,6DAAM,IAAI,EAAC,cAAc,GAAG,EAC5B,6DACE,KAAK,EAAC,YAAY,EAClB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAiB,CAAC,EAChD,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAErB,IAAI,CAAC,MAAM,CACP,EACP,6DAAM,IAAI,EAAC,MAAM,GAAG,CACb,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/snowflakes/myz/card/z-myz-card-header/styles.css?tag=z-myz-card-header&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-header/index.tsx"],"sourcesContent":["header {\n  position: relative;\n  display: flex;\n  width: auto;\n  height: calc(var(--space-unit) * 6);\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius);\n}\n\nslot[name=\"aria-heading\"]::slotted(*) {\n  position: absolute;\n  overflow: hidden !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  border: 0 none !important;\n  margin: -1px !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n}\n\nheader.real,\nheader.trial,\nheader.temp {\n  border-bottom: var(--border-size-medium) solid var(--blue100);\n  background-color: var(--color-primary03);\n}\n\n.card-title {\n  overflow: hidden;\n  height: calc(var(--space-unit) * 2);\n  padding: calc(var(--space-unit) * 2);\n  margin: 0;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 12px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.22px;\n  line-height: calc(var(--space-unit) * 2);\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.faded {\n  border-bottom: var(--border-size-medium) solid var(--color-background);\n}\n\n.faded.real,\n.faded.trial,\n.faded.temp {\n  border-top: var(--border-size-medium) solid var(--blue100);\n  border-right: var(--border-size-medium) solid var(--blue100);\n  border-left: var(--border-size-medium) solid var(--blue100);\n}\n","import {Component, Prop, State, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/**\n * @slot icon - card header icon slot\n */\n@Component({\n  tag: \"z-myz-card-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardHeader {\n  /** volume title */\n  @Prop()\n  titolo: string;\n\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** card graphic variant (optional) */\n  @Prop()\n  cardtype?: LicenseType;\n\n  @State()\n  allowTooltip = false;\n\n  private ellipsis?: HTMLElement;\n\n  private getTitle(): string {\n    return this.allowTooltip ? this.titolo : \"\";\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis()) {\n      this.allowTooltip = true;\n    }\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  private retrieveClass(): JSXBase.HTMLAttributes[\"class\"] {\n    return {\n      real: this.cardtype === LicenseType.REAL,\n      trial: this.cardtype === LicenseType.TRIAL,\n      temp: this.cardtype === LicenseType.TEMP,\n      faded: this.faded,\n    };\n  }\n\n  render(): HTMLElement {\n    return (\n      <header class={this.retrieveClass()}>\n        <slot name=\"aria-heading\" />\n        <span\n          class=\"card-title\"\n          ref={(el) => (this.ellipsis = el as HTMLElement)}\n          title={this.getTitle()}\n        >\n          {this.titolo}\n        </span>\n        <slot name=\"icon\" />\n      </header>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index22.js

@@ -1 +1,66 @@
-import{proxyCustomElement as e,HTMLElement as r,h as o,transformTag as d}from"@stencil/core/internal/client";import{L as i}from"./index2.js";const s=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.ispressed=!1,this.ishighlighted=!1}retrieveClass(){let e="";return this.cardtype===i.REAL?e+="real":this.cardtype===i.TRIAL?e+="trial":this.cardtype===i.TEMP&&(e+="temp"),this.faded?e+=" faded":this.ispressed?e+=" pressed":this.ishighlighted&&(e+=" highlighted"),e}render(){return o("div",{key:"11ac2aca15e484cda4eee931bbaefa81eec16fbb",class:this.retrieveClass(),tabindex:"0"},o("slot",{key:"14461bb8ccc78eae10ab81c755085d6cb8d484f6"}))}static get style(){return":host{--card-overflow:hidden}div{display:flex;overflow:var(--card-overflow);width:auto;width:256px;height:522px;box-sizing:border-box;flex-direction:column;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius)}div.real,div.trial,div.temp{border-color:var(--blue100)}div.faded{border:var(--border-size-medium) solid var(--color-background)}div.highlighted{box-shadow:var(--shadow-4);outline:none}div.pressed{box-shadow:var(--shadow-8);outline:none}div:focus{box-shadow:var(--shadow-focus-primary);outline:none}"}},[257,"z-myz-card",{faded:[4],cardtype:[1],ispressed:[4],ishighlighted:[4]}]);function t(){"undefined"!=typeof customElements&&["z-myz-card"].forEach((e=>{"z-myz-card"===e&&(customElements.get(d(e))||customElements.define(d(e),s))}))}export{s as Z,t as d}
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { h as handleKeyboardSubmit } from './utils.js';
+import { d as defineCustomElement$1 } from './index10.js';
+
+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(--color-default-text);fill:var(--color-default-icon);font-family:var(--font-family-sans);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(--color-surface03)}:host li span:hover,a:hover{color:var(--color-primary01);fill:var(--color-primary01)}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(--color-primary01);fill:var(--color-primary01)}";
+const ZMyzListItemStyle0 = stylesCss;
+
+const ZMyzListItem = /*@__PURE__*/ proxyCustomElement(class ZMyzListItem extends HTMLElement {
+    emitZListItemLinkClick(e, linkId) {
+        this.zListItemLinkClick.emit({ e, linkId });
+    }
+    emitZListItemClick(e, listitemid) {
+        this.zListItemClick.emit({ e, listitemid });
+    }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.zListItemLinkClick = createEvent(this, "zListItemLinkClick", 7);
+        this.zListItemClick = createEvent(this, "zListItemClick", 7);
+        this.text = undefined;
+        this.link = undefined;
+        this.linktarget = "_self";
+        this.icon = undefined;
+        this.listitemid = undefined;
+        this.action = undefined;
+        this.underlined = true;
+        this.emitZListItemLinkClick = this.emitZListItemLinkClick.bind(this);
+        this.emitZListItemClick = this.emitZListItemClick.bind(this);
+    }
+    render() {
+        const linkId = this.listitemid ? `link_${this.listitemid}` : "";
+        return (h("li", { key: 'e8054df30e0540b758ecac0133a03ba8c64762ea', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, h("span", { key: 'e9fd1c5d30e270a4f1f5b6d309a2bcb40b023819', class: this.underlined && "border" }, this.icon && h("z-icon", { key: 'd714ad82aac6db611955e4c9669d272c44c5fbaf', name: this.icon }), this.link ? (h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (h("span", { innerHTML: this.text })), h("slot", { key: '77595259e1f32f42f1d36beb2dfaf216a115d887' }))));
+    }
+    static get style() { return ZMyzListItemStyle0; }
+}, [1, "z-myz-list-item", {
+        "text": [1],
+        "link": [1],
+        "linktarget": [1],
+        "icon": [1],
+        "listitemid": [1],
+        "action": [1],
+        "underlined": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-myz-list-item", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-myz-list-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMyzListItem);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { ZMyzListItem as Z, defineCustomElement as d };
+
+//# sourceMappingURL=index22.js.map

package/dist/components/index22.js.map

@@ -0,0 +1 @@
+{"file":"index22.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,qmCAAqmC,CAAC;AACxnC,2BAAe,SAAS;;MCOX,YAAY;IAiCf,sBAAsB,CAAC,CAAa,EAAE,MAAM;QAClD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAC,CAAC,EAAE,MAAM,EAAC,CAAC,CAAC;KAC3C;IAMO,kBAAkB,CAAC,CAAa,EAAE,UAAU;QAClD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAC,CAAC,EAAE,UAAU,EAAC,CAAC,CAAC;KAC3C;IAED;;;;;;;;0BAlCsB,OAAO;;;;0BAgBhB,IAAI;QAmBf,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9D;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC;QAEhE,QACE,2DACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,IAAI,CAAC,UAAU,iBACN,IAAI,CAAC,MAAM,EACxB,OAAO,EAAE,CAAC,CAAa,KAAK,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,EACvE,UAAU,EAAE,CAAC,EAAiB,KAAK,oBAAoB,CAAC,EAAE,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,UAAU,CAAC,IAErG,6DAAM,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,QAAQ,IACrC,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACxC,IAAI,CAAC,IAAI,IACR,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,EAClC,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,CAAC,CAAa,KAAK,IAAI,CAAC,sBAAsB,CAAC,CAAC,EAAE,MAAM,CAAC,EAClE,UAAU,EAAE,CAAC,EAAiB,KAAK,oBAAoB,CAAC,EAAE,EAAE,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,EAChG,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ,EACnC,QAAQ,EAAC,GAAG,IAEX,IAAI,CAAC,IAAI,CACR,KAEJ,YAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,CACpC,EACD,8DAAQ,CACH,CACJ,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/snowflakes/myz/list/z-myz-list-item/styles.css?tag=z-myz-list-item&encapsulation=shadow","src/snowflakes/myz/list/z-myz-list-item/index.tsx"],"sourcesContent":[":host li {\n  all: unset;\n  all: reset;\n  width: 100%;\n  line-height: 14px;\n  list-style-type: none;\n}\n\n:host li > span {\n  display: flex;\n  padding: calc(var(--space-unit) * 2) 0;\n  color: var(--color-default-text);\n  fill: var(--color-default-icon);\n  font-family: var(--font-family-sans);\n  font-size: 16px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.23px;\n  line-height: 14px;\n}\n\n:host(.small) li > span {\n  padding: calc(var(--space-unit) * 1.5) 0;\n  font-size: var(--font-size-2);\n}\n\n:host(.x-small) li > span {\n  padding: var(--space-unit) 0;\n  font-size: var(--font-size-2);\n}\n\n:host(.small) li > span > z-icon,\n:host(.x-small) li > span > z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n  --z-icon-right-margin: calc(var(--space-unit) * 0.5);\n\n  padding: 0;\n}\n\n:host li > span.border {\n  border-bottom: 2px solid var(--color-surface03);\n}\n\n:host li span:hover,\na:hover {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\na,\na:visited,\na:active {\n  color: inherit;\n  fill: inherit;\n  text-decoration: none;\n}\n\n:host li span z-icon {\n  width: calc(var(--space-unit) * 2);\n  height: calc(var(--space-unit) * 2);\n  padding: 0 calc(var(--space-unit) * 1.5) 0 0;\n  background-repeat: no-repeat;\n  background-size: contain;\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\n\n@Component({\n  tag: \"z-myz-list-item\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzListItem {\n  /** content text */\n  @Prop()\n  text: string;\n\n  /** link url (optional) */\n  @Prop()\n  link?: string;\n\n  /** link target (optional) */\n  @Prop()\n  linktarget?: string = \"_self\";\n\n  /** icon name (optional) */\n  @Prop()\n  icon?: string;\n\n  /** id (optional) */\n  @Prop()\n  listitemid?: string;\n\n  /** data-action attribute (optional) */\n  @Prop()\n  action?: string;\n\n  /** underlined style flag */\n  @Prop()\n  underlined = true;\n\n  /** emitted on list item link click, returns linkId */\n  @Event()\n  zListItemLinkClick: EventEmitter;\n\n  private emitZListItemLinkClick(e: MouseEvent, linkId): void {\n    this.zListItemLinkClick.emit({e, linkId});\n  }\n\n  /** emitted on list item click, returns listitemid */\n  @Event()\n  zListItemClick: EventEmitter;\n\n  private emitZListItemClick(e: MouseEvent, listitemid): void {\n    this.zListItemClick.emit({e, listitemid});\n  }\n\n  constructor() {\n    this.emitZListItemLinkClick = this.emitZListItemLinkClick.bind(this);\n    this.emitZListItemClick = this.emitZListItemClick.bind(this);\n  }\n\n  render(): HTMLLIElement {\n    const linkId = this.listitemid ? `link_${this.listitemid}` : \"\";\n\n    return (\n      <li\n        role=\"button\"\n        id={this.listitemid}\n        data-action={this.action}\n        onClick={(e: MouseEvent) => this.emitZListItemClick(e, this.listitemid)}\n        onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid)}\n      >\n        <span class={this.underlined && \"border\"}>\n          {this.icon && <z-icon name={this.icon} />}\n          {this.link ? (\n            <a\n              href={this.link ? this.link : null}\n              target={this.linktarget}\n              id={linkId}\n              onClick={(e: MouseEvent) => this.emitZListItemLinkClick(e, linkId)}\n              onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId)}\n              role={this.link ? \"link\" : \"button\"}\n              tabindex=\"0\"\n            >\n              {this.text}\n            </a>\n          ) : (\n            <span innerHTML={this.text}></span>\n          )}\n          <slot />\n        </span>\n      </li>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index23.js

@@ -1 +1,179 @@
-import{proxyCustomElement as t,HTMLElement as e,h as c,transformTag as s}from"@stencil/core/internal/client";const n=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}render(){return c("div",{key:"3bfa929950fa7d4acb0a7a7f8857cf1d94a02cbc"},c("slot",{key:"871cdb03423b9d52131023290648378e2ad6b439",name:"alert"}),c("slot",{key:"c48ec3615b98643b44b6d592143412d9fd2c4304",name:"cover"}))}static get style(){return":host{width:auto;height:340px}:host>div{position:relative;display:flex;width:auto;height:340px;align-items:center;justify-content:center}"}},[257,"z-myz-card-body"]);function o(){"undefined"!=typeof customElements&&["z-myz-card-body"].forEach((t=>{"z-myz-card-body"===t&&(customElements.get(s(t))||customElements.define(s(t),n))}))}export{n as Z,o as d}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { O as OffCanvasVariant, u as TransitionDirection, g as KeyboardCode } from './index2.js';
+
+const stylesCss = ".sc-z-offcanvas-h{font-family:var(--font-family-sans);font-weight:var(--font-rg)}[variant=\"pushcontent\"].sc-z-offcanvas-h:not([transitiondirection=\"up\"]){overflow:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:hidden;min-width:100%;height:100%;background:var(--color-surface01);transform:translateX(0);transition:transform 0.4s ease-out}.sc-z-offcanvas-h>*.sc-z-offcanvas{position:fixed;top:var(--z-offcanvas--top-space, 0);right:0;bottom:0;left:0}[open].sc-z-offcanvas-h>*.sc-z-offcanvas{height:calc(100% - var(--z-offcanvas--top-space, 0px))}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}[transitiondirection=\"left\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(100%)}[open][transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[open][transitiondirection=\"left\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(0)}[transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{top:auto;bottom:0;height:var(--z-offcanvas--container-height, 90%);transform:translateY(100%)}[transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1001}[open][transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateY(0)}[variant=\"pushcontent\"].sc-z-offcanvas-h:not([transitiondirection=\"up\"])>.canvas-container.sc-z-offcanvas{position:relative;height:100%}[variant=\"pushcontent\"].sc-z-offcanvas-h:not([open]){display:none}[skip-animation].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transition:none}.backdrop.sc-z-offcanvas{z-index:1000;width:100%;height:100%;background-color:var(--gray900);opacity:0;pointer-events:none;transition:opacity 0.4s ease-out}[open].sc-z-offcanvas-h>.backdrop.sc-z-offcanvas{opacity:0.7;pointer-events:unset}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:hidden 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}@media (min-width: 768px){[variant=\"pushcontent\"].sc-z-offcanvas-h:not([transitiondirection=\"up\"]){flex:none}.canvas-container.sc-z-offcanvas{width:var(--z-offcanvas--container-width, 375px);min-width:var(--z-offcanvas--container-width, 375px)}[transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{width:100%}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:auto;left:0}[transitiondirection=\"left\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:0;left:auto}}";
+const ZOffcanvasStyle0 = stylesCss;
+
+const ZOffcanvas = /*@__PURE__*/ proxyCustomElement(class ZOffcanvas extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.canvasOpenStatusChanged = createEvent(this, "canvasOpenStatusChanged", 7);
+        this.allFocusableElements = [];
+        this.previouslyFocusedElement = null;
+        this.variant = OffCanvasVariant.PUSHCONTENT;
+        this.open = false;
+        this.transitiondirection = TransitionDirection.LEFT;
+        this.skipLoadAnimation = false;
+        this.showBackdrop = true;
+        this.skipAnimation = false;
+    }
+    /**
+     * Returns all focusable elements inside the offcanvas content.
+     * Elements are considered focusable if:
+     * - They are not disabled
+     * - They are visible in the layout
+     * - They have a non-negative tabIndex or an explicit tabindex="0"
+     */
+    getFocusableElements() {
+        if (!this.canvasContent) {
+            return [];
+        }
+        const all = Array.from(this.canvasContent.querySelectorAll("*"));
+        return all.filter((el) => {
+            const tabindex = el.getAttribute("tabindex");
+            const isDisabled = el.hasAttribute("disabled");
+            const isHidden = el.offsetParent === null;
+            return !isDisabled && !isHidden && (el.tabIndex >= 0 || tabindex === "0");
+        });
+    }
+    /**
+     * Keeps keyboard navigation trapped inside the offcanvas when it is open.
+     * Implements circular tab navigation:
+     * - If Shift + Tab is pressed on the first focusable element, move focus to the last.
+     * - If Tab is pressed on the last focusable element, move focus to the first.
+     */
+    trapFocus(event) {
+        if (!this.allFocusableElements.length) {
+            return;
+        }
+        const first = this.allFocusableElements[0];
+        const last = this.allFocusableElements[this.allFocusableElements.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    /**
+     * Handles keyboard interactions when the offcanvas is open.
+     * - Closes the offcanvas when the Escape key is pressed.
+     * - Traps focus inside the component when the Tab key is used.
+     */
+    handleKeyDown(event) {
+        if (!this.open) {
+            return;
+        }
+        if (event.key === KeyboardCode.ESC) {
+            event.preventDefault();
+            this.open = false;
+            return;
+        }
+        if (event.key === KeyboardCode.TAB) {
+            this.trapFocus(event);
+        }
+    }
+    /**
+     * Stop the event default behavior and propagation when the offcanvas is closed.
+     */
+    stopEvent(event) {
+        if (this.open) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /**
+     * Hide the body overflow when the offcanvas is open.
+     */
+    handlePageOverflow() {
+        const overflow = this.variant === OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP
+            ? "overflow-y"
+            : "overflow-x";
+        document.body.style[overflow] = this.open ? "hidden" : "";
+    }
+    onOpenChanged() {
+        var _a, _b, _c;
+        this.canvasOpenStatusChanged.emit(this.open);
+        if (this.open) {
+            // Store the element that was focused before the offcanvas opens, this allows restoring the focus when the offcanvas closes.
+            this.previouslyFocusedElement = document.activeElement;
+            // Move focus inside the offcanvas once it is rendered.
+            if (this.allFocusableElements.length > 0) {
+                this.allFocusableElements[0].focus();
+            }
+            else {
+                (_a = this.canvasContent) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            this.handlePageOverflow();
+        }
+        else {
+            // Restore focus to the element that was focused before the offcanvas was opened.
+            (_b = this.previouslyFocusedElement) === null || _b === void 0 ? void 0 : _b.focus();
+            // When the offcanvas is closing, wait for the transitionend event before restoring the page overflow.
+            const listenerCallback = () => {
+                this.handlePageOverflow();
+                this.canvasContainer.removeEventListener("transitionend", listenerCallback);
+            };
+            (_c = this.canvasContainer) === null || _c === void 0 ? void 0 : _c.addEventListener("transitionend", listenerCallback);
+        }
+    }
+    componentWillLoad() {
+        if (this.open) {
+            this.skipAnimation = true;
+        }
+    }
+    componentDidLoad() {
+        this.handlePageOverflow();
+    }
+    componentDidRender() {
+        this.skipAnimation = false;
+        this.allFocusableElements = this.getFocusableElements();
+    }
+    connectedCallback() {
+        this.handlePageOverflow();
+    }
+    disconnectedCallback() {
+        this.open = false;
+    }
+    render() {
+        return (h(Host, { key: 'aafb9bddcf3eb99e0b77dc0eb86703294dab0b56', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '1a73bcc5abb6fd674a9624f8a4390849b2383323', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '412138eb75e5c8afee64269ee5d9c2da5fccf7fb', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: '149934216905198a8c0b8cfaff7851b4d1934706', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: '555fe547b7c672189987edd94e0a2fc64ead2b25', class: "backdrop", onClick: () => (this.open = false) }))));
+    }
+    static get watchers() { return {
+        "variant": ["handlePageOverflow"],
+        "open": ["onOpenChanged"]
+    }; }
+    static get style() { return ZOffcanvasStyle0; }
+}, [6, "z-offcanvas", {
+        "variant": [513],
+        "open": [1540],
+        "transitiondirection": [513],
+        "skipLoadAnimation": [4, "skip-load-animation"],
+        "showBackdrop": [4, "show-backdrop"],
+        "skipAnimation": [32]
+    }, [[4, "keydown", "handleKeyDown"], [2, "click", "stopEvent"], [2, "focusin", "stopEvent"]], {
+        "variant": ["handlePageOverflow"],
+        "open": ["onOpenChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-offcanvas"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-offcanvas":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZOffcanvas);
+            }
+            break;
+    } });
+}
+
+export { ZOffcanvas as Z, defineCustomElement as d };
+
+//# sourceMappingURL=index23.js.map

package/dist/components/index23.js.map

@@ -0,0 +1 @@
+{"file":"index23.js","mappings":"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","names":[],"sources":["src/components/z-offcanvas/styles.css?tag=z-offcanvas&encapsulation=scoped","src/components/z-offcanvas/index.tsx"],"sourcesContent":[":host {\n  --z-offcanvas--container-width: ;\n  --z-offcanvas--container-height: ;\n  --z-offcanvas--top-space: ;\n\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host([variant=\"pushcontent\"]:not([transitiondirection=\"up\"])) {\n  overflow: hidden;\n}\n\n.canvas-container {\n  display: flex;\n  overflow: hidden;\n  min-width: 100%;\n  height: 100%;\n  background: var(--color-surface01);\n  transform: translateX(0);\n  transition: transform 0.4s ease-out;\n}\n\n:host > * {\n  position: fixed;\n  top: var(--z-offcanvas--top-space, 0);\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n:host([open]) > * {\n  height: calc(100% - var(--z-offcanvas--top-space, 0px));\n}\n\n:host([transitiondirection=\"right\"]) > .canvas-container {\n  transform: translateX(-100%);\n}\n\n:host([transitiondirection=\"left\"]) > .canvas-container {\n  transform: translateX(100%);\n}\n\n:host([open][transitiondirection=\"right\"]) > .canvas-container,\n:host([open][transitiondirection=\"left\"]) > .canvas-container {\n  transform: translateX(0);\n}\n\n:host([transitiondirection=\"up\"]) > .canvas-container {\n  top: auto;\n  bottom: 0;\n  height: var(--z-offcanvas--container-height, 90%);\n  transform: translateY(100%);\n}\n\n:host([transitiondirection=\"up\"], [variant=\"overlay\"]) > .canvas-container {\n  z-index: 1001;\n}\n\n:host([open][transitiondirection=\"up\"]) > .canvas-container {\n  transform: translateY(0);\n}\n\n:host([variant=\"pushcontent\"]:not([transitiondirection=\"up\"])) > .canvas-container {\n  position: relative;\n  height: 100%;\n}\n\n:host([variant=\"pushcontent\"]:not([open])) {\n  display: none;\n}\n\n:host([skip-animation]) > .canvas-container {\n  transition: none;\n}\n\n.backdrop {\n  z-index: 1000;\n  width: 100%;\n  height: 100%;\n  background-color: var(--gray900);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.4s ease-out;\n}\n\n:host([open]) > .backdrop {\n  opacity: 0.7;\n  pointer-events: unset;\n}\n\n.canvas-container > .canvas-content {\n  overflow: hidden auto;\n  flex: 1 auto;\n  padding: 0 calc(var(--space-unit) * 2);\n  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;\n}\n\n/* Tablet / Desktop */\n@media (min-width: 768px) {\n  :host([variant=\"pushcontent\"]:not([transitiondirection=\"up\"])) {\n    flex: none; /* Prevent unwanted width changes in flex containers */\n  }\n\n  .canvas-container {\n    width: var(--z-offcanvas--container-width, 375px);\n    min-width: var(--z-offcanvas--container-width, 375px);\n  }\n\n  :host([transitiondirection=\"up\"]) > .canvas-container {\n    width: 100%;\n  }\n\n  :host([transitiondirection=\"right\"]) > .canvas-container {\n    right: auto;\n    left: 0;\n  }\n\n  :host([transitiondirection=\"left\"]) > .canvas-container {\n    right: 0;\n    left: auto;\n  }\n}\n","import {Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch} from \"@stencil/core\";\nimport {KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\n\n/**\n * @slot canvasContent - Slot for the offcanvas content.\n * @cssprop --z-offcanvas--top-space - Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.\n * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.\n * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.\n */\n@Component({\n  tag: \"z-offcanvas\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZOffcanvas {\n  /**\n   * Offcanvas variant.\n   * - `overlay`: The offcanvas covers the page content putting an overlay.\n   * - `pushcontent`: The offcanvas isn't absolutely positioned and \"pushes\" the page content.\n   * > NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.\n   * Also, the `pushcontent` variant doesn't have the open/close transition.\n   */\n  @Prop({reflect: true})\n  variant?: OffCanvasVariant = OffCanvasVariant.PUSHCONTENT;\n\n  /** Whether the offcanvas is open. Default: false */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Open the content transitioning to a specified direction.\n   * The `up` direction always show the `overlay`, also when the variant is `pushcontent`.\n   */\n  @Prop({reflect: true})\n  transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n  /**\n   * Skip the opening transition when the offcanvas is already open at the first render.\n   * @deprecated This prop is not needed anymore, the component will automatically skip the transition\n   *  when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.\n   */\n  @Prop()\n  skipLoadAnimation = false;\n\n  /** Whether to show the backdrop when the offcanvas is open. Default: true */\n  @Prop()\n  showBackdrop = true;\n\n  /** emitted when `open` prop changes */\n  @Event()\n  canvasOpenStatusChanged: EventEmitter;\n\n  /** Used to skip the opening transition when the offcanvas is already open at the first render. */\n  @State()\n  private skipAnimation = false;\n\n  private canvasContainer: HTMLElement;\n\n  private canvasContent: HTMLElement;\n\n  private allFocusableElements: HTMLElement[] = [];\n\n  private previouslyFocusedElement: HTMLElement | null = null;\n\n  /**\n   * Returns all focusable elements inside the offcanvas content.\n   * Elements are considered focusable if:\n   * - They are not disabled\n   * - They are visible in the layout\n   * - They have a non-negative tabIndex or an explicit tabindex=\"0\"\n   */\n  private getFocusableElements(): HTMLElement[] {\n    if (!this.canvasContent) {\n      return [];\n    }\n\n    const all = Array.from(this.canvasContent.querySelectorAll<HTMLElement>(\"*\"));\n\n    return all.filter((el) => {\n      const tabindex = el.getAttribute(\"tabindex\");\n      const isDisabled = el.hasAttribute(\"disabled\");\n      const isHidden = el.offsetParent === null;\n\n      return !isDisabled && !isHidden && (el.tabIndex >= 0 || tabindex === \"0\");\n    });\n  }\n\n  /**\n   * Keeps keyboard navigation trapped inside the offcanvas when it is open.\n   * Implements circular tab navigation:\n   * - If Shift + Tab is pressed on the first focusable element, move focus to the last.\n   * - If Tab is pressed on the last focusable element, move focus to the first.\n   */\n  private trapFocus(event: KeyboardEvent): void {\n    if (!this.allFocusableElements.length) {\n      return;\n    }\n\n    const first = this.allFocusableElements[0];\n    const last = this.allFocusableElements[this.allFocusableElements.length - 1];\n    const active = document.activeElement as HTMLElement;\n\n    if (event.shiftKey && active === first) {\n      event.preventDefault();\n      last.focus();\n    }\n\n    if (!event.shiftKey && active === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n\n  /**\n   * Handles keyboard interactions when the offcanvas is open.\n   * - Closes the offcanvas when the Escape key is pressed.\n   * - Traps focus inside the component when the Tab key is used.\n   */\n  @Listen(\"keydown\", {target: \"document\"})\n  handleKeyDown(event: KeyboardEvent): void {\n    if (!this.open) {\n      return;\n    }\n\n    if (event.key === KeyboardCode.ESC) {\n      event.preventDefault();\n      this.open = false;\n\n      return;\n    }\n\n    if (event.key === KeyboardCode.TAB) {\n      this.trapFocus(event);\n    }\n  }\n\n  /**\n   * Stop the event default behavior and propagation when the offcanvas is closed.\n   */\n  @Listen(\"click\", {capture: true})\n  @Listen(\"focusin\", {capture: true})\n  stopEvent(event: Event): void {\n    if (this.open) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  /**\n   * Hide the body overflow when the offcanvas is open.\n   */\n  @Watch(\"variant\")\n  private handlePageOverflow(): void {\n    const overflow =\n      this.variant === OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP\n        ? \"overflow-y\"\n        : \"overflow-x\";\n\n    document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    this.canvasOpenStatusChanged.emit(this.open);\n\n    if (this.open) {\n      // Store the element that was focused before the offcanvas opens, this allows restoring the focus when the offcanvas closes.\n      this.previouslyFocusedElement = document.activeElement as HTMLElement;\n\n      // Move focus inside the offcanvas once it is rendered.\n      if (this.allFocusableElements.length > 0) {\n        this.allFocusableElements[0].focus();\n      } else {\n        this.canvasContent?.focus();\n      }\n\n      this.handlePageOverflow();\n    } else {\n      // Restore focus to the element that was focused before the offcanvas was opened.\n      this.previouslyFocusedElement?.focus();\n\n      // When the offcanvas is closing, wait for the transitionend event before restoring the page overflow.\n      const listenerCallback = (): void => {\n        this.handlePageOverflow();\n        this.canvasContainer.removeEventListener(\"transitionend\", listenerCallback);\n      };\n\n      this.canvasContainer?.addEventListener(\"transitionend\", listenerCallback);\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.open) {\n      this.skipAnimation = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.handlePageOverflow();\n  }\n\n  componentDidRender(): void {\n    this.skipAnimation = false;\n    this.allFocusableElements = this.getFocusableElements();\n  }\n\n  connectedCallback(): void {\n    this.handlePageOverflow();\n  }\n\n  disconnectedCallback(): void {\n    this.open = false;\n  }\n\n  render(): HTMLZOffcanvasElement {\n    return (\n      <Host\n        skip-animation={this.skipAnimation}\n        aria-hidden={!this.open ? \"true\" : null}\n      >\n        <div\n          class=\"canvas-container\"\n          role=\"presentation\"\n          ref={(el) => (this.canvasContainer = el)}\n        >\n          <div\n            class=\"canvas-content z-scrollbar\"\n            role=\"presentation\"\n            ref={(el) => (this.canvasContent = el)}\n          >\n            <slot name=\"canvasContent\"></slot>\n          </div>\n        </div>\n        {(this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&\n          this.showBackdrop && (\n            <div\n              class=\"backdrop\"\n              onClick={() => (this.open = false)}\n            ></div>\n          )}\n      </Host>\n    );\n  }\n}\n"],"version":3}