@fluid-topics/ft-filter 0.3.31 → 0.3.32

package/build/ft-filter-level.js

@@ -42,7 +42,7 @@ export class FtFilterLevel extends FtLitElement {
         return (_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0;
     }
     render() {
-        let options = this.options;
+        let options = [...this.options];
         if (this.hideSelectedOptions) {
             options = options.filter(o => !o.selected);
         }
@@ -121,7 +121,7 @@ export class FtFilterLevel extends FtLitElement {
                          .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.label}
+                ${option.renderOption ? option.renderOption : option.label}
             </ft-checkbox>
         `;
     }
@@ -135,7 +135,7 @@ export class FtFilterLevel extends FtLitElement {
                       @click=${(e) => this.optionsChanged(e, option)}
                       @keyup=${(e) => this.onRadioKeyUp(e, option)}
                       @change=${(e) => e.stopPropagation()}>
-                ${option.label}
+                ${option.renderOption ? option.renderOption : option.label}
             </ft-radio>
         `;
     }

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

@@ -1,5 +1,5 @@
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { PropertyValues } from "lit";
+import { PropertyValues, TemplateResult } from "lit";
 import { FtFilterOptionProperties } from "./ft-filter-option.properties";
 export declare class FtFilterOption extends FtLitElement implements FtFilterOptionProperties {
     static elementDefinitions: ElementDefinitionsMap;
@@ -7,8 +7,9 @@ export declare class FtFilterOption extends FtLitElement implements FtFilterOpti
     value: any;
     selected: boolean;
     subOptions: Array<FtFilterOptionProperties>;
+    renderOption?: TemplateResult;
     private slotElement;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): TemplateResult<1>;
     private updateSubOptionsFromSlot;
     protected updated(changedProperties: PropertyValues): void;
 }

package/build/ft-filter-option.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtLitElement, jsonProperty } from "@fluid-topics/ft-wc-utils";
 import { property, query } from "lit/decorators.js";
 import { html } from "lit";
 export class FtFilterOption extends FtLitElement {
@@ -45,6 +45,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], FtFilterOption.prototype, "subOptions", void 0);
+__decorate([
+    jsonProperty({})
+], FtFilterOption.prototype, "renderOption", void 0);
 __decorate([
     query(".ft-filter-option--slot")
 ], FtFilterOption.prototype, "slotElement", void 0);

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

@@ -1,7 +1,9 @@
+import { TemplateResult } from "lit";
 export interface FtFilterOptionProperties {
     label: string;
     value: any;
     selected?: boolean;
     subOptions?: Array<FtFilterOptionProperties>;
+    renderOption?: TemplateResult | null;
 }
 //# sourceMappingURL=ft-filter-option.properties.d.ts.map

package/build/ft-filter.d.ts

@@ -19,6 +19,7 @@ export declare class FtFilter extends FtLitElement implements FtFilterProperties
     disabled: boolean;
     raiseSelectedOptions: boolean;
     displayedValuesLimit: number;
+    hideClearButton: boolean;
     private slotElement;
     private container?;
     private valuesContainer?;

package/build/ft-filter.js

