@zanichelli/albe-web-components 2.38.1 → 2.40.1

package/dist/cjs/z-myz-list-item.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const utils = require('./utils-971854fc.js');
-require('./index-dcab1bda.js');
+const utils = require('./utils-428c57eb.js');
+require('./index-6b11e272.js');
 require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ":host li{all:unset;all:reset;width:100%}:host li{list-style-type:none;line-height:14px}:host li>span{line-height:14px;padding:calc(var(--space-unit) * 2) 0;display:flex;font-family:var(--dashboard-font);font-weight:var(--font-rg);font-size:16px;letter-spacing:0.23px;color:var(--text-grey-800);fill:var(--text-grey-800)}:host li>span.border{border-bottom:2px solid var(--bg-grey-200)}:host li span:hover,a:hover{color:var(--myz-blue);fill:var(--myz-blue)}a,a:visited,a:active{color:inherit;fill:inherit;text-decoration:none}:host li span z-icon{color:var(--myz-blue);fill:var(--myz-blue);height:calc(var(--space-unit) * 2);width:calc(var(--space-unit) * 2);padding:0 calc(var(--space-unit) * 1.5) 0 0;background-size:contain;background-repeat:no-repeat}";

package/dist/cjs/z-myz-topbar.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-dcab1bda.js');
+const index$1 = require('./index-6b11e272.js');
 const breakpoints = require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ":host a{cursor:pointer}header{position:sticky;top:0;z-index:99;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main-header\";margin-bottom:calc(var(--space-unit) * 6.5);font-family:var(--dashboard-font);font-weight:var(--font-rg)}.main-header{display:grid;grid-template-columns:2fr 2fr 4fr 100px;grid-template-rows:1fr;grid-template-areas:\"logo link-int link-ext login\";grid-area:main-header;grid-column-gap:calc(var(--space-unit) * .5);align-items:center;background-color:var(--bg-grey-900);height:auto;align-items:center;z-index:10}.main-header.myz-out{background-color:var(--bg-white)}.logo{grid-area:logo;padding:6px}z-logo{transform:scale(0.9)}.dropdown-menu{display:none}.dropdown-menu.hidden{visibility:hidden}.dropdown-links{grid-area:dropdown-links;list-style:none;display:block;max-height:32px;margin:0;padding:0}.arrow{fill:var(--text-grey-200)}.dropdown-links>li{list-style:none;display:inline-block;margin:0;padding:0}.dropdown-links>li>a{width:auto;height:auto;color:var(--myz-blue);font-size:14px;letter-spacing:0.18px;line-height:32px;text-decoration:none;margin:var(--space-unit);padding-bottom:calc(var(--space-unit) * .5)}.dropdown-links>li>a:hover,.dropdown-links>li>a.active{color:var(--text-grey-800);border-bottom:2px solid var(--myz-blue)}.mobile-header{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:center;align-items:center;width:100%;background-color:var(--bg-grey-900);z-index:inherit;height:52px;position:fixed;top:0px;left:0;z-index:999}.mobile-header.myz-out{background-color:var(--bg-white)}.mobile-header>z-button{margin:0 calc(var(--space-unit) * 2)}.mobile-content{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:center;justify-content:center;align-items:center;width:100%;background-color:var(--bg-grey-900);position:fixed;top:52px;left:0;z-index:999;max-height:0px;overflow:hidden;transition:max-height 1s cubic-bezier(0.46, 0, 1, 0.79)}.mobile-content.open{max-height:100vh;transition:max-height 2s cubic-bezier(0, 0.79, 0.46, 1)}.mobile-content.myz-out{background-color:var(--bg-white)}hr{display:block;position:relative;padding:0;margin:0px calc(var(--space-unit) * 4);height:0;width:calc(100% - 64px);max-height:0;font-size:1px;line-height:0;clear:both;border:none;border-top:1px solid var(--text-grey-700)}.menu-mobile{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-content:center;color:var(--bg-white);padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);cursor:pointer}.myz-out .menu-mobile{color:var(--text-grey-800)}.menu-toggle{grid-area:menu-toggle;display:flex;flex-direction:column;margin:0 var(--space-unit)}.menu-toggle .bar{width:20px;height:2px;background-color:var(--bg-white);margin:2px auto;transition:all 0.3s ease-in-out}.myz-out .menu-toggle .bar{background-color:var(--text-grey-800)}.menu-toggle:hover{cursor:pointer}#mobile-menu.is-active .bar:nth-child(2){opacity:0}#mobile-menu.is-active .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}#mobile-menu.is-active .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.booktab-button,.mobile-login{overflow:hidden;height:0%;max-height:100%;width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:stretch;padding:0}.hidden{visibility:hidden}.login{grid-area:login;display:flex;justify-content:flex-end;padding:0 calc(var(--space-unit) * 2)}.login>z-button{color:var(--bg-white);fill:var(--bg-white)}.booktab-button>z-button{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;align-content:center;padding:calc(var(--space-unit) * 2) 0px calc(var(--space-unit) * 4) 0px}.link-ext{grid-area:link-ext;overflow:hidden;height:0%;max-height:100%;width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:stretch;padding:0}.link-ext-span{display:inline-block;width:100%;margin:calc(var(--space-unit) * .5) auto;box-sizing:border-box;margin:0px auto 0px auto;padding:0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);line-height:44px}.link-ext-span.myz:hover,.link-ext-span.myz:focus{background:var(--text-grey-800);border-radius:var(--border-radius);cursor:pointer}.link-ext z-link{font-size:12px;font-weight:var(--font-sb)}.link-int{overflow:hidden;max-height:100%;width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:stretch;padding:0}.link-int>span{width:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-content:flex-start}.link-int>span>.menu-item{height:auto;color:var(--bg-white);letter-spacing:0.2px;font-weight:var(--font-sb);font-size:16px;text-decoration:none;outline:none;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:stretch;width:100%;box-sizing:border-box;margin:0px auto 0px auto;padding:0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);line-height:44px}.link-int>span>.menu-item:hover,.link-int>span>.menu-item:focus{border-radius:0px}.link-int>span>.menu-item>span{white-space:nowrap}.link-int>span>.menu-item>i{padding-top:calc(var(--space-unit) * 2);height:28px;width:24px;text-align:right}.link-int>span:first-child>.menu-item{margin-top:0}.link-int>span>svg{display:none}.link-int>.mobile-dropdown{padding:0 48px}.mobile-login>span{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-content:flex-start;fill:white}.mobile-login>span:focus,.mobile-login>span:hover{background:var(--text-grey-800)}.myz-out .mobile-login>span:focus,.myz-out .mobile-login>span:hover{background:none}.mobile-login>span>.menu-item{height:auto;color:var(--bg-white);letter-spacing:0.2px;font-weight:var(--font-sb);font-size:16px;text-decoration:none;outline:none;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:stretch;width:100%;box-sizing:border-box;margin:0px auto 0px auto;padding:0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);line-height:44px}.myz-out .mobile-login>span>.menu-item{color:var(--text-grey-800)}.mobile-login>span>.menu-item>i{padding-top:calc(var(--space-unit) * 2);height:28px;width:24px;text-align:right}.mobile-login>span>.menu-item>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-login>span>.menu-item>span>z-icon{padding-right:var(--space-unit);fill:var(--bg-white)}.menu-item>i::before{border-style:solid;border-width:0.12em 0.12em 0 0;content:\" \";display:inline-block;height:0.45em;left:0.16em;position:relative;top:-0.12em;transform:rotate(135deg) scale(1.2);vertical-align:top;width:0.45em;margin-top:2px;margin-left:2px;margin-right:6px;transition:all 0.5s ease}.menu-item.isopen>i::before{top:0.24em;transform:rotate(-45deg) scale(1.2);transition:all 0.5s ease}.mobile-dropdown{background:white;display:block;overflow:hidden;width:100%;box-sizing:border-box;margin:0px auto 0px auto;padding:0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);line-height:44px;max-height:0px;transition:max-height 0.3s ease}.mobile-dropdown.visible{max-height:100vh;transition:max-height 0.5s ease}@media only screen and (min-width: 768px){header{grid-template-columns:1fr 0.8fr 1.5fr 1.1fr 0.7fr;grid-template-rows:0.2fr auto;grid-template-areas:\"main-header main-header main-header main-header main-header\" \"dropdown-menu dropdown-menu dropdown-menu dropdown-menu dropdown-menu\";margin-bottom:0}header.myz-out{top:0px;grid-template-rows:1fr}.main-header{display:grid;grid-template-columns:170px auto auto 120px;grid-template-rows:1fr;grid-template-areas:\"logo link-int link-ext login\";grid-area:main-header}.dropdown-menu{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"dropdown-links\";grid-area:dropdown-menu;grid-column-gap:var(--space-unit);background:var(--bg-grey-200);height:32px;visibility:visible;z-index:9;padding-left:160px}.booktab-button,.mobile-header,.mobile-login,.mobile-dropdown,.menu-mobile{display:none}.link-int{grid-area:link-int;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-content:center;max-height:46px;margin-top:calc(var(--space-unit) * .5)}.link-int>span{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-content:center;width:auto}.link-int>span>.menu-item{width:auto;height:auto;color:var(--bg-white);letter-spacing:0.2px;line-height:14px;font-weight:var(--font-sb);text-decoration:none;outline:none;padding:calc(var(--space-unit) * 1.5)}.link-int>span>svg{display:block}.menu-item>i{display:none}.link-int>span>.menu-item:focus,.link-int>span>.menu-item:hover{background:var(--text-grey-800);border-radius:var(--border-radius);cursor:pointer}.link-int>span>.menu-item::-moz-focus-inner{border:0}.link-int>span>.menu-item:focus+svg{visibility:visible}.link-ext{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:center;align-content:center;max-height:46px}.link-ext-span{width:auto;line-height:14px;margin:var(--space-unit);padding:calc(var(--space-unit) * .5) var(--space-unit)}}@media only screen and (min-width: 1152px){.main-header{grid-template-columns:170px auto auto 180px}}";

