@zanichelli/albe-web-components 6.6.6 → 6.6.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/dist/cjs/z-searchbar.cjs.entry.js +16 -6
- package/dist/collection/components/inputs/z-searchbar/index.js +15 -5
- package/dist/collection/components/inputs/z-searchbar/styles.css +51 -27
- package/dist/esm/z-searchbar.entry.js +16 -6
- package/dist/types/components/inputs/z-searchbar/index.d.ts +1 -0
- package/dist/web-components-library/p-e21f87a4.entry.js +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/package.json +1 -1
- package/www/build/{p-275801c6.css → p-4b159cbd.css} +1 -1
- package/www/build/{p-0f83591f.js → p-924dc99b.js} +1 -1
- package/www/build/p-e21f87a4.entry.js +1 -0
- package/www/build/web-components-library.css +1 -1
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/web-components-library/p-47251a0f.entry.js +0 -1
- package/www/build/p-47251a0f.entry.js +0 -1
package/www/index.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Albe test application</title> <link rel="stylesheet" type="text/css" href="/build/p-
|
|
1
|
+
<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Albe test application</title> <link rel="stylesheet" type="text/css" href="/build/p-4b159cbd.css"> <link rel="modulepreload" href="/build/p-924dc99b.js"><script type="module" src="/build/p-924dc99b.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body> <header> <z-app-header> <h1 slot="title">Albe test app</h1> </z-app-header> </header> <main></main> </body></html>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as s,H as e}from"./p-d17ebc2f.js";import{k as r,B as a}from"./p-a23e9115.js";import{r as o,h as l}from"./p-8ebe4adf.js";import"./p-d69e14fb.js";const h=class{constructor(s){t(this,s),this.searchSubmit=i(this,"searchSubmit",7),this.searchTyping=i(this,"searchTyping",7),this.searchItemClick=i(this,"searchItemClick",7),this.htmlid=`searchbar-${o()}`,this.preventSubmit=!1,this.autocomplete=!1,this.autocompleteMinChars=3,this.resultsEllipsis=!0,this.searchHelperLabel="Cerca {searchString}",this.sortResultsItems=!1,this.searchString="",this.currResultsCount=0,this.showResults=!1,this.resultsItemsList=null}emitSearchSubmit(){this.searchSubmit.emit(this.searchString)}emitSearchTyping(t){this.searchTyping.emit(t)}emitSearchItemClick(t){this.searchItemClick.emit(t)}watchItems(){this.resultsItemsList=this.getResultsItemsList()}watchResultsCount(){this.currResultsCount=this.resultsCount}watchValue(){this.handleInput(this.value)}watchSearchString(){this.emitSearchTyping(this.searchString),this.searchString||(this.currResultsCount=this.resultsCount)}clickListener(t){this.handleOutsideClick(t)}componentWillLoad(){this.resultsItemsList=this.getResultsItemsList(),this.currResultsCount=this.resultsCount,this.handleInput(this.value)}getResultsItemsList(){return"string"==typeof this.resultsItems?JSON.parse(this.resultsItems):this.resultsItems}getGroupedItems(t){const i={};return t.forEach((t=>{var s;const e=`${null==t?void 0:t.category}${null==t?void 0:t.subcategory}`;i[e]=null!==(s=i[e])&&void 0!==s?s:{category:null==t?void 0:t.category,subcategory:null==t?void 0:t.subcategory,items:[]},i[e].items.push(t)})),this.sortResultsItems?Object.keys(i).sort().reduce(((t,s)=>(t[s]=Object.assign(Object.assign({},i[s]),{items:i[s].items.sort(((t,i)=>{const s=t.label.toUpperCase(),e=i.label.toUpperCase();return s<e?-1:s>e?1:0}))}),t)),{}):i}checkResultsCount(t){return!this.currResultsCount||t<this.currResultsCount}handleStopTyping(t){t.stopPropagation(),this.handleInput(t.detail.value)}handleInput(t){(null==t?void 0:t.length)>=this.autocompleteMinChars?this.searchString=t:this.searchString&&(this.searchString="")}handleSubmit(){this.preventSubmit||this.emitSearchSubmit()}handleOutsideClick(t){const i=t.composedPath(),s=i.find((t=>"Z-SEARCHBAR"===t.nodeName));this.showResults=!(!s||s.htmlid!==this.htmlid||!i.find((t=>{var i;return"Z-INPUT"===(null==t?void 0:t.nodeName)||(null===(i=null==t?void 0:t.classList)||void 0===i?void 0:i.contains("results"))})))}renderInput(){return s("z-input",{message:!1,placeholder:this.placeholder,onStopTyping:t=>this.handleStopTyping(t),onKeyUp:t=>l(t,(()=>this.handleSubmit())),value:this.value})}renderButton(){return this.preventSubmit?null:s("z-button",{variant:a.PRIMARY,onClick:()=>this.handleSubmit()},"CERCA")}renderResults(){return this.showResults&&this.autocomplete&&this.searchString&&!(this.searchString.length<this.autocompleteMinChars)&&this.resultsItemsList&&this.resultsItemsList.length?s("div",{class:"results"},s("z-list",{role:"listbox",id:`list-${this.htmlid}`},this.renderSearchHelper(),this.renderItems(),this.renderShowAllResults())):null}renderItems(){const t=this.getGroupedItems(this.resultsItemsList),i=[];let e=0;return Object.values(t).forEach(((t,a,o)=>{if(this.checkResultsCount(e)){const l=[];t.items.forEach(((t,i,s)=>{this.checkResultsCount(e)&&l.push(this.renderItem(t,i,!(a===o.length-1&&i===s.length-1))),e++})),l.length&&i.push(s("z-list-group",{"divider-type":r.ELEMENT},this.renderItemCategory(t),l))}})),i}renderItem(t,i,e){return s("z-list-element",{id:`list-item-${this.htmlid}-${i}`,role:"option",tabindex:0,dividerType:e?r.ELEMENT:void 0,clickable:!0,onClickItem:()=>this.emitSearchItemClick(t)},s("span",{class:{item:!0,ellipsis:this.resultsEllipsis,"has-category":!!t.category}},(null==t?void 0:t.icon)&&s("z-icon",{class:"item-icon",name:t.icon}),s("span",{class:"item-label",title:t.label,innerHTML:this.renderItemLabel(t.label)})))}renderItemLabel(t){return this.searchString?t.replace(new RegExp(this.searchString,"gmi"),(t=>`<mark>${t}</mark>`)):t}renderItemCategory(t){return(null==t?void 0:t.category)?s("span",{class:"category-heading",slot:"header-title"},s("span",{class:"category"},t.category),(null==t?void 0:t.subcategory)&&s("span",{class:"subcategory"},t.subcategory)):null}renderSearchHelper(){return this.autocomplete&&!this.preventSubmit&&this.searchString?s("z-list-element",{role:"option",tabindex:0,dividerType:r.ELEMENT,clickable:!0,id:`list-item-${this.htmlid}-search`,onClickItem:()=>this.emitSearchSubmit()},s("span",{class:"item item-search"},s("z-icon",{class:"search-icon",name:"left-magnifying-glass"}),s("span",{class:"item-label",innerHTML:this.searchHelperLabel.replace("{searchString}",`<mark>${this.searchString}</mark>`)}))):null}renderShowAllResults(){var t,i;return!this.currResultsCount||!this.searchString||!(null===(t=this.resultsItemsList)||void 0===t?void 0:t.length)||this.currResultsCount>=(null===(i=this.resultsItemsList)||void 0===i?void 0:i.length)?null:s("z-list-element",{role:"option",tabindex:0,clickable:!0,id:`list-item-${this.htmlid}-show-all`,onClickItem:()=>this.currResultsCount=0},s("span",{class:"item-show-all"},s("z-link",null,"Vedi tutti i risultati")))}render(){return s(e,{onFocus:()=>this.showResults=!0,onClick:t=>this.handleOutsideClick(t)},s("div",{class:{"has-submit":!this.preventSubmit,"has-results":this.autocomplete}},this.renderInput(),this.renderResults(),this.renderButton()))}static get watchers(){return{resultsItems:["watchItems"],resultsCount:["watchResultsCount"],value:["watchValue"],searchString:["watchSearchString"]}}};h.style=":host{position:relative;z-index:5;display:block;width:inherit;height:44px;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:absolute;z-index:10;display:grid;width:100%;gap:0 calc(var(--space-unit) * 2);grid-template-columns:auto;grid-template-rows:auto}:host>div.has-submit{grid-template-columns:auto min-content}:host>div.has-results{grid-template-rows:auto auto}:host>div>z-input{width:100%;grid-column:1;grid-row:1}:host>div>z-button{grid-column:2;grid-row:1}:host>div>div.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:var(--space-unit) calc(var(--space-unit) * 1.5);padding-bottom:0;border:var(--border-size-small) solid var(--color-surface03);border-top:none;margin-top:-1px;background:var(--color-surface01);grid-column:1;grid-row:2;scrollbar-color:var(--color-primary01) transparent}:host>div>div.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)}:host>div>div.results::-webkit-scrollbar-track{background-color:transparent}:host>div>div.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}:host>div>div.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}:host>div>div.results .category-heading>*{display:block}:host>div>div.results span.category-heading>span.category{color:var(--color-text05);font-style:italic}:host>div>div.results span.category-heading>span.subcategory{margin-top:8px;color:var(--color-text01);text-transform:uppercase}:host>div>div.results z-list-element{display:block}:host>div>div.results z-list-element:focus{box-shadow:var(--shadow-focus-primary)}:host>div>div.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;color:var(--color-text01);fill:var(--color-icon02);font-size:var(--font-size-2);line-height:var(--font-size-3)}:host>div>div.results .item.ellipsis>span.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>div>div.results .item>span.item-label>mark{background:var(--color-primary03)}:host>div>div.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}:host>div>div.results .item>z-icon.item-icon{padding:2px 0;margin-right:calc(var(--space-unit) * 1.5)}:host>div>div.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}:host>div>div.results .item.item-search>z-icon{margin-right:var(--space-unit)}:host>div>div.results .item-show-all{display:block;text-align:center}@media (min-width: 768px){:host>div>div.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results .item{--z-icon-height:12px;--z-icon-width:12px;font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}:host>div>div.results .item.ellipsis>span.item-label{height:24px}:host>div>div.results .item>z-icon.item-icon{padding:6px 0}}@media (min-width: 1152px){:host>div>div.results .item{cursor:pointer}}";export{h as z_searchbar}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as s,H as e}from"./p-d17ebc2f.js";import{k as r,B as a}from"./p-a23e9115.js";import{r as o,h as l}from"./p-8ebe4adf.js";import"./p-d69e14fb.js";const h=class{constructor(s){t(this,s),this.searchSubmit=i(this,"searchSubmit",7),this.searchTyping=i(this,"searchTyping",7),this.searchItemClick=i(this,"searchItemClick",7),this.htmlid=`searchbar-${o()}`,this.preventSubmit=!1,this.autocomplete=!1,this.autocompleteMinChars=3,this.resultsEllipsis=!0,this.searchHelperLabel="Cerca {searchString}",this.sortResultsItems=!1,this.searchString="",this.currResultsCount=0,this.showResults=!1,this.resultsItemsList=null}emitSearchSubmit(){this.searchSubmit.emit(this.searchString)}emitSearchTyping(t){this.searchTyping.emit(t)}emitSearchItemClick(t){this.searchItemClick.emit(t)}watchItems(){this.resultsItemsList=this.getResultsItemsList()}watchResultsCount(){this.currResultsCount=this.resultsCount}watchValue(){this.handleInput(this.value)}watchSearchString(){this.emitSearchTyping(this.searchString),this.searchString||(this.currResultsCount=this.resultsCount)}clickListener(t){this.handleOutsideClick(t)}componentWillLoad(){this.resultsItemsList=this.getResultsItemsList(),this.currResultsCount=this.resultsCount,this.handleInput(this.value)}getResultsItemsList(){return"string"==typeof this.resultsItems?JSON.parse(this.resultsItems):this.resultsItems}getGroupedItems(t){const i={};return t.forEach((t=>{var s;const e=`${null==t?void 0:t.category}${null==t?void 0:t.subcategory}`;i[e]=null!==(s=i[e])&&void 0!==s?s:{category:null==t?void 0:t.category,subcategory:null==t?void 0:t.subcategory,items:[]},i[e].items.push(t)})),this.sortResultsItems?Object.keys(i).sort().reduce(((t,s)=>(t[s]=Object.assign(Object.assign({},i[s]),{items:i[s].items.sort(((t,i)=>{const s=t.label.toUpperCase(),e=i.label.toUpperCase();return s<e?-1:s>e?1:0}))}),t)),{}):i}checkResultsCount(t){return!this.currResultsCount||t<this.currResultsCount}handleStopTyping(t){t.stopPropagation(),this.handleInput(t.detail.value)}handleInput(t){(null==t?void 0:t.length)>=this.autocompleteMinChars?this.searchString=t:this.searchString&&(this.searchString="")}handleSubmit(){this.preventSubmit||this.emitSearchSubmit()}handleOutsideClick(t){const i=t.composedPath(),s=i.find((t=>"Z-SEARCHBAR"===t.nodeName));this.showResults=!(!s||s.htmlid!==this.htmlid||!i.find((t=>{var i;return"Z-INPUT"===(null==t?void 0:t.nodeName)||(null===(i=null==t?void 0:t.classList)||void 0===i?void 0:i.contains("results"))})))}renderInput(){return s("z-input",{message:!1,placeholder:this.placeholder,onStopTyping:t=>this.handleStopTyping(t),onKeyUp:t=>l(t,(()=>this.handleSubmit())),value:this.value})}renderButton(){return this.preventSubmit?null:s("z-button",{variant:a.PRIMARY,onClick:()=>this.handleSubmit()},"CERCA")}renderResults(){return this.showResults&&this.autocomplete&&this.searchString&&!(this.searchString.length<this.autocompleteMinChars)&&this.resultsItemsList&&this.resultsItemsList.length?s("div",{class:"results"},s("z-list",{role:"listbox",id:`list-${this.htmlid}`},this.renderSearchHelper(),this.renderItems(),this.renderShowAllResults())):null}renderItems(){const t=this.getGroupedItems(this.resultsItemsList),i=[];let e=0;return Object.values(t).forEach(((t,a,o)=>{if(this.checkResultsCount(e)){const l=[];t.items.forEach(((t,i,s)=>{this.checkResultsCount(e)&&l.push(this.renderItem(t,i,!(a===o.length-1&&i===s.length-1))),e++})),l.length&&i.push(s("z-list-group",{"divider-type":r.ELEMENT},this.renderItemCategory(t),l))}})),i}renderItem(t,i,e){return s("z-list-element",{id:`list-item-${this.htmlid}-${i}`,role:"option",tabindex:0,dividerType:e?r.ELEMENT:void 0,clickable:!0,onClickItem:()=>this.emitSearchItemClick(t)},s("span",{class:{item:!0,ellipsis:this.resultsEllipsis,"has-category":!!t.category}},(null==t?void 0:t.icon)&&s("z-icon",{class:"item-icon",name:t.icon}),s("span",{class:"item-label",title:t.label,innerHTML:this.renderItemLabel(t.label)})))}renderItemLabel(t){return this.searchString?t.replace(new RegExp(this.searchString,"gmi"),(t=>`<mark>${t}</mark>`)):t}renderItemCategory(t){return(null==t?void 0:t.category)?s("span",{class:"category-heading",slot:"header-title"},s("span",{class:"category"},t.category),(null==t?void 0:t.subcategory)&&s("span",{class:"subcategory"},t.subcategory)):null}renderSearchHelper(){return this.autocomplete&&!this.preventSubmit&&this.searchString?s("z-list-element",{role:"option",tabindex:0,dividerType:r.ELEMENT,clickable:!0,id:`list-item-${this.htmlid}-search`,onClickItem:()=>this.emitSearchSubmit()},s("span",{class:"item item-search"},s("z-icon",{class:"search-icon",name:"left-magnifying-glass"}),s("span",{class:"item-label",innerHTML:this.searchHelperLabel.replace("{searchString}",`<mark>${this.searchString}</mark>`)}))):null}renderShowAllResults(){var t,i;return!this.currResultsCount||!this.searchString||!(null===(t=this.resultsItemsList)||void 0===t?void 0:t.length)||this.currResultsCount>=(null===(i=this.resultsItemsList)||void 0===i?void 0:i.length)?null:s("z-list-element",{role:"option",tabindex:0,clickable:!0,id:`list-item-${this.htmlid}-show-all`,onClickItem:()=>this.currResultsCount=0},s("span",{class:"item-show-all"},s("z-link",null,"Vedi tutti i risultati")))}render(){return s(e,{onFocus:()=>this.showResults=!0,onClick:t=>this.handleOutsideClick(t)},s("div",{class:{"has-submit":!this.preventSubmit,"has-results":this.autocomplete}},this.renderInput(),this.renderResults(),this.renderButton()))}static get watchers(){return{resultsItems:["watchItems"],resultsCount:["watchResultsCount"],value:["watchValue"],searchString:["watchSearchString"]}}};h.style=":host{position:relative;z-index:5;display:block;width:inherit;height:44px;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:absolute;z-index:10;display:grid;width:100%;gap:0 calc(var(--space-unit) * 2);grid-template-columns:auto;grid-template-rows:auto}:host>div.has-submit{grid-template-columns:auto min-content}:host>div.has-results{grid-template-rows:auto auto}:host>div>z-input{width:100%;grid-column:1;grid-row:1}:host>div>z-button{grid-column:2;grid-row:1}:host>div>div.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:var(--space-unit) calc(var(--space-unit) * 1.5);padding-bottom:0;border:var(--border-size-small) solid var(--color-surface03);border-top:none;margin-top:-1px;background:var(--color-surface01);grid-column:1;grid-row:2;scrollbar-color:var(--color-primary01) transparent}:host>div>div.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)}:host>div>div.results::-webkit-scrollbar-track{background-color:transparent}:host>div>div.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}:host>div>div.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}:host>div>div.results .category-heading>*{display:block}:host>div>div.results span.category-heading>span.category{color:var(--color-text05);font-style:italic}:host>div>div.results span.category-heading>span.subcategory{margin-top:8px;color:var(--color-text01);text-transform:uppercase}:host>div>div.results z-list-element{display:block}:host>div>div.results z-list-element:focus{box-shadow:var(--shadow-focus-primary)}:host>div>div.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;color:var(--color-text01);fill:var(--color-icon02);font-size:var(--font-size-2);line-height:var(--font-size-3)}:host>div>div.results .item.ellipsis>span.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>div>div.results .item>span.item-label>mark{background:var(--color-primary03)}:host>div>div.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}:host>div>div.results .item>z-icon.item-icon{padding:2px 0;margin-right:calc(var(--space-unit) * 1.5)}:host>div>div.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}:host>div>div.results .item.item-search>z-icon{margin-right:var(--space-unit)}:host>div>div.results .item-show-all{display:block;text-align:center}@media (min-width: 768px){:host>div>div.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results .item{--z-icon-height:12px;--z-icon-width:12px;font-size:var(--font-size-3);line-height:var(--font-size-6)}:host>div>div.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}:host>div>div.results .item.ellipsis>span.item-label{height:24px}:host>div>div.results .item>z-icon.item-icon{padding:6px 0}}@media (min-width: 1152px){:host>div>div.results .item{cursor:pointer}}";export{h as z_searchbar}
|