@@ -32,6 +32,7 @@ export class FtFilter extends FtLitElement {
         this.disabled = false;
         this.raiseSelectedOptions = false;
         this.displayedValuesLimit = 0;
+        this.hideClearButton = false;
         this.withScroll = false;
         this.filter = "";
         this.displayedLevels = [];
@@ -53,7 +54,7 @@ export class FtFilter extends FtLitElement {
                     <div class="ft-filter--header" part="header">
                         <ft-typography class="ft-filter--label" variant="overline" part="label">${this.label}
                         </ft-typography>
-                        ${valuesSelected ? html `
+                        ${valuesSelected && !this.hideClearButton ? html `
                             <ft-button icon="close" dense @click=${this.clear} part="clear-button">
                                 ${this.clearButtonLabel}
                             </ft-button>
@@ -160,7 +161,7 @@ export class FtFilter extends FtLitElement {
             <ft-filter-level
                     class="${className}"
                     id="${this.id}"
-                    filter="${this.filter}"
+                    .filter="${this.filter}"
                     moreValuesButtonLabel="${this.moreValuesButtonLabel}"
                     ?multivalued=${this.multivalued}
                     ?disabled=${this.disabled || className !== "ft-filter--level-center"}
@@ -278,6 +279,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], FtFilter.prototype, "displayedValuesLimit", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFilter.prototype, "hideClearButton", void 0);
 __decorate([
     query(".ft-filter--slot")
 ], FtFilter.prototype, "slotElement", void 0);

package/build/ft-filter.light.js

@@ -822,7 +822,7 @@ const V=Symbol.for(""),H=t=>{if((null==t?void 0:t.r)===V)return null==t?void 0:t
         margin: 10px 0;
         color: ${pe.colorOnSurfaceMedium};
     }
-`;var ce=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};class de extends i.FtLitElement{constructor(){super(...arguments),this.id="",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,i;return null!==(i=null===(t=this.container)||void 0===t?void 0:t.scrollHeight)&&void 0!==i?i: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 i=t.slice(0,this.limit);return e.html`
+`;var ce=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};class de extends i.FtLitElement{constructor(){super(...arguments),this.id="",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,i;return null!==(i=null===(t=this.container)||void 0===t?void 0:t.scrollHeight)&&void 0!==i?i: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 i=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"
@@ -873,7 +873,7 @@ const V=Symbol.for(""),H=t=>{if((null==t?void 0:t.r)===V)return null==t?void 0:t
                          .disabled=${this.disabled}
                          .indeterminate=${ni(null!==(i=t.subOptions)&&void 0!==i?i:[],(t=>{var i;return null!==(i=t.subOptions)&&void 0!==i?i:[]})).some((t=>t.selected))}
                          @change=${i=>this.optionsChanged(i,t)}>
-                ${t.label}
+                ${t.renderOption?t.renderOption:t.label}
             </ft-checkbox>
         `}buildMonoValuedOption(t){return e.html`
             <ft-radio name="${this.id+Math.round(1e6*Math.random())}"
@@ -884,7 +884,7 @@ const V=Symbol.for(""),H=t=>{if((null==t?void 0:t.r)===V)return null==t?void 0:t
                       @click=${i=>this.optionsChanged(i,t)}
                       @keyup=${i=>this.onRadioKeyUp(i,t)}
                       @change=${t=>t.stopPropagation()}>
-                ${t.label}
+                ${t.renderOption?t.renderOption:t.label}
             </ft-radio>
         `}onRadioKeyUp(t,i){i.selected&&" "===t.key&&this.optionsChanged(t,i)}optionsChanged(t,i){t.stopPropagation(),this.dispatchEvent(new CustomEvent("change",{detail:i}))}displayLevel(t){this.dispatchEvent(new CustomEvent("display-level",{detail:t}))}}de.elementDefinitions={"ft-button":Wi,"ft-ripple":gi,"ft-typography":ri,"ft-checkbox":Ji,"ft-icon":Fi,"ft-radio":ne},de.styles=fe,ce([o.property({type:String})],de.prototype,"id",void 0),ce([o.property({type:Object})],de.prototype,"parent",void 0),ce([o.property({type:Array})],de.prototype,"options",void 0),ce([o.property({type:Boolean})],de.prototype,"multivalued",void 0),ce([o.property({type:Boolean})],de.prototype,"disabled",void 0),ce([o.property({type:Boolean})],de.prototype,"hideSelectedOptions",void 0),ce([o.property({type:Boolean})],de.prototype,"preventNavigation",void 0),ce([o.property({type:String})],de.prototype,"filter",void 0),ce([o.property({type:String})],de.prototype,"moreValuesButtonLabel",void 0),ce([o.property({type:String})],de.prototype,"noValuesLabel",void 0),ce([o.property({type:Number})],de.prototype,"displayedValuesLimit",void 0),ce([o.query(".ft-filter-level--container")],de.prototype,"container",void 0),ce([o.state()],de.prototype,"displayedPages",void 0);const ue={buttonsColor:i.FtCssVariableFactory.extend("--ft-snap-scroll-buttons-color",i.designSystemVariables.colorPrimary),buttonsZIndex:i.FtCssVariableFactory.create("--ft-snap-scroll-buttons-z-index","COLOR","1"),gap:i.FtCssVariableFactory.create("--ft-snap-scroll-gap","SIZE","0"),colorSurface:i.FtCssVariableFactory.external(i.designSystemVariables.colorSurface,"Design system")},ve=e.css`
     .ft-snap-scroll {
@@ -1143,14 +1143,14 @@ const V=Symbol.for(""),H=t=>{if((null==t?void 0:t.r)===V)return null==t?void 0:t
             slot {
                 display: none;
             }
-        `];var $e=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};class ke extends CustomEvent{constructor(t){super("change",{detail:t})}}class we extends i.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.withScroll=!1,this.filter="",this.displayedLevels=[],this.scrollResizeObserver=new ResizeObserver((()=>this.updateScroll())),this.levelsScrollDebouncer=new i.Debouncer(300),this.changeDebouncer=new i.Debouncer(10)}get flatOptions(){return ni(this.options,(t=>{var i;return null!==(i=t.subOptions)&&void 0!==i?i:[]}))}render(){var t,i;const o=this.flatOptions.some((t=>t.selected));let s=this.withScroll||this.filter||null!==(i=null===(t=this.lastLevel)||void 0===t?void 0:t.hasHiddenValues)&&void 0!==i&&i;return e.html`
+        `];var $e=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};class ke extends CustomEvent{constructor(t){super("change",{detail:t})}}class we extends i.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.withScroll=!1,this.filter="",this.displayedLevels=[],this.scrollResizeObserver=new ResizeObserver((()=>this.updateScroll())),this.levelsScrollDebouncer=new i.Debouncer(300),this.changeDebouncer=new i.Debouncer(10)}get flatOptions(){return ni(this.options,(t=>{var i;return null!==(i=t.subOptions)&&void 0!==i?i:[]}))}render(){var t,i;const o=this.flatOptions.some((t=>t.selected));let s=this.withScroll||this.filter||null!==(i=null===(t=this.lastLevel)||void 0===t?void 0:t.hasHiddenValues)&&void 0!==i&&i;return e.html`
             <div class="ft-filter--container ${this.disabled?"ft-filter--disabled":""}"
                  part="container">
                 ${this.label||o?e.html`
                     <div class="ft-filter--header" part="header">
                         <ft-typography class="ft-filter--label" variant="overline" part="label">${this.label}
                         </ft-typography>
-                        ${o?e.html`
+                        ${o&&!this.hideClearButton?e.html`
                             <ft-button icon="close" dense @click=${this.clear} part="clear-button">
                                 ${this.clearButtonLabel}
                             </ft-button>
@@ -1197,7 +1197,7 @@ const V=Symbol.for(""),H=t=>{if((null==t?void 0:t.r)===V)return null==t?void 0:t
             <ft-filter-level
                     class="${t}"
                     id="${this.id}"
-                    filter="${this.filter}"
+                    .filter="${this.filter}"
                     moreValuesButtonLabel="${this.moreValuesButtonLabel}"
                     ?multivalued=${this.multivalued}
                     ?disabled=${this.disabled||"ft-filter--level-center"!==t}
@@ -1212,6 +1212,6 @@ const V=Symbol.for(""),H=t=>{if((null==t?void 0:t.r)===V)return null==t?void 0:t
                     .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 i;t.stopPropagation();const e=this.flatOptions.find((i=>i.value===t.detail.value));e.selected=!e.selected;const o=t=>{var i;t!==e&&(t.selected=!1),null===(i=t.subOptions)||void 0===i||i.forEach(o)};this.multivalued?null===(i=e.subOptions)||void 0===i||i.forEach(o):this.options.forEach(o),this.optionsChanged()}optionsChanged(){this.changeDebouncer.run((()=>{var t;const i=this.flatOptions.filter((t=>t.selected)).map((t=>t.value));this.dispatchEvent(new ke(i)),this.requestUpdate(),null===(t=this.levels)||void 0===t||t.forEach((t=>t.requestUpdate()))}))}updateOptionsFromSlot(t){t.stopPropagation(),this.options=this.slotElement.assignedElements().map((t=>t)),this.optionsChanged()}onFilterChange(){var t,i;this.filter=null!==(i=null===(t=this.filterInput)||void 0===t?void 0:t.value)&&void 0!==i?i:""}updateScroll(){this.valuesContainer&&(this.withScroll=this.valuesContainer.scrollHeight>this.valuesContainer.clientHeight)}}we.elementDefinitions={"ft-button":Wi,"ft-filter-level":de,"ft-snap-scroll":xe,"ft-typography":ri},we.styles=me,$e([o.property({type:String})],we.prototype,"id",void 0),$e([o.property({type:String})],we.prototype,"label",void 0),$e([o.property({type:String})],we.prototype,"filterPlaceHolder",void 0),$e([o.property({type:String})],we.prototype,"clearButtonLabel",void 0),$e([o.property({type:String})],we.prototype,"moreValuesButtonLabel",void 0),$e([o.property({type:String})],we.prototype,"noValuesLabel",void 0),$e([i.jsonProperty([])],we.prototype,"options",void 0),$e([o.property({type:Boolean})],we.prototype,"multivalued",void 0),$e([o.property({type:Boolean})],we.prototype,"disabled",void 0),$e([o.property({type:Boolean})],we.prototype,"raiseSelectedOptions",void 0),$e([o.property({type:Number})],we.prototype,"displayedValuesLimit",void 0),$e([o.query(".ft-filter--slot")],we.prototype,"slotElement",void 0),$e([o.query(".ft-filter--container")],we.prototype,"container",void 0),$e([o.query(".ft-filter--values")],we.prototype,"valuesContainer",void 0),$e([o.query(".ft-filter--levels")],we.prototype,"levelsContainer",void 0),$e([o.query(".ft-filter--levels ft-filter-level:last-child")],we.prototype,"lastLevel",void 0),$e([o.query(".ft-filter--filter input")],we.prototype,"filterInput",void 0),$e([o.queryAll(".ft-filter--levels ft-filter-level")],we.prototype,"levels",void 0),$e([o.state()],we.prototype,"withScroll",void 0),$e([o.state()],we.prototype,"filter",void 0),$e([o.state()],we.prototype,"slideIn",void 0),$e([o.state()],we.prototype,"slideOut",void 0);var ze=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};class Se extends i.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 i;t.stopPropagation();const e=this.flatOptions.find((i=>i.value===t.detail.value));e.selected=!e.selected;const o=t=>{var i;t!==e&&(t.selected=!1),null===(i=t.subOptions)||void 0===i||i.forEach(o)};this.multivalued?null===(i=e.subOptions)||void 0===i||i.forEach(o):this.options.forEach(o),this.optionsChanged()}optionsChanged(){this.changeDebouncer.run((()=>{var t;const i=this.flatOptions.filter((t=>t.selected)).map((t=>t.value));this.dispatchEvent(new ke(i)),this.requestUpdate(),null===(t=this.levels)||void 0===t||t.forEach((t=>t.requestUpdate()))}))}updateOptionsFromSlot(t){t.stopPropagation(),this.options=this.slotElement.assignedElements().map((t=>t)),this.optionsChanged()}onFilterChange(){var t,i;this.filter=null!==(i=null===(t=this.filterInput)||void 0===t?void 0:t.value)&&void 0!==i?i:""}updateScroll(){this.valuesContainer&&(this.withScroll=this.valuesContainer.scrollHeight>this.valuesContainer.clientHeight)}}we.elementDefinitions={"ft-button":Wi,"ft-filter-level":de,"ft-snap-scroll":xe,"ft-typography":ri},we.styles=me,$e([o.property({type:String})],we.prototype,"id",void 0),$e([o.property({type:String})],we.prototype,"label",void 0),$e([o.property({type:String})],we.prototype,"filterPlaceHolder",void 0),$e([o.property({type:String})],we.prototype,"clearButtonLabel",void 0),$e([o.property({type:String})],we.prototype,"moreValuesButtonLabel",void 0),$e([o.property({type:String})],we.prototype,"noValuesLabel",void 0),$e([i.jsonProperty([])],we.prototype,"options",void 0),$e([o.property({type:Boolean})],we.prototype,"multivalued",void 0),$e([o.property({type:Boolean})],we.prototype,"disabled",void 0),$e([o.property({type:Boolean})],we.prototype,"raiseSelectedOptions",void 0),$e([o.property({type:Number})],we.prototype,"displayedValuesLimit",void 0),$e([o.property({type:Boolean})],we.prototype,"hideClearButton",void 0),$e([o.query(".ft-filter--slot")],we.prototype,"slotElement",void 0),$e([o.query(".ft-filter--container")],we.prototype,"container",void 0),$e([o.query(".ft-filter--values")],we.prototype,"valuesContainer",void 0),$e([o.query(".ft-filter--levels")],we.prototype,"levelsContainer",void 0),$e([o.query(".ft-filter--levels ft-filter-level:last-child")],we.prototype,"lastLevel",void 0),$e([o.query(".ft-filter--filter input")],we.prototype,"filterInput",void 0),$e([o.queryAll(".ft-filter--levels ft-filter-level")],we.prototype,"levels",void 0),$e([o.state()],we.prototype,"withScroll",void 0),$e([o.state()],we.prototype,"filter",void 0),$e([o.state()],we.prototype,"slideIn",void 0),$e([o.state()],we.prototype,"slideOut",void 0);var ze=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};class Se extends i.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))}updated(t){super.updated(t),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}}Se.elementDefinitions={},ze([o.property({type:String})],Se.prototype,"label",void 0),ze([o.property({type:Object,converter:t=>t})],Se.prototype,"value",void 0),ze([o.property({type:Boolean,reflect:!0})],Se.prototype,"selected",void 0),ze([o.property({type:Object})],Se.prototype,"subOptions",void 0),ze([o.query(".ft-filter-option--slot")],Se.prototype,"slotElement",void 0),i.customElement("ft-filter")(we),i.customElement("ft-filter-option")(Se),t.FtFilter=we,t.FtFilterChangeEvent=ke,t.FtFilterCssVariables=ye,t.FtFilterOption=Se,t.styles=me,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litRepeat,ftGlobals.litClassMap,ftGlobals.litUnsafeHTML);