package/dist/cjs/z-navigation-tabs.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-dcab1bda.js');
+const index$1 = require('./index-6b11e272.js');
 
 const stylesCss = ":host{--safe-scroll-area:4px;--negative-safe-scroll-area:calc(-1 * var(--safe-scroll-area));position:relative;display:flex;flex-direction:row;z-index:0;margin:var(--negative-safe-scroll-area);padding:var(--safe-scroll-area);font-family:var(--font-family-sans);font-weight:var(--font-rg);overflow:hidden}:host,:host *,::slotted(*){box-sizing:border-box}::-webkit-scrollbar{display:none}button.navigation{position:absolute;display:flex;align-items:center;justify-content:center;margin:0;padding:0;background:var(--color-white);border:none;outline:none;fill:var(--color-primary01);border-radius:var(--border-no-radius);cursor:pointer;z-index:1}button.navigation:focus{fill:var(--color-primary01);box-shadow:var(--shadow-focus-primary)}button.navigation:disabled{display:none}nav{display:flex;align-items:center;justify-content:flex-start;overflow:auto;margin:var(--negative-safe-scroll-area);padding:var(--safe-scroll-area);scroll-padding:var(--safe-scroll-area);scrollbar-width:none}:host([orientation='horizontal']) nav{width:100%}:host([orientation='horizontal']) button.navigation{top:0;height:100%;width:calc((var(--space-unit) * 4) + var(--safe-scroll-area))}:host([orientation='horizontal']) button.navigation:first-child{left:0;padding-left:var(--safe-scroll-area);box-shadow:5px 0px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40)}:host([orientation='horizontal']) button.navigation:last-child{right:0;padding-right:4px;box-shadow:-5px 0px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40)}:host([orientation='vertical']){flex-direction:column}:host([orientation='vertical']) nav{flex-direction:column;align-items:stretch;height:100%}:host([orientation='vertical']) button.navigation{left:0;width:100%;height:calc((var(--space-unit) * 4) + var(--safe-scroll-area))}:host([orientation='vertical']) button.navigation:first-child{top:0;padding-top:var(--safe-scroll-area);box-shadow:0px 5px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40)}:host([orientation='vertical']) button.navigation:last-child{bottom:0;padding-bottom:var(--safe-scroll-area);box-shadow:0px -5px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40)}:host([size='small'][orientation='vertical']) button.navigation{height:calc(var(--space-unit) * 4)}";
 

