@zanichelli/albe-web-components 18.6.1 → 18.6.3-RC
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/dist/cjs/{index-c48948bf.js → index-0d3de93e.js} +2 -2
- package/dist/cjs/{index-c48948bf.js.map → index-0d3de93e.js.map} +1 -1
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{utils-93961cb6.js → utils-3dc316f8.js} +56 -1
- package/dist/cjs/utils-3dc316f8.js.map +1 -0
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/z-anchor-navigation.cjs.entry.js +1 -1
- package/dist/cjs/z-anchor-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/z-app-header_12.cjs.entry.js +1 -1
- package/dist/cjs/z-book-card-deprecated.cjs.entry.js +1 -1
- package/dist/cjs/z-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/z-card.cjs.entry.js +1 -1
- package/dist/cjs/z-card.cjs.entry.js.map +1 -1
- package/dist/cjs/z-combobox.cjs.entry.js +1 -1
- package/dist/cjs/z-menu.cjs.entry.js +1 -1
- package/dist/cjs/z-myz-card-info.cjs.entry.js +1 -1
- package/dist/cjs/z-myz-list-item.cjs.entry.js +1 -1
- package/dist/cjs/z-popover.cjs.entry.js +232 -264
- package/dist/cjs/z-popover.cjs.entry.js.map +1 -1
- package/dist/cjs/z-select.cjs.entry.js +4 -6
- package/dist/cjs/z-select.cjs.entry.js.map +1 -1
- package/dist/cjs/z-skip-to-content.cjs.entry.js +1 -1
- package/dist/cjs/z-slideshow.cjs.entry.js +1 -1
- package/dist/cjs/z-table.cjs.entry.js +2 -2
- package/dist/cjs/z-toggle-switch.cjs.entry.js +1 -1
- package/dist/cjs/z-tr.cjs.entry.js +2 -2
- package/dist/collection/components/z-anchor-navigation/index.js +2 -2
- package/dist/collection/components/z-anchor-navigation/index.js.map +1 -1
- package/dist/collection/components/z-card/styles.css +4 -0
- package/dist/collection/components/z-popover/index.js +236 -268
- package/dist/collection/components/z-popover/index.js.map +1 -1
- package/dist/collection/components/z-popover/index.stories.js +92 -45
- package/dist/collection/components/z-popover/index.stories.js.map +1 -1
- package/dist/collection/components/z-popover/styles.css +4 -14
- package/dist/collection/components/z-select/index.js +4 -6
- package/dist/collection/components/z-select/index.js.map +1 -1
- package/dist/collection/utils/utils.js +53 -0
- package/dist/collection/utils/utils.js.map +1 -1
- package/dist/components/index23.js +234 -266
- package/dist/components/index23.js.map +1 -1
- package/dist/components/index24.js +1 -1
- package/dist/components/utils.js +55 -2
- package/dist/components/utils.js.map +1 -1
- package/dist/components/z-anchor-navigation.js +2 -2
- package/dist/components/z-anchor-navigation.js.map +1 -1
- package/dist/components/z-card.js +1 -1
- package/dist/components/z-card.js.map +1 -1
- package/dist/components/z-select.js +4 -6
- package/dist/components/z-select.js.map +1 -1
- package/dist/esm/{index-10473b87.js → index-328b69a7.js} +2 -2
- package/dist/esm/{index-10473b87.js.map → index-328b69a7.js.map} +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{utils-c8abef2f.js → utils-6e2be2b6.js} +55 -2
- package/dist/esm/utils-6e2be2b6.js.map +1 -0
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/z-anchor-navigation.entry.js +2 -2
- package/dist/esm/z-anchor-navigation.entry.js.map +1 -1
- package/dist/esm/z-app-header_12.entry.js +1 -1
- package/dist/esm/z-book-card-deprecated.entry.js +1 -1
- package/dist/esm/z-breadcrumb.entry.js +1 -1
- package/dist/esm/z-card.entry.js +1 -1
- package/dist/esm/z-card.entry.js.map +1 -1
- package/dist/esm/z-combobox.entry.js +1 -1
- package/dist/esm/z-menu.entry.js +1 -1
- package/dist/esm/z-myz-card-info.entry.js +1 -1
- package/dist/esm/z-myz-list-item.entry.js +1 -1
- package/dist/esm/z-popover.entry.js +233 -265
- package/dist/esm/z-popover.entry.js.map +1 -1
- package/dist/esm/z-select.entry.js +4 -6
- package/dist/esm/z-select.entry.js.map +1 -1
- package/dist/esm/z-skip-to-content.entry.js +1 -1
- package/dist/esm/z-slideshow.entry.js +1 -1
- package/dist/esm/z-table.entry.js +2 -2
- package/dist/esm/z-toggle-switch.entry.js +1 -1
- package/dist/esm/z-tr.entry.js +2 -2
- package/dist/types/components/z-popover/index.d.ts +47 -45
- package/dist/types/components/z-popover/index.stories.d.ts +18 -7
- package/dist/types/components.d.ts +13 -17
- package/dist/types/utils/utils.d.ts +17 -0
- package/dist/web-components-library/index.esm.js +1 -1
- package/dist/web-components-library/{p-8b93bc6d.entry.js → p-01302e57.entry.js} +2 -2
- package/dist/web-components-library/{p-14f0bdf4.entry.js → p-1ad8810a.entry.js} +2 -2
- package/{www/build/p-c2ba8a6c.entry.js → dist/web-components-library/p-2e0923bd.entry.js} +2 -2
- package/dist/web-components-library/p-3284e37b.entry.js +2 -0
- package/dist/web-components-library/{p-61f76cab.js → p-43bc482a.js} +2 -2
- package/{www/build/p-2fb52cd0.entry.js → dist/web-components-library/p-539f99db.entry.js} +2 -2
- package/dist/web-components-library/p-625e2cee.js +2 -0
- package/dist/web-components-library/p-625e2cee.js.map +1 -0
- package/dist/web-components-library/p-62e1d867.entry.js +2 -0
- package/dist/web-components-library/p-62e1d867.entry.js.map +1 -0
- package/dist/web-components-library/p-63d220da.entry.js +2 -0
- package/dist/web-components-library/{p-8d5e3396.entry.js.map → p-63d220da.entry.js.map} +1 -1
- package/dist/web-components-library/{p-c8814ae1.entry.js → p-7916e0f7.entry.js} +2 -2
- package/{www/build/p-f5efb3fc.entry.js → dist/web-components-library/p-8bd4a2aa.entry.js} +2 -2
- package/dist/web-components-library/{p-c962e854.entry.js → p-8dec332e.entry.js} +2 -2
- package/dist/web-components-library/{p-72a7eb26.entry.js → p-966cbf03.entry.js} +2 -2
- package/{www/build/p-30575221.entry.js → dist/web-components-library/p-a0ed0c63.entry.js} +2 -2
- package/dist/web-components-library/p-b7b972c0.entry.js +2 -0
- package/dist/web-components-library/p-b7b972c0.entry.js.map +1 -0
- package/dist/web-components-library/{p-25935be3.entry.js → p-bc2f94d9.entry.js} +2 -2
- package/dist/web-components-library/{p-57b8bd19.entry.js → p-db9b7eb5.entry.js} +2 -2
- package/dist/web-components-library/p-db9b7eb5.entry.js.map +1 -0
- package/dist/web-components-library/p-df04a63e.entry.js +2 -0
- package/dist/web-components-library/p-df04a63e.entry.js.map +1 -0
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/dist/web-components-library/web-components-library.esm.js.map +1 -1
- package/package.json +1 -1
- package/www/build/index.esm.js +1 -1
- package/www/build/{p-8b93bc6d.entry.js → p-01302e57.entry.js} +2 -2
- package/www/build/{p-14f0bdf4.entry.js → p-1ad8810a.entry.js} +2 -2
- package/{dist/web-components-library/p-c2ba8a6c.entry.js → www/build/p-2e0923bd.entry.js} +2 -2
- package/www/build/p-3284e37b.entry.js +2 -0
- package/www/build/{p-61f76cab.js → p-43bc482a.js} +2 -2
- package/{dist/web-components-library/p-2fb52cd0.entry.js → www/build/p-539f99db.entry.js} +2 -2
- package/www/build/p-625e2cee.js +2 -0
- package/www/build/p-625e2cee.js.map +1 -0
- package/www/build/p-62e1d867.entry.js +2 -0
- package/www/build/p-62e1d867.entry.js.map +1 -0
- package/www/build/p-63d220da.entry.js +2 -0
- package/www/build/{p-8d5e3396.entry.js.map → p-63d220da.entry.js.map} +1 -1
- package/www/build/{p-c8814ae1.entry.js → p-7916e0f7.entry.js} +2 -2
- package/{dist/web-components-library/p-f5efb3fc.entry.js → www/build/p-8bd4a2aa.entry.js} +2 -2
- package/www/build/{p-c962e854.entry.js → p-8dec332e.entry.js} +2 -2
- package/www/build/{p-72a7eb26.entry.js → p-966cbf03.entry.js} +2 -2
- package/{dist/web-components-library/p-30575221.entry.js → www/build/p-a0ed0c63.entry.js} +2 -2
- package/www/build/p-b7b972c0.entry.js +2 -0
- package/www/build/p-b7b972c0.entry.js.map +1 -0
- package/www/build/{p-25935be3.entry.js → p-bc2f94d9.entry.js} +2 -2
- package/www/build/{p-adc42c6f.js → p-c2d3e81c.js} +1 -1
- package/www/build/{p-57b8bd19.entry.js → p-db9b7eb5.entry.js} +2 -2
- package/www/build/p-db9b7eb5.entry.js.map +1 -0
- package/www/build/p-df04a63e.entry.js +2 -0
- package/www/build/p-df04a63e.entry.js.map +1 -0
- package/www/build/web-components-library.esm.js +1 -1
- package/www/build/web-components-library.esm.js.map +1 -1
- package/www/index.html +1 -1
- package/dist/cjs/utils-93961cb6.js.map +0 -1
- package/dist/esm/utils-c8abef2f.js.map +0 -1
- package/dist/web-components-library/p-37f271c8.entry.js +0 -2
- package/dist/web-components-library/p-37f271c8.entry.js.map +0 -1
- package/dist/web-components-library/p-57b8bd19.entry.js.map +0 -1
- package/dist/web-components-library/p-69a1a67a.entry.js +0 -2
- package/dist/web-components-library/p-8d5e3396.entry.js +0 -2
- package/dist/web-components-library/p-a06fbbc0.js +0 -2
- package/dist/web-components-library/p-a06fbbc0.js.map +0 -1
- package/dist/web-components-library/p-da30a6cb.entry.js +0 -2
- package/dist/web-components-library/p-da30a6cb.entry.js.map +0 -1
- package/dist/web-components-library/p-e1a80453.entry.js +0 -2
- package/dist/web-components-library/p-e1a80453.entry.js.map +0 -1
- package/www/build/p-37f271c8.entry.js +0 -2
- package/www/build/p-37f271c8.entry.js.map +0 -1
- package/www/build/p-57b8bd19.entry.js.map +0 -1
- package/www/build/p-69a1a67a.entry.js +0 -2
- package/www/build/p-8d5e3396.entry.js +0 -2
- package/www/build/p-a06fbbc0.js +0 -2
- package/www/build/p-a06fbbc0.js.map +0 -1
- package/www/build/p-da30a6cb.entry.js +0 -2
- package/www/build/p-da30a6cb.entry.js.map +0 -1
- package/www/build/p-e1a80453.entry.js +0 -2
- package/www/build/p-e1a80453.entry.js.map +0 -1
- /package/dist/web-components-library/{p-8b93bc6d.entry.js.map → p-01302e57.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-14f0bdf4.entry.js.map → p-1ad8810a.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-c2ba8a6c.entry.js.map → p-2e0923bd.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-69a1a67a.entry.js.map → p-3284e37b.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-61f76cab.js.map → p-43bc482a.js.map} +0 -0
- /package/dist/web-components-library/{p-2fb52cd0.entry.js.map → p-539f99db.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-c8814ae1.entry.js.map → p-7916e0f7.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-f5efb3fc.entry.js.map → p-8bd4a2aa.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-c962e854.entry.js.map → p-8dec332e.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-72a7eb26.entry.js.map → p-966cbf03.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-30575221.entry.js.map → p-a0ed0c63.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-25935be3.entry.js.map → p-bc2f94d9.entry.js.map} +0 -0
- /package/www/build/{p-8b93bc6d.entry.js.map → p-01302e57.entry.js.map} +0 -0
- /package/www/build/{p-14f0bdf4.entry.js.map → p-1ad8810a.entry.js.map} +0 -0
- /package/www/build/{p-c2ba8a6c.entry.js.map → p-2e0923bd.entry.js.map} +0 -0
- /package/www/build/{p-69a1a67a.entry.js.map → p-3284e37b.entry.js.map} +0 -0
- /package/www/build/{p-61f76cab.js.map → p-43bc482a.js.map} +0 -0
- /package/www/build/{p-2fb52cd0.entry.js.map → p-539f99db.entry.js.map} +0 -0
- /package/www/build/{p-c8814ae1.entry.js.map → p-7916e0f7.entry.js.map} +0 -0
- /package/www/build/{p-f5efb3fc.entry.js.map → p-8bd4a2aa.entry.js.map} +0 -0
- /package/www/build/{p-c962e854.entry.js.map → p-8dec332e.entry.js.map} +0 -0
- /package/www/build/{p-72a7eb26.entry.js.map → p-966cbf03.entry.js.map} +0 -0
- /package/www/build/{p-30575221.entry.js.map → p-a0ed0c63.entry.js.map} +0 -0
- /package/www/build/{p-25935be3.entry.js.map → p-bc2f94d9.entry.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,g as r}from"./p-75c4a726.js";import{Y as a}from"./p-17af7fb2.js";import{B as o}from"./p-5145a606.js";import{r as s}from"./p-a06fbbc0.js";const n=':host{--z-book-card-ribbon-background-color:var(--avatar-C08);--z-book-card-ribbon-shadow-color:var(--green950);--z-book-card-compact-width:262px;--z-book-card-compact-height:568px}:host>article{display:block;width:100%;max-width:360px;box-sizing:border-box;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>article div.cover{position:relative}:host>article div.cover div.img-wrapper{display:flex;overflow:hidden;border:var(--border-size-small) solid var(--color-surface03);line-height:0}:host>article div.cover div.img-wrapper img{width:auto;max-width:100%;height:auto;max-height:100%;align-self:flex-end}:host>article div.cover .ribbon{position:absolute;z-index:10;top:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * -2);display:flex;max-width:100%;height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;padding:0 calc(var(--space-unit) * 2);border:var(--border-size-medium) solid var(--color-surface01);background:var(--z-book-card-ribbon-background-color);border-radius:0 var(--border-radius) var(--border-radius) 0;box-shadow:var(--shadow-2);color:var(--color-text-inverse);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-weight:var(--font-sb);line-height:initial}:host>article div.cover .ribbon.interactive:hover{cursor:pointer}:host>article div.cover .ribbon.interactive:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}:host>article div.cover .ribbon span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.cover .ribbon::before{position:absolute;bottom:-12px;left:-2px;width:0;height:0;border-top:10px solid var(--z-book-card-ribbon-shadow-color);border-left:16px solid transparent;content:""}:host>article div.cover .ribbon z-icon{margin-right:var(--space-unit)}:host>article div.content{margin:var(--space-unit) 0;border-radius:var(--border-radius)}:host>article .title{display:flex;height:100%;align-self:center;color:var(--color-default-text);font-size:var(--font-size-4);font-weight:var(--font-sb);line-height:1.5}:host>article .title *{all:unset}:host>article div.subtitle{color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:1.4}:host>article div.authors{color:var(--color-default-text);font-size:var(--font-size-1);font-weight:var(--font-rg);line-height:1.33}:host>article div.isbn{overflow:hidden;color:var(--color-default-text);font-size:var(--font-size-2);line-height:1.33;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.isbn>.code{font-weight:var(--font-sb)}:host>article div.tags{display:flex;overflow:hidden;max-height:32px;flex-flow:row wrap;align-content:stretch;align-items:stretch;justify-content:flex-start;gap:calc(var(--space-unit) / 2)}:host>article ::slotted([slot="tags"]){margin-bottom:var(--space-unit)}:host>article ::slotted([slot="header-cta"]){--z-icon-width:20px;--z-icon-height:20px;padding:var(--space-unit);cursor:pointer;fill:var(--color-primary01-icon)}:host>article ::slotted([slot="header-cta"]:focus){box-shadow:var(--shadow-focus-primary);outline:none !important}:host>article.expanded{width:100%;min-width:328px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.header{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:top;justify-content:space-between;margin-bottom:var(--space-unit);white-space:nowrap}:host>article.expanded div.cover div.img-wrapper{border-radius:var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:100%}:host>article.expanded .title,:host>article.expanded .subtitle,:host>article.expanded .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}:host>article.expanded div.footer{border-top:var(--border-size-small) solid var(--color-surface03);margin-bottom:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open{padding-top:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open div.resources{display:initial}:host>article.expanded div.footer.close div.resources{display:none}:host>article.expanded button.show-resources{--z-icon-height:16px;--z-icon-width:16px;all:unset;display:flex;width:100%;flex-flow:row nowrap;align-content:center;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 1) 0;color:var(--color-text-link-blue);cursor:pointer;fill:var(--color-text-link-blue);font-size:var(--font-size-2);font-weight:var(--font-sb);gap:var(--space-unit)}:host>article.expanded button.show-resources:focus{box-shadow:var(--shadow-focus-primary)}:host>article.search{width:262px;height:616px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.search .wrapper-container{display:flex;height:100%;flex-direction:column;justify-content:space-between}:host>article.search .wrapper-container .wrapper{height:451px}:host>article.search .wrapper-container .action-container{padding-bottom:calc(var(--space-unit) * 2)}:host>article.search div.header{display:flex;height:24px;flex-flow:row nowrap;align-content:stretch;align-items:center;justify-content:space-between;margin-bottom:calc(var(--space-unit) * 1.5);white-space:nowrap}:host>article.search div.cover div.img-wrapper{height:314px;border-radius:var(--border-radius)}:host>article.search .title{display:block;height:initial;align-self:unset;font-size:var(--font-size-3)}:host>article.search .title,:host>article.search .subtitle,:host>article.search .authors{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>article.compact{width:var(--z-book-card-compact-width);height:var(--z-book-card-compact-height)}:host>article.compact.borderless{border:none}:host>article.compact div.cover div.img-wrapper{width:100%;height:calc(var(--z-book-card-compact-width) * 1.36);box-sizing:border-box;border:none;background:var(--color-white);border-radius:var(--border-radius) var(--border-radius) 0 0;box-shadow:var(--shadow-2)}:host>article.compact div.wrapper{display:flex;height:100%;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:flex-start}:host>article.compact div.content{display:flex;box-sizing:border-box;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;padding:calc(var(--space-unit) * 2);padding-top:var(--space-unit);margin:0}:host>article.compact div.action-container{padding:calc(var(--space-unit) * 2);padding-top:0;margin-top:auto}:host>article.compact.borderless div.cover div.img-wrapper{width:var(--z-book-card-compact-width)}:host>article.compact.borderless div.content{padding:0;padding-top:var(--space-unit)}:host>article.compact.borderless div.action-container{padding:0;padding-bottom:calc(var(--space-unit) * 2)}:host>article.compact .title{display:block;height:initial;align-self:unset}:host>article.compact .title,:host>article.compact .subtitle,:host>article.compact .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}@media (min-width: 768px){:host>article{width:100%;max-width:initial}:host>article .title{display:block;height:initial;align-self:unset}:host>article.expanded{width:100%;min-width:initial;max-width:initial;height:360px;padding:0;border:0}:host>article.expanded div.wrapper{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:stretch;justify-content:flex-start}:host>article.expanded div.cover div.img-wrapper{width:262px;height:356px;border:0;border:var(--border-size-medium) solid var(--color-surface03);border-right:none;background:var(--color-surface01);border-radius:var(--border-radius) 0 0 var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:auto;border-radius:0}:host>article.expanded div.content{display:flex;overflow:hidden;width:100%;height:356px;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;border:var(--border-size-medium) solid var(--color-surface03);border-left:none;margin:0;background:var(--color-surface01);border-radius:0 var(--border-radius) var(--border-radius) 0}:host>article.expanded div.content div.top{padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.content div.top div.info{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;margin-bottom:calc(var(--space-unit) / 2)}:host>article.expanded div.content div.top div.info>div.left{width:100%}:host>article.expanded div.content div.bottom{padding:calc(var(--space-unit) * 2);padding-bottom:0}}@media (min-width: 1152px){:host>article{width:fit-content;max-width:initial}}@media (min-width: 1366px){:host>article.expanded{width:635px}:host>article.expanded div.content{width:369px}}';const d=n;const c=class{constructor(i){t(this,i);this.ribbonClick=e(this,"ribbonClick",7);this.variant=undefined;this.cover=undefined;this.operaTitle=undefined;this.volumeTitle=undefined;this.authors=undefined;this.isbn=undefined;this.isbnLabel="";this.ribbon=undefined;this.ribbonIcon=undefined;this.ribbonInteractive=undefined;this.borderless=undefined;this.fallbackCover=undefined;this.operaTitleTag=undefined;this.isMobile=false;this.hasResources=false;this.showResources=false}emitRibbonClick(){this.ribbonClick.emit()}componentWillLoad(){this.id=`id-${s()}`;const t=window.matchMedia(`(max-width: ${o.MOBILE}px)`);this.isMobile=t.matches;t.onchange=t=>this.isMobile=t.matches}componentDidLoad(){this.handleResources()}handleResources(){var t;if(this.variant!==a.EXPANDED||!this.isMobile){return}this.hasResources=((t=this.hostElement.querySelectorAll("[slot=resources]"))===null||t===void 0?void 0:t.length)>0}toggleResources(){this.showResources=!this.showResources}renderCard(){switch(this.variant){case a.EXPANDED:return this.isMobile?this.renderMobileExpandedCard():this.renderExpandedCard();case a.COMPACT:return this.renderCompactCard();case a.SEARCH:return this.renderSearchCard()}}renderExpandedCard(){return i("div",{class:"wrapper"},this.renderCover(),i("div",{class:"content"},i("div",{class:"top"},i("div",{class:"info"},i("div",{class:"left"},this.renderAuthors(),this.renderOperaTitle(),this.renderVolumeTitle(),this.renderIsbn()),i("div",{class:"right"},this.renderHeaderCtaSlot())),this.renderTagsSlot()),i("div",{class:"bottom"},this.renderResourcesSlot())))}renderMobileExpandedCard(){return i("div",{class:"wrapper"},i("div",{class:"header"},this.renderOperaTitle(),this.renderHeaderCtaSlot()),this.renderCover(),i("div",{class:"content"},this.renderTagsSlot(),this.renderAuthors(),this.renderVolumeTitle(),this.renderIsbn()),this.hasResources&&i("div",{class:{footer:true,open:this.showResources,close:!this.showResources}},!this.showResources&&this.renderShowResources(),this.renderResourcesSlot(),this.showResources&&this.renderShowResources()))}renderSearchCard(){return i("div",{class:"wrapper-container"},i("div",{class:"wrapper"},i("div",{class:"header"},this.renderOperaTitle(),this.renderHeaderCtaSlot()),this.renderCover(),i("div",{class:"content"},this.renderTagsSlot(),this.renderAuthors(),this.renderVolumeTitle(),this.renderIsbn())),this.renderFooterCtaSlot())}renderCompactCard(){return i("div",{class:"wrapper"},this.renderCover(),i("div",{class:"content"},this.renderAuthors(),this.renderOperaTitle(),this.renderVolumeTitle(),this.renderIsbn()),this.renderFooterCtaSlot())}renderCover(){return i("div",{class:"cover"},this.ribbon&&this.variant!==a.COMPACT&&this.renderRibbon(),i("div",{class:"img-wrapper"},i("img",{src:this.cover,onError:()=>{if(this.fallbackCover){this.cover=this.fallbackCover}},"aria-hidden":"true"})))}renderRibbon(){const t=[this.ribbonIcon&&i("z-icon",{name:this.ribbonIcon,width:16,height:16,fill:"color-inverse-icon"}),i("span",null,this.ribbon)];return this.ribbonInteractive?i("button",{class:"ribbon interactive",onClick:()=>this.emitRibbonClick()},t):i("div",{class:"ribbon"},t)}renderOperaTitle(){const t=this.operaTitleTag?`<${this.operaTitleTag}>${this.operaTitle}</${this.operaTitleTag}>`:this.operaTitle;return i("div",{class:"title",innerHTML:t})}renderVolumeTitle(){return this.volumeTitle?i("div",{class:"subtitle"},this.volumeTitle):null}renderAuthors(){return this.authors?i("div",{class:"authors","aria-description":"Autori"},this.authors):null}renderIsbn(){return this.isbn?i("div",{class:"isbn"},i("span",{class:"code","aria-description":`ISBN ${this.isbnLabel}`},this.isbn),this.isbnLabel?i("span",{class:"label"}," ",this.isbnLabel):null):null}renderShowResources(){return i("button",{class:"show-resources","aria-label":`Risorse del libro ${this.operaTitle}`,"aria-expanded":this.showResources.toString(),"aria-controls":`resources-${this.id}`,onClick:()=>this.toggleResources()},this.showResources?"Chiudi":"Vedi tutto",i("z-icon",{name:this.showResources?"chevron-up":"chevron-down"}))}renderTagsSlot(){return i("div",{class:"tags"},i("slot",{name:"tags"}))}renderHeaderCtaSlot(){return i("slot",{name:"header-cta"})}renderResourcesSlot(){return i("div",{id:`resources-${this.id}`,class:"resources"},i("slot",{name:"resources",onSlotchange:()=>this.handleResources()}))}renderFooterCtaSlot(){return i("div",{class:"action-container"},i("slot",{name:"footer-cta"}))}render(){return i("article",{key:"237f8f14bccc2e44371b1a9f4cb08904802f1d2d",class:{[this.variant]:true,borderless:!!this.borderless}},this.renderCard())}get hostElement(){return r(this)}};c.style=d;export{c as z_book_card_deprecated};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as e,h as i,g as r}from"./p-75c4a726.js";import{Y as o}from"./p-17af7fb2.js";import{B as a}from"./p-5145a606.js";import{r as s}from"./p-625e2cee.js";const n=':host{--z-book-card-ribbon-background-color:var(--avatar-C08);--z-book-card-ribbon-shadow-color:var(--green950);--z-book-card-compact-width:262px;--z-book-card-compact-height:568px}:host>article{display:block;width:100%;max-width:360px;box-sizing:border-box;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>article div.cover{position:relative}:host>article div.cover div.img-wrapper{display:flex;overflow:hidden;border:var(--border-size-small) solid var(--color-surface03);line-height:0}:host>article div.cover div.img-wrapper img{width:auto;max-width:100%;height:auto;max-height:100%;align-self:flex-end}:host>article div.cover .ribbon{position:absolute;z-index:10;top:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * -2);display:flex;max-width:100%;height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;padding:0 calc(var(--space-unit) * 2);border:var(--border-size-medium) solid var(--color-surface01);background:var(--z-book-card-ribbon-background-color);border-radius:0 var(--border-radius) var(--border-radius) 0;box-shadow:var(--shadow-2);color:var(--color-text-inverse);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-weight:var(--font-sb);line-height:initial}:host>article div.cover .ribbon.interactive:hover{cursor:pointer}:host>article div.cover .ribbon.interactive:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}:host>article div.cover .ribbon span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.cover .ribbon::before{position:absolute;bottom:-12px;left:-2px;width:0;height:0;border-top:10px solid var(--z-book-card-ribbon-shadow-color);border-left:16px solid transparent;content:""}:host>article div.cover .ribbon z-icon{margin-right:var(--space-unit)}:host>article div.content{margin:var(--space-unit) 0;border-radius:var(--border-radius)}:host>article .title{display:flex;height:100%;align-self:center;color:var(--color-default-text);font-size:var(--font-size-4);font-weight:var(--font-sb);line-height:1.5}:host>article .title *{all:unset}:host>article div.subtitle{color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:1.4}:host>article div.authors{color:var(--color-default-text);font-size:var(--font-size-1);font-weight:var(--font-rg);line-height:1.33}:host>article div.isbn{overflow:hidden;color:var(--color-default-text);font-size:var(--font-size-2);line-height:1.33;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.isbn>.code{font-weight:var(--font-sb)}:host>article div.tags{display:flex;overflow:hidden;max-height:32px;flex-flow:row wrap;align-content:stretch;align-items:stretch;justify-content:flex-start;gap:calc(var(--space-unit) / 2)}:host>article ::slotted([slot="tags"]){margin-bottom:var(--space-unit)}:host>article ::slotted([slot="header-cta"]){--z-icon-width:20px;--z-icon-height:20px;padding:var(--space-unit);cursor:pointer;fill:var(--color-primary01-icon)}:host>article ::slotted([slot="header-cta"]:focus){box-shadow:var(--shadow-focus-primary);outline:none !important}:host>article.expanded{width:100%;min-width:328px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.header{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:top;justify-content:space-between;margin-bottom:var(--space-unit);white-space:nowrap}:host>article.expanded div.cover div.img-wrapper{border-radius:var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:100%}:host>article.expanded .title,:host>article.expanded .subtitle,:host>article.expanded .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}:host>article.expanded div.footer{border-top:var(--border-size-small) solid var(--color-surface03);margin-bottom:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open{padding-top:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open div.resources{display:initial}:host>article.expanded div.footer.close div.resources{display:none}:host>article.expanded button.show-resources{--z-icon-height:16px;--z-icon-width:16px;all:unset;display:flex;width:100%;flex-flow:row nowrap;align-content:center;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 1) 0;color:var(--color-text-link-blue);cursor:pointer;fill:var(--color-text-link-blue);font-size:var(--font-size-2);font-weight:var(--font-sb);gap:var(--space-unit)}:host>article.expanded button.show-resources:focus{box-shadow:var(--shadow-focus-primary)}:host>article.search{width:262px;height:616px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.search .wrapper-container{display:flex;height:100%;flex-direction:column;justify-content:space-between}:host>article.search .wrapper-container .wrapper{height:451px}:host>article.search .wrapper-container .action-container{padding-bottom:calc(var(--space-unit) * 2)}:host>article.search div.header{display:flex;height:24px;flex-flow:row nowrap;align-content:stretch;align-items:center;justify-content:space-between;margin-bottom:calc(var(--space-unit) * 1.5);white-space:nowrap}:host>article.search div.cover div.img-wrapper{height:314px;border-radius:var(--border-radius)}:host>article.search .title{display:block;height:initial;align-self:unset;font-size:var(--font-size-3)}:host>article.search .title,:host>article.search .subtitle,:host>article.search .authors{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>article.compact{width:var(--z-book-card-compact-width);height:var(--z-book-card-compact-height)}:host>article.compact.borderless{border:none}:host>article.compact div.cover div.img-wrapper{width:100%;height:calc(var(--z-book-card-compact-width) * 1.36);box-sizing:border-box;border:none;background:var(--color-white);border-radius:var(--border-radius) var(--border-radius) 0 0;box-shadow:var(--shadow-2)}:host>article.compact div.wrapper{display:flex;height:100%;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:flex-start}:host>article.compact div.content{display:flex;box-sizing:border-box;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;padding:calc(var(--space-unit) * 2);padding-top:var(--space-unit);margin:0}:host>article.compact div.action-container{padding:calc(var(--space-unit) * 2);padding-top:0;margin-top:auto}:host>article.compact.borderless div.cover div.img-wrapper{width:var(--z-book-card-compact-width)}:host>article.compact.borderless div.content{padding:0;padding-top:var(--space-unit)}:host>article.compact.borderless div.action-container{padding:0;padding-bottom:calc(var(--space-unit) * 2)}:host>article.compact .title{display:block;height:initial;align-self:unset}:host>article.compact .title,:host>article.compact .subtitle,:host>article.compact .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}@media (min-width: 768px){:host>article{width:100%;max-width:initial}:host>article .title{display:block;height:initial;align-self:unset}:host>article.expanded{width:100%;min-width:initial;max-width:initial;height:360px;padding:0;border:0}:host>article.expanded div.wrapper{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:stretch;justify-content:flex-start}:host>article.expanded div.cover div.img-wrapper{width:262px;height:356px;border:0;border:var(--border-size-medium) solid var(--color-surface03);border-right:none;background:var(--color-surface01);border-radius:var(--border-radius) 0 0 var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:auto;border-radius:0}:host>article.expanded div.content{display:flex;overflow:hidden;width:100%;height:356px;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;border:var(--border-size-medium) solid var(--color-surface03);border-left:none;margin:0;background:var(--color-surface01);border-radius:0 var(--border-radius) var(--border-radius) 0}:host>article.expanded div.content div.top{padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.content div.top div.info{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;margin-bottom:calc(var(--space-unit) / 2)}:host>article.expanded div.content div.top div.info>div.left{width:100%}:host>article.expanded div.content div.bottom{padding:calc(var(--space-unit) * 2);padding-bottom:0}}@media (min-width: 1152px){:host>article{width:fit-content;max-width:initial}}@media (min-width: 1366px){:host>article.expanded{width:635px}:host>article.expanded div.content{width:369px}}';const d=n;const c=class{constructor(i){t(this,i);this.ribbonClick=e(this,"ribbonClick",7);this.variant=undefined;this.cover=undefined;this.operaTitle=undefined;this.volumeTitle=undefined;this.authors=undefined;this.isbn=undefined;this.isbnLabel="";this.ribbon=undefined;this.ribbonIcon=undefined;this.ribbonInteractive=undefined;this.borderless=undefined;this.fallbackCover=undefined;this.operaTitleTag=undefined;this.isMobile=false;this.hasResources=false;this.showResources=false}emitRibbonClick(){this.ribbonClick.emit()}componentWillLoad(){this.id=`id-${s()}`;const t=window.matchMedia(`(max-width: ${a.MOBILE}px)`);this.isMobile=t.matches;t.onchange=t=>this.isMobile=t.matches}componentDidLoad(){this.handleResources()}handleResources(){var t;if(this.variant!==o.EXPANDED||!this.isMobile){return}this.hasResources=((t=this.hostElement.querySelectorAll("[slot=resources]"))===null||t===void 0?void 0:t.length)>0}toggleResources(){this.showResources=!this.showResources}renderCard(){switch(this.variant){case o.EXPANDED:return this.isMobile?this.renderMobileExpandedCard():this.renderExpandedCard();case o.COMPACT:return this.renderCompactCard();case o.SEARCH:return this.renderSearchCard()}}renderExpandedCard(){return i("div",{class:"wrapper"},this.renderCover(),i("div",{class:"content"},i("div",{class:"top"},i("div",{class:"info"},i("div",{class:"left"},this.renderAuthors(),this.renderOperaTitle(),this.renderVolumeTitle(),this.renderIsbn()),i("div",{class:"right"},this.renderHeaderCtaSlot())),this.renderTagsSlot()),i("div",{class:"bottom"},this.renderResourcesSlot())))}renderMobileExpandedCard(){return i("div",{class:"wrapper"},i("div",{class:"header"},this.renderOperaTitle(),this.renderHeaderCtaSlot()),this.renderCover(),i("div",{class:"content"},this.renderTagsSlot(),this.renderAuthors(),this.renderVolumeTitle(),this.renderIsbn()),this.hasResources&&i("div",{class:{footer:true,open:this.showResources,close:!this.showResources}},!this.showResources&&this.renderShowResources(),this.renderResourcesSlot(),this.showResources&&this.renderShowResources()))}renderSearchCard(){return i("div",{class:"wrapper-container"},i("div",{class:"wrapper"},i("div",{class:"header"},this.renderOperaTitle(),this.renderHeaderCtaSlot()),this.renderCover(),i("div",{class:"content"},this.renderTagsSlot(),this.renderAuthors(),this.renderVolumeTitle(),this.renderIsbn())),this.renderFooterCtaSlot())}renderCompactCard(){return i("div",{class:"wrapper"},this.renderCover(),i("div",{class:"content"},this.renderAuthors(),this.renderOperaTitle(),this.renderVolumeTitle(),this.renderIsbn()),this.renderFooterCtaSlot())}renderCover(){return i("div",{class:"cover"},this.ribbon&&this.variant!==o.COMPACT&&this.renderRibbon(),i("div",{class:"img-wrapper"},i("img",{src:this.cover,onError:()=>{if(this.fallbackCover){this.cover=this.fallbackCover}},"aria-hidden":"true"})))}renderRibbon(){const t=[this.ribbonIcon&&i("z-icon",{name:this.ribbonIcon,width:16,height:16,fill:"color-inverse-icon"}),i("span",null,this.ribbon)];return this.ribbonInteractive?i("button",{class:"ribbon interactive",onClick:()=>this.emitRibbonClick()},t):i("div",{class:"ribbon"},t)}renderOperaTitle(){const t=this.operaTitleTag?`<${this.operaTitleTag}>${this.operaTitle}</${this.operaTitleTag}>`:this.operaTitle;return i("div",{class:"title",innerHTML:t})}renderVolumeTitle(){return this.volumeTitle?i("div",{class:"subtitle"},this.volumeTitle):null}renderAuthors(){return this.authors?i("div",{class:"authors","aria-description":"Autori"},this.authors):null}renderIsbn(){return this.isbn?i("div",{class:"isbn"},i("span",{class:"code","aria-description":`ISBN ${this.isbnLabel}`},this.isbn),this.isbnLabel?i("span",{class:"label"}," ",this.isbnLabel):null):null}renderShowResources(){return i("button",{class:"show-resources","aria-label":`Risorse del libro ${this.operaTitle}`,"aria-expanded":this.showResources.toString(),"aria-controls":`resources-${this.id}`,onClick:()=>this.toggleResources()},this.showResources?"Chiudi":"Vedi tutto",i("z-icon",{name:this.showResources?"chevron-up":"chevron-down"}))}renderTagsSlot(){return i("div",{class:"tags"},i("slot",{name:"tags"}))}renderHeaderCtaSlot(){return i("slot",{name:"header-cta"})}renderResourcesSlot(){return i("div",{id:`resources-${this.id}`,class:"resources"},i("slot",{name:"resources",onSlotchange:()=>this.handleResources()}))}renderFooterCtaSlot(){return i("div",{class:"action-container"},i("slot",{name:"footer-cta"}))}render(){return i("article",{key:"237f8f14bccc2e44371b1a9f4cb08904802f1d2d",class:{[this.variant]:true,borderless:!!this.borderless}},this.renderCard())}get hostElement(){return r(this)}};c.style=d;export{c as z_book_card_deprecated};
|
|
2
|
+
//# sourceMappingURL=p-539f99db.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{g as n,p as t}from"./p-17af7fb2.js";import{B as e}from"./p-5145a606.js";function r(n){switch(n){case true:case"true":case 1:case"1":case"on":case"yes":return true;case false:case"false":case 0:case"0":case"off":case"no":return false;default:return n}}function s(){return Math.random().toString(36).replace("0.","")}function a(t,e,...r){if(t.code===n.ENTER||t.code===n.SPACE){t.preventDefault();e(...r)}}function o(t,e,...r){if(t.code===n.ENTER){t.preventDefault();e(...r)}}function c(n=null){if(!n){n=document.activeElement}if(n&&n.shadowRoot&&n.shadowRoot.activeElement){n=n.shadowRoot.activeElement;return c(n)}return n}function i(n,t=[]){t.push(n);if(n.parentElement){n=n.parentElement;return i(n,t)}else if(n.parentNode&&n.parentNode.host){n=n.parentNode.host;return i(n,t)}return t}function u(){switch(true){case window.innerWidth<=e.MOBILE:return t.MOBILE;case window.innerWidth<=e.TABLET:return t.TABLET;case window.innerWidth<=e.DESKTOP:return t.DESKTOP;default:return t.DESKTOP_WIDE}}function f(n){try{return JSON.parse(n)}catch(n){return false}}function l(n){const t="avatar-C";const e=19;const r=Math.ceil(2**31-1)*parseFloat(`0.${n}`);let s=Math.ceil(e*(r%1));if(s===0){s=1}return`${t}${s.toString().padStart(2,"0")}`}function d(n,t){var e;return n.contains(t)||!!((e=n.shadowRoot)===null||e===void 0?void 0:e.contains(t))}function w(n){if(n.parentNode===n.shadowRoot){return n.shadowRoot.host}return n.parentElement}function h(n){let t=w(n);while(t&&t!==n.ownerDocument.documentElement){const n=window.getComputedStyle(t);const{overflow:e,overflowX:r,overflowY:s}=n;const a=e==="hidden"||s==="hidden"||r==="hidden";const o=t.scrollHeight>t.clientHeight&&e!=="visible"&&s!=="visible"||t.scrollWidth>t.clientWidth&&e!=="visible"&&r!=="visible";if(!a&&o){return t}t=w(t)}return n.ownerDocument.documentElement}function v(n,t){const e=n.getBoundingClientRect();const r=n.ownerDocument.documentElement.clientWidth;const s=n.ownerDocument.documentElement.clientHeight;const a=e.bottom>0&&e.top<s&&e.right>0&&e.left<r;if(t===n.ownerDocument.documentElement||t===n.ownerDocument.body){return a}const o=t.getBoundingClientRect();const c=e.bottom>o.top&&e.top<o.bottom&&e.right>o.left&&e.left<o.right;return c&&a}export{d as a,r as b,l as c,a as d,i as e,c as f,u as g,o as h,f as i,h as j,v as k,s as r};
|
|
2
|
+
//# sourceMappingURL=p-625e2cee.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["boolean","value","randomId","Math","random","toString","replace","handleKeyboardSubmit","ev","callback","args","code","KeyboardCode","ENTER","SPACE","preventDefault","handleEnterKeydSubmit","getClickedElement","elem","document","activeElement","shadowRoot","getElementTree","tree","push","parentElement","parentNode","host","getDevice","window","innerWidth","Breakpoints","MOBILE","Device","TABLET","DESKTOP","DESKTOP_WIDE","convertJson","data","JSON","parse","_a","colorFromId","id","prefix","colorsCount","seed","ceil","parseFloat","color","padStart","containsElement","ancestor","descendant","contains","getParentElement","element","findScrollableParent","parent","ownerDocument","documentElement","style","getComputedStyle","overflow","overflowX","overflowY","hasHiddenOverflow","isScrollable","scrollHeight","clientHeight","scrollWidth","clientWidth","isElementVisibleInContainer","container","elemRect","getBoundingClientRect","documentWidth","documentHeight","isVisibleInViewport","bottom","top","right","left","body","containerRect","isVisibleInContainer"],"sources":["src/utils/utils.ts"],"sourcesContent":["import {ChildNode} from \"@stencil/core\";\nimport {Device, KeyboardCode} from \"../beans/index\";\nimport {Breakpoints} from \"../constants/breakpoints\";\n\n/**\n * Return boolean value for passed value if a boolean corresponding value is found\n * Return passed value otherwise\n */\nexport function boolean(value: string | number | boolean): boolean | string | number {\n switch (value) {\n case true:\n case \"true\":\n case 1:\n case \"1\":\n case \"on\":\n case \"yes\":\n return true;\n case false:\n case \"false\":\n case 0:\n case \"0\":\n case \"off\":\n case \"no\":\n return false;\n default:\n return value;\n }\n}\n\nexport function retrieveAsset(assetName: string): string {\n return assetName && \"assets/images/png/\" + assetName;\n}\n\nexport function randomId(): string {\n return Math.random().toString(36).replace(\"0.\", \"\");\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function handleKeyboardSubmit(ev: KeyboardEvent, callback: (...args) => void, ...args: any[]): void {\n if (ev.code === KeyboardCode.ENTER || ev.code === KeyboardCode.SPACE) {\n ev.preventDefault();\n callback(...args);\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function handleEnterKeydSubmit(ev: KeyboardEvent, callback: (...args) => void, ...args: any[]): void {\n if (ev.code === KeyboardCode.ENTER) {\n ev.preventDefault();\n callback(...args);\n }\n}\n\nexport function getClickedElement(elem: null | Element = null): null | Element {\n if (!elem) {\n elem = document.activeElement;\n }\n\n if (elem && elem.shadowRoot && elem.shadowRoot.activeElement) {\n elem = elem.shadowRoot.activeElement;\n\n return getClickedElement(elem);\n }\n\n return elem;\n}\n\nexport function getElementTree(elem: Element, tree: Element[] = []): null | Element[] {\n tree.push(elem);\n\n if (elem.parentElement) {\n elem = elem.parentElement;\n\n return getElementTree(elem, tree);\n } else if (elem.parentNode && (elem.parentNode as ShadowRoot).host) {\n elem = (elem.parentNode as ShadowRoot).host;\n\n return getElementTree(elem, tree);\n }\n\n return tree;\n}\n\nexport function getSiblings(elem: HTMLElement): ChildNode[] {\n const siblings = [];\n if (!elem || !elem.parentNode || !elem.parentNode.childNodes) {\n return siblings;\n }\n\n elem.parentNode.childNodes.forEach((child) => {\n if (child.nodeType === 1 && child !== elem) {\n siblings.push(child);\n }\n });\n\n return siblings;\n}\n\n/**\n * Get the current device type based on the window width.\n * @returns {Device} - The current device type\n */\nexport function getDevice(): Device {\n switch (true) {\n case window.innerWidth <= Breakpoints.MOBILE:\n return Device.MOBILE;\n case window.innerWidth <= Breakpoints.TABLET:\n return Device.TABLET;\n case window.innerWidth <= Breakpoints.DESKTOP:\n return Device.DESKTOP;\n default:\n return Device.DESKTOP_WIDE;\n }\n}\n\ntype JSONValue = string | number | boolean | JSONObject | JSONArray;\ninterface JSONObject {\n [x: string]: JSONValue;\n}\ntype JSONArray = JSONValue[];\n\nexport function convertJson(data: string): JSONValue {\n try {\n return JSON.parse(data);\n } catch {\n return false;\n }\n}\n\nexport function colorFromId(id: number): string {\n const prefix = \"avatar-C\"; // prefix for color vars name\n const colorsCount = 19; // available colors\n const seed = Math.ceil(2 ** 31 - 1) * parseFloat(`0.${id}`);\n let color = Math.ceil(colorsCount * (seed % 1));\n\n // if result of mc is 0\n // es.: 3895229\n if (color === 0) {\n color = 1;\n }\n\n return `${prefix}${color.toString().padStart(2, \"0\")}`;\n}\n\n/**\n * Check if the passed CSS selector is valid.\n * @param selector CSS selector to validate\n */\nexport function isSelectorValid(selector: string): boolean {\n try {\n document.createDocumentFragment().querySelector(selector);\n\n return true;\n } catch {\n return false;\n }\n}\n\n/**\n * Check if an element contains another element, checking both light and shadow DOM.\n * @param ancestor Ancestor element\n * @param descendant Descendant element\n */\nexport function containsElement(ancestor: HTMLElement, descendant: Node): boolean {\n return ancestor.contains(descendant) || !!ancestor.shadowRoot?.contains(descendant);\n}\n\n/** Get the parent of passed element, accounting for shadow DOM.\n * @param element The element whose parent is to be found.\n */\nexport function getParentElement(element: Element): Element {\n if (element.parentNode === element.shadowRoot) {\n return element.shadowRoot.host;\n }\n\n return element.parentElement;\n}\n\n/**\n * Find the nearest ancestor of an element to take as a reference for positioning.\n * The chosen ancestor is the first to have an overflow set to hidden or is scrollable.\n * Falls back to the `offsetParent` of the element (the closest positioned ancestor, for example the one with `position: relative`).\n * @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent\n */\nexport function findScrollableParent(element: HTMLElement): HTMLElement {\n let parent = getParentElement(element);\n\n while (parent && parent !== element.ownerDocument.documentElement) {\n const style = window.getComputedStyle(parent);\n const {overflow, overflowX, overflowY} = style;\n const hasHiddenOverflow = overflow === \"hidden\" || overflowY === \"hidden\" || overflowX === \"hidden\";\n const isScrollable =\n (parent.scrollHeight > parent.clientHeight && overflow !== \"visible\" && overflowY !== \"visible\") ||\n (parent.scrollWidth > parent.clientWidth && overflow !== \"visible\" && overflowX !== \"visible\");\n\n if (!hasHiddenOverflow && isScrollable) {\n return parent as HTMLElement;\n }\n\n parent = getParentElement(parent);\n }\n\n return element.ownerDocument.documentElement;\n}\n\n/**\n * Check if the element is visible within the container or in the viewport.\n * @param element The element to check.\n * @param container The container to check against, which must be the nearest scrollable ancestor.\n */\nexport function isElementVisibleInContainer(element: HTMLElement, container: HTMLElement): boolean {\n const elemRect = element.getBoundingClientRect();\n const documentWidth = element.ownerDocument.documentElement.clientWidth;\n const documentHeight = element.ownerDocument.documentElement.clientHeight;\n\n // Check if element is visible in viewport\n const isVisibleInViewport =\n elemRect.bottom > 0 && elemRect.top < documentHeight && elemRect.right > 0 && elemRect.left < documentWidth;\n\n // If container is the document element, only check viewport visibility\n if (container === element.ownerDocument.documentElement || container === element.ownerDocument.body) {\n return isVisibleInViewport;\n }\n\n // For other containers, check both container and viewport visibility\n const containerRect = container.getBoundingClientRect();\n const isVisibleInContainer =\n elemRect.bottom > containerRect.top &&\n elemRect.top < containerRect.bottom &&\n elemRect.right > containerRect.left &&\n elemRect.left < containerRect.right;\n\n return isVisibleInContainer && isVisibleInViewport;\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as e,h as o,a as s,g as r}from"./p-75c4a726.js";import{P as i,g as n,p as a}from"./p-17af7fb2.js";import{a as h,j as c,g as f,k as p}from"./p-625e2cee.js";import"./p-5145a606.js";const u=':host{position:fixed;display:none;max-width:calc(100% - var(--grid-margin) * 2);max-height:calc(100% - var(--grid-margin) * 2);padding:var(--z-popover-padding, 0);background:var(--z-popover-theme--surface, var(--color-surface01));border-radius:var(--border-radius-small);color:var(--z-popover-theme--text, var(--color-default-text));fill:currentcolor;filter:var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));text-align:center}:host([open]:not([current-position])){visibility:hidden}:host([open][current-position]),:host([open="true"][current-position]){display:block}:host([center][current-position="top"]),:host([center][current-position="bottom"]){transform:translateX(-50%)}:host([center][current-position="right"]),:host([center][current-position="left"]){transform:translateY(-50%)}:host([current-position^="top"]){margin:0 0 var(--space-unit)}:host([current-position^="bottom"]){margin:var(--space-unit) 0 0}:host([current-position^="left"]){margin:0 var(--space-unit) 0 0}:host([current-position^="right"]){margin:0 0 0 var(--space-unit)}:host([current-position])::before{--arrow-size:6px;--arrow-edge-offset:calc(100% - var(--space-unit) - (var(--arrow-size) / 2));--arrow-center-x-offset:calc(50% - (var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - (var(--arrow-size) / 2));position:absolute;display:block;width:var(--arrow-size);height:var(--arrow-size);background:var(--z-popover-theme--surface, var(--color-surface01));content:"";transform:rotate(45deg)}:host([show-arrow="false"])::before,:host(:not([show-arrow]))::before{display:none}:host([current-position^="top"])::before{top:var(--arrow-center-y-offset)}:host([current-position^="bottom"])::before{bottom:var(--arrow-center-y-offset)}:host([current-position="top"])::before,:host([current-position="bottom"])::before{right:var(--arrow-edge-offset)}:host([current-position="right"])::before,:host([current-position="left"])::before{bottom:var(--arrow-edge-offset)}:host([current-position="right"])::before{right:var(--arrow-center-y-offset)}:host([current-position="left"])::before{left:var(--arrow-center-y-offset)}:host([current-position="top_right"])::before,:host([current-position="bottom_right"])::before{right:var(--arrow-edge-offset)}:host([current-position="top_left"])::before,:host([current-position="bottom_left"])::before{left:var(--arrow-edge-offset)}:host([current-position="right_top"])::before,:host([current-position="left_top"])::before{top:var(--arrow-edge-offset)}:host([current-position="right_top"])::before,:host([current-position="right_bottom"])::before{right:var(--arrow-center-y-offset)}:host([current-position="left_top"])::before,:host([current-position="left_bottom"])::before{left:var(--arrow-center-y-offset)}:host([current-position="right_bottom"])::before,:host([current-position="left_bottom"])::before{bottom:var(--arrow-edge-offset)}:host([center][current-position="top"])::before,:host([center][current-position="bottom"])::before{right:auto;left:var(--arrow-center-x-offset)}:host([center][current-position="right"])::before,:host([center][current-position="left"])::before{top:var(--arrow-center-x-offset);bottom:auto}';const l=u;const b=class{constructor(o){t(this,o);this.positionChange=e(this,"positionChange",7);this.openChange=e(this,"openChange",7);this.spaceTolerance=3;this.position=i.TOP;this.open=false;this.bindTo=undefined;this.showArrow=false;this.center=false;this.closable=true;this.currentPosition=undefined}closePopoverWithKeyboard(t){if(this.closable&&t.key===n.ESC){this.open=false}}handleOutsideClick(t){const e=t.target;if(!this.closable||!this.open||h(this.host,e)){return}if(h(this.boundElement,e)){t.stopPropagation()}this.open=false}validatePosition(t){if(!Object.values(i).includes(t)||t===i.AUTO){t=i.TOP;this.position=t}this.currentPosition=t;if(this.open){this.setPosition()}}onOpen(){cancelAnimationFrame(this.animationFrameRequestId);this.openChange.emit({open:this.open});if(!this.open){return}const t=()=>{if(!this.open){return}this.setPosition();this.animationFrameRequestId=requestAnimationFrame(t)};setTimeout((()=>{t()}),0)}onBindingChange(){this.findBoundElement()}get offsetModifier(){return this.center?.5:0}findBoundElement(){if(typeof this.bindTo==="string"){this.boundElement=this.host.ownerDocument.querySelector(this.bindTo)}else if(this.bindTo){this.boundElement=this.bindTo}else{this.boundElement=this.host.parentElement}}hasCenteredHorizontalSpace(t,e,o,s){const r=(o-s)*(1-this.offsetModifier);if(!this.center){return e>=r-this.spaceTolerance}return e>=r-this.spaceTolerance&&t>=r-this.spaceTolerance}hasCenteredVerticalSpace(t,e,o,s){const r=(o-s)*(1-this.offsetModifier);if(!this.center){return e>=r-this.spaceTolerance}return t>=r-this.spaceTolerance&&e>=r-this.spaceTolerance}hasEnoughSideSpace(t,e,o,s){return t>=e-o*(1-s)-this.spaceTolerance}getOptimalPopoverPosition(t,e){const o=this.host.offsetWidth;const s=this.host.offsetHeight;const r=this.boundElement.getBoundingClientRect().width;const n=this.boundElement.getBoundingClientRect().height;const a=this.offsetModifier;const h=t=>{switch(t){case i.TOP:return e.top>=s-this.spaceTolerance&&this.hasCenteredHorizontalSpace(e.left,e.right,o,r);case i.TOP_RIGHT:return e.top>=s&&this.hasEnoughSideSpace(e.right,o,r,a);case i.TOP_LEFT:return e.top>=s&&this.hasEnoughSideSpace(e.left,o,r,a);case i.RIGHT:return e.right>=o&&this.hasCenteredVerticalSpace(e.top,e.bottom,s,n);case i.RIGHT_BOTTOM:return e.right>=o&&this.hasEnoughSideSpace(e.bottom,s,n,a);case i.RIGHT_TOP:return e.right>=o&&this.hasEnoughSideSpace(e.top,s,n,a);case i.BOTTOM:return e.bottom>=s&&this.hasCenteredHorizontalSpace(e.left,e.right,o,r);case i.BOTTOM_LEFT:return e.bottom>=s&&this.hasEnoughSideSpace(e.left,o,r,a);case i.BOTTOM_RIGHT:return e.bottom>=s&&this.hasEnoughSideSpace(e.right,o,r,a);case i.LEFT:return e.left>=o&&this.hasCenteredVerticalSpace(e.top,e.bottom,s,n);case i.LEFT_TOP:return e.left>=o&&this.hasEnoughSideSpace(e.top,s,n,a);case i.LEFT_BOTTOM:return e.left>=o&&this.hasEnoughSideSpace(e.bottom,s,n,a);default:return false}};if(h(t)){return t}const c=b.positionOrder;const f=c.indexOf(t);if(f===-1){return t}for(let t=1;t<c.length;t++){const e=(f+t)%c.length;const o=c[e];if(h(o)){return o}}return this.findBestFallbackPosition(e)}findBestFallbackPosition(t){const e=t.right>=t.left?i.RIGHT:i.LEFT;const o=t.bottom>=t.top?i.BOTTOM:i.TOP;const s=Math.max(t.right,t.left);const r=Math.max(t.bottom,t.top);const n=r>=s?o:e;let a=false;if(n===o){const e=Math.min(t.right,t.left);a=s>=e*2}else{const e=Math.min(t.bottom,t.top);a=r>=e*2}if(!a){return n}const h=n===o?e:o;return`${n}_${h}`}calculateAvailableSpace(){const t=this.boundElement.getBoundingClientRect();if(this.lastBoundRect&&this.lastBoundRect.x===t.x&&this.lastBoundRect.y===t.y&&this.lastBoundRect.width===t.width&&this.lastBoundRect.height===t.height&&this.cachedAvailableSpace){return this.cachedAvailableSpace}this.lastBoundRect=t;const e=c(this.boundElement);const o=e.getBoundingClientRect();const s=e!==this.boundElement.ownerDocument.documentElement;const r=this.boundElement.ownerDocument.documentElement.clientWidth;const i=this.boundElement.ownerDocument.documentElement.clientHeight;const n=8;const a=s?o.top:0;const h=s?r-o.right:0;const f=s?i-o.bottom:0;const p=s?o.left:0;this.cachedAvailableSpace={top:t.top-a-n,right:r-t.right-h-n,bottom:i-t.bottom-f-n,left:t.left-p-n};return this.cachedAvailableSpace}calculateElementOffsets(t){const e=t.getBoundingClientRect();const o=t.ownerDocument.documentElement.clientWidth;const s=t.ownerDocument.documentElement.clientHeight;return{top:e.top,right:o-e.right,bottom:s-e.bottom,left:e.left}}applyPositionStyles(t,e){const o=this.boundElement.offsetWidth;const s=this.boundElement.offsetHeight;const r=8;const n=this.offsetModifier;const h=this.showArrow&&this.center?8:0;const c=this.host.style;const p=this.calculateElementOffsets(this.boundElement);let u;let l;switch(t){case i.TOP:case i.TOP_RIGHT:c.bottom=`${p.bottom+s}px`;c.left=`${p.left+o*n-(t===i.TOP_RIGHT?h:0)}px`;l=e.top-r;if(t===i.TOP_RIGHT){u=e.right+o*n}break;case i.TOP_LEFT:c.right=`${p.right+o*n-h}px`;c.bottom=`${p.bottom+s}px`;u=e.left+o*n;l=e.top-r;break;case i.BOTTOM:case i.BOTTOM_RIGHT:c.top=`${p.top+s}px`;c.left=`${p.left+o*n-(t===i.BOTTOM_RIGHT?h:0)}px`;l=e.bottom-r;if(t===i.BOTTOM_RIGHT){u=e.right+o*n}break;case i.BOTTOM_LEFT:c.top=`${p.top+s}px`;c.right=`${p.right+o*n-h}px`;u=e.left+o*n;l=e.bottom-r;break;case i.RIGHT:case i.RIGHT_BOTTOM:c.top=`${p.top+s*n-(t===i.RIGHT_BOTTOM?h:0)}px`;c.left=`${p.left+o}px`;u=e.right-r;if(t===i.RIGHT){l=e.top+e.bottom+s}else{l=e.bottom+s*n}break;case i.RIGHT_TOP:c.bottom=`${p.bottom+s*n-h}px`;c.left=`${p.left+o}px`;u=e.right-r;l=e.top+s*n;break;case i.LEFT:case i.LEFT_BOTTOM:c.top=`${p.top+s*n-(t===i.LEFT_BOTTOM?h:0)}px`;c.right=`${p.right+o}px`;u=e.left-r;if(t===i.LEFT_BOTTOM){l=e.bottom+s*n}break;case i.LEFT_TOP:c.right=`${p.right+o}px`;c.bottom=`${p.bottom+s*n-h}px`;u=e.left-r;l=e.top+s*n;break}if(f()!==a.MOBILE){c.maxWidth=u?`${u}px`:"";c.maxHeight=l?`${l}px`:""}}setPosition(){if(!this.boundElement){return}if(!p(this.boundElement,c(this.boundElement))){this.open=false;return}Object.assign(this.host.style,{top:"auto",right:"auto",bottom:"auto",left:"auto",maxWidth:"",maxHeight:"",visibility:"hidden"});const t=this.calculateAvailableSpace();const e=this.getOptimalPopoverPosition(this.position,t);this.applyPositionStyles(e,t);this.currentPosition=e;this.positionChange.emit({position:this.currentPosition});this.host.style.visibility="visible"}componentWillLoad(){this.validatePosition(this.position)}componentDidLoad(){this.findBoundElement();if(this.open){this.onOpen()}}disconnectedCallback(){cancelAnimationFrame(this.animationFrameRequestId)}render(){return o(s,{key:"1eafd1bd08aa31a81378354542b0e74edc4cb0ce","current-position":this.currentPosition},o("slot",{key:"2ad916cf0e13766e2e5f92f4f964a4fe909cdc7a"}))}get host(){return r(this)}static get watchers(){return{position:["validatePosition"],open:["onOpen"],bindTo:["onBindingChange"]}}};b.positionOrder=[i.TOP,i.TOP_RIGHT,i.TOP_LEFT,i.RIGHT,i.RIGHT_BOTTOM,i.RIGHT_TOP,i.BOTTOM,i.BOTTOM_LEFT,i.BOTTOM_RIGHT,i.LEFT,i.LEFT_TOP,i.LEFT_BOTTOM];b.style=l;export{b as z_popover};
|
|
2
|
+
//# sourceMappingURL=p-62e1d867.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["stylesCss","ZPopoverStyle0","ZPopover","this","spaceTolerance","PopoverPosition","TOP","closePopoverWithKeyboard","e","closable","key","KeyboardCode","ESC","open","handleOutsideClick","target","containsElement","host","boundElement","stopPropagation","validatePosition","newValue","Object","values","includes","AUTO","position","currentPosition","setPosition","onOpen","cancelAnimationFrame","animationFrameRequestId","openChange","emit","updatePositionLoop","requestAnimationFrame","setTimeout","onBindingChange","findBoundElement","offsetModifier","center","bindTo","ownerDocument","querySelector","parentElement","hasCenteredHorizontalSpace","availableLeft","availableRight","hostWidth","boundElementWidth","requiredSideSpace","hasCenteredVerticalSpace","availableTop","availableBottom","hostHeight","boundElementHeight","hasEnoughSideSpace","availableSpace","hostSize","boundElementSize","getOptimalPopoverPosition","desiredPosition","offsetWidth","offsetHeight","getBoundingClientRect","width","height","fits","pos","top","left","right","TOP_RIGHT","TOP_LEFT","RIGHT","bottom","RIGHT_BOTTOM","RIGHT_TOP","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","LEFT","LEFT_TOP","LEFT_BOTTOM","positions","positionOrder","startIndex","indexOf","i","length","posIndex","findBestFallbackPosition","bestHorizontalDirection","bestVerticalDirection","maxHorizontalSpace","Math","max","maxVerticalSpace","mainDirection","needsSecondaryDirection","minHorizontalSpace","min","minVerticalSpace","secondaryDirection","calculateAvailableSpace","boundElementRect","lastBoundRect","x","y","cachedAvailableSpace","scrollableParent","findScrollableParent","scrollableParentRect","hasNestedScrollableParent","documentElement","documentWidth","clientWidth","documentHeight","clientHeight","safeSpace","deltaTop","deltaRight","deltaBottom","deltaLeft","calculateElementOffsets","element","elementRect","viewportWidth","viewportHeight","applyPositionStyles","distanceFromBound","arrowModifier","showArrow","hostStyle","style","boundElementOffsets","maxWidth","maxHeight","getDevice","Device","MOBILE","isElementVisibleInContainer","assign","visibility","positionChange","componentWillLoad","componentDidLoad","disconnectedCallback","render","h","Host"],"sources":["src/components/z-popover/styles.css?tag=z-popover&encapsulation=shadow","src/components/z-popover/index.tsx"],"sourcesContent":[":host {\n --z-popover-theme--surface: ;\n --z-popover-theme--text: ;\n --z-popover-padding: ;\n --z-popover-shadow-filter: ;\n\n position: fixed;\n display: none;\n max-width: calc(100% - var(--grid-margin) * 2);\n max-height: calc(100% - var(--grid-margin) * 2);\n padding: var(--z-popover-padding, 0);\n background: var(--z-popover-theme--surface, var(--color-surface01));\n border-radius: var(--border-radius-small);\n color: var(--z-popover-theme--text, var(--color-default-text));\n fill: currentcolor;\n filter: var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));\n text-align: center;\n}\n\n:host([open]:not([current-position])) {\n visibility: hidden;\n}\n\n:host([open][current-position]),\n:host([open=\"true\"][current-position]) {\n display: block;\n}\n\n:host([center][current-position=\"top\"]),\n:host([center][current-position=\"bottom\"]) {\n transform: translateX(-50%);\n}\n\n:host([center][current-position=\"right\"]),\n:host([center][current-position=\"left\"]) {\n transform: translateY(-50%);\n}\n\n:host([current-position^=\"top\"]) {\n margin: 0 0 var(--space-unit);\n}\n\n:host([current-position^=\"bottom\"]) {\n margin: var(--space-unit) 0 0;\n}\n\n:host([current-position^=\"left\"]) {\n margin: 0 var(--space-unit) 0 0;\n}\n\n:host([current-position^=\"right\"]) {\n margin: 0 0 0 var(--space-unit);\n}\n\n/* Arrow style */\n\n:host([current-position])::before {\n --arrow-size: 6px;\n --arrow-edge-offset: calc(100% - var(--space-unit) - (var(--arrow-size) / 2));\n --arrow-center-x-offset: calc(50% - (var(--arrow-size) / 2));\n --arrow-center-y-offset: calc(100% - (var(--arrow-size) / 2));\n\n position: absolute;\n display: block;\n width: var(--arrow-size);\n height: var(--arrow-size);\n background: var(--z-popover-theme--surface, var(--color-surface01));\n content: \"\";\n transform: rotate(45deg);\n}\n\n:host([show-arrow=\"false\"])::before,\n:host(:not([show-arrow]))::before {\n display: none;\n}\n\n:host([current-position^=\"top\"])::before {\n top: var(--arrow-center-y-offset);\n}\n\n:host([current-position^=\"bottom\"])::before {\n bottom: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top\"])::before,\n:host([current-position=\"bottom\"])::before {\n right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before,\n:host([current-position=\"left\"])::before {\n bottom: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before {\n right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left\"])::before {\n left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top_right\"])::before,\n:host([current-position=\"bottom_right\"])::before {\n right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"top_left\"])::before,\n:host([current-position=\"bottom_left\"])::before {\n left: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"left_top\"])::before {\n top: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"right_bottom\"])::before {\n right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left_top\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"right_bottom\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n bottom: var(--arrow-edge-offset);\n}\n\n:host([center][current-position=\"top\"])::before,\n:host([center][current-position=\"bottom\"])::before {\n right: auto;\n left: var(--arrow-center-x-offset);\n}\n\n:host([center][current-position=\"right\"])::before,\n:host([center][current-position=\"left\"])::before {\n top: var(--arrow-center-x-offset);\n bottom: auto;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {Device, KeyboardCode, PopoverPosition} from \"../../beans\";\nimport {containsElement, findScrollableParent, getDevice, isElementVisibleInContainer} from \"../../utils/utils\";\n\n/** Centering offset modifier. 0 for no offset, 0.5 for centering. */\ntype OffsetModifier = 0 | 0.5;\ntype Offsets = {top: number; right: number; bottom: number; left: number};\n\n/**\n * Popover component.\n * This component displays a popover bound to an element.\n * It supports various positions and can automatically adjust it based on available space, accounting for scrollable containers.\n *\n * Notes:\n * - If positioning has an odd behavior, consider manually adjusting the size of the slotted elements (using `width`, `height`, `max-width`, `max-height`, etc...) when its content is \"fluid\" (like text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think the popover doesn't fits).\n *\n * @cssprop --z-popover-theme--surface - background color of the popover.\n * @cssprop --z-popover-theme--text - foreground color of the popover.\n * @cssprop --z-popover-padding - padding of the popover.\n * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.\n */\n@Component({\n tag: \"z-popover\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZPopover {\n /**\n * The preferred position to render the popover.\n * The popover will automatically search another position if not enough space is available for the preferred position.\n * If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.\n */\n @Prop({reflect: true, mutable: true})\n position?: PopoverPosition = PopoverPosition.TOP;\n\n /** The open state of the popover. */\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /**\n * The selector or the element bound with the popover.\n * If string css selector is provided make sure to use a valid selector.\n */\n @Prop()\n bindTo?: string | HTMLElement;\n\n /** Whether to show popover's arrow. */\n @Prop({reflect: true})\n showArrow = false;\n\n /** Whether to center the popup on the main side (according to \"position\"). */\n @Prop({reflect: true})\n center = false;\n\n /**\n * If true, the popover can be closed by clicking outside of it or pressing the escape key.\n * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\n */\n @Prop()\n closable = true;\n\n /**\n * The current position of the popover.\n * It differs from `position` only when calculated automatically for space reasons.\n */\n @State()\n currentPosition?: PopoverPosition;\n\n @Element() host: HTMLZPopoverElement;\n\n // Clockwise order of positions.\n private static readonly positionOrder: PopoverPosition[] = [\n PopoverPosition.TOP,\n PopoverPosition.TOP_RIGHT,\n PopoverPosition.TOP_LEFT,\n PopoverPosition.RIGHT,\n PopoverPosition.RIGHT_BOTTOM,\n PopoverPosition.RIGHT_TOP,\n PopoverPosition.BOTTOM,\n PopoverPosition.BOTTOM_LEFT,\n PopoverPosition.BOTTOM_RIGHT,\n PopoverPosition.LEFT,\n PopoverPosition.LEFT_TOP,\n PopoverPosition.LEFT_BOTTOM,\n ] as const;\n\n private animationFrameRequestId?: number;\n\n /** space tolerance for space calculations */\n private readonly spaceTolerance = 3;\n\n /** The element bound to the popover. */\n private boundElement?: HTMLElement;\n\n /** Cached available space around the bound element to avoid unnecessary recalculations */\n private cachedAvailableSpace?: Offsets;\n\n /** Last bounding rect of the bound element to detect changes and eventually invalidate the caches. */\n private lastBoundRect?: DOMRect;\n\n /** Fired when the position changes. */\n @Event()\n positionChange: EventEmitter;\n\n /** Open change event. */\n @Event()\n openChange: EventEmitter;\n\n @Listen(\"keyup\", {target: \"window\"})\n closePopoverWithKeyboard(e: KeyboardEvent): void {\n if (this.closable && e.key === KeyboardCode.ESC) {\n this.open = false;\n }\n }\n\n /**\n * Close the popover when clicking outside of its content.\n * Stop event propagation if the click was fired by popover's trigger element,\n * to prevent close and reopen glitches.\n */\n @Listen(\"click\", {target: \"body\", capture: true})\n handleOutsideClick(e: MouseEvent): void {\n const target = e.target as Element;\n if (!this.closable || !this.open || containsElement(this.host, target)) {\n return;\n }\n\n if (containsElement(this.boundElement, target)) {\n // stop propagation if the click was on the trigger element to prevent close and reopen glitches\n e.stopPropagation();\n }\n this.open = false;\n }\n\n @Watch(\"position\")\n validatePosition(newValue: PopoverPosition): void {\n if (!Object.values(PopoverPosition).includes(newValue as PopoverPosition) || newValue === PopoverPosition.AUTO) {\n newValue = PopoverPosition.TOP;\n this.position = newValue;\n }\n this.currentPosition = newValue;\n if (this.open) {\n this.setPosition();\n }\n }\n\n /** Setup popover behaviors when `open` changes. */\n @Watch(\"open\")\n onOpen(): void {\n cancelAnimationFrame(this.animationFrameRequestId);\n this.openChange.emit({open: this.open});\n if (!this.open) {\n return;\n }\n\n const updatePositionLoop = (): void => {\n if (!this.open) {\n return;\n }\n\n this.setPosition();\n this.animationFrameRequestId = requestAnimationFrame(updatePositionLoop);\n };\n\n // call `setPosition` after a tick to ensure the DOM is ready and sizes are available\n setTimeout(() => {\n updatePositionLoop();\n }, 0);\n }\n\n @Watch(\"bindTo\")\n onBindingChange(): void {\n this.findBoundElement();\n }\n\n /** Returns the offset modifier to use in calculations to align the popover with the bound element. */\n private get offsetModifier(): OffsetModifier {\n return this.center ? 0.5 : 0;\n }\n\n private findBoundElement(): void {\n if (typeof this.bindTo === \"string\") {\n this.boundElement = this.host.ownerDocument.querySelector(this.bindTo) as HTMLElement;\n } else if (this.bindTo) {\n this.boundElement = this.bindTo;\n } else {\n this.boundElement = this.host.parentElement as HTMLElement;\n }\n }\n\n /**\n * Check if element has enough space to the right and left to be centered.\n * Used for `TOP` and `BOTTOM` position.\n * When `center` is not enabled, only one side needs to be checked and `RIGHT` is the default.\n */\n private hasCenteredHorizontalSpace(\n availableLeft: number,\n availableRight: number,\n hostWidth: number,\n boundElementWidth: number\n ): boolean {\n const requiredSideSpace = (hostWidth - boundElementWidth) * (1 - this.offsetModifier);\n\n if (!this.center) {\n return availableRight >= requiredSideSpace - this.spaceTolerance;\n }\n\n return (\n availableRight >= requiredSideSpace - this.spaceTolerance &&\n availableLeft >= requiredSideSpace - this.spaceTolerance\n );\n }\n\n /**\n * Check if element has enough space to the top and bottom to be centered.\n * Used for `RIGHT` and `LEFT` position.\n * When `center` is not enabled, only one side needs to be checked and `BOTTOM` is the default.\n */\n private hasCenteredVerticalSpace(\n availableTop: number,\n availableBottom: number,\n hostHeight: number,\n boundElementHeight: number\n ): boolean {\n const requiredSideSpace = (hostHeight - boundElementHeight) * (1 - this.offsetModifier);\n\n if (!this.center) {\n return availableBottom >= requiredSideSpace - this.spaceTolerance;\n }\n\n return (\n availableTop >= requiredSideSpace - this.spaceTolerance &&\n availableBottom >= requiredSideSpace - this.spaceTolerance\n );\n }\n\n /**\n * Check if there is enough space in the given direction to fit the popover.\n * Used for composed positions like TOP_RIGHT, LEFT_BOTTOM, etc.\n */\n private hasEnoughSideSpace(\n availableSpace: number,\n hostSize: number,\n boundElementSize: number,\n offsetModifier: OffsetModifier\n ): boolean {\n return availableSpace >= hostSize - boundElementSize * (1 - offsetModifier) - this.spaceTolerance;\n }\n\n /**\n * Given a desired position and available space around the bound element, returns the best position\n * that fits the popover, trying all positions if needed.\n * Takes into account offsetModifier for centering.\n * @param desiredPosition The desired position of the popover.\n * @param availableSpace The available space around the bound element.\n */\n private getOptimalPopoverPosition(desiredPosition: PopoverPosition, availableSpace: Offsets): PopoverPosition {\n const hostWidth = this.host.offsetWidth;\n const hostHeight = this.host.offsetHeight;\n const boundElementWidth = this.boundElement.getBoundingClientRect().width;\n const boundElementHeight = this.boundElement.getBoundingClientRect().height;\n const offsetModifier = this.offsetModifier;\n\n /** Check if there is enough space to fit the popover in the desired position */\n const fits = (pos: PopoverPosition): boolean => {\n switch (pos) {\n case PopoverPosition.TOP:\n return (\n availableSpace.top >= hostHeight - this.spaceTolerance &&\n this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth)\n );\n case PopoverPosition.TOP_RIGHT:\n return (\n availableSpace.top >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.TOP_LEFT:\n return (\n availableSpace.top >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.RIGHT:\n return (\n availableSpace.right >= hostWidth &&\n this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight)\n );\n case PopoverPosition.RIGHT_BOTTOM:\n return (\n availableSpace.right >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier)\n );\n case PopoverPosition.RIGHT_TOP:\n return (\n availableSpace.right >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier)\n );\n case PopoverPosition.BOTTOM:\n return (\n availableSpace.bottom >= hostHeight &&\n this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth)\n );\n case PopoverPosition.BOTTOM_LEFT:\n return (\n availableSpace.bottom >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.BOTTOM_RIGHT:\n return (\n availableSpace.bottom >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.LEFT:\n return (\n availableSpace.left >= hostWidth &&\n this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight)\n );\n case PopoverPosition.LEFT_TOP:\n return (\n availableSpace.left >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier)\n );\n case PopoverPosition.LEFT_BOTTOM:\n return (\n availableSpace.left >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier)\n );\n\n default:\n return false;\n }\n };\n\n // Check desired position first\n if (fits(desiredPosition)) {\n return desiredPosition;\n }\n\n // Find position index and create rotation starting from next position\n const positions = ZPopover.positionOrder;\n const startIndex = positions.indexOf(desiredPosition);\n\n if (startIndex === -1) {\n return desiredPosition; // fallback if position not found\n }\n\n // Try all other positions starting from the next one\n for (let i = 1; i < positions.length; i++) {\n const posIndex = (startIndex + i) % positions.length;\n const pos = positions[posIndex];\n if (fits(pos)) {\n return pos;\n }\n }\n\n // If no position fits, find the best fallback based on available space\n return this.findBestFallbackPosition(availableSpace);\n }\n\n /** Find the best fallback position based on available space when no position fits perfectly. */\n private findBestFallbackPosition(availableSpace: Offsets): PopoverPosition {\n // Determine which horizontal and vertical direction has the most available space\n const bestHorizontalDirection =\n availableSpace.right >= availableSpace.left ? PopoverPosition.RIGHT : PopoverPosition.LEFT;\n\n const bestVerticalDirection =\n availableSpace.bottom >= availableSpace.top ? PopoverPosition.BOTTOM : PopoverPosition.TOP;\n\n // Choose the main direction based on which axis has more space overall\n const maxHorizontalSpace = Math.max(availableSpace.right, availableSpace.left);\n const maxVerticalSpace = Math.max(availableSpace.bottom, availableSpace.top);\n\n const mainDirection = maxVerticalSpace >= maxHorizontalSpace ? bestVerticalDirection : bestHorizontalDirection;\n\n // Decide if a secondary direction is needed\n // Only add a secondary direction if the difference between min and max in that axis is at least double\n let needsSecondaryDirection = false;\n\n if (mainDirection === bestVerticalDirection) {\n // If main direction is vertical, check horizontal space difference\n const minHorizontalSpace = Math.min(availableSpace.right, availableSpace.left);\n needsSecondaryDirection = maxHorizontalSpace >= minHorizontalSpace * 2;\n } else {\n // If main direction is horizontal, check vertical space difference\n const minVerticalSpace = Math.min(availableSpace.bottom, availableSpace.top);\n needsSecondaryDirection = maxVerticalSpace >= minVerticalSpace * 2;\n }\n\n if (!needsSecondaryDirection) {\n return mainDirection;\n }\n\n const secondaryDirection =\n mainDirection === bestVerticalDirection ? bestHorizontalDirection : bestVerticalDirection;\n\n // Return a combined position (e.g., \"bottom_right\")\n return `${mainDirection}_${secondaryDirection}` as PopoverPosition;\n }\n\n /**\n * Calculate available space around the element bound with the popover, based on its nearest scrollable ancestor.\n *\n * Calculations for `right` and `bottom` can be a little bit confusing because `boundingRect.right` and `bottom` may not be what you expect...\n * For more information see the explanation in the docs.\n * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#return_value\n */\n private calculateAvailableSpace(): Offsets {\n const boundElementRect = this.boundElement.getBoundingClientRect();\n\n if (\n this.lastBoundRect &&\n this.lastBoundRect.x === boundElementRect.x &&\n this.lastBoundRect.y === boundElementRect.y &&\n this.lastBoundRect.width === boundElementRect.width &&\n this.lastBoundRect.height === boundElementRect.height &&\n this.cachedAvailableSpace\n ) {\n // If the bound element's rect hasn't changed, return the cached rect\n return this.cachedAvailableSpace;\n }\n\n this.lastBoundRect = boundElementRect;\n const scrollableParent = findScrollableParent(this.boundElement);\n const scrollableParentRect = scrollableParent.getBoundingClientRect();\n const hasNestedScrollableParent = scrollableParent !== this.boundElement.ownerDocument.documentElement;\n const documentWidth = this.boundElement.ownerDocument.documentElement.clientWidth;\n const documentHeight = this.boundElement.ownerDocument.documentElement.clientHeight;\n const safeSpace = 8; // extra space to avoid popover being too close to the edges\n\n // These deltas represent the offset between the scrollable parent and the viewport.\n // They are used to adjust the available space calculations when the scrollable parent is not the document or body,\n // to try to fit the popover inside the scrollable parent.\n const deltaTop = hasNestedScrollableParent ? scrollableParentRect.top : 0;\n const deltaRight = hasNestedScrollableParent ? documentWidth - scrollableParentRect.right : 0;\n const deltaBottom = hasNestedScrollableParent ? documentHeight - scrollableParentRect.bottom : 0;\n const deltaLeft = hasNestedScrollableParent ? scrollableParentRect.left : 0;\n\n this.cachedAvailableSpace = {\n top: boundElementRect.top - deltaTop - safeSpace,\n right: documentWidth - boundElementRect.right - deltaRight - safeSpace,\n bottom: documentHeight - boundElementRect.bottom - deltaBottom - safeSpace,\n left: boundElementRect.left - deltaLeft - safeSpace,\n };\n\n return this.cachedAvailableSpace;\n }\n\n /** Calculate the space around an element relative to the viewport. */\n private calculateElementOffsets(element: HTMLElement): Offsets {\n const elementRect = element.getBoundingClientRect();\n const viewportWidth = element.ownerDocument.documentElement.clientWidth;\n const viewportHeight = element.ownerDocument.documentElement.clientHeight;\n\n return {\n top: elementRect.top,\n right: viewportWidth - elementRect.right,\n bottom: viewportHeight - elementRect.bottom,\n left: elementRect.left,\n };\n }\n\n /** Apply positioning styles based on passed position. */\n private applyPositionStyles(position: PopoverPosition, availableSpace: Offsets): void {\n const boundElementWidth = this.boundElement.offsetWidth;\n const boundElementHeight = this.boundElement.offsetHeight;\n /** Distance between the popover and the bound element */\n const distanceFromBound = 8;\n const offsetModifier = this.offsetModifier;\n /** Distance between the arrow center and the popover edge. Needed to align the center of the arrow with the center of the bound element when `showArrow` and `center` are enabled. */\n const arrowModifier = this.showArrow && this.center ? 8 : 0;\n const hostStyle = this.host.style;\n const boundElementOffsets = this.calculateElementOffsets(this.boundElement);\n\n let maxWidth: number;\n let maxHeight: number;\n\n switch (position) {\n case PopoverPosition.TOP:\n case PopoverPosition.TOP_RIGHT:\n hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight}px`;\n hostStyle.left = `${boundElementOffsets.left + boundElementWidth * offsetModifier - (position === PopoverPosition.TOP_RIGHT ? arrowModifier : 0)}px`;\n maxHeight = availableSpace.top - distanceFromBound;\n if (position === PopoverPosition.TOP_RIGHT) {\n maxWidth = availableSpace.right + boundElementWidth * offsetModifier;\n }\n break;\n\n case PopoverPosition.TOP_LEFT:\n hostStyle.right = `${boundElementOffsets.right + boundElementWidth * offsetModifier - arrowModifier}px`;\n hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight}px`;\n maxWidth = availableSpace.left + boundElementWidth * offsetModifier;\n maxHeight = availableSpace.top - distanceFromBound;\n break;\n\n case PopoverPosition.BOTTOM:\n case PopoverPosition.BOTTOM_RIGHT:\n hostStyle.top = `${boundElementOffsets.top + boundElementHeight}px`;\n hostStyle.left = `${boundElementOffsets.left + boundElementWidth * offsetModifier - (position === PopoverPosition.BOTTOM_RIGHT ? arrowModifier : 0)}px`;\n maxHeight = availableSpace.bottom - distanceFromBound;\n if (position === PopoverPosition.BOTTOM_RIGHT) {\n maxWidth = availableSpace.right + boundElementWidth * offsetModifier;\n }\n break;\n\n case PopoverPosition.BOTTOM_LEFT:\n hostStyle.top = `${boundElementOffsets.top + boundElementHeight}px`;\n hostStyle.right = `${boundElementOffsets.right + boundElementWidth * offsetModifier - arrowModifier}px`;\n maxWidth = availableSpace.left + boundElementWidth * offsetModifier;\n maxHeight = availableSpace.bottom - distanceFromBound;\n break;\n\n case PopoverPosition.RIGHT:\n case PopoverPosition.RIGHT_BOTTOM:\n hostStyle.top = `${boundElementOffsets.top + boundElementHeight * offsetModifier - (position === PopoverPosition.RIGHT_BOTTOM ? arrowModifier : 0)}px`;\n hostStyle.left = `${boundElementOffsets.left + boundElementWidth}px`;\n maxWidth = availableSpace.right - distanceFromBound;\n if (position === PopoverPosition.RIGHT) {\n maxHeight = availableSpace.top + availableSpace.bottom + boundElementHeight;\n } else {\n maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;\n }\n break;\n\n case PopoverPosition.RIGHT_TOP:\n hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight * offsetModifier - arrowModifier}px`;\n hostStyle.left = `${boundElementOffsets.left + boundElementWidth}px`;\n maxWidth = availableSpace.right - distanceFromBound;\n maxHeight = availableSpace.top + boundElementHeight * offsetModifier;\n break;\n\n case PopoverPosition.LEFT:\n case PopoverPosition.LEFT_BOTTOM:\n hostStyle.top = `${boundElementOffsets.top + boundElementHeight * offsetModifier - (position === PopoverPosition.LEFT_BOTTOM ? arrowModifier : 0)}px`;\n hostStyle.right = `${boundElementOffsets.right + boundElementWidth}px`;\n maxWidth = availableSpace.left - distanceFromBound;\n if (position === PopoverPosition.LEFT_BOTTOM) {\n maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;\n }\n break;\n\n case PopoverPosition.LEFT_TOP:\n hostStyle.right = `${boundElementOffsets.right + boundElementWidth}px`;\n hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight * offsetModifier - arrowModifier}px`;\n maxWidth = availableSpace.left - distanceFromBound;\n maxHeight = availableSpace.top + boundElementHeight * offsetModifier;\n break;\n }\n\n if (getDevice() !== Device.MOBILE) {\n // Only force max sizes on non-mobile viewports\n hostStyle.maxWidth = maxWidth ? `${maxWidth}px` : \"\";\n hostStyle.maxHeight = maxHeight ? `${maxHeight}px` : \"\";\n }\n }\n\n /** Set the position of the popover. */\n private setPosition(): void {\n if (!this.boundElement) {\n return;\n }\n\n if (!isElementVisibleInContainer(this.boundElement, findScrollableParent(this.boundElement))) {\n // If the bound element is not visible, hide the popover too\n this.open = false;\n\n return;\n }\n\n Object.assign(this.host.style, {\n // Reset all positioning properties\n top: \"auto\",\n right: \"auto\",\n bottom: \"auto\",\n left: \"auto\",\n maxWidth: \"\",\n maxHeight: \"\",\n // Set initial visibility to hidden while calculating position...\n visibility: \"hidden\",\n });\n\n const availableSpace = this.calculateAvailableSpace();\n const position = this.getOptimalPopoverPosition(this.position, availableSpace);\n\n this.applyPositionStyles(position, availableSpace);\n this.currentPosition = position;\n this.positionChange.emit({position: this.currentPosition});\n\n // ...then restore the visibility\n this.host.style.visibility = \"visible\";\n }\n\n componentWillLoad(): void {\n this.validatePosition(this.position);\n }\n\n componentDidLoad(): void {\n this.findBoundElement();\n if (this.open) {\n this.onOpen();\n }\n }\n\n disconnectedCallback(): void {\n cancelAnimationFrame(this.animationFrameRequestId);\n }\n\n render(): HTMLZPopoverElement {\n return (\n <Host current-position={this.currentPosition}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,h as e,a,g as s}from"./p-75c4a726.js";import"./p-1170826b.js";import"./p-4c9bf42d.js";import"./p-d7f12672.js";import"./p-43bc482a.js";import"./p-625e2cee.js";import"./p-17af7fb2.js";import"./p-5145a606.js";import"./p-f19f12b1.js";import"./p-748fa3ae.js";const r=":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;min-width:max-content;max-width:100%;box-sizing:border-box;padding:var(--space-unit);background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}";const o=r;const i=class{constructor(e){t(this,e);this.bordered=false;this.expandable=false}updateExpandable(){this.expandable=this.host.querySelectorAll("z-tr[expandable]").length>0}componentWillLoad(){this.expandableMutationObserver=new MutationObserver((()=>{this.updateExpandable()}));this.expandableMutationObserver.observe(this.host,{childList:true,subtree:true,attributes:true,attributeFilter:["expandable"],attributeOldValue:false})}disconnectedCallback(){var t;(t=this.expandableMutationObserver)===null||t===void 0?void 0:t.disconnect()}render(){return e(a,{key:"6749b44ab2c28b92e6b282487bf9f23c40cead58",expandable:this.expandable},e("div",{key:"633237695b09182263ac74b5118d533a8cae33b8",class:"table",role:"table"},e("slot",{key:"f46d287050238e137ababadae8b8eb1ffdb96c7b"})))}get host(){return s(this)}};i.style=o;export{i as z_table};
|
|
2
|
+
//# sourceMappingURL=p-63d220da.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["stylesCss","ZTableStyle0","ZTable","updateExpandable","this","expandable","host","querySelectorAll","length","componentWillLoad","expandableMutationObserver","MutationObserver","observe","childList","subtree","attributes","attributeFilter","attributeOldValue","disconnectedCallback","_a","disconnect","render","h","Host","key","class","role"],"sources":["src/components/table/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/table/z-table/index.tsx"],"sourcesContent":[":host {\n --z-table--cells-padding: calc(var(--space-unit) * 2);\n\n position: relative;\n display: block;\n overflow: auto;\n min-width: max-content;\n max-width: 100%;\n box-sizing: border-box;\n padding: var(--space-unit);\n background-color: var(--color-surface01);\n}\n\n:host([expandable]) {\n --z-table--expand-button-size: 40px;\n}\n\n:host([bordered]) {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n","import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/**\n * ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n * @cssprop --z-table--cells-padding - Padding of the cells.\n */\n@Component({\n tag: \"z-table\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTable {\n @Element() host: HTMLZTableElement;\n\n /**\n * Whether the table cells should show a border between them.\n */\n @Prop({reflect: true})\n bordered = false;\n\n /**\n * Whether the table contains some expandable rows.\n */\n @State()\n expandable = false;\n\n private updateExpandable(): void {\n this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n }\n\n private expandableMutationObserver: MutationObserver;\n\n /**\n * Setup the table creating a mutation observer for the expandable attribute.\n */\n componentWillLoad(): void {\n this.expandableMutationObserver = new MutationObserver(() => {\n this.updateExpandable();\n });\n this.expandableMutationObserver.observe(this.host, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"expandable\"],\n attributeOldValue: false,\n });\n }\n\n disconnectedCallback(): void {\n this.expandableMutationObserver?.disconnect();\n }\n\n render(): HTMLZTableElement {\n return (\n <Host expandable={this.expandable}>\n <div\n class=\"table\"\n role=\"table\"\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["stylesCss","ZTableStyle0","ZTable","updateExpandable","this","expandable","host","querySelectorAll","length","componentWillLoad","expandableMutationObserver","MutationObserver","observe","childList","subtree","attributes","attributeFilter","attributeOldValue","disconnectedCallback","_a","disconnect","render","h","Host","key","class","role"],"sources":["src/components/table/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/table/z-table/index.tsx"],"sourcesContent":[":host {\n --z-table--cells-padding: calc(var(--space-unit) * 2);\n\n position: relative;\n display: block;\n overflow: auto;\n min-width: max-content;\n max-width: 100%;\n box-sizing: border-box;\n padding: var(--space-unit);\n background-color: var(--color-surface01);\n}\n\n:host([expandable]) {\n --z-table--expand-button-size: 40px;\n}\n\n:host([bordered]) {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n","import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/**\n * ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n * @cssprop --z-table--cells-padding - Padding of the cells.\n */\n@Component({\n tag: \"z-table\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTable {\n @Element() host: HTMLZTableElement;\n\n /**\n * Whether the table cells should show a border between them.\n */\n @Prop({reflect: true})\n bordered = false;\n\n /**\n * Whether the table contains some expandable rows.\n */\n @State()\n expandable = false;\n\n private updateExpandable(): void {\n this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n }\n\n private expandableMutationObserver: MutationObserver;\n\n /**\n * Setup the table creating a mutation observer for the expandable attribute.\n */\n componentWillLoad(): void {\n this.expandableMutationObserver = new MutationObserver(() => {\n this.updateExpandable();\n });\n this.expandableMutationObserver.observe(this.host, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"expandable\"],\n attributeOldValue: false,\n });\n }\n\n disconnectedCallback(): void {\n this.expandableMutationObserver?.disconnect();\n }\n\n render(): HTMLZTableElement {\n return (\n <Host expandable={this.expandable}>\n <div\n class=\"table\"\n role=\"table\"\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"4QAAA,MAAMA,EAAY,+WAClB,MAAAC,EAAeD,E,MCeFE,EAAM,M,uCAON,M,gBAME,K,CAEL,gBAAAC,GACNC,KAAKC,WAAaD,KAAKE,KAAKC,iBAAiB,oBAAoBC,OAAS,C,CAQ5E,iBAAAC,GACEL,KAAKM,2BAA6B,IAAIC,kBAAiB,KACrDP,KAAKD,kBAAkB,IAEzBC,KAAKM,2BAA2BE,QAAQR,KAAKE,KAAM,CACjDO,UAAW,KACXC,QAAS,KACTC,WAAY,KACZC,gBAAiB,CAAC,cAClBC,kBAAmB,O,CAIvB,oBAAAC,G,OACEC,EAAAf,KAAKM,8BAA0B,MAAAS,SAAA,SAAAA,EAAEC,Y,CAGnC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACnB,WAAYD,KAAKC,YACrBiB,EAAA,OAAAE,IAAA,2CACEC,MAAM,QACNC,KAAK,SAELJ,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as i,a as n,g as o}from"./p-75c4a726.js";import{T as s}from"./p-17af7fb2.js";import{e,d as c}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,h as i,a as n,g as o}from"./p-75c4a726.js";import{T as s}from"./p-17af7fb2.js";import{e,d as c}from"./p-625e2cee.js";import"./p-5145a606.js";const r=".sc-z-skip-to-content-h{position:absolute;left:-100%;height:60px;box-sizing:border-box;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);background-color:#24f4ff;font-family:var(--font-family-sans);font-weight:var(--font-rg);text-align:center}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{display:inline-flex;height:100%;align-items:center}.skip-to-content-visible.sc-z-skip-to-content-h,.sc-z-skip-to-content-h:focus{position:static;display:block}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-invisible.sc-z-skip-to-content{overflow:hidden;width:0;height:0}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-visible.sc-z-skip-to-content{width:initial;height:initial}.dark.sc-z-skip-to-content-h{background-color:var(--color-surface05);color:var(--color-surface01)}.light.sc-z-skip-to-content-h{border:var(--border-size-medium) solid var(--color-surface05);background-color:var(--color-surface01);color:var(--color-default-text)}@media (min-width: 768px){.sc-z-skip-to-content-h{text-align:start}}@media (min-width: 1152px){.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{padding:0 calc(var(--space-unit) * 3);border-right:var(--border-size-small) solid var(--color-surface05)}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-invisible.sc-z-skip-to-content{overflow:initial;width:initial;height:initial}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:first-child{padding-left:0}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child,.dark.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child,.light.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child{padding-right:0;border-right:none}.dark.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{border-right:var(--border-size-small) solid var(--color-surface01)}}";const a=r;const l=class{constructor(i){t(this,i);this.variant=undefined;this.links=[];this.visible=false;this.visibleLink=""}handleFocusOutSkipToContent(t){if(this.isInSkipToContent(t.target)){this.visible=false}}handleFocusSkipToContent(t){if(this.isInSkipToContent(t.target)){this.visible=true}}componentDidLoad(){this.showFirstChild()}componentWillRender(){if(this.links){this.links=typeof this.links==="string"?JSON.parse(this.links):this.links}}isInSkipToContent(t){const i=e(t);const n=i.find((t=>t.nodeName.toLowerCase()==="z-skip-to-content"));return!!n}showFirstChild(){var t;const i=(t=this.hostElement.children)===null||t===void 0?void 0:t[0];if(i){this.visibleLink=i.id}}handleLinkClick(){this.visible=false}render(){return i(n,{key:"b8589c4336335b3bdc4666c073f95c3f2b7ed8ea",class:{[this.variant]:true,"skip-to-content-visible":this.visible}},this.links.map(((t,n)=>{const o=`skip-to-content-${n}`;return i("div",{class:"link-container"},i("a",{id:o,class:{"body-1-sb":true,"z-link":true,"z-link-underline":true,"z-link-inverse":this.variant===s.DARK,"link-visible":o==this.visibleLink,"link-invisible":o!=this.visibleLink},"aria-label":t.ariaLabel||t.label,href:t.href,onFocus:()=>this.visibleLink=o,onClick:()=>this.handleLinkClick(),onKeyUp:t=>c(t,this.handleLinkClick.bind(this))},t.label))})))}get hostElement(){return o(this)}};l.style=a;export{l as z_skip_to_content};
|
|
2
|
+
//# sourceMappingURL=p-7916e0f7.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as e,g as i}from"./p-75c4a726.js";import{p as r}from"./p-17af7fb2.js";import{i as s,g as o,d as n}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,h as e,g as i}from"./p-75c4a726.js";import{p as r}from"./p-17af7fb2.js";import{i as s,g as o,d as n}from"./p-625e2cee.js";import"./p-5145a606.js";const a=':host{display:block;width:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;flex-direction:column}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;z-index:10;top:50%;width:auto;margin:0 var(--space-unit);cursor:pointer;fill:var(--color-primary01);transition:0.6s ease}main .scroll.disabled{opacity:0.5;pointer-events:none}main .scroll.right{right:0}#slides{display:flex;flex-wrap:wrap;line-height:0px;overflow-y:hidden;transition:all 300ms}footer{display:grid;width:100%;height:56px;align-items:center;border-top:var(--border-size-medium) solid var(--color-background);grid-template:2 / 2;grid-template-areas:"center center" "left right"}footer>div{width:100%;align-items:center}footer .footer-center{grid-area:center}footer .footer-left{grid-area:left}footer .footer-right{grid-area:right}footer .bullet-container{display:flex;min-height:60px;align-items:center;justify-content:center;margin:0 auto}footer .bullet-container .bullet{width:8px;height:8px;margin:var(--space-unit) 2px;background-color:var(--gray200);border-radius:50%;pointer-events:none}footer .bullet-container .bullet.selected{background-color:var(--gray400)}main z-icon:focus,footer .bullet-container .bullet:focus{border-radius:50%;box-shadow:var(--shadow-focus-primary);outline:none !important}@media only screen and (min-width: 768px){footer{height:76px;border-top:var(--border-size-medium) solid var(--color-background);grid-template:1 / 1fr 2fr 1fr;grid-template-areas:"left center right"}footer .bullet-container .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 .bullet-container .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);cursor:pointer;pointer-events:auto}}';const l=a;function d(t){return Array.isArray(t)&&t.every((t=>typeof t==="string"))}const h=class{constructor(e){t(this,e);this.slideshowid=undefined;this.data=undefined;this.device=undefined;this.currentSlide=0}watchData(){this.parseLinks()}componentWillLoad(){this.parseLinks();this.setDevice();window.addEventListener("resize",this.handleResize.bind(this))}componentDidRender(){this.setStyle()}handleResize(){this.setDevice();this.setStyle()}parseLinks(){var t;switch(typeof this.data){case"string":{const e=(t=s(this.data))!==null&&t!==void 0?t:[];if(!d(e)){throw new Error("Passed data is invalid")}this.links=e;break}default:this.links=this.data;break}}setStyle(){const t=this.el.shadowRoot.querySelector("#slides");if(!t){return}const e=this.el.shadowRoot.querySelectorAll(".slide");const i=this.el.offsetWidth;const r=i*this.links.length;t.style.width=`${r}px`;t.style.transform=`translate(-${i*this.currentSlide}px)`;e.forEach((t=>{const e=t.querySelector("img");e.style.width=`${i}px`}))}setDevice(){this.device=o()}setCurrentSlide(t){this.currentSlide=t}getBulletDimension(){switch(this.device){case r.MOBILE:return 24;case r.TABLET:return 32;default:return 40}}renderSlides(t){return e("div",{id:"slides"},t.map(((t,i)=>e("div",{id:"slide"+i,class:`slide ${this.currentSlide!==i&&"hide"}`},e("img",{src:t})))))}renderScroll(t){let i=false,r=this.currentSlide;if(t==="left"){i=this.currentSlide===0;r--}else if(t==="right"){i=this.currentSlide===this.links.length-1;r++}return e("z-icon",{class:`scroll ${t} ${i&&"disabled"}`,width:this.getBulletDimension(),height:this.getBulletDimension(),name:`chevron-${t}-circle`,onClick:()=>{!i&&this.setCurrentSlide(r)},onKeyUp:t=>!i&&n(t,(()=>{this.setCurrentSlide(r)})),tabindex:0,role:"button"})}renderSlideshowMain(){return e("main",null,this.renderScroll("left"),this.renderSlides(this.links),this.renderScroll("right"))}renderBullet(t){return e("a",{class:`bullet ${this.currentSlide===t&&"selected"}`,onClick:()=>this.setCurrentSlide(t),onKeyUp:e=>n(e,(()=>this.setCurrentSlide(t))),tabindex:0,role:"button"})}renderSlideshowFooter(){return e("footer",null,e("div",{class:"footer-left"},e("slot",{name:"footer-left"})),e("div",{class:"footer-center"},e("div",{class:"bullet-container"},Object.keys(this.links).map((t=>this.renderBullet(parseInt(t)))))),e("div",{class:"footer-right"},e("slot",{name:"footer-right"})))}render(){if(!this.links||!this.links.length){return e("div",null)}return e("div",{id:this.slideshowid},this.renderSlideshowMain(),this.renderSlideshowFooter())}get el(){return i(this)}static get watchers(){return{data:["watchData"]}}};h.style=l;export{h as z_slideshow};
|
|
2
|
+
//# sourceMappingURL=p-8bd4a2aa.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as t,h as c,a as s}from"./p-75c4a726.js";import{k as i}from"./p-17af7fb2.js";import{r as a}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as t,h as c,a as s}from"./p-75c4a726.js";import{k as i}from"./p-17af7fb2.js";import{r as a}from"./p-625e2cee.js";import"./p-5145a606.js";const l='.sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type="checkbox"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}';const o=l;const r=class{constructor(c){e(this,c);this.toggleClick=t(this,"toggleClick",7);this.disabled=false;this.labelPosition=i.LEFT;this.checked=false;this.htmlid=`toggle-switch-id-${a()}`}emitToggleClick(){this.toggleClick.emit({id:this.htmlid,checked:this.checked})}handleClick(e){if(this.disabled){return}this.checked=e.target.checked;this.emitToggleClick()}render(){return c(s,{key:"25e15bfaa9fadcb7b96251ff8146905877233624"},c("input",{key:"9f4f0be0fcf7fba56195998a16966b74a6e2324c",id:this.htmlid,type:"checkbox",checked:this.checked,disabled:this.disabled,onChange:this.handleClick.bind(this)}),c("label",{key:"cc29c0e884c74f3beeaf81290ba607f17c67701a",htmlFor:this.htmlid,class:{[this.labelPosition]:true,disabled:this.disabled}},c("span",{key:"757ccbc98f2a7f91ff5b3477fc149f4496d87189"},c("slot",{key:"505879e878f513c75c8d9af2a82ede3259fe39a0"})),c("span",{key:"7d56c1e57c886cfe8f7ab2ce903958f07a1e83ba",class:{container:true,disabled:this.disabled,checked:this.checked}},c("span",{key:"b2c587e20596144ddd26ab0a002ad560df156aa6",class:"circle"},this.checked&&c("z-icon",{key:"d438e7f776b8eae418293bfa827b4950285dc6da",width:12,height:12,name:"checkmark"})))))}};r.style=o;export{r as z_toggle_switch};
|
|
2
|
+
//# sourceMappingURL=p-8dec332e.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as i,c as t,h as s}from"./p-75c4a726.js";import{d as e}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as i,c as t,h as s}from"./p-75c4a726.js";import{d as e}from"./p-625e2cee.js";import"./p-17af7fb2.js";import"./p-5145a606.js";const a=":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 n=a;const o=class{emitZListItemLinkClick(i,t){this.zListItemLinkClick.emit({e:i,linkId:t})}emitZListItemClick(i,t){this.zListItemClick.emit({e:i,listitemid:t})}constructor(s){i(this,s);this.zListItemLinkClick=t(this,"zListItemLinkClick",7);this.zListItemClick=t(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 i=this.listitemid?`link_${this.listitemid}`:"";return s("li",{key:"e3057de0269559d1b3a767c2c5f93e61156374f7",role:"button",id:this.listitemid,"data-action":this.action,onClick:i=>this.emitZListItemClick(i,this.listitemid),onKeyPress:i=>e(i,this.emitZListItemClick,this.listitemid)},s("span",{key:"725e136f9f68bc79ca54146d84dd55b42b52e58e",class:this.underlined&&"border"},this.icon&&s("z-icon",{key:"056304bf8118186435b8a45076c107e1238293e2",name:this.icon}),this.link?s("a",{href:this.link?this.link:null,target:this.linktarget,id:i,onClick:t=>this.emitZListItemLinkClick(t,i),onKeyPress:t=>e(t,this.emitZListItemLinkClick,i),role:this.link?"link":"button",tabindex:"0"},this.text):s("span",{innerHTML:this.text}),s("slot",{key:"d8c48713670c5cf62fb51f8e6f7c7c0b8a49dbe2"})))}};o.style=n;export{o as z_myz_list_item};
|
|
2
|
+
//# sourceMappingURL=p-966cbf03.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,g as s}from"./p-75c4a726.js";import{I as o,e as r,i as a,g as n,l as h}from"./p-17af7fb2.js";import{r as l,d}from"./p-a06fbbc0.js";import"./p-5145a606.js";const c='.z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}:host{display:block;color:var(--color-form-default-text);fill:var(--color-form-default-icon);font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-form-surface04);margin:0;background-color:var(--color-form-background);border-radius:var(--border-radius-small);cursor:pointer}:host([size="small"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header p.body-3{padding:calc(var(--space-unit) * 0.5) 0}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>p.body-3{padding:var(--space-unit) 0;margin:0}:host>div>.header>p.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-form-active-primary);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>p.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 3px;margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);text-align:left}:host([size="small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size="x-small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}';const p=c;const u=class{watchItems(){this.itemsList=typeof this.items==="string"?JSON.parse(this.items):this.items;this.selectedCounter=this.itemsList.filter((t=>t.checked)).length;this.updateRenderItemsList()}watchSearchValue(){this.filterItems(this.searchValue)}watchCheckboxes(){this.checkboxes.forEach(((t,e)=>t.setAttribute("tabindex",e===0?"0":"-1")))}emitComboboxChange(){this.comboboxChange.emit({id:this.inputid,items:this.itemsList})}constructor(i){t(this,i);this.comboboxChange=e(this,"comboboxChange",7);this.itemsList=[];this.inputType=o.TEXT;this.inputid=`combo-${l()}`;this.items=undefined;this.label=undefined;this.disabled=false;this.hassearch=false;this.searchlabel=undefined;this.searchplaceholder=undefined;this.searchtitle=undefined;this.noresultslabel="Nessun risultato";this.isopen=false;this.isfixed=false;this.closesearchtext="Chiudi";this.hascheckall=false;this.checkalltext="Seleziona tutti";this.uncheckalltext="Deseleziona tutti";this.maxcheckableitems=0;this.hasgroupitems=undefined;this.size=r.BIG;this.searchValue=undefined;this.selectedCounter=undefined;this.renderItemsList=[];this.focusedItemId=undefined;this.checkboxes=[];this.toggleComboBox=this.toggleComboBox.bind(this);this.closeFilterItems=this.closeFilterItems.bind(this)}componentWillLoad(){this.watchItems()}componentWillRender(){this.selectedCounter=this.itemsList.filter((t=>t.checked)).length}componentDidRender(){const t=this.getAllCheckboxes();if(JSON.stringify(t)!==JSON.stringify(this.checkboxes)){this.checkboxes=t}}getItemId(t){return`combo-checkbox-${this.inputid}-${t.id}`}getCheckboxClass(){return`combo-item-checkbox-input-${this.inputid}`}getAllCheckboxes(){return Array.from(this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`))}getControlToListSize(){switch(this.size){case r.X_SMALL:return a.SMALL;case r.SMALL:return a.MEDIUM;default:return a.LARGE}}handleSelectArrowsNavigation(t,e){if(![n.ARROW_DOWN,n.ARROW_UP].includes(t.key)||!this.isopen){return}t.preventDefault();t.stopPropagation();const i=this.element.shadowRoot.querySelector(`#${e}`);if(!i){return}const s=this.checkboxes;if(!s.length){return}const o=s.indexOf(i);const r=0;const a=s.length-1;let h=null;if(t.key===n.ARROW_DOWN){h=o===a?s[r]:s[o+1]}else if(t.key===n.ARROW_UP){h=o===r?s[a]:s[o-1]}this.focusComboboxItem(h)}handleHeaderKeyboardEvent(t){if(t.key===n.SPACE){t.preventDefault()}if(t.key===n.ARROW_DOWN&&!this.isopen||t.key===n.ARROW_UP&&this.isopen){this.toggleComboBox()}}handleCheckboxFocus(t){this.focusedItemId=t}focusComboboxItem(t){this.checkboxes.forEach((function(t){t.setAttribute("tabindex","-1")}));t.setAttribute("tabindex","0");t.focus()}updateRenderItemsList(){if(this.searchValue){this.filterItems(this.searchValue)}else{this.resetRenderItemsList()}}resetRenderItemsList(){const t=[];this.itemsList.forEach((e=>{t.push(Object.assign({},e))}));this.renderItemsList=t}filterItems(t){if(!t){return this.closeFilterItems()}this.resetRenderItemsList();this.renderItemsList=this.renderItemsList.filter((e=>{const i=e.name.toUpperCase().indexOf(t.toUpperCase());const s=i+t.length;const o=e.name.substring(0,i)+"<strong>"+e.name.substring(i,s)+"</strong>"+e.name.substring(s,e.name.length);e.name=o;return i>=0}))}checkAll(t=true){this.itemsList=this.itemsList.map((e=>Object.assign(Object.assign({},e),{checked:t})));this.resetRenderItemsList();this.emitComboboxChange()}closeFilterItems(){this.searchValue="";this.resetRenderItemsList()}toggleComboBox(){this.isopen=!this.isopen}getComboboxA11yAttributes(){return{role:"combobox","aria-label":this.label,"aria-expanded":this.isopen?"true":"false","aria-activedescendant":this.isopen?this.focusedItemId:"","aria-controls":`${this.inputid}_list`}}renderHeader(){return i("div",{class:"header",onClick:()=>this.toggleComboBox(),onKeyDown:t=>{this.handleHeaderKeyboardEvent(t)},onKeyUp:t=>d(t,this.toggleComboBox),role:"button",tabindex:0,"aria-expanded":this.isopen?"true":"false"},i("p",{class:"body-3"},this.label,i("span",null,this.selectedCounter>0&&` (${this.selectedCounter})`)),i("z-icon",{name:"caret-down",class:this.size}))}renderContent(){if(!this.isopen){return}return i("div",{class:"open-combo-data"},this.hassearch&&this.renderSearchInput(),!this.hassearch?i("span",Object.assign({},this.getComboboxA11yAttributes())):null,i("div",{role:"listbox","aria-label":this.label,"aria-multiselectable":true,id:`${this.inputid}_list`,"aria-owns":`${this.checkboxes.map((t=>t.id)).join(" ")}`},this.hascheckall&&this.renderCheckAll(),this.renderItems()))}renderItems(){return i("div",{class:this.searchValue&&"search"},this.renderList(this.renderItemsList),this.searchValue&&this.renderCloseButton())}renderItem(t,e,s){return i("z-list-element",{id:t.id,htmlTabindex:null,dividerType:e!==s-1?h.ELEMENT:h.NONE,size:this.getControlToListSize()},i("z-input",{type:o.CHECKBOX,checked:t.checked,htmlid:this.getItemId(t),label:t.name,class:this.getCheckboxClass(),disabled:!t.checked&&this.maxcheckableitems&&this.selectedCounter>=this.maxcheckableitems,size:this.size===r.X_SMALL?r.SMALL:this.size,role:"option","aria-selected":t.checked?"true":"false",onKeyDown:e=>this.handleSelectArrowsNavigation(e,this.getItemId(t)),onInputCheck:e=>{this.itemsList=this.itemsList.map((i=>{if(t.id===i.id){i.checked=e.detail.checked}return i}));this.updateRenderItemsList();this.emitComboboxChange()},onInputFocus:t=>this.handleCheckboxFocus(t.detail.id)}))}renderList(t){if(!t){return}if(!t.length&&this.searchValue){return this.renderNoSearchResults()}if(this.hasgroupitems){return this.renderGroups(t)}return i("ul",{role:"none"},t.map(((e,i)=>this.renderItem(e,i,t.length))))}renderGroups(t){const e=t.reduce(((e,i,s)=>{var o;const{category:r}=i;const a=this.renderItem(i,s,t.length);e[r]=(o=e[r])!==null&&o!==void 0?o:[];e[r].push(a);return e}),{});const s=Object.entries(e).map((([t,e])=>i("z-list-group",{"divider-type":h.ELEMENT},i("span",{class:"body-3-sb z-list-group-title",slot:"header-title"},t),e.map((t=>t)))));return i("ul",{role:"none"},s)}renderNoSearchResults(){return i("div",{class:"no-results"},i("z-icon",{name:"multiply-circle"}),i("span",null,this.noresultslabel))}renderCloseButton(){return i("div",{class:"close-search"},i("a",{onClick:()=>this.closeFilterItems(),onKeyUp:t=>d(t,this.closeFilterItems),role:"button",tabindex:0},this.closesearchtext))}renderSearchInput(){return i("z-input",Object.assign({htmlid:`${this.inputid}_search`,label:this.searchlabel,placeholder:this.searchplaceholder,htmltitle:this.searchtitle,type:this.inputType,value:this.searchValue,message:false,size:this.size,"aria-autocomplete":"list"},this.getComboboxA11yAttributes(),{onKeyUp:t=>{if(t.key===n.ESC){this.closeFilterItems()}},onInputChange:t=>{this.searchValue=t.detail.value}}))}renderCheckAll(){if(this.searchValue){return}const t=`combo-checkbox-${this.inputid}-check-all`;const e=this.selectedCounter===this.itemsList.length;return i("div",{class:"check-all-wrapper"},i("z-input",{type:o.CHECKBOX,checked:e,htmlid:t,class:this.getCheckboxClass(),label:e?this.uncheckalltext:this.checkalltext,disabled:this.maxcheckableitems&&this.maxcheckableitems<this.itemsList.length,size:this.size===r.X_SMALL?r.SMALL:this.size,role:"option","aria-selected":e?"true":"false",onKeyDown:e=>this.handleSelectArrowsNavigation(e,t),onInputCheck:t=>this.checkAll(t.detail.checked),onInputFocus:t=>this.handleCheckboxFocus(t.detail.id)}))}render(){return i("div",{key:"c746599f1d5cef116c2319d365792288d6f0f34b","data-action":`combo-${this.inputid}`,class:{open:this.isopen,fixed:this.isfixed,disabled:this.disabled},id:this.inputid},this.renderHeader(),!this.disabled&&this.renderContent())}get element(){return s(this)}static get watchers(){return{items:["watchItems"],searchValue:["watchSearchValue"],checkboxes:["watchCheckboxes"]}}};u.style=p;export{u as z_combobox};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as e,h as i,g as s}from"./p-75c4a726.js";import{I as o,e as r,i as a,g as n,l as h}from"./p-17af7fb2.js";import{r as l,d}from"./p-625e2cee.js";import"./p-5145a606.js";const c='.z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}:host{display:block;color:var(--color-form-default-text);fill:var(--color-form-default-icon);font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-form-surface04);margin:0;background-color:var(--color-form-background);border-radius:var(--border-radius-small);cursor:pointer}:host([size="small"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header p.body-3{padding:calc(var(--space-unit) * 0.5) 0}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>p.body-3{padding:var(--space-unit) 0;margin:0}:host>div>.header>p.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-form-active-primary);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>p.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 3px;margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);text-align:left}:host([size="small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size="x-small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}';const p=c;const u=class{watchItems(){this.itemsList=typeof this.items==="string"?JSON.parse(this.items):this.items;this.selectedCounter=this.itemsList.filter((t=>t.checked)).length;this.updateRenderItemsList()}watchSearchValue(){this.filterItems(this.searchValue)}watchCheckboxes(){this.checkboxes.forEach(((t,e)=>t.setAttribute("tabindex",e===0?"0":"-1")))}emitComboboxChange(){this.comboboxChange.emit({id:this.inputid,items:this.itemsList})}constructor(i){t(this,i);this.comboboxChange=e(this,"comboboxChange",7);this.itemsList=[];this.inputType=o.TEXT;this.inputid=`combo-${l()}`;this.items=undefined;this.label=undefined;this.disabled=false;this.hassearch=false;this.searchlabel=undefined;this.searchplaceholder=undefined;this.searchtitle=undefined;this.noresultslabel="Nessun risultato";this.isopen=false;this.isfixed=false;this.closesearchtext="Chiudi";this.hascheckall=false;this.checkalltext="Seleziona tutti";this.uncheckalltext="Deseleziona tutti";this.maxcheckableitems=0;this.hasgroupitems=undefined;this.size=r.BIG;this.searchValue=undefined;this.selectedCounter=undefined;this.renderItemsList=[];this.focusedItemId=undefined;this.checkboxes=[];this.toggleComboBox=this.toggleComboBox.bind(this);this.closeFilterItems=this.closeFilterItems.bind(this)}componentWillLoad(){this.watchItems()}componentWillRender(){this.selectedCounter=this.itemsList.filter((t=>t.checked)).length}componentDidRender(){const t=this.getAllCheckboxes();if(JSON.stringify(t)!==JSON.stringify(this.checkboxes)){this.checkboxes=t}}getItemId(t){return`combo-checkbox-${this.inputid}-${t.id}`}getCheckboxClass(){return`combo-item-checkbox-input-${this.inputid}`}getAllCheckboxes(){return Array.from(this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`))}getControlToListSize(){switch(this.size){case r.X_SMALL:return a.SMALL;case r.SMALL:return a.MEDIUM;default:return a.LARGE}}handleSelectArrowsNavigation(t,e){if(![n.ARROW_DOWN,n.ARROW_UP].includes(t.key)||!this.isopen){return}t.preventDefault();t.stopPropagation();const i=this.element.shadowRoot.querySelector(`#${e}`);if(!i){return}const s=this.checkboxes;if(!s.length){return}const o=s.indexOf(i);const r=0;const a=s.length-1;let h=null;if(t.key===n.ARROW_DOWN){h=o===a?s[r]:s[o+1]}else if(t.key===n.ARROW_UP){h=o===r?s[a]:s[o-1]}this.focusComboboxItem(h)}handleHeaderKeyboardEvent(t){if(t.key===n.SPACE){t.preventDefault()}if(t.key===n.ARROW_DOWN&&!this.isopen||t.key===n.ARROW_UP&&this.isopen){this.toggleComboBox()}}handleCheckboxFocus(t){this.focusedItemId=t}focusComboboxItem(t){this.checkboxes.forEach((function(t){t.setAttribute("tabindex","-1")}));t.setAttribute("tabindex","0");t.focus()}updateRenderItemsList(){if(this.searchValue){this.filterItems(this.searchValue)}else{this.resetRenderItemsList()}}resetRenderItemsList(){const t=[];this.itemsList.forEach((e=>{t.push(Object.assign({},e))}));this.renderItemsList=t}filterItems(t){if(!t){return this.closeFilterItems()}this.resetRenderItemsList();this.renderItemsList=this.renderItemsList.filter((e=>{const i=e.name.toUpperCase().indexOf(t.toUpperCase());const s=i+t.length;const o=e.name.substring(0,i)+"<strong>"+e.name.substring(i,s)+"</strong>"+e.name.substring(s,e.name.length);e.name=o;return i>=0}))}checkAll(t=true){this.itemsList=this.itemsList.map((e=>Object.assign(Object.assign({},e),{checked:t})));this.resetRenderItemsList();this.emitComboboxChange()}closeFilterItems(){this.searchValue="";this.resetRenderItemsList()}toggleComboBox(){this.isopen=!this.isopen}getComboboxA11yAttributes(){return{role:"combobox","aria-label":this.label,"aria-expanded":this.isopen?"true":"false","aria-activedescendant":this.isopen?this.focusedItemId:"","aria-controls":`${this.inputid}_list`}}renderHeader(){return i("div",{class:"header",onClick:()=>this.toggleComboBox(),onKeyDown:t=>{this.handleHeaderKeyboardEvent(t)},onKeyUp:t=>d(t,this.toggleComboBox),role:"button",tabindex:0,"aria-expanded":this.isopen?"true":"false"},i("p",{class:"body-3"},this.label,i("span",null,this.selectedCounter>0&&` (${this.selectedCounter})`)),i("z-icon",{name:"caret-down",class:this.size}))}renderContent(){if(!this.isopen){return}return i("div",{class:"open-combo-data"},this.hassearch&&this.renderSearchInput(),!this.hassearch?i("span",Object.assign({},this.getComboboxA11yAttributes())):null,i("div",{role:"listbox","aria-label":this.label,"aria-multiselectable":true,id:`${this.inputid}_list`,"aria-owns":`${this.checkboxes.map((t=>t.id)).join(" ")}`},this.hascheckall&&this.renderCheckAll(),this.renderItems()))}renderItems(){return i("div",{class:this.searchValue&&"search"},this.renderList(this.renderItemsList),this.searchValue&&this.renderCloseButton())}renderItem(t,e,s){return i("z-list-element",{id:t.id,htmlTabindex:null,dividerType:e!==s-1?h.ELEMENT:h.NONE,size:this.getControlToListSize()},i("z-input",{type:o.CHECKBOX,checked:t.checked,htmlid:this.getItemId(t),label:t.name,class:this.getCheckboxClass(),disabled:!t.checked&&this.maxcheckableitems&&this.selectedCounter>=this.maxcheckableitems,size:this.size===r.X_SMALL?r.SMALL:this.size,role:"option","aria-selected":t.checked?"true":"false",onKeyDown:e=>this.handleSelectArrowsNavigation(e,this.getItemId(t)),onInputCheck:e=>{this.itemsList=this.itemsList.map((i=>{if(t.id===i.id){i.checked=e.detail.checked}return i}));this.updateRenderItemsList();this.emitComboboxChange()},onInputFocus:t=>this.handleCheckboxFocus(t.detail.id)}))}renderList(t){if(!t){return}if(!t.length&&this.searchValue){return this.renderNoSearchResults()}if(this.hasgroupitems){return this.renderGroups(t)}return i("ul",{role:"none"},t.map(((e,i)=>this.renderItem(e,i,t.length))))}renderGroups(t){const e=t.reduce(((e,i,s)=>{var o;const{category:r}=i;const a=this.renderItem(i,s,t.length);e[r]=(o=e[r])!==null&&o!==void 0?o:[];e[r].push(a);return e}),{});const s=Object.entries(e).map((([t,e])=>i("z-list-group",{"divider-type":h.ELEMENT},i("span",{class:"body-3-sb z-list-group-title",slot:"header-title"},t),e.map((t=>t)))));return i("ul",{role:"none"},s)}renderNoSearchResults(){return i("div",{class:"no-results"},i("z-icon",{name:"multiply-circle"}),i("span",null,this.noresultslabel))}renderCloseButton(){return i("div",{class:"close-search"},i("a",{onClick:()=>this.closeFilterItems(),onKeyUp:t=>d(t,this.closeFilterItems),role:"button",tabindex:0},this.closesearchtext))}renderSearchInput(){return i("z-input",Object.assign({htmlid:`${this.inputid}_search`,label:this.searchlabel,placeholder:this.searchplaceholder,htmltitle:this.searchtitle,type:this.inputType,value:this.searchValue,message:false,size:this.size,"aria-autocomplete":"list"},this.getComboboxA11yAttributes(),{onKeyUp:t=>{if(t.key===n.ESC){this.closeFilterItems()}},onInputChange:t=>{this.searchValue=t.detail.value}}))}renderCheckAll(){if(this.searchValue){return}const t=`combo-checkbox-${this.inputid}-check-all`;const e=this.selectedCounter===this.itemsList.length;return i("div",{class:"check-all-wrapper"},i("z-input",{type:o.CHECKBOX,checked:e,htmlid:t,class:this.getCheckboxClass(),label:e?this.uncheckalltext:this.checkalltext,disabled:this.maxcheckableitems&&this.maxcheckableitems<this.itemsList.length,size:this.size===r.X_SMALL?r.SMALL:this.size,role:"option","aria-selected":e?"true":"false",onKeyDown:e=>this.handleSelectArrowsNavigation(e,t),onInputCheck:t=>this.checkAll(t.detail.checked),onInputFocus:t=>this.handleCheckboxFocus(t.detail.id)}))}render(){return i("div",{key:"c746599f1d5cef116c2319d365792288d6f0f34b","data-action":`combo-${this.inputid}`,class:{open:this.isopen,fixed:this.isfixed,disabled:this.disabled},id:this.inputid},this.renderHeader(),!this.disabled&&this.renderContent())}get element(){return s(this)}static get watchers(){return{items:["watchItems"],searchValue:["watchSearchValue"],checkboxes:["watchCheckboxes"]}}};u.style=p;export{u as z_combobox};
|
|
2
|
+
//# sourceMappingURL=p-a0ed0c63.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,h as o,a as n,g as t}from"./p-75c4a726.js";import{e as i,B as r}from"./p-17af7fb2.js";const e="html{scroll-behavior:smooth}z-anchor-navigation nav{display:none;flex-direction:column;justify-content:flex-start;row-gap:calc(var(--space-unit) / 2)}z-anchor-navigation[collapsed] nav{display:flex;margin-top:var(--space-unit)}z-anchor-navigation nav a{display:-webkit-box;overflow:clip;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);-webkit-box-orient:vertical;font-weight:inherit;-webkit-line-clamp:2;line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}z-anchor-navigation nav>* a{color:inherit}z-anchor-navigation nav * a:not(:only-child){padding-right:calc(var(--space-unit) * 5)}@supports not (overflow-clip-margin: content-box){z-anchor-navigation nav a{display:inline-block;overflow:hidden;-webkit-line-clamp:none;line-clamp:none;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-default-icon);color:var(--color-default-text);font-family:var(--font-family-sans);transition:background-color 0.3s ease-in-out,\n border-color 0.3s ease-in-out,\n color 0.3s ease-in-out}z-anchor-navigation nav>[data-current]{border-left-color:var(--color-primary01);color:var(--color-primary01);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav>*:focus:focus-visible,z-anchor-navigation nav>*>*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}@media (min-width: 768px){z-anchor-navigation:not([is-collapsed]) z-button.toggle{display:none !important}z-anchor-navigation:not([is-collapsed]) nav{display:flex}z-anchor-navigation nav>*>:is(z-button,button){opacity:0;pointer-events:none}@media (hover: hover){z-anchor-navigation nav>:is([data-current],:hover,:focus,:focus-within)>:is(z-button,button){fill:var(--color-default-icon);opacity:1;pointer-events:unset}z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-primary);background-color:var(--color-background);color:var(--color-hover-primary)}}z-anchor-navigation[hide-unselected] nav>*:not([data-current],:hover,:focus,:focus-within){color:transparent;fill:transparent}}";const c=e;const s=class{constructor(o){a(this,o);this.hideUnselected=false;this.autoCurrent=true;this.collapsedLabel="salta a";this.isCollapsed=false;this.collapsed=false}setCurrent(){const a=Array.from(this.nav.querySelectorAll("a")).find((a=>a.href===this.host.ownerDocument.location.href));Array.from(this.nav.children).forEach((o=>{const n=o instanceof HTMLAnchorElement?o:o.querySelector("a");const t=n===a;n.setAttribute("aria-current",t.toString());o.toggleAttribute("data-current",t)}))}toggleCollapsed(){this.collapsed=!this.collapsed}componentDidLoad(){if(this.autoCurrent){window.addEventListener("hashchange",this.setCurrent.bind(this));this.setCurrent()}}disconnectedCallback(){window.removeEventListener("hashchange",this.setCurrent)}render(){return o(n,{key:"91fa327dc685a23f2f645feb80957eab8ce2a486",collapsed:this.collapsed,class:"z-scrollbar"},o("z-button",{key:"3455aa67a11adaa0cb0f8571997a0a118ded5635",class:"toggle",size:i.SMALL,variant:r.SECONDARY,icon:this.collapsed?"chevron-up":"chevron-down",onClick:this.toggleCollapsed.bind(this)},this.collapsedLabel),o("nav",{key:"3e7ee00cbb6b5c3e353738c68d41c0392ce41ec0",ref:a=>this.nav=a},o("slot",{key:"35b61d7535025bd4daa6981bfbac5d249bfc59eb"})))}get host(){return t(this)}};s.style=c;export{s as z_anchor_navigation};
|
|
2
|
+
//# sourceMappingURL=p-b7b972c0.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["stylesCss","ZAnchorNavigationStyle0","ZAnchorNavigation","setCurrent","currentElement","Array","from","this","nav","querySelectorAll","find","anchor","href","host","ownerDocument","location","children","forEach","item","HTMLAnchorElement","querySelector","isCurrent","setAttribute","toString","toggleAttribute","toggleCollapsed","collapsed","componentDidLoad","autoCurrent","window","addEventListener","bind","disconnectedCallback","removeEventListener","render","h","Host","key","class","size","ControlSize","SMALL","variant","ButtonVariant","SECONDARY","icon","onClick","collapsedLabel","ref","el"],"sources":["src/components/z-anchor-navigation/styles.css?tag=z-anchor-navigation","src/components/z-anchor-navigation/index.tsx"],"sourcesContent":["html {\n scroll-behavior: smooth;\n}\n\nz-anchor-navigation nav {\n display: none;\n flex-direction: column;\n justify-content: flex-start;\n row-gap: calc(var(--space-unit) / 2);\n}\n\nz-anchor-navigation[collapsed] nav {\n display: flex;\n margin-top: var(--space-unit);\n}\n\nz-anchor-navigation nav a {\n display: -webkit-box;\n overflow: clip;\n width: 100%;\n box-sizing: border-box;\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n -webkit-box-orient: vertical;\n font-weight: inherit;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n overflow-clip-margin: content-box;\n text-decoration: none;\n}\n\nz-anchor-navigation nav > * a {\n color: inherit;\n}\n\nz-anchor-navigation nav * a:not(:only-child) {\n padding-right: calc(var(--space-unit) * 5);\n}\n\n@supports not (overflow-clip-margin: content-box) {\n z-anchor-navigation nav a {\n display: inline-block;\n overflow: hidden;\n -webkit-line-clamp: none;\n line-clamp: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\nz-anchor-navigation nav > * {\n position: relative;\n border-left: var(--border-size-large) solid var(--color-default-icon);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n transition:\n background-color 0.3s ease-in-out,\n border-color 0.3s ease-in-out,\n color 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > [data-current] {\n border-left-color: var(--color-primary01);\n color: var(--color-primary01);\n font-weight: var(--font-sb);\n}\n\nz-anchor-navigation nav > * > *:is(z-button, button) {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n transition: opacity 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > *:focus:focus-visible,\nz-anchor-navigation nav > * > *:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\nz-anchor-navigation nav button {\n padding: 0;\n border: none;\n margin: 0;\n background-color: transparent;\n}\n\n@media (min-width: 768px) {\n z-anchor-navigation:not([is-collapsed]) z-button.toggle {\n display: none !important;\n }\n\n z-anchor-navigation:not([is-collapsed]) nav {\n display: flex;\n }\n\n /* hide anchor actions by default... */\n z-anchor-navigation nav > * > :is(z-button, button) {\n opacity: 0;\n pointer-events: none;\n }\n\n @media (hover: hover) {\n /* ...show them only hovering/focusing the anchor */\n z-anchor-navigation nav > :is([data-current], :hover, :focus, :focus-within) > :is(z-button, button) {\n fill: var(--color-default-icon);\n opacity: 1;\n pointer-events: unset;\n }\n\n z-anchor-navigation nav > *:hover {\n border-left-color: var(--color-hover-primary);\n background-color: var(--color-background);\n color: var(--color-hover-primary);\n }\n }\n\n z-anchor-navigation[hide-unselected] nav > *:not([data-current], :hover, :focus, :focus-within) {\n color: transparent;\n fill: transparent;\n }\n}\n","import {Component, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize} from \"../../beans\";\n\n/**\n * Anchor navigation component.\n * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.\n * @example\n * ```\n * <z-anchor-navigation>\n * <div>\n * <a href=\"#section-id\">Section name</a>\n * <button type=\"button\">\n * <z-icon name=\"share\" />\n * </button>\n * </div>\n * </z-anchor-navigation>\n * ```\n */\n@Component({\n tag: \"z-anchor-navigation\",\n styleUrl: \"styles.css\",\n shadow: false,\n})\nexport class ZAnchorNavigation {\n /**\n * If enabled, the text of each anchor will be hidden unless\n * for the current one or the one the user is hovering.\n */\n @Prop({reflect: true})\n hideUnselected = false;\n\n /**\n * Enables automatic inference of the current item, listening for hash change\n * and checking the `href` of the slotted anchors.\n * When disabled, the highlight of current item must be handled manually by setting the `data-current`\n * attribute to the correct slotted items and the `aria-current` attribute to the anchors.\n */\n @Prop()\n autoCurrent = true;\n\n /**\n * Sets the label of the button displayed on mobile viewport when the anchor navigation is collapsed\n */\n @Prop()\n collapsedLabel = \"salta a\";\n\n /**\n * Explicitly collapse anchor navigation.\n * If false will collapse automatically only on mobile.\n */\n @Prop({reflect: true})\n isCollapsed = false;\n\n /**\n * Whether the mobile list is collapsed.\n */\n @State()\n collapsed = false;\n\n @Element() host: HTMLZAnchorNavigationElement;\n\n /** Reference to the nav element. */\n private nav: HTMLElement;\n\n /**\n * Set `aria-current` attribute to the anchors.\n */\n private setCurrent(): void {\n const currentElement = Array.from(this.nav.querySelectorAll(\"a\")).find(\n (anchor) => anchor.href === this.host.ownerDocument.location.href\n );\n Array.from(this.nav.children).forEach((item) => {\n const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n const isCurrent = anchor === currentElement;\n anchor.setAttribute(\"aria-current\", isCurrent.toString());\n item.toggleAttribute(\"data-current\", isCurrent);\n });\n }\n\n /**\n * Toggle collapsed state.\n */\n private toggleCollapsed(): void {\n this.collapsed = !this.collapsed;\n }\n\n componentDidLoad(): void {\n if (this.autoCurrent) {\n window.addEventListener(\"hashchange\", this.setCurrent.bind(this));\n this.setCurrent();\n }\n }\n\n disconnectedCallback(): void {\n window.removeEventListener(\"hashchange\", this.setCurrent);\n }\n\n render(): HTMLZAnchorNavigationElement {\n return (\n <Host\n collapsed={this.collapsed}\n class=\"z-scrollbar\"\n >\n <z-button\n class=\"toggle\"\n size={ControlSize.SMALL}\n variant={ButtonVariant.SECONDARY}\n icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n onClick={this.toggleCollapsed.bind(this)}\n >\n {this.collapsedLabel}\n </z-button>\n <nav ref={(el) => (this.nav = el)}>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,mzEAClB,MAAAC,EAAeD,E,MCsBFE,EAAiB,M,6CAMX,M,iBASH,K,oBAMG,U,iBAOH,M,eAMF,K,CAUJ,UAAAC,GACN,MAAMC,EAAiBC,MAAMC,KAAKC,KAAKC,IAAIC,iBAAiB,MAAMC,MAC/DC,GAAWA,EAAOC,OAASL,KAAKM,KAAKC,cAAcC,SAASH,OAE/DP,MAAMC,KAAKC,KAAKC,IAAIQ,UAAUC,SAASC,IACrC,MAAMP,EAASO,aAAgBC,kBAAoBD,EAAOA,EAAKE,cAAc,KAC7E,MAAMC,EAAYV,IAAWP,EAC7BO,EAAOW,aAAa,eAAgBD,EAAUE,YAC9CL,EAAKM,gBAAgB,eAAgBH,EAAU,G,CAO3C,eAAAI,GACNlB,KAAKmB,WAAanB,KAAKmB,S,CAGzB,gBAAAC,GACE,GAAIpB,KAAKqB,YAAa,CACpBC,OAAOC,iBAAiB,aAAcvB,KAAKJ,WAAW4B,KAAKxB,OAC3DA,KAAKJ,Y,EAIT,oBAAA6B,GACEH,OAAOI,oBAAoB,aAAc1B,KAAKJ,W,CAGhD,MAAA+B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHX,UAAWnB,KAAKmB,UAChBY,MAAM,eAENH,EAAA,YAAAE,IAAA,2CACEC,MAAM,SACNC,KAAMC,EAAYC,MAClBC,QAASC,EAAcC,UACvBC,KAAMtC,KAAKmB,UAAY,aAAe,eACtCoB,QAASvC,KAAKkB,gBAAgBM,KAAKxB,OAElCA,KAAKwC,gBAERZ,EAAA,OAAAE,IAAA,2CAAKW,IAAMC,GAAQ1C,KAAKC,IAAMyC,GAC5Bd,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|