+        `}updateSubOptionsFromSlot(t){t.stopPropagation(),this.subOptions=this.slotElement.assignedElements().map((t=>t))}updated(t){super.updated(t),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}}Se.elementDefinitions={},ze([o.property({type:String})],Se.prototype,"label",void 0),ze([o.property({type:Object,converter:t=>t})],Se.prototype,"value",void 0),ze([o.property({type:Boolean,reflect:!0})],Se.prototype,"selected",void 0),ze([o.property({type:Object})],Se.prototype,"subOptions",void 0),ze([i.jsonProperty({})],Se.prototype,"renderOption",void 0),ze([o.query(".ft-filter-option--slot")],Se.prototype,"slotElement",void 0),i.customElement("ft-filter")(we),i.customElement("ft-filter-option")(Se),t.FtFilter=we,t.FtFilterChangeEvent=ke,t.FtFilterCssVariables=ye,t.FtFilterOption=Se,t.styles=me,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litRepeat,ftGlobals.litClassMap,ftGlobals.litUnsafeHTML);

package/build/ft-filter.min.js

@@ -941,7 +941,7 @@ class Ni extends qe{constructor(t){if(super(t),this.it=Y,t.type!==Ze)throw Error
         margin: 10px 0;
         color: ${co.colorOnSurfaceMedium};
     }
-`;var fo=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class uo extends $t{constructor(){super(...arguments),this.id="",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 q`
+`;var fo=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class uo extends $t{constructor(){super(...arguments),this.id="",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 q`
             <div class="ft-filter-level--container ${this.disabled?"ft-filter--disabled":""}">
                 ${null==this.parent?null:q`
                     <div tabindex="0"
@@ -992,7 +992,7 @@ class Ni extends qe{constructor(t){if(super(t),this.it=Y,t.type!==Ze)throw Error
                          .disabled=${this.disabled}
                          .indeterminate=${Ke(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.label}
+                ${t.renderOption?t.renderOption:t.label}
             </ft-checkbox>
         `}buildMonoValuedOption(t){return q`
             <ft-radio name="${this.id+Math.round(1e6*Math.random())}"
@@ -1003,7 +1003,7 @@ class Ni extends qe{constructor(t){if(super(t),this.it=Y,t.type!==Ze)throw Error
                       @click=${e=>this.optionsChanged(e,t)}
                       @keyup=${e=>this.onRadioKeyUp(e,t)}
                       @change=${t=>t.stopPropagation()}>
-                ${t.label}
+                ${t.renderOption?t.renderOption:t.label}
             </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}))}}uo.elementDefinitions={"ft-button":Hi,"ft-ripple":vi,"ft-typography":He,"ft-checkbox":Gi,"ft-icon":Li,"ft-radio":no},uo.styles=po,fo([o({type:String})],uo.prototype,"id",void 0),fo([o({type:Object})],uo.prototype,"parent",void 0),fo([o({type:Array})],uo.prototype,"options",void 0),fo([o({type:Boolean})],uo.prototype,"multivalued",void 0),fo([o({type:Boolean})],uo.prototype,"disabled",void 0),fo([o({type:Boolean})],uo.prototype,"hideSelectedOptions",void 0),fo([o({type:Boolean})],uo.prototype,"preventNavigation",void 0),fo([o({type:String})],uo.prototype,"filter",void 0),fo([o({type:String})],uo.prototype,"moreValuesButtonLabel",void 0),fo([o({type:String})],uo.prototype,"noValuesLabel",void 0),fo([o({type:Number})],uo.prototype,"displayedValuesLimit",void 0),fo([n(".ft-filter-level--container")],uo.prototype,"container",void 0),fo([s()],uo.prototype,"displayedPages",void 0);const vo={buttonsColor:yt.extend("--ft-snap-scroll-buttons-color",gt.colorPrimary),buttonsZIndex:yt.create("--ft-snap-scroll-buttons-z-index","COLOR","1"),gap:yt.create("--ft-snap-scroll-gap","SIZE","0"),colorSurface:yt.external(gt.colorSurface,"Design system")},bo=x`
     .ft-snap-scroll {
@@ -1262,14 +1262,14 @@ class Ni extends qe{constructor(t){if(super(t),this.it=Y,t.type!==Ze)throw Error
             slot {
                 display: none;
             }
-        `];var wo=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class ko extends CustomEvent{constructor(t){super("change",{detail:t})}}class Oo extends $t{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.withScroll=!1,this.filter="",this.displayedLevels=[],this.scrollResizeObserver=new ResizeObserver((()=>this.updateScroll())),this.levelsScrollDebouncer=new e(300),this.changeDebouncer=new e(10)}get flatOptions(){return Ke(this.options,(t=>{var e;return null!==(e=t.subOptions)&&void 0!==e?e:[]}))}render(){var t,e;const i=this.flatOptions.some((t=>t.selected));let o=this.withScroll||this.filter||null!==(e=null===(t=this.lastLevel)||void 0===t?void 0:t.hasHiddenValues)&&void 0!==e&&e;return q`
+        `];var wo=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class ko extends CustomEvent{constructor(t){super("change",{detail:t})}}class Oo extends $t{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.withScroll=!1,this.filter="",this.displayedLevels=[],this.scrollResizeObserver=new ResizeObserver((()=>this.updateScroll())),this.levelsScrollDebouncer=new e(300),this.changeDebouncer=new e(10)}get flatOptions(){return Ke(this.options,(t=>{var e;return null!==(e=t.subOptions)&&void 0!==e?e:[]}))}render(){var t,e;const i=this.flatOptions.some((t=>t.selected));let o=this.withScroll||this.filter||null!==(e=null===(t=this.lastLevel)||void 0===t?void 0:t.hasHiddenValues)&&void 0!==e&&e;return q`
             <div class="ft-filter--container ${this.disabled?"ft-filter--disabled":""}"
                  part="container">
                 ${this.label||i?q`
                     <div class="ft-filter--header" part="header">
                         <ft-typography class="ft-filter--label" variant="overline" part="label">${this.label}
                         </ft-typography>
-                        ${i?q`
+                        ${i&&!this.hideClearButton?q`
                             <ft-button icon="close" dense @click=${this.clear} part="clear-button">
                                 ${this.clearButtonLabel}
                             </ft-button>
@@ -1316,7 +1316,7 @@ class Ni extends qe{constructor(t){if(super(t),this.it=Y,t.type!==Ze)throw Error
             <ft-filter-level
                     class="${t}"
                     id="${this.id}"
-                    filter="${this.filter}"
+                    .filter="${this.filter}"
                     moreValuesButtonLabel="${this.moreValuesButtonLabel}"
                     ?multivalued=${this.multivalued}
                     ?disabled=${this.disabled||"ft-filter--level-center"!==t}
@@ -1331,6 +1331,6 @@ class Ni extends qe{constructor(t){if(super(t),this.it=Y,t.type!==Ze)throw Error
                     .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 i=this.flatOptions.find((e=>e.value===t.detail.value));i.selected=!i.selected;const o=t=>{var e;t!==i&&(t.selected=!1),null===(e=t.subOptions)||void 0===e||e.forEach(o)};this.multivalued?null===(e=i.subOptions)||void 0===e||e.forEach(o):this.options.forEach(o),this.optionsChanged()}optionsChanged(){this.changeDebouncer.run((()=>{var t;const e=this.flatOptions.filter((t=>t.selected)).map((t=>t.value));this.dispatchEvent(new ko(e)),this.requestUpdate(),null===(t=this.levels)||void 0===t||t.forEach((t=>t.requestUpdate()))}))}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)}}Oo.elementDefinitions={"ft-button":Hi,"ft-filter-level":uo,"ft-snap-scroll":go,"ft-typography":He},Oo.styles=$o,wo([o({type:String})],Oo.prototype,"id",void 0),wo([o({type:String})],Oo.prototype,"label",void 0),wo([o({type:String})],Oo.prototype,"filterPlaceHolder",void 0),wo([o({type:String})],Oo.prototype,"clearButtonLabel",void 0),wo([o({type:String})],Oo.prototype,"moreValuesButtonLabel",void 0),wo([o({type:String})],Oo.prototype,"noValuesLabel",void 0),wo([p([])],Oo.prototype,"options",void 0),wo([o({type:Boolean})],Oo.prototype,"multivalued",void 0),wo([o({type:Boolean})],Oo.prototype,"disabled",void 0),wo([o({type:Boolean})],Oo.prototype,"raiseSelectedOptions",void 0),wo([o({type:Number})],Oo.prototype,"displayedValuesLimit",void 0),wo([n(".ft-filter--slot")],Oo.prototype,"slotElement",void 0),wo([n(".ft-filter--container")],Oo.prototype,"container",void 0),wo([n(".ft-filter--values")],Oo.prototype,"valuesContainer",void 0),wo([n(".ft-filter--levels")],Oo.prototype,"levelsContainer",void 0),wo([n(".ft-filter--levels ft-filter-level:last-child")],Oo.prototype,"lastLevel",void 0),wo([n(".ft-filter--filter input")],Oo.prototype,"filterInput",void 0),wo([function(t){return r({descriptor:e=>({get(){var e,i;return null!==(i=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelectorAll(t))&&void 0!==i?i:[]},enumerable:!0,configurable:!0})})}(".ft-filter--levels ft-filter-level")],Oo.prototype,"levels",void 0),wo([s()],Oo.prototype,"withScroll",void 0),wo([s()],Oo.prototype,"filter",void 0),wo([s()],Oo.prototype,"slideIn",void 0),wo([s()],Oo.prototype,"slideOut",void 0);var So=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class Co extends $t{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1,this.subOptions=[]}render(){return q`
+        `}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 i=this.flatOptions.find((e=>e.value===t.detail.value));i.selected=!i.selected;const o=t=>{var e;t!==i&&(t.selected=!1),null===(e=t.subOptions)||void 0===e||e.forEach(o)};this.multivalued?null===(e=i.subOptions)||void 0===e||e.forEach(o):this.options.forEach(o),this.optionsChanged()}optionsChanged(){this.changeDebouncer.run((()=>{var t;const e=this.flatOptions.filter((t=>t.selected)).map((t=>t.value));this.dispatchEvent(new ko(e)),this.requestUpdate(),null===(t=this.levels)||void 0===t||t.forEach((t=>t.requestUpdate()))}))}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)}}Oo.elementDefinitions={"ft-button":Hi,"ft-filter-level":uo,"ft-snap-scroll":go,"ft-typography":He},Oo.styles=$o,wo([o({type:String})],Oo.prototype,"id",void 0),wo([o({type:String})],Oo.prototype,"label",void 0),wo([o({type:String})],Oo.prototype,"filterPlaceHolder",void 0),wo([o({type:String})],Oo.prototype,"clearButtonLabel",void 0),wo([o({type:String})],Oo.prototype,"moreValuesButtonLabel",void 0),wo([o({type:String})],Oo.prototype,"noValuesLabel",void 0),wo([p([])],Oo.prototype,"options",void 0),wo([o({type:Boolean})],Oo.prototype,"multivalued",void 0),wo([o({type:Boolean})],Oo.prototype,"disabled",void 0),wo([o({type:Boolean})],Oo.prototype,"raiseSelectedOptions",void 0),wo([o({type:Number})],Oo.prototype,"displayedValuesLimit",void 0),wo([o({type:Boolean})],Oo.prototype,"hideClearButton",void 0),wo([n(".ft-filter--slot")],Oo.prototype,"slotElement",void 0),wo([n(".ft-filter--container")],Oo.prototype,"container",void 0),wo([n(".ft-filter--values")],Oo.prototype,"valuesContainer",void 0),wo([n(".ft-filter--levels")],Oo.prototype,"levelsContainer",void 0),wo([n(".ft-filter--levels ft-filter-level:last-child")],Oo.prototype,"lastLevel",void 0),wo([n(".ft-filter--filter input")],Oo.prototype,"filterInput",void 0),wo([function(t){return r({descriptor:e=>({get(){var e,i;return null!==(i=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelectorAll(t))&&void 0!==i?i:[]},enumerable:!0,configurable:!0})})}(".ft-filter--levels ft-filter-level")],Oo.prototype,"levels",void 0),wo([s()],Oo.prototype,"withScroll",void 0),wo([s()],Oo.prototype,"filter",void 0),wo([s()],Oo.prototype,"slideIn",void 0),wo([s()],Oo.prototype,"slideOut",void 0);var So=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class Co extends $t{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1,this.subOptions=[]}render(){return q`
             <slot class="ft-filter-option--slot" @slotchange=${this.updateSubOptionsFromSlot}></slot>
-        `}updateSubOptionsFromSlot(t){t.stopPropagation(),this.subOptions=this.slotElement.assignedElements().map((t=>t))}updated(t){super.updated(t),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}}Co.elementDefinitions={},So([o({type:String})],Co.prototype,"label",void 0),So([o({type:Object,converter:t=>t})],Co.prototype,"value",void 0),So([o({type:Boolean,reflect:!0})],Co.prototype,"selected",void 0),So([o({type:Object})],Co.prototype,"subOptions",void 0),So([n(".ft-filter-option--slot")],Co.prototype,"slotElement",void 0),c("ft-filter")(Oo),c("ft-filter-option")(Co),t.FtFilter=Oo,t.FtFilterChangeEvent=ko,t.FtFilterCssVariables=mo,t.FtFilterOption=Co,t.styles=$o,Object.defineProperty(t,"i",{value:!0})}({});
+        `}updateSubOptionsFromSlot(t){t.stopPropagation(),this.subOptions=this.slotElement.assignedElements().map((t=>t))}updated(t){super.updated(t),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}}Co.elementDefinitions={},So([o({type:String})],Co.prototype,"label",void 0),So([o({type:Object,converter:t=>t})],Co.prototype,"value",void 0),So([o({type:Boolean,reflect:!0})],Co.prototype,"selected",void 0),So([o({type:Object})],Co.prototype,"subOptions",void 0),So([p({})],Co.prototype,"renderOption",void 0),So([n(".ft-filter-option--slot")],Co.prototype,"slotElement",void 0),c("ft-filter")(Oo),c("ft-filter-option")(Co),t.FtFilter=Oo,t.FtFilterChangeEvent=ko,t.FtFilterCssVariables=mo,t.FtFilterOption=Co,t.styles=$o,Object.defineProperty(t,"i",{value:!0})}({});

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

@@ -11,5 +11,6 @@ export interface FtFilterProperties {
     disabled?: boolean;
     raiseSelectedOptions?: boolean;
     displayedValuesLimit?: number;
+    hideClearButton?: boolean;
 }
 //# sourceMappingURL=ft-filter.properties.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-filter",
-  "version": "0.3.31",
+  "version": "0.3.32",
   "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": "0.3.31",
-    "@fluid-topics/ft-checkbox": "0.3.31",
-    "@fluid-topics/ft-icon": "0.3.31",
-    "@fluid-topics/ft-radio": "0.3.31",
-    "@fluid-topics/ft-ripple": "0.3.31",
-    "@fluid-topics/ft-snap-scroll": "0.3.31",
-    "@fluid-topics/ft-typography": "0.3.31",
-    "@fluid-topics/ft-wc-utils": "0.3.31",
+    "@fluid-topics/ft-button": "0.3.32",
+    "@fluid-topics/ft-checkbox": "0.3.32",
+    "@fluid-topics/ft-icon": "0.3.32",
+    "@fluid-topics/ft-radio": "0.3.32",
+    "@fluid-topics/ft-ripple": "0.3.32",
+    "@fluid-topics/ft-snap-scroll": "0.3.32",
+    "@fluid-topics/ft-typography": "0.3.32",
+    "@fluid-topics/ft-wc-utils": "0.3.32",
     "lit": "2.2.8"
   },
-  "gitHead": "65117d677b7174e71b6c695661d333e2a9ac8eae"
+  "gitHead": "27bd400b0630590c76a67d175875b5ac7f03f4d9"
 }