package/dist/cjs/z-notification.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-dcab1bda.js');
+const index$1 = require('./index-6b11e272.js');
 
 const stylesCss = ":host{width:100%;color:var(--color-text01)}.notification-container{display:flex;padding:0 0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);outline:none;border-bottom:var(--border-size-medium) solid var(--color-surface03)}.shadow{box-shadow:var(--shadow-3)}.content-container{display:flex;justify-content:space-between;flex:1 1 auto;flex-wrap:wrap}.content-text{max-width:800px;margin-top:calc(var(--space-unit) * 2);margin-right:calc(var(--space-unit) * 2)}.action-text{margin-top:calc(var(--space-unit) * 2);margin-right:calc(var(--space-unit) * 2);height:fit-content;color:var(--color-primary01);cursor:pointer;white-space:nowrap}:host div>z-icon{justify-self:center;margin-top:calc(var(--space-unit) * 2);margin-right:calc(var(--space-unit))}:host div.success-notification{background:var(--color-success-inverse)}:host div.warning-notification{background:var(--color-warning-inverse)}:host div.error-notification{background:var(--color-error-inverse)}:host div.success-notification>z-icon{fill:var(--color-success01)}:host div.warning-notification>z-icon{fill:var(--color-warning02)}:host div.error-notification>z-icon{fill:var(--color-error01)}:host div>z-icon.close-icon{cursor:pointer;fill:var(--color-primary01);margin-right:calc(var(--space-unit) * 2)}@media only screen and (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text{margin-right:calc(var(--space-unit) * 5)}}";
 

