@zanichelli/albe-web-components 16.2.0 → 16.2.2
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 +9 -0
- package/dist/cjs/{index-5cc0f0ca.js → index-3a070c6b.js} +4 -3
- package/dist/cjs/index-3a070c6b.js.map +1 -0
- package/dist/cjs/{index-066b8da0.js → index-597156d1.js} +2 -2
- package/dist/cjs/{index-066b8da0.js.map → index-597156d1.js.map} +1 -1
- package/dist/cjs/{index-98822eac.js → index-f0159789.js} +3 -3
- package/dist/cjs/{index-98822eac.js.map → index-f0159789.js.map} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/z-app-header_12.cjs.entry.js +62 -6
- package/dist/cjs/z-app-header_12.cjs.entry.js.map +1 -1
- package/dist/cjs/z-table.cjs.entry.js +3 -3
- package/dist/cjs/z-td.cjs.entry.js +1 -1
- package/dist/cjs/z-th.cjs.entry.js +1 -1
- package/dist/cjs/z-tr.cjs.entry.js +3 -3
- package/dist/collection/components/table/cells/z-td/index.js +27 -2
- package/dist/collection/components/table/cells/z-td/index.js.map +1 -1
- package/dist/collection/components/table/cells/z-td/styles.css +4 -0
- package/dist/collection/components/table/cells/z-th/styles.css +4 -0
- package/dist/collection/components/z-searchbar/index.js +63 -5
- package/dist/collection/components/z-searchbar/index.js.map +1 -1
- package/dist/collection/components/z-searchbar/index.spec.js +19 -19
- package/dist/collection/components/z-searchbar/index.spec.js.map +1 -1
- package/dist/collection/components/z-searchbar/styles.css +9 -0
- package/dist/components/index23.js +65 -8
- package/dist/components/index23.js.map +1 -1
- package/dist/components/z-td.js +5 -3
- package/dist/components/z-td.js.map +1 -1
- package/dist/components/z-th.js +1 -1
- package/dist/components/z-th.js.map +1 -1
- package/dist/esm/{index-292b4dd2.js → index-230d44a5.js} +5 -4
- package/dist/esm/index-230d44a5.js.map +1 -0
- package/dist/esm/{index-18018bb5.js → index-7a28ff39.js} +2 -2
- package/dist/esm/{index-18018bb5.js.map → index-7a28ff39.js.map} +1 -1
- package/dist/esm/{index-50bbb22e.js → index-fd7edd22.js} +3 -3
- package/dist/esm/{index-50bbb22e.js.map → index-fd7edd22.js.map} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/z-app-header_12.entry.js +62 -6
- package/dist/esm/z-app-header_12.entry.js.map +1 -1
- package/dist/esm/z-table.entry.js +3 -3
- package/dist/esm/z-td.entry.js +1 -1
- package/dist/esm/z-th.entry.js +1 -1
- package/dist/esm/z-tr.entry.js +3 -3
- package/dist/types/components/table/cells/z-td/index.d.ts +5 -1
- package/dist/types/components/z-searchbar/index.d.ts +3 -0
- package/dist/types/components.d.ts +8 -0
- package/dist/web-components-library/p-0794ae16.entry.js +2 -0
- package/dist/web-components-library/p-26b5c84d.js +2 -0
- package/{www/build/p-8de7ea6e.js.map → dist/web-components-library/p-26b5c84d.js.map} +1 -1
- package/dist/web-components-library/{p-c6b269ce.entry.js → p-4f7dd068.entry.js} +2 -2
- package/dist/web-components-library/p-7d7c5344.js +2 -0
- package/dist/web-components-library/p-7d7c5344.js.map +1 -0
- package/dist/web-components-library/{p-999762b5.entry.js → p-862f5338.entry.js} +2 -2
- package/dist/web-components-library/p-862f5338.entry.js.map +1 -0
- package/dist/web-components-library/p-a7292e1c.entry.js +2 -0
- package/dist/web-components-library/{p-ae94e377.js → p-aa0f083b.js} +2 -2
- package/dist/web-components-library/p-ed2c8484.entry.js +2 -0
- package/dist/web-components-library/web-components-library.css +1 -1
- 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/p-0794ae16.entry.js +2 -0
- package/www/build/{p-82ff5b56.css → p-0cd14493.css} +1 -1
- package/www/build/p-1ad8ebce.js +2 -0
- package/www/build/p-26b5c84d.js +2 -0
- package/{dist/web-components-library/p-8de7ea6e.js.map → www/build/p-26b5c84d.js.map} +1 -1
- package/www/build/{p-c6b269ce.entry.js → p-4f7dd068.entry.js} +2 -2
- package/www/build/p-7d7c5344.js +2 -0
- package/www/build/p-7d7c5344.js.map +1 -0
- package/www/build/{p-999762b5.entry.js → p-862f5338.entry.js} +2 -2
- package/www/build/p-862f5338.entry.js.map +1 -0
- package/www/build/p-a7292e1c.entry.js +2 -0
- package/www/build/{p-ae94e377.js → p-aa0f083b.js} +2 -2
- package/www/build/p-ed2c8484.entry.js +2 -0
- package/www/build/web-components-library.css +1 -1
- 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/index-5cc0f0ca.js.map +0 -1
- package/dist/esm/index-292b4dd2.js.map +0 -1
- package/dist/web-components-library/p-1edbac5f.entry.js +0 -2
- package/dist/web-components-library/p-8de7ea6e.js +0 -2
- package/dist/web-components-library/p-999762b5.entry.js.map +0 -1
- package/dist/web-components-library/p-9f2a7cf0.js +0 -2
- package/dist/web-components-library/p-9f2a7cf0.js.map +0 -1
- package/dist/web-components-library/p-bf2a057d.entry.js +0 -2
- package/dist/web-components-library/p-e0323da3.entry.js +0 -2
- package/www/build/p-14fe85ba.js +0 -2
- package/www/build/p-1edbac5f.entry.js +0 -2
- package/www/build/p-8de7ea6e.js +0 -2
- package/www/build/p-999762b5.entry.js.map +0 -1
- package/www/build/p-9f2a7cf0.js +0 -2
- package/www/build/p-9f2a7cf0.js.map +0 -1
- package/www/build/p-bf2a057d.entry.js +0 -2
- package/www/build/p-e0323da3.entry.js +0 -2
- /package/dist/web-components-library/{p-1edbac5f.entry.js.map → p-0794ae16.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-c6b269ce.entry.js.map → p-4f7dd068.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-bf2a057d.entry.js.map → p-a7292e1c.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-ae94e377.js.map → p-aa0f083b.js.map} +0 -0
- /package/dist/web-components-library/{p-e0323da3.entry.js.map → p-ed2c8484.entry.js.map} +0 -0
- /package/www/build/{p-1edbac5f.entry.js.map → p-0794ae16.entry.js.map} +0 -0
- /package/www/build/{p-c6b269ce.entry.js.map → p-4f7dd068.entry.js.map} +0 -0
- /package/www/build/{p-bf2a057d.entry.js.map → p-a7292e1c.entry.js.map} +0 -0
- /package/www/build/{p-ae94e377.js.map → p-aa0f083b.js.map} +0 -0
- /package/www/build/{p-e0323da3.entry.js.map → p-ed2c8484.entry.js.map} +0 -0
|
@@ -1772,7 +1772,7 @@ const ZOffcanvas = class {
|
|
|
1772
1772
|
};
|
|
1773
1773
|
ZOffcanvas.style = ZOffcanvasStyle0;
|
|
1774
1774
|
|
|
1775
|
-
const stylesCss$1 = ":host{--z-searchbar-tag-text-color:var(--color-primary03);--z-searchbar-tag-bg:var(--color-hover-primary);--z-searchbar-item-height:44px;z-index:15;display:flex;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}:host::part(list-item-container){display:block;min-height:unset;padding:0}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.results-wrapper{position:absolute;top:calc(100% - 1px);left:0;width:100%;padding:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;background:var(--color-surface01)}.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.results::-webkit-scrollbar-track{background-color:transparent}.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}.results .category-heading>*{display:block}.results .category-heading>.category{color:var(--color-text05);font-style:italic}.results .category-heading>.subcategory{margin-top:var(--space-unit);color:var(--color-default-text);text-transform:uppercase}.results z-list-element{position:relative;display:block}z-list-element>.item-search{padding:var(--space-unit) 0}z-list z-list-element::before{position:absolute;z-index:100;top:5px;left:-20px;width:8px;height:1em;border-bottom:1px solid var(--color-disabled01-icon);border-left:1px solid var(--color-disabled01-icon);content:\"\";cursor:pointer}z-list z-list-element::after{position:absolute;z-index:100;top:5px;left:-20px;width:8px;height:100%;border-left:1px solid var(--color-disabled01-icon);content:\"\";cursor:pointer}z-list z-list-element:last-child::after{display:none}z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 3)}.results z-list-element>.list-element{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1.25) 0;cursor:pointer}.results z-list-element>.list-element .item.ellipsis{overflow:hidden}.results z-list-element .list-element::after{position:absolute;top:0;right:0;display:block;width:100%;height:44px;content:\"\";transform:translateX(-100%)}.results z-list-element>.list-element:hover,.results z-list-element>.list-element:hover::after{background-color:var(--color-surface02);cursor:pointer}.results z-list-element>.list-element>z-tag{border:1px solid var(--gray800);font-size:var(--font-size-1);font-weight:var(--font-sb);--z-tag-bg:var(--z-searchbar-tag-bg);--z-tag-text-color:var(--z-searchbar-tag-text-color)}.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;color:var(--color-default-text);column-gap:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon);font-size:var(--font-size-2);line-height:var(--font-size-6)}.results .item.ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item>.item-label mark{background:var(--color-primary03)}.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}.results .item-show-all{text-align:center}.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}.results .item.ellipsis>.item-label{height:24px}.results z-list-element>.list-element>z-tag{min-width:max-content}}@media (min-width: 1152px){.results .item{cursor:pointer}.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}:host([size=\"small\"]) .results :is(.item,.category-heading),:host([size=\"x-small\"]) .results :is(.item,.category-heading){font-size:var(--font-size-2)}:host([size=\"small\"]) .results .item:not(.has-category),:host([size=\"x-small\"]) .results .item:not(.has-category){--z-icon-height:16px;--z-icon-width:16px}:host([size=\"small\"]) z-list-element>.list-element,:host([size=\"small\"]) z-list-element>.item-search{padding:calc(var(--space-unit) * 0.75) 0}:host([size=\"x-small\"]) z-list-element>.list-element,:host([size=\"x-small\"]) z-list-element>.item-search{padding:calc(var(--space-unit) / 2) 0}:host([size=\"small\"]) z-list-element .list-element::after{height:36px}:host([size=\"x-small\"]) z-list-element .list-element::after{height:32px}";
|
|
1775
|
+
const stylesCss$1 = ":host{--z-searchbar-tag-text-color:var(--color-primary03);--z-searchbar-tag-bg:var(--color-hover-primary);--z-searchbar-item-height:44px;z-index:15;display:flex;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}:host::part(list-item-container){display:block;min-height:unset;padding:0}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.results-wrapper{position:absolute;top:calc(100% - 1px);left:0;width:100%;padding:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;background:var(--color-surface01)}.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.results::-webkit-scrollbar-track{background-color:transparent}.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}.results .category-heading>*{display:block}.results .category-heading>.category{color:var(--color-text05);font-style:italic}.results .category-heading>.subcategory{margin-top:var(--space-unit);color:var(--color-default-text);text-transform:uppercase}.results z-list-element{position:relative;display:block}z-list-element>.item-search{padding:var(--space-unit) 0}z-list z-list-element::before{position:absolute;z-index:100;top:5px;left:-20px;width:8px;height:1em;border-bottom:1px solid var(--color-disabled01-icon);border-left:1px solid var(--color-disabled01-icon);content:\"\";cursor:pointer}z-list z-list-element::after{position:absolute;z-index:100;top:5px;left:-20px;width:8px;height:100%;border-left:1px solid var(--color-disabled01-icon);content:\"\";cursor:pointer}z-list z-list-element:last-child::after{display:none}z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 3)}.results z-list-element>.list-element{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1.25) 0;cursor:pointer}.results z-list-element>.list-element:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.results z-list-element>.list-element .item.ellipsis{overflow:hidden}.results z-list-element .list-element::after{position:absolute;top:0;right:0;display:block;width:100%;height:44px;content:\"\";transform:translateX(-100%)}.results z-list-element .list-element.focused.hovered::after{padding-left:6px}.results z-list-element>.list-element:hover,.results z-list-element>.list-element:hover::after{background-color:var(--color-surface02);cursor:pointer}.results z-list-element>.list-element>z-tag{border:1px solid var(--gray800);font-size:var(--font-size-1);font-weight:var(--font-sb);--z-tag-bg:var(--z-searchbar-tag-bg);--z-tag-text-color:var(--z-searchbar-tag-text-color)}.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;color:var(--color-default-text);column-gap:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon);font-size:var(--font-size-2);line-height:var(--font-size-6)}.results .item.ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item>.item-label mark{background:var(--color-primary03)}.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}.results .item-show-all{text-align:center}.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}.results .item.ellipsis>.item-label{height:24px}.results z-list-element>.list-element>z-tag{min-width:max-content}}@media (min-width: 1152px){.results .item{cursor:pointer}.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}:host([size=\"small\"]) .results :is(.item,.category-heading),:host([size=\"x-small\"]) .results :is(.item,.category-heading){font-size:var(--font-size-2)}:host([size=\"small\"]) .results .item:not(.has-category),:host([size=\"x-small\"]) .results .item:not(.has-category){--z-icon-height:16px;--z-icon-width:16px}:host([size=\"small\"]) z-list-element>.list-element,:host([size=\"small\"]) z-list-element>.item-search{padding:calc(var(--space-unit) * 0.75) 0}:host([size=\"x-small\"]) z-list-element>.list-element,:host([size=\"x-small\"]) z-list-element>.item-search{padding:calc(var(--space-unit) / 2) 0}:host([size=\"small\"]) z-list-element .list-element::after{height:36px}:host([size=\"x-small\"]) z-list-element .list-element::after{height:32px}";
|
|
1776
1776
|
const ZSearchbarStyle0 = stylesCss$1;
|
|
1777
1777
|
|
|
1778
1778
|
const ZSearchbar = class {
|
|
@@ -1782,6 +1782,7 @@ const ZSearchbar = class {
|
|
|
1782
1782
|
this.searchTyping = index.createEvent(this, "searchTyping", 7);
|
|
1783
1783
|
this.searchItemClick = index.createEvent(this, "searchItemClick", 7);
|
|
1784
1784
|
this.resultsItemsList = null;
|
|
1785
|
+
this.items = [];
|
|
1785
1786
|
this.htmlid = `searchbar-${utils.randomId()}`;
|
|
1786
1787
|
this.preventSubmit = false;
|
|
1787
1788
|
this.value = undefined;
|
|
@@ -1821,10 +1822,16 @@ const ZSearchbar = class {
|
|
|
1821
1822
|
}
|
|
1822
1823
|
watchSearchString() {
|
|
1823
1824
|
this.emitSearchTyping(this.searchString);
|
|
1825
|
+
this.items = [];
|
|
1824
1826
|
if (!this.searchString) {
|
|
1825
1827
|
this.currResultsCount = this.resultsCount;
|
|
1826
1828
|
}
|
|
1827
1829
|
}
|
|
1830
|
+
watchShowResults() {
|
|
1831
|
+
if (!this.showResults) {
|
|
1832
|
+
this.items = [];
|
|
1833
|
+
}
|
|
1834
|
+
}
|
|
1828
1835
|
disconnectedCallback() {
|
|
1829
1836
|
this.resizeObserver.disconnect();
|
|
1830
1837
|
}
|
|
@@ -1910,7 +1917,10 @@ const ZSearchbar = class {
|
|
|
1910
1917
|
renderInput() {
|
|
1911
1918
|
return (index.h("z-input", { ref: (val) => {
|
|
1912
1919
|
this.inputRef = val;
|
|
1913
|
-
}, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) =>
|
|
1920
|
+
}, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
|
|
1921
|
+
utils.handleEnterKeydSubmit(e, () => this.handleSubmit());
|
|
1922
|
+
this.handleArrowsNavigation(e);
|
|
1923
|
+
}, value: this.value, ariaLabel: this.placeholder, size: this.size, tabIndex: 0 }));
|
|
1914
1924
|
}
|
|
1915
1925
|
renderButton() {
|
|
1916
1926
|
if (!this.showSearchButton) {
|
|
@@ -1963,8 +1973,53 @@ const ZSearchbar = class {
|
|
|
1963
1973
|
});
|
|
1964
1974
|
return listGroups;
|
|
1965
1975
|
}
|
|
1976
|
+
handleArrowsNavigation(e) {
|
|
1977
|
+
const currentElement = e.target;
|
|
1978
|
+
const arrows = [index$1.KeyboardCode.ARROW_DOWN, index$1.KeyboardCode.ARROW_UP];
|
|
1979
|
+
if (!arrows.includes(e.key)) {
|
|
1980
|
+
e.preventDefault();
|
|
1981
|
+
return;
|
|
1982
|
+
}
|
|
1983
|
+
if (!this.items.length) {
|
|
1984
|
+
const list = this.element.shadowRoot.querySelector("z-list");
|
|
1985
|
+
if (!list) {
|
|
1986
|
+
return;
|
|
1987
|
+
}
|
|
1988
|
+
this.items = Array.from(list.querySelectorAll(".list-element"));
|
|
1989
|
+
}
|
|
1990
|
+
this.items.forEach((item) => item.classList.contains("focused") && item.classList.remove("focused"));
|
|
1991
|
+
const currentIndex = this.items.indexOf(currentElement);
|
|
1992
|
+
if (e.key === index$1.KeyboardCode.ARROW_DOWN) {
|
|
1993
|
+
e.preventDefault();
|
|
1994
|
+
const nextIndex = currentIndex + 1;
|
|
1995
|
+
if (nextIndex < this.items.length) {
|
|
1996
|
+
this.items[nextIndex].focus();
|
|
1997
|
+
this.items[nextIndex].classList.add("focused");
|
|
1998
|
+
}
|
|
1999
|
+
}
|
|
2000
|
+
if (e.key === index$1.KeyboardCode.ARROW_UP) {
|
|
2001
|
+
e.preventDefault();
|
|
2002
|
+
const prevIndex = currentIndex - 1;
|
|
2003
|
+
if (prevIndex < 0) {
|
|
2004
|
+
this.element.shadowRoot.querySelector("input").focus();
|
|
2005
|
+
this.element.shadowRoot
|
|
2006
|
+
.querySelector("input")
|
|
2007
|
+
.setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);
|
|
2008
|
+
}
|
|
2009
|
+
if (prevIndex >= 0) {
|
|
2010
|
+
this.items[prevIndex].focus();
|
|
2011
|
+
this.items[prevIndex].classList.add("focused");
|
|
2012
|
+
}
|
|
2013
|
+
}
|
|
2014
|
+
}
|
|
1966
2015
|
renderItem(item, key, divider) {
|
|
1967
|
-
return (index.h("z-list-element", { id: `list-item-${this.htmlid}-${key}`, role: "option",
|
|
2016
|
+
return (index.h("z-list-element", { id: `list-item-${this.htmlid}-${key}`, tabIndex: 0, role: "option", dividerType: divider ? index$1.ListDividerType.ELEMENT : undefined, onKeyDown: (e) => this.handleArrowsNavigation(e) }, index.h("div", { class: "list-element", tabIndex: 0, onClick: () => this.emitSearchItemClick(item), onKeyDown: (e) => utils.handleEnterKeydSubmit(e, () => this.emitSearchItemClick(item)), onMouseEnter: (e) => {
|
|
2017
|
+
const currentElement = e.target;
|
|
2018
|
+
currentElement.classList.add("hovered");
|
|
2019
|
+
}, onMouseLeave: (e) => {
|
|
2020
|
+
const currentElement = e.target;
|
|
2021
|
+
currentElement.classList.contains("hovered") && currentElement.classList.remove("hovered");
|
|
2022
|
+
} }, index.h("span", { class: "item ellipsis" }, (item === null || item === void 0 ? void 0 : item.icon) && (index.h("z-icon", { class: "item-icon", name: item.icon })), index.h("span", { class: "item-label", title: item.label, innerHTML: this.renderItemLabel(item.label) })), (item === null || item === void 0 ? void 0 : item.tag) && index.h("z-tag", { icon: item.tag.icon }, !this.isMobile ? item.tag.text : "")), item.children && item.children.length > 0 ? (index.h("z-list", null, index.h("div", { class: "children-node" }, item.children.map((child, index) => this.renderItem(child, index, false))))) : null));
|
|
1968
2023
|
}
|
|
1969
2024
|
renderItemLabel(label) {
|
|
1970
2025
|
if (!this.searchString) {
|
|
@@ -1982,7 +2037,7 @@ const ZSearchbar = class {
|
|
|
1982
2037
|
if (!this.autocomplete || this.preventSubmit || !this.searchString) {
|
|
1983
2038
|
return null;
|
|
1984
2039
|
}
|
|
1985
|
-
return (index.h("z-list-element", { role: "option",
|
|
2040
|
+
return (index.h("z-list-element", { role: "option", dividerType: hasDivider ? index$1.ListDividerType.ELEMENT : undefined, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.handleArrowsNavigation(e) }, index.h("div", { tabindex: 0, onClick: () => this.emitSearchSubmit(), onKeyDown: (e) => utils.handleEnterKeydSubmit(e, () => this.emitSearchSubmit()), class: "list-element" }, index.h("span", { class: "item item-search" }, index.h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), index.h("span", { class: "item-label", innerHTML: this.searchHelperLabel.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))));
|
|
1986
2041
|
}
|
|
1987
2042
|
renderShowAllResults() {
|
|
1988
2043
|
var _a, _b;
|
|
@@ -1995,14 +2050,15 @@ const ZSearchbar = class {
|
|
|
1995
2050
|
return (index.h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0), color: "color-primary01" }, index.h("div", { class: "item-show-all" }, "Vedi tutti i risultati")));
|
|
1996
2051
|
}
|
|
1997
2052
|
render() {
|
|
1998
|
-
return (index.h(index.Host, { key: '
|
|
2053
|
+
return (index.h(index.Host, { key: '24d85cddae24efbb5b46874f9b4b10708942e10e', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, index.h("div", { key: '114d10bf9e947cccc6d69f571cc0de8db8cf3586', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
|
|
1999
2054
|
}
|
|
2000
2055
|
get element() { return index.getElement(this); }
|
|
2001
2056
|
static get watchers() { return {
|
|
2002
2057
|
"resultsItems": ["watchItems"],
|
|
2003
2058
|
"resultsCount": ["watchResultsCount"],
|
|
2004
2059
|
"value": ["watchValue"],
|
|
2005
|
-
"searchString": ["watchSearchString"]
|
|
2060
|
+
"searchString": ["watchSearchString"],
|
|
2061
|
+
"showResults": ["watchShowResults"]
|
|
2006
2062
|
}; }
|
|
2007
2063
|
};
|
|
2008
2064
|
ZSearchbar.style = ZSearchbarStyle0;
|