@fluid-topics/ft-filter 1.1.62 → 1.1.63

package/build/ft-filter-level.d.ts

@@ -9,6 +9,7 @@ export declare class FtFilterLevel extends FtLitElement {
     multivalued: boolean;
     disabled: boolean;
     hideSelectedOptions: boolean;
+    displayCount: boolean;
     preventNavigation: boolean;
     private filter;
     private moreValuesButtonLabel;

package/build/ft-filter-level.js

@@ -23,6 +23,7 @@ class FtFilterLevel extends FtLitElement {
         this.multivalued = false;
         this.disabled = false;
         this.hideSelectedOptions = false;
+        this.displayCount = false;
         this.preventNavigation = false;
         this.filter = "";
         this.moreValuesButtonLabel = "More";
@@ -52,52 +53,52 @@ class FtFilterLevel extends FtLitElement {
         return html `
             <div class="ft-filter-level--container ${this.disabled ? "ft-filter--disabled" : ""}">
                 ${this.parent == null ? null : html `
-                            <div tabindex="0"
-                                 part="controls go-back"
-                                 class="ft-filter-level--go-back"
-                                 ?disabled=${this.disabled}
-                                 @keyup=${this.goBackOnKeyPress}
-                                 @click=${this.goBackOnClick}>
-                                <ft-ripple></ft-ripple>
-                                <ft-icon>thin_arrow_left</ft-icon>
-                                <ft-typography variant="body2">${this.parent.label}</ft-typography>
-                            </div>
-                        `}
+                        <div tabindex="0"
+                             part="controls go-back"
+                             class="ft-filter-level--go-back"
+                             ?disabled=${this.disabled}
+                             @keyup=${this.goBackOnKeyPress}
+                             @click=${this.goBackOnClick}>
+                            <ft-ripple></ft-ripple>
+                            <ft-icon>thin_arrow_left</ft-icon>
+                            <ft-typography variant="body2">${this.parent.label}</ft-typography>
+                        </div>
+                    `}
                 ${this.options.length === 0 && this.noValuesLabel ? html `
-                            <ft-typography class="ft-filter-level--no-values" element="span" variant="body2">
-                                ${this.noValuesLabel}
-                            </ft-typography>
-                        ` : nothing}
+                        <ft-typography class="ft-filter-level--no-values" element="span" variant="body2">
+                            ${this.noValuesLabel}
+                        </ft-typography>
+                    ` : nothing}
                 ${repeat(limitedOptions, option => option.value, option => {
             var _a;
             return html `
-                                    <div class="ft-filter-level--option" part="options">
-                                        ${this.multivalued
+                            <div class="ft-filter-level--option" part="options">
+                                ${this.multivalued
                 ? this.buildMultiValuedOption(option)
                 : this.buildMonoValuedOption(option)}
-                                        ${this.preventNavigation || option.selected || ((_a = option.subOptions) !== null && _a !== void 0 ? _a : []).length === 0
+                                ${this.preventNavigation || option.selected || ((_a = option.subOptions) !== null && _a !== void 0 ? _a : []).length === 0
                 ? nothing
                 : html `
-                                                    <ft-button icon="thin_arrow_right"
-                                                               part="controls navigate-hierarchy"
-                                                               label="${option.label}"
-                                                               ?disabled=${this.disabled}
-                                                               tooltipPosition="left"
-                                                               @click=${() => this.displayLevel(option)}></ft-button>
-                                                `}
-                                    </div>
-                                `;
+                                        <ft-button icon="thin_arrow_right"
+                                                   part="controls navigate-hierarchy"
+                                                   label="${option.label}"
+                                                   ?disabled=${this.disabled}
+                                                   tooltipPosition="left"
+                                                   @click=${() => this.displayLevel(option)}></ft-button>
+                                    `}
+                            </div>
+                        `;
         })}
                 ${limitedOptions.length < options.length ? html `
-                            <ft-button
-                                    class="ft-filter-level--display-more"
-                                    icon="thin_arrow"
-                                    dense trailingIcon
-                                    part="controls display-more"
-                                    @click=${this.displayMore}>
-                                ${this.moreValuesButtonLabel}
-                            </ft-button>
-                        ` : nothing}
+                        <ft-button
+                            class="ft-filter-level--display-more"
+                            icon="thin_arrow"
+                            dense trailingIcon
+                            part="controls display-more"
+                            @click=${this.displayMore}>
+                            ${this.moreValuesButtonLabel}
+                        </ft-button>
+                    ` : nothing}
             </div>
         `;
     }
@@ -120,11 +121,12 @@ class FtFilterLevel extends FtLitElement {
             <ft-checkbox name="${this.filterId}"
                          part="multivalued-option"
                          data-value="${option.value}"
+
                          .checked=${option.selected}
                          .disabled=${this.disabled}
                          .indeterminate=${flatDeep((_a = option.subOptions) !== null && _a !== void 0 ? _a : [], o => { var _a; return (_a = o.subOptions) !== null && _a !== void 0 ? _a : []; }).some(o => o.selected)}
                          @change=${(e) => this.optionsChanged(e, option)}>
-                ${option.renderOption ? option.renderOption : option.label}
+                ${option.renderOption ? option.renderOption : option.label}${this.displayCount ? ` (${option.count})` : ""}
             </ft-checkbox>
         `;
     }
@@ -138,7 +140,7 @@ class FtFilterLevel extends FtLitElement {
                       @click=${(e) => this.optionsChanged(e, option)}
                       @keyup=${(e) => this.onRadioKeyUp(e, option)}
                       @change=${(e) => e.stopPropagation()}>
-                ${option.renderOption ? option.renderOption : option.label}
+                ${option.renderOption ? option.renderOption : option.label}${this.displayCount ? ` (${option.count})` : ""}
             </ft-radio>
         `;
     }
@@ -183,6 +185,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtFilterLevel.prototype, "hideSelectedOptions", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFilterLevel.prototype, "displayCount", void 0);
 __decorate([
     property({ type: Boolean })
 ], FtFilterLevel.prototype, "preventNavigation", void 0);

package/build/ft-filter-option.properties.d.ts

@@ -5,4 +5,5 @@ export interface FtFilterOptionProperties {
     selected?: boolean;
     subOptions?: Array<FtFilterOptionProperties>;
     renderOption?: TemplateResult | null;
+    count?: number;
 }

package/build/ft-filter.d.ts

@@ -18,6 +18,7 @@ export declare class FtFilter extends FtLitElement implements FtFilterProperties
     multivalued: boolean;
     disabled: boolean;
     raiseSelectedOptions: boolean;
+    displayCount: boolean;
     displayedValuesLimit: number;
     hideClearButton: boolean;
     private slotElement;

package/build/ft-filter.js

@@ -30,6 +30,7 @@ class FtFilter extends FtLitElement {
         this.multivalued = false;
         this.disabled = false;
         this.raiseSelectedOptions = false;
+        this.displayCount = false;
         this.displayedValuesLimit = 0;
         this.hideClearButton = false;
         this.lastLevelHasHiddenvalues = false;
@@ -142,6 +143,7 @@ class FtFilter extends FtLitElement {
                         filterId="${this.id}"
                         ?multivalued=${this.multivalued}
                         ?disabled=${this.disabled}
+                        ?displayCount="${this.displayCount}"
                         preventNavigation
                         .options=${selectedOptions}
                         @change=${this.onChange}
@@ -183,6 +185,7 @@ class FtFilter extends FtLitElement {
                 ?multivalued=${this.multivalued}
                 ?disabled=${this.disabled || className !== "ft-filter--level-center"}
                 ?hideSelectedOptions=${this.raiseSelectedOptions}
+                ?displayCount="${this.displayCount}"
                 .parent=${parent}
                 .options=${options}
                 .displayedValuesLimit=${this.displayedValuesLimit}
@@ -299,6 +302,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtFilter.prototype, "raiseSelectedOptions", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFilter.prototype, "displayCount", void 0);
 __decorate([
     property({ type: Number })
 ], FtFilter.prototype, "displayedValuesLimit", void 0);

package/build/ft-filter.light.js

@@ -1082,58 +1082,59 @@ const G=Symbol.for(""),T=t=>{if(t?.r===G)return t?._$litStatic$},M=t=>({_$litSta
         margin: 10px 0;
         color: ${Ir.colorOnSurfaceMedium};
     }
-`;var Wr=function(t,o,e,r){for(var i,a=arguments.length,n=a<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(a<3?i(n):a>3?i(o,e,n):i(o,e))||n);return a>3&&n&&Object.defineProperty(o,e,n),n};class Rr extends o.FtLitElement{constructor(){super(...arguments),this.filterId="",this.options=[],this.multivalued=!1,this.disabled=!1,this.hideSelectedOptions=!1,this.preventNavigation=!1,this.filter="",this.moreValuesButtonLabel="More",this.displayedValuesLimit=0,this.displayedPages=1}get hasHiddenValues(){let t=this.limit;return null!=t&&t<this.options.length}get limit(){return this.displayedValuesLimit>0?this.displayedPages*this.displayedValuesLimit:void 0}get height(){var t,o;return null!==(o=null===(t=this.container)||void 0===t?void 0:t.scrollHeight)&&void 0!==o?o:0}render(){let t=[...this.options];this.hideSelectedOptions&&(t=t.filter((t=>!t.selected))),this.filter&&(t=t.filter((t=>t.label.toLowerCase().includes(this.filter.toLowerCase()))));const o=t.slice(0,this.limit);return e.html`
+`;var Wr=function(t,o,e,r){for(var i,a=arguments.length,n=a<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(a<3?i(n):a>3?i(o,e,n):i(o,e))||n);return a>3&&n&&Object.defineProperty(o,e,n),n};class Rr extends o.FtLitElement{constructor(){super(...arguments),this.filterId="",this.options=[],this.multivalued=!1,this.disabled=!1,this.hideSelectedOptions=!1,this.displayCount=!1,this.preventNavigation=!1,this.filter="",this.moreValuesButtonLabel="More",this.displayedValuesLimit=0,this.displayedPages=1}get hasHiddenValues(){let t=this.limit;return null!=t&&t<this.options.length}get limit(){return this.displayedValuesLimit>0?this.displayedPages*this.displayedValuesLimit:void 0}get height(){var t,o;return null!==(o=null===(t=this.container)||void 0===t?void 0:t.scrollHeight)&&void 0!==o?o:0}render(){let t=[...this.options];this.hideSelectedOptions&&(t=t.filter((t=>!t.selected))),this.filter&&(t=t.filter((t=>t.label.toLowerCase().includes(this.filter.toLowerCase()))));const o=t.slice(0,this.limit);return e.html`
             <div class="ft-filter-level--container ${this.disabled?"ft-filter--disabled":""}">
                 ${null==this.parent?null:e.html`
-                            <div tabindex="0"
-                                 part="controls go-back"
-                                 class="ft-filter-level--go-back"
-                                 ?disabled=${this.disabled}
-                                 @keyup=${this.goBackOnKeyPress}
-                                 @click=${this.goBackOnClick}>
-                                <ft-ripple></ft-ripple>
-                                <ft-icon>thin_arrow_left</ft-icon>
-                                <ft-typography variant="body2">${this.parent.label}</ft-typography>
-                            </div>
-                        `}
+                        <div tabindex="0"
+                             part="controls go-back"
+                             class="ft-filter-level--go-back"
+                             ?disabled=${this.disabled}
+                             @keyup=${this.goBackOnKeyPress}
+                             @click=${this.goBackOnClick}>
+                            <ft-ripple></ft-ripple>
+                            <ft-icon>thin_arrow_left</ft-icon>
+                            <ft-typography variant="body2">${this.parent.label}</ft-typography>
+                        </div>
+                    `}
                 ${0===this.options.length&&this.noValuesLabel?e.html`
-                            <ft-typography class="ft-filter-level--no-values" element="span" variant="body2">
-                                ${this.noValuesLabel}
-                            </ft-typography>
-                        `:e.nothing}
+                        <ft-typography class="ft-filter-level--no-values" element="span" variant="body2">
+                            ${this.noValuesLabel}
+                        </ft-typography>
+                    `:e.nothing}
                 ${i.repeat(o,(t=>t.value),(t=>{var o;return e.html`
-                                    <div class="ft-filter-level--option" part="options">
-                                        ${this.multivalued?this.buildMultiValuedOption(t):this.buildMonoValuedOption(t)}
-                                        ${this.preventNavigation||t.selected||0===(null!==(o=t.subOptions)&&void 0!==o?o:[]).length?e.nothing:e.html`
-                                                    <ft-button icon="thin_arrow_right"
-                                                               part="controls navigate-hierarchy"
-                                                               label="${t.label}"
-                                                               ?disabled=${this.disabled}
-                                                               tooltipPosition="left"
-                                                               @click=${()=>this.displayLevel(t)}></ft-button>
-                                                `}
-                                    </div>
-                                `}))}
+                            <div class="ft-filter-level--option" part="options">
+                                ${this.multivalued?this.buildMultiValuedOption(t):this.buildMonoValuedOption(t)}
+                                ${this.preventNavigation||t.selected||0===(null!==(o=t.subOptions)&&void 0!==o?o:[]).length?e.nothing:e.html`
+                                        <ft-button icon="thin_arrow_right"
+                                                   part="controls navigate-hierarchy"
+                                                   label="${t.label}"
+                                                   ?disabled=${this.disabled}
+                                                   tooltipPosition="left"
+                                                   @click=${()=>this.displayLevel(t)}></ft-button>
+                                    `}
+                            </div>
+                        `}))}
                 ${o.length<t.length?e.html`
-                            <ft-button
-                                    class="ft-filter-level--display-more"
-                                    icon="thin_arrow"
-                                    dense trailingIcon
-                                    part="controls display-more"
-                                    @click=${this.displayMore}>
-                                ${this.moreValuesButtonLabel}
-                            </ft-button>
-                        `:e.nothing}
+                        <ft-button
+                            class="ft-filter-level--display-more"
+                            icon="thin_arrow"
+                            dense trailingIcon
+                            part="controls display-more"
+                            @click=${this.displayMore}>
+                            ${this.moreValuesButtonLabel}
+                        </ft-button>
+                    `:e.nothing}
             </div>
         `}goBackOnKeyPress(t){"Enter"!==t.key&&" "!==t.key||this.dispatchEvent(new CustomEvent("go-back",{detail:this.parent}))}goBackOnClick(t){t.stopPropagation(),t.preventDefault(),this.dispatchEvent(new CustomEvent("go-back",{detail:this.parent}))}displayMore(){this.displayedPages++}buildMultiValuedOption(t){var r;return e.html`
             <ft-checkbox name="${this.filterId}"
                          part="multivalued-option"
                          data-value="${t.value}"
+
                          .checked=${t.selected}
                          .disabled=${this.disabled}
                          .indeterminate=${o.flatDeep(null!==(r=t.subOptions)&&void 0!==r?r:[],(t=>{var o;return null!==(o=t.subOptions)&&void 0!==o?o:[]})).some((t=>t.selected))}
                          @change=${o=>this.optionsChanged(o,t)}>
-                ${t.renderOption?t.renderOption:t.label}
+                ${t.renderOption?t.renderOption:t.label}${this.displayCount?` (${t.count})`:""}
             </ft-checkbox>
         `}buildMonoValuedOption(t){return e.html`
             <ft-radio name="${this.filterId+Math.round(1e6*Math.random())}"
@@ -1144,9 +1145,9 @@ const G=Symbol.for(""),T=t=>{if(t?.r===G)return t?._$litStatic$},M=t=>({_$litSta
                       @click=${o=>this.optionsChanged(o,t)}
                       @keyup=${o=>this.onRadioKeyUp(o,t)}
                       @change=${t=>t.stopPropagation()}>
-                ${t.renderOption?t.renderOption:t.label}
+                ${t.renderOption?t.renderOption:t.label}${this.displayCount?` (${t.count})`:""}
             </ft-radio>
-        `}onRadioKeyUp(t,o){o.selected&&" "===t.key&&this.optionsChanged(t,o)}optionsChanged(t,o){t.stopPropagation(),this.dispatchEvent(new CustomEvent("change",{detail:o}))}displayLevel(t){this.dispatchEvent(new CustomEvent("display-level",{detail:t}))}}Rr.elementDefinitions={"ft-button":ir,"ft-ripple":Fo,"ft-typography":go,"ft-checkbox":br,"ft-icon":Qe,"ft-radio":wr},Rr.styles=Er,Wr([r.property({type:String})],Rr.prototype,"filterId",void 0),Wr([r.property({type:Object})],Rr.prototype,"parent",void 0),Wr([r.property({type:Array})],Rr.prototype,"options",void 0),Wr([r.property({type:Boolean})],Rr.prototype,"multivalued",void 0),Wr([r.property({type:Boolean})],Rr.prototype,"disabled",void 0),Wr([r.property({type:Boolean})],Rr.prototype,"hideSelectedOptions",void 0),Wr([r.property({type:Boolean})],Rr.prototype,"preventNavigation",void 0),Wr([r.property({type:String})],Rr.prototype,"filter",void 0),Wr([r.property({type:String})],Rr.prototype,"moreValuesButtonLabel",void 0),Wr([r.property({type:String})],Rr.prototype,"noValuesLabel",void 0),Wr([r.property({type:Number})],Rr.prototype,"displayedValuesLimit",void 0),Wr([r.query(".ft-filter-level--container")],Rr.prototype,"container",void 0),Wr([r.state()],Rr.prototype,"displayedPages",void 0);const Ur={buttonsColor:o.FtCssVariableFactory.extend("--ft-snap-scroll-buttons-color","",o.designSystemVariables.colorPrimary),buttonsZIndex:o.FtCssVariableFactory.create("--ft-snap-scroll-buttons-z-index","","NUMBER","1"),gap:o.FtCssVariableFactory.create("--ft-snap-scroll-gap","","SIZE","0"),colorSurface:o.FtCssVariableFactory.external(o.designSystemVariables.colorSurface,"Design system")},zr=e.css`
+        `}onRadioKeyUp(t,o){o.selected&&" "===t.key&&this.optionsChanged(t,o)}optionsChanged(t,o){t.stopPropagation(),this.dispatchEvent(new CustomEvent("change",{detail:o}))}displayLevel(t){this.dispatchEvent(new CustomEvent("display-level",{detail:t}))}}Rr.elementDefinitions={"ft-button":ir,"ft-ripple":Fo,"ft-typography":go,"ft-checkbox":br,"ft-icon":Qe,"ft-radio":wr},Rr.styles=Er,Wr([r.property({type:String})],Rr.prototype,"filterId",void 0),Wr([r.property({type:Object})],Rr.prototype,"parent",void 0),Wr([r.property({type:Array})],Rr.prototype,"options",void 0),Wr([r.property({type:Boolean})],Rr.prototype,"multivalued",void 0),Wr([r.property({type:Boolean})],Rr.prototype,"disabled",void 0),Wr([r.property({type:Boolean})],Rr.prototype,"hideSelectedOptions",void 0),Wr([r.property({type:Boolean})],Rr.prototype,"displayCount",void 0),Wr([r.property({type:Boolean})],Rr.prototype,"preventNavigation",void 0),Wr([r.property({type:String})],Rr.prototype,"filter",void 0),Wr([r.property({type:String})],Rr.prototype,"moreValuesButtonLabel",void 0),Wr([r.property({type:String})],Rr.prototype,"noValuesLabel",void 0),Wr([r.property({type:Number})],Rr.prototype,"displayedValuesLimit",void 0),Wr([r.query(".ft-filter-level--container")],Rr.prototype,"container",void 0),Wr([r.state()],Rr.prototype,"displayedPages",void 0);const Ur={buttonsColor:o.FtCssVariableFactory.extend("--ft-snap-scroll-buttons-color","",o.designSystemVariables.colorPrimary),buttonsZIndex:o.FtCssVariableFactory.create("--ft-snap-scroll-buttons-z-index","","NUMBER","1"),gap:o.FtCssVariableFactory.create("--ft-snap-scroll-gap","","SIZE","0"),colorSurface:o.FtCssVariableFactory.external(o.designSystemVariables.colorSurface,"Design system")},zr=e.css`
     .ft-snap-scroll {
         box-sizing: border-box;
         position: relative;
@@ -1410,7 +1411,7 @@ const G=Symbol.for(""),T=t=>{if(t?.r===G)return t?._$litStatic$},M=t=>({_$litSta
         slot:not([name]) {
             display: none;
         }
-    `];var Br=function(t,o,e,r){for(var i,a=arguments.length,n=a<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(a<3?i(n):a>3?i(o,e,n):i(o,e))||n);return a>3&&n&&Object.defineProperty(o,e,n),n};class Hr extends CustomEvent{constructor(t){super("change",{detail:t})}}class Ar extends o.FtLitElement{constructor(){super(...arguments),this.id="",this.label="",this.filterPlaceHolder="Filter {0}",this.clearButtonLabel="Clear",this.moreValuesButtonLabel="More",this.noValuesLabel="No values available",this.options=[],this.multivalued=!1,this.disabled=!1,this.raiseSelectedOptions=!1,this.displayedValuesLimit=0,this.hideClearButton=!1,this.lastLevelHasHiddenvalues=!1,this.withScroll=!1,this.filter="",this.displayedLevels=[],this.scrollResizeObserver=new ResizeObserver((()=>this.updateScroll())),this.levelsScrollDebouncer=new o.Debouncer(300),this.changeDebouncer=new o.Debouncer(10),this.lastDispatchedValues=[]}get flatOptions(){return o.flatDeep(this.options,(t=>{var o;return null!==(o=t.subOptions)&&void 0!==o?o:[]}))}get childrenFilteredFlatOptions(){return o.flatDeep(this.options,(t=>{var o;return t.selected?[]:null!==(o=t.subOptions)&&void 0!==o?o:[]}))}get selectedValues(){return this.childrenFilteredFlatOptions.filter((t=>t.selected)).map((t=>t.value))}render(){const t=this.flatOptions.some((t=>t.selected)),o=this.withScroll||this.filter||this.lastLevelHasHiddenvalues,r=this.filterPlaceHolder.replace("{0}",this.label);return e.html`
+    `];var Br=function(t,o,e,r){for(var i,a=arguments.length,n=a<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(a<3?i(n):a>3?i(o,e,n):i(o,e))||n);return a>3&&n&&Object.defineProperty(o,e,n),n};class Hr extends CustomEvent{constructor(t){super("change",{detail:t})}}class Ar extends o.FtLitElement{constructor(){super(...arguments),this.id="",this.label="",this.filterPlaceHolder="Filter {0}",this.clearButtonLabel="Clear",this.moreValuesButtonLabel="More",this.noValuesLabel="No values available",this.options=[],this.multivalued=!1,this.disabled=!1,this.raiseSelectedOptions=!1,this.displayCount=!1,this.displayedValuesLimit=0,this.hideClearButton=!1,this.lastLevelHasHiddenvalues=!1,this.withScroll=!1,this.filter="",this.displayedLevels=[],this.scrollResizeObserver=new ResizeObserver((()=>this.updateScroll())),this.levelsScrollDebouncer=new o.Debouncer(300),this.changeDebouncer=new o.Debouncer(10),this.lastDispatchedValues=[]}get flatOptions(){return o.flatDeep(this.options,(t=>{var o;return null!==(o=t.subOptions)&&void 0!==o?o:[]}))}get childrenFilteredFlatOptions(){return o.flatDeep(this.options,(t=>{var o;return t.selected?[]:null!==(o=t.subOptions)&&void 0!==o?o:[]}))}get selectedValues(){return this.childrenFilteredFlatOptions.filter((t=>t.selected)).map((t=>t.value))}render(){const t=this.flatOptions.some((t=>t.selected)),o=this.withScroll||this.filter||this.lastLevelHasHiddenvalues,r=this.filterPlaceHolder.replace("{0}",this.label);return e.html`
             <div class="ft-filter--container ${this.disabled?"ft-filter--disabled":""}"
                  part="container">
                 ${this.label||t?e.html`
@@ -1452,6 +1453,7 @@ const G=Symbol.for(""),T=t=>{if(t?.r===G)return t?._$litStatic$},M=t=>({_$litSta
                         filterId="${this.id}"
                         ?multivalued=${this.multivalued}
                         ?disabled=${this.disabled}
+                        ?displayCount="${this.displayCount}"
                         preventNavigation
                         .options=${o}
                         @change=${this.onChange}
@@ -1475,6 +1477,7 @@ const G=Symbol.for(""),T=t=>{if(t?.r===G)return t?._$litStatic$},M=t=>({_$litSta
                 ?multivalued=${this.multivalued}
                 ?disabled=${this.disabled||"ft-filter--level-center"!==t}
                 ?hideSelectedOptions=${this.raiseSelectedOptions}
+                ?displayCount="${this.displayCount}"
                 .parent=${r}
                 .options=${o}
                 .displayedValuesLimit=${this.displayedValuesLimit}
@@ -1485,6 +1488,6 @@ const G=Symbol.for(""),T=t=>{if(t?.r===G)return t?._$litStatic$},M=t=>({_$litSta
                 .exportpartsPrefixes=${["values","available-values"]}
                 noValuesLabel="${this.noValuesLabel}"
             ></ft-filter-level>
-        `}goBack(t){this.slideOut=t.detail.value}onDisplayLevel(t){this.displayedLevels.push(t.detail.value),this.slideIn=t.detail.value}clear(){if(this.flatOptions.forEach((t=>t.selected=!1)),this.displayedLevels.length>0){let t=this.displayedLevels[this.displayedLevels.length-1];this.displayedLevels=[t],this.slideOut=t}this.optionsChanged()}onChange(t){var o;t.stopPropagation();const e=this.flatOptions.find((o=>o.value===t.detail.value));e.selected=!e.selected;const r=t=>{var o;t!==e&&(t.selected=!1),null===(o=t.subOptions)||void 0===o||o.forEach(r)};this.multivalued?null===(o=e.subOptions)||void 0===o||o.forEach(r):this.options.forEach(r),this.optionsChanged()}optionsChanged(){this.changeDebouncer.run((()=>{var t;this.sendEventIfValuesChanged(),this.requestUpdate(),null===(t=this.levels)||void 0===t||t.forEach((t=>t.requestUpdate()))}))}sendEventIfValuesChanged(){const t=this.selectedValues;o.deepEqual(this.lastDispatchedValues,t)||(this.dispatchEvent(new Hr(t)),this.lastDispatchedValues=t)}updateOptionsFromSlot(t){t.stopPropagation(),this.options=this.slotElement.assignedElements().map((t=>t)),this.optionsChanged()}onFilterChange(){var t,o;this.filter=null!==(o=null===(t=this.filterInput)||void 0===t?void 0:t.value)&&void 0!==o?o:""}updateScroll(){this.valuesContainer&&(this.withScroll=this.valuesContainer.scrollHeight>this.valuesContainer.clientHeight)}}Ar.elementDefinitions={"ft-button":ir,"ft-filter-level":Rr,"ft-snap-scroll":Kr,"ft-typography":go},Ar.styles=Fr,Br([r.property({type:String})],Ar.prototype,"id",void 0),Br([r.property({type:String})],Ar.prototype,"label",void 0),Br([r.property({type:String})],Ar.prototype,"filterPlaceHolder",void 0),Br([r.property({type:String})],Ar.prototype,"clearButtonLabel",void 0),Br([r.property({type:String})],Ar.prototype,"moreValuesButtonLabel",void 0),Br([r.property({type:String})],Ar.prototype,"noValuesLabel",void 0),Br([o.jsonProperty([])],Ar.prototype,"options",void 0),Br([r.property({type:Boolean})],Ar.prototype,"multivalued",void 0),Br([r.property({type:Boolean})],Ar.prototype,"disabled",void 0),Br([r.property({type:Boolean})],Ar.prototype,"raiseSelectedOptions",void 0),Br([r.property({type:Number})],Ar.prototype,"displayedValuesLimit",void 0),Br([r.property({type:Boolean})],Ar.prototype,"hideClearButton",void 0),Br([r.query(".ft-filter--slot")],Ar.prototype,"slotElement",void 0),Br([r.query(".ft-filter--container")],Ar.prototype,"container",void 0),Br([r.query(".ft-filter--values")],Ar.prototype,"valuesContainer",void 0),Br([r.query(".ft-filter--levels")],Ar.prototype,"levelsContainer",void 0),Br([r.state()],Ar.prototype,"lastLevelHasHiddenvalues",void 0),Br([r.query(".ft-filter--filter input")],Ar.prototype,"filterInput",void 0),Br([r.queryAll(".ft-filter--levels ft-filter-level")],Ar.prototype,"levels",void 0),Br([r.state()],Ar.prototype,"withScroll",void 0),Br([r.state()],Ar.prototype,"filter",void 0),Br([r.state()],Ar.prototype,"slideIn",void 0),Br([r.state()],Ar.prototype,"slideOut",void 0);var jr=function(t,o,e,r){for(var i,a=arguments.length,n=a<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(a<3?i(n):a>3?i(o,e,n):i(o,e))||n);return a>3&&n&&Object.defineProperty(o,e,n),n};class Gr extends o.FtLitElement{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1,this.subOptions=[]}render(){return e.html`
+        `}goBack(t){this.slideOut=t.detail.value}onDisplayLevel(t){this.displayedLevels.push(t.detail.value),this.slideIn=t.detail.value}clear(){if(this.flatOptions.forEach((t=>t.selected=!1)),this.displayedLevels.length>0){let t=this.displayedLevels[this.displayedLevels.length-1];this.displayedLevels=[t],this.slideOut=t}this.optionsChanged()}onChange(t){var o;t.stopPropagation();const e=this.flatOptions.find((o=>o.value===t.detail.value));e.selected=!e.selected;const r=t=>{var o;t!==e&&(t.selected=!1),null===(o=t.subOptions)||void 0===o||o.forEach(r)};this.multivalued?null===(o=e.subOptions)||void 0===o||o.forEach(r):this.options.forEach(r),this.optionsChanged()}optionsChanged(){this.changeDebouncer.run((()=>{var t;this.sendEventIfValuesChanged(),this.requestUpdate(),null===(t=this.levels)||void 0===t||t.forEach((t=>t.requestUpdate()))}))}sendEventIfValuesChanged(){const t=this.selectedValues;o.deepEqual(this.lastDispatchedValues,t)||(this.dispatchEvent(new Hr(t)),this.lastDispatchedValues=t)}updateOptionsFromSlot(t){t.stopPropagation(),this.options=this.slotElement.assignedElements().map((t=>t)),this.optionsChanged()}onFilterChange(){var t,o;this.filter=null!==(o=null===(t=this.filterInput)||void 0===t?void 0:t.value)&&void 0!==o?o:""}updateScroll(){this.valuesContainer&&(this.withScroll=this.valuesContainer.scrollHeight>this.valuesContainer.clientHeight)}}Ar.elementDefinitions={"ft-button":ir,"ft-filter-level":Rr,"ft-snap-scroll":Kr,"ft-typography":go},Ar.styles=Fr,Br([r.property({type:String})],Ar.prototype,"id",void 0),Br([r.property({type:String})],Ar.prototype,"label",void 0),Br([r.property({type:String})],Ar.prototype,"filterPlaceHolder",void 0),Br([r.property({type:String})],Ar.prototype,"clearButtonLabel",void 0),Br([r.property({type:String})],Ar.prototype,"moreValuesButtonLabel",void 0),Br([r.property({type:String})],Ar.prototype,"noValuesLabel",void 0),Br([o.jsonProperty([])],Ar.prototype,"options",void 0),Br([r.property({type:Boolean})],Ar.prototype,"multivalued",void 0),Br([r.property({type:Boolean})],Ar.prototype,"disabled",void 0),Br([r.property({type:Boolean})],Ar.prototype,"raiseSelectedOptions",void 0),Br([r.property({type:Boolean})],Ar.prototype,"displayCount",void 0),Br([r.property({type:Number})],Ar.prototype,"displayedValuesLimit",void 0),Br([r.property({type:Boolean})],Ar.prototype,"hideClearButton",void 0),Br([r.query(".ft-filter--slot")],Ar.prototype,"slotElement",void 0),Br([r.query(".ft-filter--container")],Ar.prototype,"container",void 0),Br([r.query(".ft-filter--values")],Ar.prototype,"valuesContainer",void 0),Br([r.query(".ft-filter--levels")],Ar.prototype,"levelsContainer",void 0),Br([r.state()],Ar.prototype,"lastLevelHasHiddenvalues",void 0),Br([r.query(".ft-filter--filter input")],Ar.prototype,"filterInput",void 0),Br([r.queryAll(".ft-filter--levels ft-filter-level")],Ar.prototype,"levels",void 0),Br([r.state()],Ar.prototype,"withScroll",void 0),Br([r.state()],Ar.prototype,"filter",void 0),Br([r.state()],Ar.prototype,"slideIn",void 0),Br([r.state()],Ar.prototype,"slideOut",void 0);var jr=function(t,o,e,r){for(var i,a=arguments.length,n=a<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(a<3?i(n):a>3?i(o,e,n):i(o,e))||n);return a>3&&n&&Object.defineProperty(o,e,n),n};class Gr extends o.FtLitElement{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1,this.subOptions=[]}render(){return e.html`
             <slot class="ft-filter-option--slot" @slotchange=${this.updateSubOptionsFromSlot}></slot>
         `}updateSubOptionsFromSlot(t){t.stopPropagation(),this.subOptions=this.slotElement.assignedElements().map((t=>t))}update(t){super.update(t),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}}Gr.elementDefinitions={},jr([r.property({type:String})],Gr.prototype,"label",void 0),jr([r.property({type:Object,converter:t=>t})],Gr.prototype,"value",void 0),jr([r.property({type:Boolean,reflect:!0})],Gr.prototype,"selected",void 0),jr([r.property({type:Object})],Gr.prototype,"subOptions",void 0),jr([o.jsonProperty({})],Gr.prototype,"renderOption",void 0),jr([r.query(".ft-filter-option--slot")],Gr.prototype,"slotElement",void 0),o.customElement("ft-filter")(Ar),o.customElement("ft-filter-option")(Gr),t.FtFilter=Ar,t.FtFilterChangeEvent=Hr,t.FtFilterCssVariables=Dr,t.FtFilterLevelCssVariables=Ir,t.FtFilterOption=Gr,t.levelStyles=Er,t.styles=Fr}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litRepeat,ftGlobals.litClassMap,ftGlobals.litUnsafeHTML);

package/build/ft-filter.min.js

@@ -1250,58 +1250,59 @@ const pl=Symbol.for(""),dl=t=>{if(t?.r===pl)return t?._$litStatic$},hl=t=>({_$li
         margin: 10px 0;
         color: ${Zc.colorOnSurfaceMedium};
     }
-`;var Kc=function(t,e,o,r){for(var i,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(n<3?i(a):n>3?i(e,o,a):i(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};class Hc extends Di{constructor(){super(...arguments),this.filterId="",this.options=[],this.multivalued=!1,this.disabled=!1,this.hideSelectedOptions=!1,this.preventNavigation=!1,this.filter="",this.moreValuesButtonLabel="More",this.displayedValuesLimit=0,this.displayedPages=1}get hasHiddenValues(){let t=this.limit;return null!=t&&t<this.options.length}get limit(){return this.displayedValuesLimit>0?this.displayedPages*this.displayedValuesLimit:void 0}get height(){var t,e;return null!==(e=null===(t=this.container)||void 0===t?void 0:t.scrollHeight)&&void 0!==e?e:0}render(){let t=[...this.options];this.hideSelectedOptions&&(t=t.filter((t=>!t.selected))),this.filter&&(t=t.filter((t=>t.label.toLowerCase().includes(this.filter.toLowerCase()))));const e=t.slice(0,this.limit);return Jt`
+`;var Kc=function(t,e,o,r){for(var i,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(n<3?i(a):n>3?i(e,o,a):i(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};class Hc extends Di{constructor(){super(...arguments),this.filterId="",this.options=[],this.multivalued=!1,this.disabled=!1,this.hideSelectedOptions=!1,this.displayCount=!1,this.preventNavigation=!1,this.filter="",this.moreValuesButtonLabel="More",this.displayedValuesLimit=0,this.displayedPages=1}get hasHiddenValues(){let t=this.limit;return null!=t&&t<this.options.length}get limit(){return this.displayedValuesLimit>0?this.displayedPages*this.displayedValuesLimit:void 0}get height(){var t,e;return null!==(e=null===(t=this.container)||void 0===t?void 0:t.scrollHeight)&&void 0!==e?e:0}render(){let t=[...this.options];this.hideSelectedOptions&&(t=t.filter((t=>!t.selected))),this.filter&&(t=t.filter((t=>t.label.toLowerCase().includes(this.filter.toLowerCase()))));const e=t.slice(0,this.limit);return Jt`
             <div class="ft-filter-level--container ${this.disabled?"ft-filter--disabled":""}">
                 ${null==this.parent?null:Jt`
-                            <div tabindex="0"
-                                 part="controls go-back"
-                                 class="ft-filter-level--go-back"
-                                 ?disabled=${this.disabled}
-                                 @keyup=${this.goBackOnKeyPress}
-                                 @click=${this.goBackOnClick}>
-                                <ft-ripple></ft-ripple>
-                                <ft-icon>thin_arrow_left</ft-icon>
-                                <ft-typography variant="body2">${this.parent.label}</ft-typography>
-                            </div>
-                        `}
+                        <div tabindex="0"
+                             part="controls go-back"
+                             class="ft-filter-level--go-back"
+                             ?disabled=${this.disabled}
+                             @keyup=${this.goBackOnKeyPress}
+                             @click=${this.goBackOnClick}>
+                            <ft-ripple></ft-ripple>
+                            <ft-icon>thin_arrow_left</ft-icon>
+                            <ft-typography variant="body2">${this.parent.label}</ft-typography>
+                        </div>
+                    `}
                 ${0===this.options.length&&this.noValuesLabel?Jt`
-                            <ft-typography class="ft-filter-level--no-values" element="span" variant="body2">
-                                ${this.noValuesLabel}
-                            </ft-typography>
-                        `:te}
+                        <ft-typography class="ft-filter-level--no-values" element="span" variant="body2">
+                            ${this.noValuesLabel}
+                        </ft-typography>
+                    `:te}
                 ${Me(e,(t=>t.value),(t=>{var e;return Jt`
-                                    <div class="ft-filter-level--option" part="options">
-                                        ${this.multivalued?this.buildMultiValuedOption(t):this.buildMonoValuedOption(t)}
-                                        ${this.preventNavigation||t.selected||0===(null!==(e=t.subOptions)&&void 0!==e?e:[]).length?te:Jt`
-                                                    <ft-button icon="thin_arrow_right"
-                                                               part="controls navigate-hierarchy"
-                                                               label="${t.label}"
-                                                               ?disabled=${this.disabled}
-                                                               tooltipPosition="left"
-                                                               @click=${()=>this.displayLevel(t)}></ft-button>
-                                                `}
-                                    </div>
-                                `}))}
+                            <div class="ft-filter-level--option" part="options">
+                                ${this.multivalued?this.buildMultiValuedOption(t):this.buildMonoValuedOption(t)}
+                                ${this.preventNavigation||t.selected||0===(null!==(e=t.subOptions)&&void 0!==e?e:[]).length?te:Jt`
+                                        <ft-button icon="thin_arrow_right"
+                                                   part="controls navigate-hierarchy"
+                                                   label="${t.label}"
+                                                   ?disabled=${this.disabled}
+                                                   tooltipPosition="left"
+                                                   @click=${()=>this.displayLevel(t)}></ft-button>
+                                    `}
+                            </div>
+                        `}))}
                 ${e.length<t.length?Jt`
-                            <ft-button
-                                    class="ft-filter-level--display-more"
-                                    icon="thin_arrow"
-                                    dense trailingIcon
-                                    part="controls display-more"
-                                    @click=${this.displayMore}>
-                                ${this.moreValuesButtonLabel}
-                            </ft-button>
-                        `:te}
+                        <ft-button
+                            class="ft-filter-level--display-more"
+                            icon="thin_arrow"
+                            dense trailingIcon
+                            part="controls display-more"
+                            @click=${this.displayMore}>
+                            ${this.moreValuesButtonLabel}
+                        </ft-button>
+                    `:te}
             </div>
         `}goBackOnKeyPress(t){"Enter"!==t.key&&" "!==t.key||this.dispatchEvent(new CustomEvent("go-back",{detail:this.parent}))}goBackOnClick(t){t.stopPropagation(),t.preventDefault(),this.dispatchEvent(new CustomEvent("go-back",{detail:this.parent}))}displayMore(){this.displayedPages++}buildMultiValuedOption(t){var e;return Jt`
             <ft-checkbox name="${this.filterId}"
                          part="multivalued-option"
                          data-value="${t.value}"
+
                          .checked=${t.selected}
                          .disabled=${this.disabled}
                          .indeterminate=${po(null!==(e=t.subOptions)&&void 0!==e?e:[],(t=>{var e;return null!==(e=t.subOptions)&&void 0!==e?e:[]})).some((t=>t.selected))}
                          @change=${e=>this.optionsChanged(e,t)}>
-                ${t.renderOption?t.renderOption:t.label}
+                ${t.renderOption?t.renderOption:t.label}${this.displayCount?` (${t.count})`:""}
             </ft-checkbox>
         `}buildMonoValuedOption(t){return Jt`
             <ft-radio name="${this.filterId+Math.round(1e6*Math.random())}"
@@ -1312,9 +1313,9 @@ const pl=Symbol.for(""),dl=t=>{if(t?.r===pl)return t?._$litStatic$},hl=t=>({_$li
                       @click=${e=>this.optionsChanged(e,t)}
                       @keyup=${e=>this.onRadioKeyUp(e,t)}
                       @change=${t=>t.stopPropagation()}>
-                ${t.renderOption?t.renderOption:t.label}
+                ${t.renderOption?t.renderOption:t.label}${this.displayCount?` (${t.count})`:""}
             </ft-radio>
-        `}onRadioKeyUp(t,e){e.selected&&" "===t.key&&this.optionsChanged(t,e)}optionsChanged(t,e){t.stopPropagation(),this.dispatchEvent(new CustomEvent("change",{detail:e}))}displayLevel(t){this.dispatchEvent(new CustomEvent("display-level",{detail:t}))}}Hc.elementDefinitions={"ft-button":mc,"ft-ripple":Qs,"ft-typography":Rs,"ft-checkbox":Ic,"ft-icon":hc,"ft-radio":Ac},Hc.styles=Mc,Kc([we({type:String})],Hc.prototype,"filterId",void 0),Kc([we({type:Object})],Hc.prototype,"parent",void 0),Kc([we({type:Array})],Hc.prototype,"options",void 0),Kc([we({type:Boolean})],Hc.prototype,"multivalued",void 0),Kc([we({type:Boolean})],Hc.prototype,"disabled",void 0),Kc([we({type:Boolean})],Hc.prototype,"hideSelectedOptions",void 0),Kc([we({type:Boolean})],Hc.prototype,"preventNavigation",void 0),Kc([we({type:String})],Hc.prototype,"filter",void 0),Kc([we({type:String})],Hc.prototype,"moreValuesButtonLabel",void 0),Kc([we({type:String})],Hc.prototype,"noValuesLabel",void 0),Kc([we({type:Number})],Hc.prototype,"displayedValuesLimit",void 0),Kc([$e(".ft-filter-level--container")],Hc.prototype,"container",void 0),Kc([Se()],Hc.prototype,"displayedPages",void 0);const Tc={buttonsColor:Oo.extend("--ft-snap-scroll-buttons-color","",Sr.colorPrimary),buttonsZIndex:Oo.create("--ft-snap-scroll-buttons-z-index","","NUMBER","1"),gap:Oo.create("--ft-snap-scroll-gap","","SIZE","0"),colorSurface:Oo.external(Sr.colorSurface,"Design system")},Gc=dt`
+        `}onRadioKeyUp(t,e){e.selected&&" "===t.key&&this.optionsChanged(t,e)}optionsChanged(t,e){t.stopPropagation(),this.dispatchEvent(new CustomEvent("change",{detail:e}))}displayLevel(t){this.dispatchEvent(new CustomEvent("display-level",{detail:t}))}}Hc.elementDefinitions={"ft-button":mc,"ft-ripple":Qs,"ft-typography":Rs,"ft-checkbox":Ic,"ft-icon":hc,"ft-radio":Ac},Hc.styles=Mc,Kc([we({type:String})],Hc.prototype,"filterId",void 0),Kc([we({type:Object})],Hc.prototype,"parent",void 0),Kc([we({type:Array})],Hc.prototype,"options",void 0),Kc([we({type:Boolean})],Hc.prototype,"multivalued",void 0),Kc([we({type:Boolean})],Hc.prototype,"disabled",void 0),Kc([we({type:Boolean})],Hc.prototype,"hideSelectedOptions",void 0),Kc([we({type:Boolean})],Hc.prototype,"displayCount",void 0),Kc([we({type:Boolean})],Hc.prototype,"preventNavigation",void 0),Kc([we({type:String})],Hc.prototype,"filter",void 0),Kc([we({type:String})],Hc.prototype,"moreValuesButtonLabel",void 0),Kc([we({type:String})],Hc.prototype,"noValuesLabel",void 0),Kc([we({type:Number})],Hc.prototype,"displayedValuesLimit",void 0),Kc([$e(".ft-filter-level--container")],Hc.prototype,"container",void 0),Kc([Se()],Hc.prototype,"displayedPages",void 0);const Tc={buttonsColor:Oo.extend("--ft-snap-scroll-buttons-color","",Sr.colorPrimary),buttonsZIndex:Oo.create("--ft-snap-scroll-buttons-z-index","","NUMBER","1"),gap:Oo.create("--ft-snap-scroll-gap","","SIZE","0"),colorSurface:Oo.external(Sr.colorSurface,"Design system")},Gc=dt`
     .ft-snap-scroll {
         box-sizing: border-box;
         position: relative;
@@ -1578,7 +1579,7 @@ const pl=Symbol.for(""),dl=t=>{if(t?.r===pl)return t?._$litStatic$},hl=t=>({_$li
         slot:not([name]) {
             display: none;
         }
-    `];var Qc=function(t,e,o,r){for(var i,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(n<3?i(a):n>3?i(e,o,a):i(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};class tf extends CustomEvent{constructor(t){super("change",{detail:t})}}class ef extends Di{constructor(){super(...arguments),this.id="",this.label="",this.filterPlaceHolder="Filter {0}",this.clearButtonLabel="Clear",this.moreValuesButtonLabel="More",this.noValuesLabel="No values available",this.options=[],this.multivalued=!1,this.disabled=!1,this.raiseSelectedOptions=!1,this.displayedValuesLimit=0,this.hideClearButton=!1,this.lastLevelHasHiddenvalues=!1,this.withScroll=!1,this.filter="",this.displayedLevels=[],this.scrollResizeObserver=new ResizeObserver((()=>this.updateScroll())),this.levelsScrollDebouncer=new lo(300),this.changeDebouncer=new lo(10),this.lastDispatchedValues=[]}get flatOptions(){return po(this.options,(t=>{var e;return null!==(e=t.subOptions)&&void 0!==e?e:[]}))}get childrenFilteredFlatOptions(){return po(this.options,(t=>{var e;return t.selected?[]:null!==(e=t.subOptions)&&void 0!==e?e:[]}))}get selectedValues(){return this.childrenFilteredFlatOptions.filter((t=>t.selected)).map((t=>t.value))}render(){const t=this.flatOptions.some((t=>t.selected)),e=this.withScroll||this.filter||this.lastLevelHasHiddenvalues,o=this.filterPlaceHolder.replace("{0}",this.label);return Jt`
+    `];var Qc=function(t,e,o,r){for(var i,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(n<3?i(a):n>3?i(e,o,a):i(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};class tf extends CustomEvent{constructor(t){super("change",{detail:t})}}class ef extends Di{constructor(){super(...arguments),this.id="",this.label="",this.filterPlaceHolder="Filter {0}",this.clearButtonLabel="Clear",this.moreValuesButtonLabel="More",this.noValuesLabel="No values available",this.options=[],this.multivalued=!1,this.disabled=!1,this.raiseSelectedOptions=!1,this.displayCount=!1,this.displayedValuesLimit=0,this.hideClearButton=!1,this.lastLevelHasHiddenvalues=!1,this.withScroll=!1,this.filter="",this.displayedLevels=[],this.scrollResizeObserver=new ResizeObserver((()=>this.updateScroll())),this.levelsScrollDebouncer=new lo(300),this.changeDebouncer=new lo(10),this.lastDispatchedValues=[]}get flatOptions(){return po(this.options,(t=>{var e;return null!==(e=t.subOptions)&&void 0!==e?e:[]}))}get childrenFilteredFlatOptions(){return po(this.options,(t=>{var e;return t.selected?[]:null!==(e=t.subOptions)&&void 0!==e?e:[]}))}get selectedValues(){return this.childrenFilteredFlatOptions.filter((t=>t.selected)).map((t=>t.value))}render(){const t=this.flatOptions.some((t=>t.selected)),e=this.withScroll||this.filter||this.lastLevelHasHiddenvalues,o=this.filterPlaceHolder.replace("{0}",this.label);return Jt`
             <div class="ft-filter--container ${this.disabled?"ft-filter--disabled":""}"
                  part="container">
                 ${this.label||t?Jt`
@@ -1620,6 +1621,7 @@ const pl=Symbol.for(""),dl=t=>{if(t?.r===pl)return t?._$litStatic$},hl=t=>({_$li
                         filterId="${this.id}"
                         ?multivalued=${this.multivalued}
                         ?disabled=${this.disabled}
+                        ?displayCount="${this.displayCount}"
                         preventNavigation
                         .options=${e}
                         @change=${this.onChange}
@@ -1643,6 +1645,7 @@ const pl=Symbol.for(""),dl=t=>{if(t?.r===pl)return t?._$litStatic$},hl=t=>({_$li
                 ?multivalued=${this.multivalued}
                 ?disabled=${this.disabled||"ft-filter--level-center"!==t}
                 ?hideSelectedOptions=${this.raiseSelectedOptions}
+                ?displayCount="${this.displayCount}"
                 .parent=${o}
                 .options=${e}
                 .displayedValuesLimit=${this.displayedValuesLimit}
@@ -1653,6 +1656,6 @@ const pl=Symbol.for(""),dl=t=>{if(t?.r===pl)return t?._$litStatic$},hl=t=>({_$li
                 .exportpartsPrefixes=${["values","available-values"]}
                 noValuesLabel="${this.noValuesLabel}"
             ></ft-filter-level>
-        `}goBack(t){this.slideOut=t.detail.value}onDisplayLevel(t){this.displayedLevels.push(t.detail.value),this.slideIn=t.detail.value}clear(){if(this.flatOptions.forEach((t=>t.selected=!1)),this.displayedLevels.length>0){let t=this.displayedLevels[this.displayedLevels.length-1];this.displayedLevels=[t],this.slideOut=t}this.optionsChanged()}onChange(t){var e;t.stopPropagation();const o=this.flatOptions.find((e=>e.value===t.detail.value));o.selected=!o.selected;const r=t=>{var e;t!==o&&(t.selected=!1),null===(e=t.subOptions)||void 0===e||e.forEach(r)};this.multivalued?null===(e=o.subOptions)||void 0===e||e.forEach(r):this.options.forEach(r),this.optionsChanged()}optionsChanged(){this.changeDebouncer.run((()=>{var t;this.sendEventIfValuesChanged(),this.requestUpdate(),null===(t=this.levels)||void 0===t||t.forEach((t=>t.requestUpdate()))}))}sendEventIfValuesChanged(){const t=this.selectedValues;uo(this.lastDispatchedValues,t)||(this.dispatchEvent(new tf(t)),this.lastDispatchedValues=t)}updateOptionsFromSlot(t){t.stopPropagation(),this.options=this.slotElement.assignedElements().map((t=>t)),this.optionsChanged()}onFilterChange(){var t,e;this.filter=null!==(e=null===(t=this.filterInput)||void 0===t?void 0:t.value)&&void 0!==e?e:""}updateScroll(){this.valuesContainer&&(this.withScroll=this.valuesContainer.scrollHeight>this.valuesContainer.clientHeight)}}ef.elementDefinitions={"ft-button":mc,"ft-filter-level":Hc,"ft-snap-scroll":Yc,"ft-typography":Rs},ef.styles=Xc,Qc([we({type:String})],ef.prototype,"id",void 0),Qc([we({type:String})],ef.prototype,"label",void 0),Qc([we({type:String})],ef.prototype,"filterPlaceHolder",void 0),Qc([we({type:String})],ef.prototype,"clearButtonLabel",void 0),Qc([we({type:String})],ef.prototype,"moreValuesButtonLabel",void 0),Qc([we({type:String})],ef.prototype,"noValuesLabel",void 0),Qc([bo([])],ef.prototype,"options",void 0),Qc([we({type:Boolean})],ef.prototype,"multivalued",void 0),Qc([we({type:Boolean})],ef.prototype,"disabled",void 0),Qc([we({type:Boolean})],ef.prototype,"raiseSelectedOptions",void 0),Qc([we({type:Number})],ef.prototype,"displayedValuesLimit",void 0),Qc([we({type:Boolean})],ef.prototype,"hideClearButton",void 0),Qc([$e(".ft-filter--slot")],ef.prototype,"slotElement",void 0),Qc([$e(".ft-filter--container")],ef.prototype,"container",void 0),Qc([$e(".ft-filter--values")],ef.prototype,"valuesContainer",void 0),Qc([$e(".ft-filter--levels")],ef.prototype,"levelsContainer",void 0),Qc([Se()],ef.prototype,"lastLevelHasHiddenvalues",void 0),Qc([$e(".ft-filter--filter input")],ef.prototype,"filterInput",void 0),Qc([ke(".ft-filter--levels ft-filter-level")],ef.prototype,"levels",void 0),Qc([Se()],ef.prototype,"withScroll",void 0),Qc([Se()],ef.prototype,"filter",void 0),Qc([Se()],ef.prototype,"slideIn",void 0),Qc([Se()],ef.prototype,"slideOut",void 0);var of=function(t,e,o,r){for(var i,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(n<3?i(a):n>3?i(e,o,a):i(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};class rf extends Di{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1,this.subOptions=[]}render(){return Jt`
+        `}goBack(t){this.slideOut=t.detail.value}onDisplayLevel(t){this.displayedLevels.push(t.detail.value),this.slideIn=t.detail.value}clear(){if(this.flatOptions.forEach((t=>t.selected=!1)),this.displayedLevels.length>0){let t=this.displayedLevels[this.displayedLevels.length-1];this.displayedLevels=[t],this.slideOut=t}this.optionsChanged()}onChange(t){var e;t.stopPropagation();const o=this.flatOptions.find((e=>e.value===t.detail.value));o.selected=!o.selected;const r=t=>{var e;t!==o&&(t.selected=!1),null===(e=t.subOptions)||void 0===e||e.forEach(r)};this.multivalued?null===(e=o.subOptions)||void 0===e||e.forEach(r):this.options.forEach(r),this.optionsChanged()}optionsChanged(){this.changeDebouncer.run((()=>{var t;this.sendEventIfValuesChanged(),this.requestUpdate(),null===(t=this.levels)||void 0===t||t.forEach((t=>t.requestUpdate()))}))}sendEventIfValuesChanged(){const t=this.selectedValues;uo(this.lastDispatchedValues,t)||(this.dispatchEvent(new tf(t)),this.lastDispatchedValues=t)}updateOptionsFromSlot(t){t.stopPropagation(),this.options=this.slotElement.assignedElements().map((t=>t)),this.optionsChanged()}onFilterChange(){var t,e;this.filter=null!==(e=null===(t=this.filterInput)||void 0===t?void 0:t.value)&&void 0!==e?e:""}updateScroll(){this.valuesContainer&&(this.withScroll=this.valuesContainer.scrollHeight>this.valuesContainer.clientHeight)}}ef.elementDefinitions={"ft-button":mc,"ft-filter-level":Hc,"ft-snap-scroll":Yc,"ft-typography":Rs},ef.styles=Xc,Qc([we({type:String})],ef.prototype,"id",void 0),Qc([we({type:String})],ef.prototype,"label",void 0),Qc([we({type:String})],ef.prototype,"filterPlaceHolder",void 0),Qc([we({type:String})],ef.prototype,"clearButtonLabel",void 0),Qc([we({type:String})],ef.prototype,"moreValuesButtonLabel",void 0),Qc([we({type:String})],ef.prototype,"noValuesLabel",void 0),Qc([bo([])],ef.prototype,"options",void 0),Qc([we({type:Boolean})],ef.prototype,"multivalued",void 0),Qc([we({type:Boolean})],ef.prototype,"disabled",void 0),Qc([we({type:Boolean})],ef.prototype,"raiseSelectedOptions",void 0),Qc([we({type:Boolean})],ef.prototype,"displayCount",void 0),Qc([we({type:Number})],ef.prototype,"displayedValuesLimit",void 0),Qc([we({type:Boolean})],ef.prototype,"hideClearButton",void 0),Qc([$e(".ft-filter--slot")],ef.prototype,"slotElement",void 0),Qc([$e(".ft-filter--container")],ef.prototype,"container",void 0),Qc([$e(".ft-filter--values")],ef.prototype,"valuesContainer",void 0),Qc([$e(".ft-filter--levels")],ef.prototype,"levelsContainer",void 0),Qc([Se()],ef.prototype,"lastLevelHasHiddenvalues",void 0),Qc([$e(".ft-filter--filter input")],ef.prototype,"filterInput",void 0),Qc([ke(".ft-filter--levels ft-filter-level")],ef.prototype,"levels",void 0),Qc([Se()],ef.prototype,"withScroll",void 0),Qc([Se()],ef.prototype,"filter",void 0),Qc([Se()],ef.prototype,"slideIn",void 0),Qc([Se()],ef.prototype,"slideOut",void 0);var of=function(t,e,o,r){for(var i,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(n<3?i(a):n>3?i(e,o,a):i(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};class rf extends Di{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1,this.subOptions=[]}render(){return Jt`
             <slot class="ft-filter-option--slot" @slotchange=${this.updateSubOptionsFromSlot}></slot>
         `}updateSubOptionsFromSlot(t){t.stopPropagation(),this.subOptions=this.slotElement.assignedElements().map((t=>t))}update(t){super.update(t),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}}rf.elementDefinitions={},of([we({type:String})],rf.prototype,"label",void 0),of([we({type:Object,converter:t=>t})],rf.prototype,"value",void 0),of([we({type:Boolean,reflect:!0})],rf.prototype,"selected",void 0),of([we({type:Object})],rf.prototype,"subOptions",void 0),of([bo({})],rf.prototype,"renderOption",void 0),of([$e(".ft-filter-option--slot")],rf.prototype,"slotElement",void 0),yo("ft-filter")(ef),yo("ft-filter-option")(rf),t.FtFilter=ef,t.FtFilterChangeEvent=tf,t.FtFilterCssVariables=Jc,t.FtFilterLevelCssVariables=Zc,t.FtFilterOption=rf,t.levelStyles=Mc,t.styles=Xc}({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-filter",
-  "version": "1.1.62",
+  "version": "1.1.63",
   "description": "Flat selector for multivalued or monovalued filters",
   "keywords": [
     "Lit"
@@ -19,15 +19,15 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-button": "1.1.62",
-    "@fluid-topics/ft-checkbox": "1.1.62",
-    "@fluid-topics/ft-icon": "1.1.62",
-    "@fluid-topics/ft-radio": "1.1.62",
-    "@fluid-topics/ft-ripple": "1.1.62",
-    "@fluid-topics/ft-snap-scroll": "1.1.62",
-    "@fluid-topics/ft-typography": "1.1.62",
-    "@fluid-topics/ft-wc-utils": "1.1.62",
+    "@fluid-topics/ft-button": "1.1.63",
+    "@fluid-topics/ft-checkbox": "1.1.63",
+    "@fluid-topics/ft-icon": "1.1.63",
+    "@fluid-topics/ft-radio": "1.1.63",
+    "@fluid-topics/ft-ripple": "1.1.63",
+    "@fluid-topics/ft-snap-scroll": "1.1.63",
+    "@fluid-topics/ft-typography": "1.1.63",
+    "@fluid-topics/ft-wc-utils": "1.1.63",
     "lit": "3.1.0"
   },
-  "gitHead": "a083f174e61618863de2949cd0f465107b4644d3"
+  "gitHead": "6f2845e11b1b3a26814c32cacd5413802aa28157"
 }