package/dist/cjs/z-otp.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-dcab1bda.js');
+const index$1 = require('./index-6b11e272.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{height:72px;width:calc(var(--space-unit) * 5);font-size:32px;font-weight:300;font-family:var(--font-family-sans);text-align:center;caret-color:transparent;box-sizing:border-box;padding:0;color:var(--color-surface05)}input.error{border:1px solid;border-radius:4px;border-color:var(--color-error01);background-color:var(--color-error-inverse)}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";
 

package/dist/cjs/z-pagination-bar.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
 const hammer = require('./hammer-54230951.js');
-const utils = require('./utils-971854fc.js');
+const utils = require('./utils-428c57eb.js');
 require('./_commonjsHelpers-119ffc74.js');
-require('./index-dcab1bda.js');
+require('./index-6b11e272.js');
 require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ":host>div{height:48px;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-around;align-items:center;align-content:center}:host>div>z-icon{cursor:pointer;margin:calc(var(--space-unit) * 2) 0;color:var(--color-primary01);fill:var(--color-primary01)}:host>div>z-icon.disabled{cursor:default;pointer-events:none;color:var(--color-disabled01);fill:var(--color-disabled01)}";

package/dist/cjs/z-pocket_3.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-dcab1bda.js');
-const utils = require('./utils-971854fc.js');
+const index$1 = require('./index-6b11e272.js');
+const utils = require('./utils-428c57eb.js');
 const hammer = require('./hammer-54230951.js');
 require('./breakpoints-88c4fd6c.js');
 require('./_commonjsHelpers-119ffc74.js');

package/dist/cjs/z-popover.cjs.entry.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
 const index$2 = require('./index-9651dba8.js');
-const index$1 = require('./index-dcab1bda.js');
-const utils = require('./utils-971854fc.js');
+const index$1 = require('./index-6b11e272.js');
+const utils = require('./utils-428c57eb.js');
 require('./_commonjsHelpers-119ffc74.js');
 require('./breakpoints-88c4fd6c.js');
 

package/dist/cjs/z-slideshow.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-dcab1bda.js');
-const utils = require('./utils-971854fc.js');
+const index$1 = require('./index-6b11e272.js');
+const utils = require('./utils-428c57eb.js');
 require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:block;width:inherit}:host>div{display:flex;flex-direction:column;width:inherit}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;top:50%;width:auto;cursor:pointer;transition:0.6s ease;margin:0 var(--space-unit);fill:var(--color-primary01);z-index:10}main .scroll.disabled{opacity:50%;pointer-events:none}main .scroll.right{right:0}#slides{display:flex;flex-wrap:wrap;transition:all 300ms;line-height:0px;overflow-y:hidden}footer{height:56px;width:100%;align-items:center;display:grid;grid-template-columns:2;grid-template-rows:2;grid-template-areas:\"center center\" \"left right\";border-top:var(--border-base) solid var(--color-surface02)}footer>div{align-items:center;width:100%}footer .footerCenter{grid-area:center}footer .footerLeft{grid-area:left}footer .footerRight{grid-area:right}footer .bulletContainer{display:flex;margin:0 auto;justify-content:center;align-items:center;min-height:60px}footer .bulletContainer .bullet{width:8px;height:8px;border-radius:50%;background-color:var(--bg-neutral-150);margin:var(--space-unit) 2px;pointer-events:none}footer .bulletContainer .bullet.selected{background-color:var(--bg-neutral-400)}@media only screen and (min-width: 768px){footer{grid-template-columns:1fr 2fr 1fr;grid-template-rows:1;grid-template-areas:\"left center right\";height:76px;border-top:var(--border-base) solid var(--color-surface02)}footer .bulletContainer .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bulletContainer .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);pointer-events:auto;cursor:pointer}}";

package/dist/cjs/z-status-tag.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-dcab1bda.js');
+const index$1 = require('./index-6b11e272.js');
 const index$2 = require('./index-9651dba8.js');
 require('./_commonjsHelpers-119ffc74.js');
 

package/dist/cjs/z-table-cell.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-dcab1bda.js');
+const index$1 = require('./index-6b11e272.js');
 const index$2 = require('./index-9651dba8.js');
 require('./_commonjsHelpers-119ffc74.js');
 

package/dist/cjs/z-table-header.cjs.entry.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
 const index$2 = require('./index-9651dba8.js');
-const index$1 = require('./index-dcab1bda.js');
-const utils = require('./utils-971854fc.js');
+const index$1 = require('./index-6b11e272.js');
+const utils = require('./utils-428c57eb.js');
 require('./_commonjsHelpers-119ffc74.js');
 require('./breakpoints-88c4fd6c.js');
 

package/dist/cjs/z-table-row.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-dcab1bda.js');
+const index$1 = require('./index-6b11e272.js');
 
 const stylesCss = "z-table-row{display:table-row;font-family:var(--font-family-sans)}z-table-row[expanded-type=\"expandable\"]:hover{cursor:pointer}z-table-row[expanded-type=\"expandable\"]>z-table-cell:first-child,z-table-row[expanded-type=\"padding\"]>z-table-cell:first-child{--z-icon-width:16px;--z-icon-height:16px;width:24px;padding-left:16px;padding-right:0px;box-sizing:border-box;text-align:center;fill:var(--gray800);user-select:none}.z-icon-placeholder{width:24px;padding-right:0px}z-table-row[expanded-type=\"expandable\"]>z-table-cell:nth-child(2),z-table-row[expanded-type=\"padding\"]>z-table-cell:nth-child(2){padding-left:8px}z-table-row[expanded-type]:hover>z-table-cell:first-child{fill:var(--myz-blue-dark)}z-table-row[expanded]>z-table-cell{background-color:var(--gray50)}z-table-row[expanded]+z-table-expanded-row{display:table-row}z-table-row[expanded]>z-table-cell{border-bottom:none}";
 

