@zanichelli/albe-web-components 16.2.1 → 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 +7 -0
- 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/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/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/types/components/z-searchbar/index.d.ts +3 -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/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-82ff5b56.css → p-0cd14493.css} +1 -1
- package/www/build/p-1ad8ebce.js +2 -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/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/web-components-library/p-999762b5.entry.js.map +0 -1
- package/www/build/p-3d2abab6.js +0 -2
- package/www/build/p-999762b5.entry.js.map +0 -1
|
@@ -1768,7 +1768,7 @@ const ZOffcanvas = class {
|
|
|
1768
1768
|
};
|
|
1769
1769
|
ZOffcanvas.style = ZOffcanvasStyle0;
|
|
1770
1770
|
|
|
1771
|
-
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}";
|
|
1771
|
+
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}";
|
|
1772
1772
|
const ZSearchbarStyle0 = stylesCss$1;
|
|
1773
1773
|
|
|
1774
1774
|
const ZSearchbar = class {
|
|
@@ -1778,6 +1778,7 @@ const ZSearchbar = class {
|
|
|
1778
1778
|
this.searchTyping = createEvent(this, "searchTyping", 7);
|
|
1779
1779
|
this.searchItemClick = createEvent(this, "searchItemClick", 7);
|
|
1780
1780
|
this.resultsItemsList = null;
|
|
1781
|
+
this.items = [];
|
|
1781
1782
|
this.htmlid = `searchbar-${randomId()}`;
|
|
1782
1783
|
this.preventSubmit = false;
|
|
1783
1784
|
this.value = undefined;
|
|
@@ -1817,10 +1818,16 @@ const ZSearchbar = class {
|
|
|
1817
1818
|
}
|
|
1818
1819
|
watchSearchString() {
|
|
1819
1820
|
this.emitSearchTyping(this.searchString);
|
|
1821
|
+
this.items = [];
|
|
1820
1822
|
if (!this.searchString) {
|
|
1821
1823
|
this.currResultsCount = this.resultsCount;
|
|
1822
1824
|
}
|
|
1823
1825
|
}
|
|
1826
|
+
watchShowResults() {
|
|
1827
|
+
if (!this.showResults) {
|
|
1828
|
+
this.items = [];
|
|
1829
|
+
}
|
|
1830
|
+
}
|
|
1824
1831
|
disconnectedCallback() {
|
|
1825
1832
|
this.resizeObserver.disconnect();
|
|
1826
1833
|
}
|
|
@@ -1906,7 +1913,10 @@ const ZSearchbar = class {
|
|
|
1906
1913
|
renderInput() {
|
|
1907
1914
|
return (h("z-input", { ref: (val) => {
|
|
1908
1915
|
this.inputRef = val;
|
|
1909
|
-
}, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) =>
|
|
1916
|
+
}, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
|
|
1917
|
+
handleEnterKeydSubmit(e, () => this.handleSubmit());
|
|
1918
|
+
this.handleArrowsNavigation(e);
|
|
1919
|
+
}, value: this.value, ariaLabel: this.placeholder, size: this.size, tabIndex: 0 }));
|
|
1910
1920
|
}
|
|
1911
1921
|
renderButton() {
|
|
1912
1922
|
if (!this.showSearchButton) {
|
|
@@ -1959,8 +1969,53 @@ const ZSearchbar = class {
|
|
|
1959
1969
|
});
|
|
1960
1970
|
return listGroups;
|
|
1961
1971
|
}
|
|
1972
|
+
handleArrowsNavigation(e) {
|
|
1973
|
+
const currentElement = e.target;
|
|
1974
|
+
const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
|
|
1975
|
+
if (!arrows.includes(e.key)) {
|
|
1976
|
+
e.preventDefault();
|
|
1977
|
+
return;
|
|
1978
|
+
}
|
|
1979
|
+
if (!this.items.length) {
|
|
1980
|
+
const list = this.element.shadowRoot.querySelector("z-list");
|
|
1981
|
+
if (!list) {
|
|
1982
|
+
return;
|
|
1983
|
+
}
|
|
1984
|
+
this.items = Array.from(list.querySelectorAll(".list-element"));
|
|
1985
|
+
}
|
|
1986
|
+
this.items.forEach((item) => item.classList.contains("focused") && item.classList.remove("focused"));
|
|
1987
|
+
const currentIndex = this.items.indexOf(currentElement);
|
|
1988
|
+
if (e.key === KeyboardCode.ARROW_DOWN) {
|
|
1989
|
+
e.preventDefault();
|
|
1990
|
+
const nextIndex = currentIndex + 1;
|
|
1991
|
+
if (nextIndex < this.items.length) {
|
|
1992
|
+
this.items[nextIndex].focus();
|
|
1993
|
+
this.items[nextIndex].classList.add("focused");
|
|
1994
|
+
}
|
|
1995
|
+
}
|
|
1996
|
+
if (e.key === KeyboardCode.ARROW_UP) {
|
|
1997
|
+
e.preventDefault();
|
|
1998
|
+
const prevIndex = currentIndex - 1;
|
|
1999
|
+
if (prevIndex < 0) {
|
|
2000
|
+
this.element.shadowRoot.querySelector("input").focus();
|
|
2001
|
+
this.element.shadowRoot
|
|
2002
|
+
.querySelector("input")
|
|
2003
|
+
.setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);
|
|
2004
|
+
}
|
|
2005
|
+
if (prevIndex >= 0) {
|
|
2006
|
+
this.items[prevIndex].focus();
|
|
2007
|
+
this.items[prevIndex].classList.add("focused");
|
|
2008
|
+
}
|
|
2009
|
+
}
|
|
2010
|
+
}
|
|
1962
2011
|
renderItem(item, key, divider) {
|
|
1963
|
-
return (h("z-list-element", { id: `list-item-${this.htmlid}-${key}`, role: "option",
|
|
2012
|
+
return (h("z-list-element", { id: `list-item-${this.htmlid}-${key}`, tabIndex: 0, role: "option", dividerType: divider ? ListDividerType.ELEMENT : undefined, onKeyDown: (e) => this.handleArrowsNavigation(e) }, h("div", { class: "list-element", tabIndex: 0, onClick: () => this.emitSearchItemClick(item), onKeyDown: (e) => handleEnterKeydSubmit(e, () => this.emitSearchItemClick(item)), onMouseEnter: (e) => {
|
|
2013
|
+
const currentElement = e.target;
|
|
2014
|
+
currentElement.classList.add("hovered");
|
|
2015
|
+
}, onMouseLeave: (e) => {
|
|
2016
|
+
const currentElement = e.target;
|
|
2017
|
+
currentElement.classList.contains("hovered") && currentElement.classList.remove("hovered");
|
|
2018
|
+
} }, h("span", { class: "item ellipsis" }, (item === null || item === void 0 ? void 0 : item.icon) && (h("z-icon", { class: "item-icon", name: item.icon })), h("span", { class: "item-label", title: item.label, innerHTML: this.renderItemLabel(item.label) })), (item === null || item === void 0 ? void 0 : item.tag) && h("z-tag", { icon: item.tag.icon }, !this.isMobile ? item.tag.text : "")), item.children && item.children.length > 0 ? (h("z-list", null, h("div", { class: "children-node" }, item.children.map((child, index) => this.renderItem(child, index, false))))) : null));
|
|
1964
2019
|
}
|
|
1965
2020
|
renderItemLabel(label) {
|
|
1966
2021
|
if (!this.searchString) {
|
|
@@ -1978,7 +2033,7 @@ const ZSearchbar = class {
|
|
|
1978
2033
|
if (!this.autocomplete || this.preventSubmit || !this.searchString) {
|
|
1979
2034
|
return null;
|
|
1980
2035
|
}
|
|
1981
|
-
return (h("z-list-element", { role: "option",
|
|
2036
|
+
return (h("z-list-element", { role: "option", dividerType: hasDivider ? ListDividerType.ELEMENT : undefined, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.handleArrowsNavigation(e) }, h("div", { tabindex: 0, onClick: () => this.emitSearchSubmit(), onKeyDown: (e) => handleEnterKeydSubmit(e, () => this.emitSearchSubmit()), class: "list-element" }, h("span", { class: "item item-search" }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("span", { class: "item-label", innerHTML: this.searchHelperLabel.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))));
|
|
1982
2037
|
}
|
|
1983
2038
|
renderShowAllResults() {
|
|
1984
2039
|
var _a, _b;
|
|
@@ -1991,14 +2046,15 @@ const ZSearchbar = class {
|
|
|
1991
2046
|
return (h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0), color: "color-primary01" }, h("div", { class: "item-show-all" }, "Vedi tutti i risultati")));
|
|
1992
2047
|
}
|
|
1993
2048
|
render() {
|
|
1994
|
-
return (h(Host, { key: '
|
|
2049
|
+
return (h(Host, { key: '24d85cddae24efbb5b46874f9b4b10708942e10e', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '114d10bf9e947cccc6d69f571cc0de8db8cf3586', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
|
|
1995
2050
|
}
|
|
1996
2051
|
get element() { return getElement(this); }
|
|
1997
2052
|
static get watchers() { return {
|
|
1998
2053
|
"resultsItems": ["watchItems"],
|
|
1999
2054
|
"resultsCount": ["watchResultsCount"],
|
|
2000
2055
|
"value": ["watchValue"],
|
|
2001
|
-
"searchString": ["watchSearchString"]
|
|
2056
|
+
"searchString": ["watchSearchString"],
|
|
2057
|
+
"showResults": ["watchShowResults"]
|
|
2002
2058
|
}; }
|
|
2003
2059
|
};
|
|
2004
2060
|
ZSearchbar.style = ZSearchbarStyle0;
|