@zanichelli/albe-web-components 18.6.3 → 18.6.5
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 +4 -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 +2 -2
- package/dist/cjs/z-app-header_12.cjs.entry.js.map +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 +6 -8
- 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/list/z-list-element/styles.css +2 -4
- package/dist/collection/components/z-anchor-navigation/index.js +1 -1
- package/dist/collection/components/z-anchor-navigation/index.js.map +1 -1
- package/dist/collection/components/z-card/index.js +6 -4
- package/dist/collection/components/z-card/index.js.map +1 -1
- package/dist/collection/components/z-card/styles.css +23 -20
- 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 +5 -7
- package/dist/collection/components/z-select/index.js.map +1 -1
- package/dist/collection/components/z-select/styles.css +2 -6
- package/dist/collection/utils/utils.js +53 -0
- package/dist/collection/utils/utils.js.map +1 -1
- package/dist/components/index14.js +1 -1
- package/dist/components/index14.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 +1 -1
- 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 +6 -8
- 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 +1 -1
- package/dist/esm/z-anchor-navigation.entry.js.map +1 -1
- package/dist/esm/z-app-header_12.entry.js +2 -2
- package/dist/esm/z-app-header_12.entry.js.map +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 +6 -8
- 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-card/index.d.ts +9 -4
- 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 +19 -19
- 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-403d780a.entry.js +2 -0
- package/dist/web-components-library/p-403d780a.entry.js.map +1 -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-25935be3.entry.js → p-6d0fa7c1.entry.js} +2 -2
- package/dist/web-components-library/{p-25935be3.entry.js.map → p-6d0fa7c1.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/{www/build/p-e41442e0.entry.js → dist/web-components-library/p-b7b972c0.entry.js} +2 -2
- package/{www/build/p-e41442e0.entry.js.map → dist/web-components-library/p-b7b972c0.entry.js.map} +1 -1
- package/dist/web-components-library/p-d47fcf2b.entry.js +2 -0
- package/dist/web-components-library/p-d47fcf2b.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-2870add3.js → p-2f7bcbb3.js} +1 -1
- package/www/build/p-3284e37b.entry.js +2 -0
- package/www/build/p-403d780a.entry.js +2 -0
- package/www/build/p-403d780a.entry.js.map +1 -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-25935be3.entry.js → p-6d0fa7c1.entry.js} +2 -2
- package/www/build/{p-25935be3.entry.js.map → p-6d0fa7c1.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/{dist/web-components-library/p-e41442e0.entry.js → www/build/p-b7b972c0.entry.js} +2 -2
- package/{dist/web-components-library/p-e41442e0.entry.js.map → www/build/p-b7b972c0.entry.js.map} +1 -1
- package/www/build/p-d47fcf2b.entry.js +2 -0
- package/www/build/p-d47fcf2b.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 +0 -2
- 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/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 +0 -2
- 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/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/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
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["stylesCss","ZSelectStyle0","ZSelect","constructor","hostRef","this","itemsList","itemIdKeyMap","resetKey","randomId","ControlSize","BIG","toggleSelectUl","bind","handleSelectFocus","watchItems","getInitialItemsArray","selectedItem","findSelectedItem","flattenedList","flattenTreeItems","forEach","item","key","id","getFocusedItemHandler","e","focusedItemId","target","getSelectedItem","getValue","getSelectedValue","setValue","value","values","push","length","updateSelection","emitOptionSelect","optionSelect","emit","htmlid","selected","emitResetSelect","resetSelect","componentWillLoad","componentWillRender","filterItems","searchString","items","JSON","parse","mapSelectedItemToItemsArray","initialItemsList","map","_a","prevList","hasTreeItems","filterTree","filter","name","toUpperCase","includes","getHighlightedText","matchingParent","match","newItem","Object","assign","children","showChildrenOfMatchingParent","text","search","upperText","upperSearch","start","indexOf","end","substring","hasAutocomplete","boolean","autocomplete","handleInputChange","detail","isOpen","selectedId","found","selectItem","disabled","flatItems","index","flatten","subItems","itm","arrowsSelectNav","idOrReset","showResetIcon","resetItem","arrows","KeyboardCode","ARROW_DOWN","ARROW_UP","preventDefault","stopPropagation","f","unshift","currentIndex","findIndex","k","lastIndex","newIndex","focusSelectItem","host","querySelector","focus","selfFocusOnClose","readonly","document","addEventListener","removeEventListener","handleInputClick","closest","clickedElement","getClickedElement","hasAttribute","KeyboardEvent","ESC","ENTER","TAB","getElementTree","find","elem","nodeName","toLowerCase","MouseEvent","scrollToLetter","letter","foundItem","charAt","renderInput","h","class","placeholder","replace","label","ariaLabel","icon","hasclearicon","message","status","undefined","role","size","onClick","onKeyUp","onKeyDown","current","onInputChange","onKeyPress","String","fromCharCode","keyCode","renderSelectUl","fixed","isfixed","tabindex","listSizeType","renderResetItem","renderSelectUlItems","hide","hasGroupItems","clickable","dividerType","ListDividerType","ELEMENT","ListSize","MEDIUM","onClickItem","renderItem","lastItem","thisItemKey","HEADER","innerHTML","NONE","SMALL","X_SMALL","renderNoSearchResults","renderSelectGroupItems","renderGroupedTree","array","isLastItem","parentHasSiblings","renderTreeItems","isLastChild","isTopLevel","hasDivider","_b","tabIndex","title","child","arr","grouped","reduce","acc","category","entries","some","groupItems","slot","i","style","zIndex","height","newData","group","zListItem","color","fill","noresultslabel","renderMessage","render"],"sources":["src/components/z-select/styles.css?tag=z-select&encapsulation=scoped","src/components/z-select/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: inherit;\n color: var(--color-form-default-text);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n}\n\n:host([size=\"small\"]),\n:host([size=\"x-small\"]) {\n font-size: var(--font-size-2);\n}\n\n.select-wrapper > z-input {\n width: 100%;\n}\n\n.select-wrapper > z-input .input-icon {\n cursor: pointer;\n}\n\n.select-wrapper > div {\n position: relative;\n}\n\n.select-wrapper > div.closed {\n overflow: hidden;\n height: 0;\n}\n\n.select-wrapper .ul-scroll-wrapper {\n position: absolute;\n width: 100%;\n box-sizing: border-box;\n border-top: none;\n background: var(--color-form-background);\n box-shadow: var(--shadow-2);\n outline: none;\n}\n\n.select-wrapper .closed .ul-scroll-wrapper {\n z-index: 10;\n}\n\n.select-wrapper .open .ul-scroll-wrapper {\n z-index: 20;\n}\n\n.select-wrapper .ul-scroll-wrapper.fixed {\n position: static;\n}\n\n.select-wrapper z-list {\n --background-color-list-element: var(--color-form-background);\n --background-hover-color-list-element: var(--color-form-surface03);\n --background-active-color-list-element: var(--color-form-surface03);\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list {\n position: relative;\n overflow: auto;\n max-height: 240px;\n padding: var(--space-unit) calc(var(--space-unit) * 1.5);\n margin: calc(var(--space-unit) * -1) 0;\n outline: none;\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element[disabled] {\n color: var(--color-form-disabled03);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container {\n display: flex;\n align-items: center;\n padding: calc(var(--space-unit) / 2) var(--space-unit);\n column-gap: var(--space-unit);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content {\n margin-right: auto;\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon + .list-element-content {\n padding: calc(var(--space-unit) * 0.5) var(--space-unit);\n}\n\n:host([size=\"x-small\"])\n .select-wrapper\n .ul-scroll-wrapper\n z-list\n z-list-element\n .list-element-container\n .list-element-content {\n padding: 0;\n}\n\n:host([size=\"small\"]) .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n:host([size=\"x-small\"]) .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n}\n\n:host([size=\"x-small\"])\n .select-wrapper\n .ul-scroll-wrapper\n z-list\n z-list-element\n .list-element-container\n > z-icon\n + .list-element-content {\n padding: 0 var(--space-unit);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content.selected {\n font-weight: var(--font-sb);\n}\n\n.select-wrapper .ul-scroll-wrapper .no-results z-icon {\n margin-right: var(--space-unit);\n}\n\n.z-list-group-title {\n color: var(--color-form-default-text);\n}\n\n.reset-item {\n color: var(--color-form-active-primary);\n fill: var(--color-form-active-primary);\n}\n\n.reset-item-content {\n display: flex;\n align-items: center;\n}\n\n.reset-item.reset-item-margin .reset-item-content {\n margin-left: var(--space-unit);\n}\n\n.reset-item .reset-item-content > z-icon {\n margin-right: var(--space-unit);\n}\n\n.reset-item.hide {\n display: none;\n}\n\n.tree-list-reset-item {\n padding: var(--space-unit) 0;\n}\n\nz-list-element {\n position: relative;\n display: block;\n}\n\nz-list z-list-element::before {\n position: absolute;\n z-index: 100;\n top: 3px;\n left: -15px;\n width: 8px;\n height: 1em;\n border-bottom: 1px solid var(--color-form-disabled01-icon);\n border-left: 1px solid var(--color-form-disabled01-icon);\n content: \"\";\n cursor: pointer;\n}\n\nz-list z-list-element::after {\n position: absolute;\n z-index: 100;\n top: 5px;\n left: -15px;\n width: 8px;\n height: 100%;\n border-left: 1px solid var(--color-form-disabled01-icon);\n content: \"\";\n cursor: pointer;\n}\n\nz-list z-list-element:last-child::after {\n display: none;\n}\n\nz-list > z-list-element::before,\nz-list > z-list-element::after,\nz-list > z-list-group > z-list-element::before,\nz-list > z-list-group > z-list-element::after {\n display: none;\n}\n\nz-list > div.children-node {\n padding-left: calc(var(--space-unit) * 2);\n}\n\nz-list-element.grouped-tree-parent-node {\n padding-top: 0;\n padding-left: calc(var(--space-unit) * 2);\n}\n\nz-list-element > .list-element {\n display: flex;\n justify-content: space-between;\n padding: calc(var(--space-unit) * 1.25) 0;\n cursor: pointer;\n}\n\nz-list-element > .list-element:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\nz-list-element > .list-element .item.ellipsis {\n overflow: hidden;\n}\n\nz-list-element .list-element::after {\n position: absolute;\n top: 0;\n right: -1px;\n display: block;\n width: 100%;\n height: 40px;\n content: \"\";\n transform: translateX(-100%);\n}\n\nz-list-element.tree-search-item {\n padding-top: 0;\n}\n\nz-list-element.tree-search-item .list-element::after {\n position: absolute;\n top: 8px;\n right: -25px;\n display: block;\n width: 100%;\n height: 40px;\n content: \"\";\n transform: translateX(-100%);\n}\n\nz-list-element.grouped-tree-parent-node .list-element::after {\n position: absolute;\n top: 8px;\n right: -25px;\n display: block;\n width: 100%;\n height: 40px;\n content: \"\";\n transform: translateX(-100%);\n}\n\nz-list-element:not([disabled]) > .list-element:hover,\nz-list-element:not([disabled]) > .list-element:hover::after {\n z-index: -1;\n background-color: var(--color-form-surface03);\n cursor: pointer;\n}\n\n.item-label.selected {\n font-weight: bold;\n}\n\n.item.ellipsis {\n display: inline-block;\n overflow: hidden;\n max-width: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nz-list > z-list-element.grouped-tree-parent-node > .list-element:hover::after,\nz-list-element.tree-search-item .list-element:hover::after,\nz-list > z-list-group > z-list-element.grouped-tree-parent-node > .list-element:hover::after {\n position: absolute;\n z-index: -1;\n top: 8px;\n right: -18px;\n display: block;\n width: 100%;\n height: 40px;\n content: \"\";\n transform: translateX(-100%);\n}\n\nz-list-element > .list-element:hover::after {\n position: absolute;\n z-index: -1;\n top: 0;\n right: 0;\n display: block;\n width: 100%;\n height: 40px;\n content: \"\";\n transform: translateX(-100%);\n}\n\n.children-node z-list-element::before,\n.children-node z-list-element::after {\n left: -15px;\n}\n\n.children-node .children-node z-list-element::before,\n.children-node .children-node z-list-element::after {\n left: -15px;\n}\n\n.children-node > z-list-element {\n padding: 0;\n}\n","import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InputStatus, KeyboardCode, ListDividerType, ListSize, SelectItem} from \"../../beans\";\nimport {boolean, getClickedElement, getElementTree, randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-select\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZSelect {\n @Element() host: HTMLZSelectElement;\n\n /** the id of the input element */\n @Prop()\n htmlid = `id-${randomId()}`;\n\n /** the input select options */\n @Prop()\n items: SelectItem[] | string;\n\n /** the input name */\n @Prop()\n name?: string;\n\n /** the input label */\n @Prop()\n label?: string;\n\n /** the input aria-label */\n @Prop()\n ariaLabel = \"\";\n\n /** the input is disabled */\n @Prop()\n disabled?: boolean = false;\n\n /** the input is readonly */\n @Prop()\n readonly?: boolean = false;\n\n /** the input placeholder (optional) */\n @Prop()\n placeholder?: string;\n\n /** the input html title (optional) */\n @Prop()\n htmltitle?: string;\n\n /** the input status (optional) */\n @Prop()\n status?: InputStatus;\n\n /** input helper message (optional) - if set to `false` message won't be displayed */\n @Prop()\n message?: string | boolean = true;\n\n /** the input has autocomplete option */\n @Prop()\n autocomplete?: boolean = false;\n\n /** no result text message */\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /** */\n @Prop()\n hasGroupItems?: boolean;\n\n /** */\n @Prop()\n hasTreeItems?: boolean;\n\n /** If true and an item matches the search string, children of matching item are shown even if they don't match the search string */\n @Prop()\n showChildrenOfMatchingParent?: boolean;\n\n /** When fixed, it occupies space and pushes down next elements. */\n @Prop()\n isfixed?: boolean = false;\n\n /** */\n @Prop()\n resetItem?: string;\n\n /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n isOpen = false;\n\n @State()\n selectedItem: null | SelectItem = null;\n\n @State()\n focusedItemId: string;\n\n @State()\n searchString: null | string;\n\n @State()\n private flattenedList: {item: SelectItem; key: number}[] = [];\n\n private itemsList: SelectItem[] = [];\n\n private itemIdKeyMap: Record<string, number> = {};\n\n private readonly resetKey = -1;\n\n constructor() {\n this.toggleSelectUl = this.toggleSelectUl.bind(this);\n this.handleSelectFocus = this.handleSelectFocus.bind(this);\n }\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = this.getInitialItemsArray();\n\n this.selectedItem = this.findSelectedItem(this.itemsList);\n\n this.flattenedList = this.flattenTreeItems(this.itemsList);\n this.itemIdKeyMap = {};\n this.flattenedList.forEach(({item, key}) => {\n this.itemIdKeyMap[item.id] = key;\n });\n }\n\n @Listen(\"ariaDescendantFocus\")\n getFocusedItemHandler(e: CustomEvent): void {\n this.focusedItemId = (e.target as Element).id;\n }\n\n /** get the input selected options */\n @Method()\n async getSelectedItem(): Promise<SelectItem> {\n return this.selectedItem;\n }\n\n /** get the input value */\n @Method()\n async getValue(): Promise<string> {\n return this.getSelectedValue();\n }\n\n /** set the input value */\n @Method()\n async setValue(value: string | string[]): Promise<void> {\n let values: string[] = [];\n if (typeof value === \"string\") {\n values.push(value);\n } else {\n values = value;\n }\n\n this.itemsList = this.getInitialItemsArray();\n if (values.length) {\n this.updateSelection(this.itemsList, values[0]);\n }\n this.selectedItem = this.findSelectedItem(this.itemsList);\n }\n\n /** Emitted on select option selection, returns select id, selected item id */\n @Event()\n optionSelect: EventEmitter;\n\n private emitOptionSelect(): void {\n this.optionSelect.emit({\n id: this.htmlid,\n selected: this.getSelectedValue(),\n });\n }\n\n /** Emitted on reset selected item, returns select id, selected item id */\n @Event()\n resetSelect: EventEmitter;\n\n private emitResetSelect(): void {\n this.resetSelect.emit({\n id: this.htmlid,\n });\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.filterItems(this.searchString);\n }\n\n private getInitialItemsArray(): SelectItem[] {\n return typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n }\n\n private mapSelectedItemToItemsArray(): SelectItem[] {\n const initialItemsList = this.getInitialItemsArray();\n\n return initialItemsList.map((item: SelectItem) => {\n item.selected = item.id === this.selectedItem?.id;\n\n return item;\n });\n }\n\n private getSelectedValue(): string {\n return this.selectedItem?.id;\n }\n\n private filterItems(searchString: string): void {\n const prevList = this.mapSelectedItemToItemsArray();\n\n if (!searchString?.length) {\n this.itemsList = prevList;\n\n return;\n }\n\n if (this.hasTreeItems) {\n this.itemsList = this.filterTree(prevList, searchString, false);\n } else {\n this.itemsList = prevList\n .filter((item: SelectItem) => item.name.toUpperCase().includes(searchString.toUpperCase()))\n .map((item: SelectItem) => {\n item.name = this.getHighlightedText(item.name, searchString);\n\n return item;\n });\n }\n\n this.flattenedList = this.flattenTreeItems(this.itemsList);\n this.itemIdKeyMap = {};\n this.flattenedList.forEach(({item, key}) => {\n this.itemIdKeyMap[item.id] = key;\n });\n }\n\n private filterTree(items: SelectItem[], searchString: string, matchingParent: boolean): SelectItem[] {\n if (!items) {\n return [];\n }\n\n return items\n .map((item) => {\n const match = item.name.toUpperCase().includes(searchString.toUpperCase());\n\n const newItem: SelectItem = {...item};\n if (newItem.children && newItem.children.length > 0) {\n newItem.children = this.filterTree(newItem.children, searchString, match);\n }\n\n if (match) {\n newItem.name = this.getHighlightedText(newItem.name, searchString);\n }\n if (\n match ||\n (newItem.children && newItem.children.length > 0) ||\n (this.showChildrenOfMatchingParent && matchingParent)\n ) {\n return newItem;\n }\n\n return null;\n })\n .filter((item) => item !== null) as SelectItem[];\n }\n\n private getHighlightedText(text: string, search: string): string {\n const upperText = text.toUpperCase();\n const upperSearch = search.toUpperCase();\n const start = upperText.indexOf(upperSearch);\n\n if (start === -1) {\n return text;\n }\n\n const end = start + search.length;\n\n return text.substring(0, start) + `<strong>${text.substring(start, end)}</strong>` + text.substring(end);\n }\n\n private hasAutocomplete(): boolean {\n return boolean(this.autocomplete) === true;\n }\n\n private handleInputChange(e: CustomEvent): void {\n this.searchString = e.detail.value;\n if (!this.isOpen) {\n this.toggleSelectUl();\n }\n }\n\n private updateSelection(items: SelectItem[], selectedId: string): void {\n if (items) {\n items.forEach((item) => {\n item.selected = item.id === selectedId;\n if (item.children && item.children.length > 0) {\n this.updateSelection(item.children, selectedId);\n }\n });\n }\n }\n\n private findSelectedItem(items: SelectItem[]): SelectItem | null {\n if (items) {\n for (const item of items) {\n if (item.selected) {\n return item;\n }\n if (item.children && item.children.length > 0) {\n const found = this.findSelectedItem(item.children);\n if (found) {\n return found;\n }\n }\n }\n }\n\n return null;\n }\n\n private selectItem(selected: null | SelectItem): void {\n if (selected?.disabled) {\n return;\n }\n\n this.itemsList = this.getInitialItemsArray();\n\n if (selected) {\n this.updateSelection(this.itemsList, selected.id);\n }\n\n this.selectedItem = this.findSelectedItem(this.itemsList);\n this.emitOptionSelect();\n this.toggleSelectUl(true);\n\n if (this.searchString) {\n this.searchString = null;\n }\n }\n\n private flattenTreeItems(items: SelectItem[]): {item: SelectItem; key: number}[] {\n const flatItems: {item: SelectItem; key: number}[] = [];\n let index = 0;\n\n const flatten = (subItems: SelectItem[]): void => {\n subItems.forEach((itm) => {\n flatItems.push({item: itm, key: index++});\n if (itm.children && itm.children.length > 0) {\n flatten(itm.children);\n }\n });\n };\n\n if (items) {\n flatten(items);\n }\n\n return flatItems;\n }\n\n private arrowsSelectNav(e: KeyboardEvent, idOrReset: string | number): void {\n const showResetIcon = this.resetItem && !!this.selectedItem;\n const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n\n if (!arrows.includes(e.key as KeyboardCode)) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const flatItems = [...this.flattenedList].filter((f) => !f.item.disabled);\n\n if (this.resetItem && showResetIcon) {\n flatItems.unshift({\n item: {id: \"__RESET_ITEM__\"} as SelectItem,\n key: this.resetKey,\n });\n }\n\n let currentIndex: number;\n if (typeof idOrReset === \"number\") {\n currentIndex = flatItems.findIndex((f) => f.key === idOrReset);\n } else {\n const k = this.itemIdKeyMap[idOrReset];\n currentIndex = flatItems.findIndex((f) => f.key === k);\n }\n\n if (!this.isOpen) {\n this.toggleSelectUl();\n\n if (currentIndex === -1) {\n currentIndex = -1;\n }\n }\n\n const lastIndex = flatItems.length - 1;\n\n let newIndex = currentIndex;\n\n if (e.key === KeyboardCode.ARROW_DOWN) {\n do {\n newIndex = newIndex === lastIndex ? 0 : newIndex + 1;\n } while (flatItems[newIndex].item.disabled);\n } else {\n do {\n newIndex = newIndex <= 0 ? lastIndex : newIndex - 1;\n } while (flatItems[newIndex].item.disabled);\n }\n\n this.focusSelectItem(flatItems[newIndex].key);\n }\n\n private focusSelectItem(key: number): void {\n this.host.querySelector<HTMLDivElement>(`#${this.htmlid}_key_${key}`)?.focus();\n }\n\n private toggleSelectUl(selfFocusOnClose = false): void {\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (!this.isOpen) {\n document.addEventListener(\"click\", this.handleSelectFocus);\n document.addEventListener(\"keyup\", this.handleSelectFocus);\n } else {\n document.removeEventListener(\"click\", this.handleSelectFocus);\n document.removeEventListener(\"keyup\", this.handleSelectFocus);\n if (selfFocusOnClose) {\n (this.host.querySelector(`#${this.htmlid}_input`) as HTMLInputElement)?.focus();\n }\n }\n\n this.focusedItemId = \"\";\n this.isOpen = !this.isOpen;\n }\n\n private handleInputClick(e: MouseEvent | KeyboardEvent): void {\n if ((e.target as HTMLElement).closest(\".reset-icon\")) {\n e.stopPropagation();\n\n return;\n }\n\n this.toggleSelectUl();\n }\n\n private handleSelectFocus(e: MouseEvent | KeyboardEvent): void {\n const clickedElement = getClickedElement();\n if (clickedElement?.hasAttribute(\"disabled\")) {\n return;\n }\n\n if (e instanceof KeyboardEvent && e.key === KeyboardCode.ESC) {\n e.stopPropagation();\n\n return this.toggleSelectUl(true);\n }\n\n if (e instanceof KeyboardEvent && (e.key === KeyboardCode.ENTER || e.key !== KeyboardCode.TAB)) {\n return;\n }\n\n if (\n !getElementTree(clickedElement).find(\n (elem: HTMLElement) => elem.nodeName.toLowerCase() === \"z-input\" && elem.id === `${this.htmlid}_input`\n )\n ) {\n this.toggleSelectUl(e instanceof MouseEvent);\n }\n }\n\n private scrollToLetter(letter: string): void {\n const foundItem = this.itemsList.findIndex((item: SelectItem) => item.name.charAt(0) === letter);\n if (foundItem > -1) {\n this.focusSelectItem(this.itemIdKeyMap[this.itemsList[foundItem].id]);\n }\n }\n\n private renderInput(): HTMLZInputElement {\n return (\n <z-input\n class={{\n \"active-select\": this.isOpen,\n \"cursor-select\": !this.autocomplete,\n }}\n id={`${this.htmlid}_input`}\n htmlid={`${this.htmlid}_select_input`}\n placeholder={this.placeholder}\n value={!this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, \"\") : null}\n label={this.label}\n autocomplete=\"off\"\n aria-expanded={this.isOpen ? \"true\" : \"false\"}\n aria-label={this.ariaLabel}\n aria-controls={`${this.htmlid}_list`}\n aria-autocomplete={this.hasAutocomplete() ? \"list\" : \"none\"}\n aria-activedescendant={this.isOpen ? this.focusedItemId : \"\"}\n icon={this.isOpen ? \"caret-up\" : \"caret-down\"}\n hasclearicon={this.hasAutocomplete()}\n message={false}\n name={this.name}\n disabled={this.disabled}\n readonly={this.readonly || (!this.hasAutocomplete() && this.isOpen)}\n status={this.isOpen ? undefined : this.status}\n role=\"combobox\"\n size={this.size}\n onClick={(e: MouseEvent) => {\n this.handleInputClick(e);\n }}\n onKeyUp={(e: KeyboardEvent) => {\n e.preventDefault();\n this.toggleSelectUl();\n }}\n onKeyDown={(e: KeyboardEvent) => {\n const current = this.selectedItem\n ? this.itemIdKeyMap[this.selectedItem.id]\n : this.resetItem\n ? this.resetKey\n : \"\";\n\n return this.arrowsSelectNav(e, current);\n }}\n onInputChange={(e: CustomEvent) => {\n this.handleInputChange(e);\n }}\n onKeyPress={(e: KeyboardEvent) => {\n if (!this.hasAutocomplete()) {\n e.preventDefault();\n this.scrollToLetter(String.fromCharCode(e.keyCode));\n }\n }}\n />\n );\n }\n\n private renderSelectUl(): HTMLDivElement {\n return (\n <div class={this.isOpen ? \"open\" : \"closed\"}>\n <div\n class={{\n \"ul-scroll-wrapper\": true,\n \"fixed\": this.isfixed,\n }}\n >\n <z-list\n role=\"listbox\"\n aria-label={this.ariaLabel || this.label}\n tabindex={this.disabled || this.readonly || !this.isOpen ? -1 : 0}\n id={`${this.htmlid}_list`}\n aria-multiselectable={false}\n size={this.listSizeType()}\n class={{\n \"disabled\": this.disabled,\n \"readonly\": this.readonly,\n [`input-${this.status}`]: !this.isOpen && !!this.status,\n \"z-scrollbar\": true,\n }}\n >\n {this.resetItem && this.renderResetItem()}\n {this.renderSelectUlItems()}\n </z-list>\n </div>\n </div>\n );\n }\n\n private renderResetItem(): HTMLZListElementElement {\n return (\n <z-list-element\n class={{\n \"hide\": !this.selectedItem || !this.resetItem,\n \"reset-item\": true,\n \"reset-item-margin\": !this.hasGroupItems,\n }}\n clickable={true}\n disabled={false}\n dividerType={ListDividerType.ELEMENT}\n role=\"option\"\n tabindex=\"0\"\n aria-selected=\"false\"\n id={`${this.htmlid}_key_${this.resetKey}`}\n size={this.hasTreeItems ? ListSize.MEDIUM : this.listSizeType()}\n onClickItem={() => {\n this.selectedItem = null;\n this.searchString = null;\n this.emitResetSelect();\n }}\n onKeyDown={(e: KeyboardEvent) => this.arrowsSelectNav(e, this.resetKey)}\n >\n <div\n class={{\n \"reset-item-content\": true,\n \"tree-list-reset-item\": this.hasTreeItems,\n }}\n >\n <z-icon name=\"multiply-circled\" />\n <span>{this.resetItem}</span>\n </div>\n </z-list-element>\n );\n }\n\n private renderItem(item: SelectItem, lastItem: boolean): HTMLZListElementElement {\n const thisItemKey = this.itemIdKeyMap[item.id];\n\n return (\n <z-list-element\n clickable={!item.disabled}\n disabled={item.disabled}\n dividerType={lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT}\n role=\"option\"\n tabindex={item.disabled || !this.isOpen ? -1 : 0}\n aria-selected={item.selected ? \"true\" : \"false\"}\n id={`${this.htmlid}_key_${thisItemKey}`}\n size={this.listSizeType()}\n onClickItem={() => this.selectItem(item)}\n onKeyDown={(e: KeyboardEvent) => this.arrowsSelectNav(e, thisItemKey)}\n >\n <div class=\"list-element-container\">\n <div\n class={{\n \"selected\": !!item.selected,\n \"list-element-content\": true,\n }}\n innerHTML={item.name}\n />\n {item.icon && <z-tag icon={item.icon}></z-tag>}\n </div>\n </z-list-element>\n );\n }\n\n private listSizeType(): ListSize {\n if (this.hasTreeItems) {\n return ListSize.NONE;\n }\n\n if (this.size === ControlSize.SMALL || this.size === ControlSize.X_SMALL) {\n return ListSize.SMALL;\n }\n\n return ListSize.MEDIUM;\n }\n\n //eslint-disable-next-line\n private renderSelectUlItems(): any {\n if (!this.itemsList.length) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasGroupItems && !this.hasTreeItems) {\n return this.renderSelectGroupItems();\n } else if (this.hasGroupItems && this.hasTreeItems) {\n return this.renderGroupedTree();\n }\n\n return this.itemsList.map((item: SelectItem, index, array) => {\n const isLastItem = index === array.length - 1;\n const parentHasSiblings = array.length > 1;\n\n if (this.hasTreeItems) {\n return this.renderTreeItems(item, isLastItem, parentHasSiblings, true);\n }\n\n return this.renderItem(item, isLastItem);\n });\n }\n\n private renderTreeItems(\n item: SelectItem,\n isLastChild: boolean,\n parentHasSiblings: boolean,\n isTopLevel?: boolean\n ): HTMLZListElementElement[] {\n const thisItemKey = this.itemIdKeyMap[item.id];\n\n const hasDivider = this.hasGroupItems\n ? undefined\n : this.hasGroupItems\n ? isLastChild && !parentHasSiblings\n ? ListDividerType.ELEMENT\n : undefined\n : isTopLevel && parentHasSiblings && !isLastChild\n ? ListDividerType.ELEMENT\n : undefined;\n\n return (\n <z-list-element\n clickable={!item.disabled}\n disabled={item.disabled}\n class={{\n \"grouped-tree-parent-node\": this.hasGroupItems && !!item.children?.length,\n \"tree-search-item\": this.hasGroupItems && isTopLevel && !item.children?.length && !!this.searchString,\n }}\n size={this.listSizeType()}\n dividerType={hasDivider}\n hasTreeItems={this.hasTreeItems}\n >\n <div\n id={`${this.htmlid}_key_${thisItemKey}`}\n role=\"option\"\n class=\"list-element\"\n tabIndex={0}\n onClick={() => this.selectItem(item)}\n onKeyDown={(e: KeyboardEvent) => {\n this.arrowsSelectNav(e, thisItemKey);\n if (e.key === KeyboardCode.ENTER) {\n this.selectItem(item);\n }\n }}\n >\n <span class=\"item ellipsis\">\n <span\n class={{\n \"item-label\": true,\n \"selected\": !!item.selected,\n }}\n title={item.name}\n innerHTML={item.selected ? `<strong>${item.name}</strong>` : item.name}\n />\n </span>\n {item.icon && <z-tag icon={item.icon}></z-tag>}\n </div>\n {item.children && item.children.length > 0 ? (\n <z-list>\n <div class=\"children-node\">\n {item.children.map((child, index, arr) =>\n this.renderTreeItems(\n child,\n index === arr.length - 1,\n arr.length > 1,\n false // isTopLevel = false for children\n )\n )}\n </div>\n </z-list>\n ) : null}\n </z-list-element>\n );\n }\n\n private renderGroupedTree(): HTMLZListGroupElement[] {\n const grouped = this.itemsList.reduce(\n (acc, item) => {\n const category = item.category || \"Altra categoria\";\n acc[category] = acc[category] || [];\n acc[category].push(item);\n\n return acc;\n },\n {} as Record<string, SelectItem[]>\n );\n\n return Object.entries(grouped).map(([category, items], index, entries) => {\n const parentHasSiblings = Object.values(grouped).some((groupItems) => groupItems.length > 1);\n // const parentHasSiblings = items.length > 1;\n\n return (\n <z-list-group\n divider-type={index === entries.length - 1 ? undefined : ListDividerType.ELEMENT}\n hasTreeItems={true}\n >\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n >\n {category}\n </span>\n <z-list>\n {items.map((item, i, arr) => [\n this.renderTreeItems(item, i === arr.length - 1, parentHasSiblings, true),\n i < arr.length - 1 ? (\n <z-divider\n key={`divider-${i}`}\n style={{zIndex: \"100\", height: \"var(--border-size-small)\"}}\n />\n ) : null,\n ])}\n </z-list>\n {index !== entries.length - 1 && <z-divider style={{zIndex: \"100\", height: \"var(--border-size-small)\"}} />}\n </z-list-group>\n );\n });\n }\n\n private renderSelectGroupItems(): HTMLZListElementElement[] {\n const newData = this.itemsList.reduce(\n (group, item, index, array) => {\n const {category} = item;\n const lastItem = array.length === index + 1;\n const zListItem = this.renderItem(item, lastItem);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n },\n {} as Record<string, HTMLZListElementElement[]>\n );\n\n return Object.entries(newData).map(([key, value]) => {\n return (\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n });\n }\n\n private renderNoSearchResults(): HTMLZListElementElement {\n return (\n <z-list-element\n color=\"color-primary01\"\n class=\"no-results\"\n size={this.hasTreeItems ? ListSize.MEDIUM : this.listSizeType()}\n >\n <z-icon\n name=\"multiply-circle\"\n fill=\"color-primary01-icon\"\n />\n {this.noresultslabel}\n </z-list-element>\n );\n }\n\n private renderMessage(): HTMLZInputMessageElement {\n if (boolean(this.message) === false) {\n return;\n }\n\n return (\n <z-input-message\n message={boolean(this.message) === true ? undefined : (this.message as string)}\n status={this.status}\n class={this.size}\n disabled={this.disabled}\n />\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div class=\"select-wrapper\">\n {this.renderInput()}\n {this.renderSelectUl()}\n {this.renderMessage()}\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as o,h as e,a as n,g as a}from"./p-75c4a726.js";import{r as s}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as o,h as e,a as n,g as a}from"./p-75c4a726.js";import{r as s}from"./p-625e2cee.js";import"./p-f19f12b1.js";import"./p-748fa3ae.js";const r=":host{position:relative;display:grid;width:100%;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));--columns:1}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}:host(:hover){position:relative;z-index:10;box-shadow:0 4px 4px -2px var(--shadow-color-base, rgb(0 0 0 / 20%))}:host(:focus){position:relative;z-index:20;box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}.z-tr--focus-overlay{position:absolute;z-index:30;right:0;left:0;width:100%;border-radius:4px;box-shadow:none;inset:0;outline:none;pointer-events:none;transition:box-shadow 0.2s}:host(:focus) .z-tr--focus-overlay{box-shadow:0 0 0 2px var(--shadow-focus-primary),\n var(--shadow-focus-primary);outline:none}:host(:focus) ::slotted(*){border-bottom:none}:host(:focus) .z-tr--expand-button-container{border-bottom:none}";const i=r;const d=class{constructor(e){t(this,e);this.expand=o(this,"expand",7);this.expandable=false;this.expanded=false;this.expandableContentId=undefined}updateColumns(){const t=Array.from(this.host.querySelectorAll("z-td, z-th"));if(this.expandable){t.pop()}const o=t.map((t=>t.colspan||1)).reduce(((t,o)=>t+o),0);this.host.style.setProperty("--columns",`${o}`);if(this.expandable){const o=t.pop();o.id=o.id||`z-tr-expandable-content-${s()}`;this.expandableContentId=o.id}}onRowClick(t){const o=t.target.closest(".prevent-expand");if(!this.expandable||o){return}this.expanded=!this.expanded;this.expand.emit({expanded:this.expanded})}onKeyDown(t){if(!this.expandable){return}const o=document.activeElement;if(o!==this.host){return}if(t.key==="Enter"||t.key===" "){t.preventDefault();this.expanded=!this.expanded;this.expand.emit({expanded:this.expanded})}}componentWillLoad(){this.updateColumns()}render(){return e(n,{key:"5a8cbf39900a7569b0fb31d225be6fade59c82ea",role:"row",tabIndex:0,expanded:this.expanded,onClick:this.onRowClick.bind(this),onKeyDown:this.onKeyDown.bind(this)},e("div",{key:"75f7a74a6eda8f50d40beedbe387da74d58c276b",class:"z-tr--focus-overlay","aria-hidden":"true"}),e("div",{key:"d34b5aa1778f3d830fd80354c79cd93a9b703737",class:"z-tr--expand-button-container"},this.expandable&&e("button",{key:"fef99c968e191fe7970665b9a45721fada207db0",tabIndex:-1,"aria-expanded":this.expanded?"true":"false","aria-label":this.expanded?"Comprimi riga":"Espandi riga","aria-controls":this.expandableContentId,type:"button"},e("z-icon",{key:"f1cf676da370f0c2500914decdc5f09e1e647b7f",name:this.expanded?"minus-circled":"plus-circled"}))),e("slot",{key:"cd09d8ed8cf0a33137d4d1d91ec9720227f359ba",onSlotchange:this.updateColumns.bind(this)}))}get host(){return a(this)}static get watchers(){return{expandable:["updateColumns"]}}};d.style=i;export{d as Z};
|
|
2
|
+
//# sourceMappingURL=p-43bc482a.js.map
|
|
@@ -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":[]}
|