package/dist/cjs/z-table.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-dcab1bda.js');
+const index$1 = require('./index-6b11e272.js');
 const breakpoints = require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = "z-table{overflow-x:auto;display:block;width:100%;font-family:var(--dashboard-font);font-weight:var(--font-rg);background-color:var(--color-white)}z-table>div.table{display:table;width:100%;border-collapse:separate}z-table>div.table-bordered>z-table-body>z-table-row>z-table-cell:not(:last-child),z-table>div.table-bordered>z-table-head>z-table-header-row>z-table-header:not(:last-child){border-right:var(--border-size-small) solid var(--bg-grey-200)}z-table>div>z-table-body>z-table-row[expandable]>z-table-cell:first-child,z-table>div>z-table-head>z-table-header-row[expandable]>z-table-header:first-child{border-right:none}z-table>div>z-table-body>z-table-row[expanded]>z-table-cell{background-color:var(--gray50)}z-table>div>z-table-body>z-table-row[expanded]+z-table-expanded-row{border-bottom:1px solid var(--gray200)}z-table>div.table-column-sticky>z-table-body>z-table-row>z-table-cell:first-child,z-table>div.table-column-sticky>z-table-head>z-table-header-row>z-table-header:first-child{position:sticky;left:0;box-shadow:1px 0 4px -1px rgba(66, 69, 72, 0.4);z-index:1}z-table>div.table-header-sticky>z-table-head>z-table-header-row>z-table-header{position:sticky;top:0;box-shadow:0 2px 3px -3px rgba(66, 69, 72, 0.4)}z-table>div.table-header-sticky>z-table-head>z-table-header-row>z-table-header{z-index:2}z-table>div.table-header-sticky>z-table-head>z-table-header-row>z-table-header:first-child,z-table>div.table-column-sticky>z-table-head>z-table-header-row>z-table-header:first-child{z-index:5}z-table-body{width:auto;background-color:var(--color-white)}z-table-empty-box{display:flex;flex-direction:column;flex-grow:1;border-bottom:var(--border-size-small) solid var(--bg-grey-200)}z-table-empty-box.bordered{border-left:var(--border-size-small) solid var(--bg-grey-200)}.error-message{margin-top:calc(var(--space-unit) * 2)}.table-content{display:flex;flex-direction:row;width:100%}.error-content{font-family:var(--dashboard-font);padding:calc(var(--space-unit) * 3);display:flex}.error-content>img{width:244px;height:188px;margin-right:calc(var(--space-unit) * 3)}@media only screen and (max-width: 768px){z-table>div.table-empty{display:none}.error-content{display:flex;flex-direction:column}.error-content>img{width:auto;height:auto}.text{padding:calc(var(--space-unit) * 3) 0}}";

package/dist/cjs/z-toast-notification-list.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-dcab1bda.js');
+const index$1 = require('./index-6b11e272.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);position:fixed;display:flex;flex-direction:column;flex-wrap:nowrap;z-index:10000;margin-bottom:calc(var(--space-unit) * 2);margin-top:calc(var(--space-unit) * 2)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host(.bottom-centre),:host(.bottom-right),:host(.bottom-left){justify-content:flex-end;align-items:flex-end;bottom:0}:host(.top-left),:host(.top-right),:host(.top-centre){justify-content:flex-start;align-items:flex-start;top:0}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host(.top-centre){justify-content:flex-start;align-items:center;top:0;left:50%;transform:translateX(-50%)}:host(.top-left){justify-content:flex-start;align-items:flex-start;top:0;left:0}:host(.top-right){justify-content:flex-start;align-items:flex-end;top:0;right:0}:host(.bottom-centre){justify-content:flex-end;align-items:center;bottom:0;left:50%;transform:translateX(-50%)}:host(.bottom-right){justify-content:flex-end;align-items:flex-end;bottom:0;right:0}:host(.bottom-left){justify-content:flex-end;align-items:flex-start;bottom:0;left:0}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}";
 

package/dist/cjs/z-toast-notification.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-dcab1bda.js');
+const index$1 = require('./index-6b11e272.js');
 const breakpoints = require('./breakpoints-88c4fd6c.js');
 const hammer = require('./hammer-54230951.js');
 require('./_commonjsHelpers-119ffc74.js');

package/dist/cjs/z-tooltip.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-dcab1bda.js');
+const index$1 = require('./index-6b11e272.js');
 
 const stylesCss = ":host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-text01);--arrow-size:6px;--edge-offset:calc(-1 * (var(--arrow-size) + calc(var(--space-unit) * 2)));position:relative;display:none;align-items:center;justify-content:center;padding:var(--space-unit);min-width:calc(var(--space-unit) * 8);min-height:calc(var(--space-unit) * 4);color:var(--z-tooltip-theme--text);fill:currentColor;font-family:var(--font-family-sans);text-align:center;border-radius:var(--border-radius-small);background:var(--z-tooltip-theme--surface);filter:drop-shadow(0 4px 8px var(--shadow-color-base));will-change:filter}:host(.legacy){display:inline-flex;padding:calc(var(--space-unit) * 2);min-width:auto;min-height:auto;max-width:200px;font-style:italic;line-height:16px;letter-spacing:0.32px;font-size:12px;border:var(--border-size-small) solid var(--gray200);border-radius:var(--border-radius);filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.08))}:host(.legacy)::before{--arrow-size:14px}:host([position])::before{--arrow-edge-offset:calc(100% - var(--arrow-size) - var(--space-unit));--arrow-center-x-offset:calc(50% - calc(var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - calc(var(--arrow-size) / 2));content:'';position:absolute;width:var(--arrow-size);height:var(--arrow-size);background:inherit;transform:rotate(45deg)}:host([open][style*='top:']),:host([open][style*='inset:']){display:inline-flex}:host([position^='top']){margin-bottom:var(--space-unit)}:host([position='right']){margin-left:var(--space-unit)}:host([position='top_right']),:host([position='bottom_right']){margin-left:var(--edge-offset)}:host([position^='bottom']){margin-top:var(--space-unit)}:host([position='left']){margin-right:var(--space-unit)}:host([position='top_left']),:host([position='bottom_left']){margin-right:var(--edge-offset)}:host([position^='top'])::before{top:var(--arrow-center-y-offset)}:host([position^='bottom'])::before{bottom:var(--arrow-center-y-offset)}:host([position='top'])::before,:host([position='bottom'])::before{left:var(--arrow-center-x-offset)}:host([position='right'])::before,:host([position='left'])::before{top:var(--arrow-center-x-offset)}:host([position='right'])::before{right:var(--arrow-center-y-offset)}:host([position='top_right'])::before,:host([position='bottom_right'])::before{right:var(--arrow-edge-offset)}:host([position='left'])::before{left:var(--arrow-center-y-offset)}:host([position='top_left'])::before,:host([position='bottom_left'])::before{left:var(--arrow-edge-offset)}::slotted(*){flex:1 auto;overflow:auto}";
 

package/dist/collection/beans/index.js

@@ -253,6 +253,16 @@ export var ZAriaAlertMode;
   ZAriaAlertMode["polite"] = "polite";
   ZAriaAlertMode["assertive"] = "assertive";
 })(ZAriaAlertMode || (ZAriaAlertMode = {}));
+export var TransitionDirectionEnum;
+(function (TransitionDirectionEnum) {
+  TransitionDirectionEnum["left"] = "left";
+  TransitionDirectionEnum["right"] = "right";
+})(TransitionDirectionEnum || (TransitionDirectionEnum = {}));
+export var OffCanvasVariantsEnum;
+(function (OffCanvasVariantsEnum) {
+  OffCanvasVariantsEnum["overlay"] = "overlay";
+  OffCanvasVariantsEnum["pushcontent"] = "pushcontent";
+})(OffCanvasVariantsEnum || (OffCanvasVariantsEnum = {}));
 export var ZChipType;
 (function (ZChipType) {
   ZChipType["default"] = "default";

package/dist/collection/collection-manifest.json

@@ -54,6 +54,7 @@
     "./components/z-contextual-menu/index.js",
     "./components/z-divider/index.js",
     "./components/z-ghost-loading/index.js",
+    "./components/z-offcanvas/index.js",
     "./components/z-popover/index.js",
     "./components/z-status-tag/index.js",
     "./components/z-table/z-table/index.js",

package/dist/collection/components/buttons/z-button/index.js

@@ -15,9 +15,8 @@ export class ZButton {
     /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
     this.size = ButtonSizeEnum.big;
     /** Reduce button size (deprecated).
-     *
      * @deprecated Use `size` prop.
-     * */
+     */
     this.issmall = false;
     /** Spy to render square button. */
     this.square = false;

package/dist/collection/components/z-offcanvas/index.js

@@ -0,0 +1,147 @@
+import { Component, Element, Event, h, Prop, Watch } from "@stencil/core";
+import { OffCanvasVariantsEnum, TransitionDirectionEnum } from "../../beans";
+/**
+ * @slot canvasContent - set the content of the canvas
+ */
+export class ZOffcanvas {
+  constructor() {
+    /**
+    * Offcanvas variant.
+    * Can be one of "overlay", "pushcontent"
+    * Default variant: pushcontent
+    */
+    this.variant = OffCanvasVariantsEnum.pushcontent;
+    /** open component. Default: false */
+    this.open = false;
+    /** open content transitioning in a specified direction left | right. Default: left */
+    this.transitiondirection = TransitionDirectionEnum.left;
+  }
+  componentWillLoad() {
+    this.handleOpenStatus();
+  }
+  onOpenChanged() {
+    this.handleOpenStatus();
+    this.canvasOpenStatusChanged.emit(this.open);
+  }
+  handleOpenStatus() {
+    if (this.open) {
+      this.hostElement.style.display = "flex";
+    }
+    else if (this.variant === OffCanvasVariantsEnum.pushcontent) {
+      this.hostElement.style.display = "none";
+      document.body.style.overflowX = "hidden";
+    }
+  }
+  handleAnimationEnd() {
+    if (this.hostElement.hasAttribute("open")) {
+      this.hostElement.querySelector(`.canvas-content`).focus();
+    }
+    else if (this.variant === OffCanvasVariantsEnum.overlay) {
+      this.hostElement.style.display = "none";
+      document.body.style.overflowX = "initial";
+    }
+  }
+  render() {
+    return [
+      h("div", { class: "canvas-container", onAnimationEnd: () => this.handleAnimationEnd() },
+        h("div", { class: "canvas-content", tabindex: "0" },
+          h("slot", { name: "canvasContent" }))),
+      h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => this.open = false })
+    ];
+  }
+  static get is() { return "z-offcanvas"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "OffCanvasVariantsEnum",
+        "resolved": "OffCanvasVariantsEnum.overlay | OffCanvasVariantsEnum.pushcontent",
+        "references": {
+          "OffCanvasVariantsEnum": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Offcanvas variant.\nCan be one of \"overlay\", \"pushcontent\"\nDefault variant: pushcontent"
+      },
+      "attribute": "variant",
+      "reflect": true,
+      "defaultValue": "OffCanvasVariantsEnum.pushcontent"
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "open component. Default: false"
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "transitiondirection": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TransitionDirectionEnum",
+        "resolved": "TransitionDirectionEnum.left | TransitionDirectionEnum.right",
+        "references": {
+          "TransitionDirectionEnum": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "open content transitioning in a specified direction left | right. Default: left"
+      },
+      "attribute": "transitiondirection",
+      "reflect": true,
+      "defaultValue": "TransitionDirectionEnum.left"
+    }
+  }; }
+  static get events() { return [{
+      "method": "canvasOpenStatusChanged",
+      "name": "canvasOpenStatusChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "emitted when open prop changes"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "onOpenChanged"
+    }]; }
+}

package/dist/collection/components/z-offcanvas/styles.css

@@ -0,0 +1,163 @@
+:host {
+  --z-offcanvas--container-width: 375px;
+  --z-offcanvas--top-space: 0px;
+
+  z-index: 1000;
+  display: none;
+  justify-content: end;
+  height: 100%;
+  min-width: 100%;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+.canvas-container {
+  display: flex;
+  flex-direction: column;
+  z-index: 1010;
+  min-width: 100%;
+  height: 100%;
+  overflow: -moz-scrollbars-none;
+  overflow: hidden;
+  background: var(--color-surface01);
+  transform: translateX(100%);
+}
+
+@keyframes enterRight {
+  from {transform: translateX(100%);}
+  to {transform: translateX(0);}
+}
+
+:host([open]) > .canvas-container {
+  animation-name: enterRight;
+  animation-duration:0.4s;
+  animation-timing-function: ease-out;
+  transform: translateX(0);
+}
+
+@keyframes exitRight {
+  from {transform: translateX(0);}
+  to {transform: translateX(100%);}
+}
+
+:host(:not([open])[variant="overlay"]) > .canvas-container {
+  animation-name: exitRight;
+  animation-duration:0.4s;
+  animation-timing-function: ease-out;
+  transform: translateX(100%);
+}
+
+:host([variant="overlay"]) {
+  position: fixed;
+  height: calc(100% - var(--z-offcanvas--top-space));
+  top: var(--z-offcanvas--top-space);
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+:host([variant="overlay"]) .canvas-background {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--gray900);
+  opacity: 0.7;
+}
+
+:host([transitiondirection="right"]) {
+  justify-content: start;
+}
+
+:host([transitiondirection="right"]) > .canvas-container {
+  transform: translateX(-100%);
+}
+
+@keyframes enterLeft {
+  from {transform: translateX(-100%);}
+  to {transform: translateX(0);}
+}
+
+:host([transitiondirection="right"][open]) > .canvas-container {
+  animation-name: enterLeft;
+  animation-duration: 0.4s;
+  animation-timing-function: ease-out;
+  transform: translateX(0);
+}
+
+@keyframes exitLeft {
+  from {transform: translateX(0);}
+  to {transform: translateX(-100%);}
+}
+
+:host(:not([open])[variant="overlay"][transitiondirection="right"]) > .canvas-container {
+  animation-name: exitLeft;
+  animation-duration:0.4s;
+  animation-timing-function: ease-out;
+  transform: translateX(-100%);
+}
+
+.canvas-container > .canvas-content {
+  flex: 1 auto;
+  overflow: auto;
+  overflow-x: hidden;
+  padding: 0 calc(var(--space-unit) * 2) ;
+  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;
+}
+
+.canvas-container .canvas-content::-webkit-scrollbar {
+  background: linear-gradient(
+    to right,
+    transparent 0 3px,
+    var(--gray200) 3px 7px,
+    transparent 7px 10px
+  );
+  width: 10px;
+  border-radius: var(--border-radius);
+}
+
+.canvas-container .canvas-content::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.canvas-container .canvas-content::-webkit-scrollbar-thumb {
+  background-color: var(--color-primary01);
+  border-radius: var(--border-radius);
+  width: 10px;
+}
+
+.canvas-container .canvas-content::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-hover-primary);
+}
+
+/* Firefox */
+.canvas-container .canvas-content {
+  scrollbar-color: var(--color-primary01) transparent;
+}
+
+/* Tablet / Desktop */
+@media only screen and (min-width: 768px) {
+  :host {
+    min-width: auto;
+  }
+  .canvas-container {
+    width: auto;
+    height: auto;
+    min-width: max(var(--z-offcanvas--container-width), 375px);
+    min-height: calc(var(--space-unit) * 40);
+    max-width: max(var(--z-offcanvas--container-width), 375px);
+  }
+
+  @keyframes grow {
+    from {width: 0;}
+    to {width: max(var(--z-offcanvas--container-width), 375px)}
+  }
+
+  :host(:not([variant="overlay"])[open]) {
+    animation-name: grow;
+    animation-duration: 0.4s;
+    animation-timing-function: ease-out;
+    width: auto;
+  }
+}
+

package/dist/esm/{index-6b86a3f1.js → index-9d70864c.js}

@@ -253,10 +253,20 @@ var ZAriaAlertMode;
   ZAriaAlertMode["polite"] = "polite";
   ZAriaAlertMode["assertive"] = "assertive";
 })(ZAriaAlertMode || (ZAriaAlertMode = {}));
+var TransitionDirectionEnum;
+(function (TransitionDirectionEnum) {
+  TransitionDirectionEnum["left"] = "left";
+  TransitionDirectionEnum["right"] = "right";
+})(TransitionDirectionEnum || (TransitionDirectionEnum = {}));
+var OffCanvasVariantsEnum;
+(function (OffCanvasVariantsEnum) {
+  OffCanvasVariantsEnum["overlay"] = "overlay";
+  OffCanvasVariantsEnum["pushcontent"] = "pushcontent";
+})(OffCanvasVariantsEnum || (OffCanvasVariantsEnum = {}));
 var ZChipType;
 (function (ZChipType) {
   ZChipType["default"] = "default";
   ZChipType["mini"] = "mini";
 })(ZChipType || (ZChipType = {}));
 
-export { AvatarSize as A, ButtonVariantEnum as B, CardVariants as C, DeviceEnum as D, ExpandableListButtonAlign as E, InputTypeEnum as I, KeyboardKeys as K, LicenseTypeEnum as L, NotificationType as N, PopoverPosition as P, StatusTagStatus as S, ThemeVariant as T, ZAriaAlertMode as Z, DividerOrientation as a, ZChipType as b, ButtonSizeEnum as c, PocketStatusEnum as d, InputStatusEnum as e, AlertTypesEnum as f, TooltipPosition as g, TabOrientationEnum as h, TabSizeEnum as i, ZTableRowExpandedType as j, keybordKeyCodeEnum as k, ToastNotificationTransitionsEnum as l, ToastNotificationPositionsEnum as m, ListSize as n, ListDividerType as o, DividerSize as p, ExpandableListStyle as q, Size as r, SortDirectionEnum as s, PopoverBorderRadius as t, PopoverShadow as u, ButtonTypeEnum as v };
+export { AvatarSize as A, ButtonTypeEnum as B, CardVariants as C, DeviceEnum as D, ExpandableListButtonAlign as E, InputTypeEnum as I, KeyboardKeys as K, LicenseTypeEnum as L, NotificationType as N, OffCanvasVariantsEnum as O, PopoverPosition as P, StatusTagStatus as S, ThemeVariant as T, ZAriaAlertMode as Z, DividerOrientation as a, ButtonVariantEnum as b, ButtonSizeEnum as c, DividerSize as d, TransitionDirectionEnum as e, ZChipType as f, PocketStatusEnum as g, InputStatusEnum as h, AlertTypesEnum as i, TooltipPosition as j, keybordKeyCodeEnum as k, TabOrientationEnum as l, TabSizeEnum as m, ZTableRowExpandedType as n, ToastNotificationTransitionsEnum as o, ToastNotificationPositionsEnum as p, ListSize as q, ListDividerType as r, ExpandableListStyle as s, Size as t, SortDirectionEnum as u, PopoverBorderRadius as v, PopoverShadow as w };

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { c as colorFromId } from './utils-351595e0.js';
-import './index-6b86a3f1.js';
+import { c as colorFromId } from './utils-347de6f5.js';
+import './index-9d70864c.js';
 import './breakpoints-c386984e.js';
 
 const Utils = {