@fluid-topics/ft-filter 0.1.7 → 0.1.10

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

@@ -1,4 +1,5 @@
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { PropertyValues } from "lit";
 export interface FtFilterOptionProperties {
     label: string;
     value: any;
@@ -13,5 +14,6 @@ export declare class FtFilterOption extends FtLitElement implements FtFilterOpti
     subOptions: Array<FtFilterOptionProperties>;
     protected getTemplate(): import("lit-html").TemplateResult<1>;
     private updateSubOptionsFromSlot;
+    protected updated(changedProperties: PropertyValues): void;
 }
 //# sourceMappingURL=ft-filter-option.d.ts.map

package/build/ft-filter-option.js

@@ -24,6 +24,10 @@ let FtFilterOption = class FtFilterOption extends FtLitElement {
         const slot = e.composedPath()[0];
         this.subOptions = slot.assignedElements().map(n => n);
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.dispatchEvent(new CustomEvent("option-change", { detail: this, bubbles: true }));
+    }
 };
 FtFilterOption.elementDefinitions = {};
 __decorate([

package/build/ft-filter.js

@@ -190,7 +190,8 @@ let FtFilter = class FtFilter extends FtLitElement {
                 <div class="ft-filter--values">
                     ${this.renderLevels()}
                 </div>
-                <slot @slotchange=${this.updateOptionsFromSlot}></slot>
+                <slot @slotchange=${this.updateOptionsFromSlot}
+                      @option-change=${this.updateOptionsFromSlot}></slot>
             </div>
         `;
     }

package/build/ft-filter.light.js

@@ -101,7 +101,11 @@ const H=t=>({_$litStatic$:t}),P=new Map,V=(t=>(e,...i)=>{var r;const o=i.length;
         line-height: ${Gt.lineHeight};
         text-transform: ${Gt.textTransform};
     }
-`;let ee=class extends r.FtLitElement{constructor(){super(...arguments),this.variant=G.body1}getStyles(){return[Ut,Wt,Zt,qt,Xt,Kt,Yt,Jt,Qt,te]}getTemplate(){return this.element?V`
+`;let ee=class extends r.FtLitElement{constructor(){super(...arguments),this.variant=G.body1}getStyles(){return[Ut,Wt,Zt,qt,Xt,Kt,Yt,Jt,Qt,te,e.css`
+                .ft-typography {
+                    vertical-align: inherit;
+                }
+            `]}getTemplate(){return this.element?V`
                 <${H(this.element)}
                         class="ft-typography ft-typography--${this.variant}">
                     <slot></slot>
@@ -627,7 +631,7 @@ const Ie=e.css`:host{font-family:var(--mdc-icon-font, "Material Icons");font-wei
             </ft-tooltip>
         `}resolveIcon(){return this.loading?e.html`
                 <ft-loader></ft-loader> `:this.icon?e.html`
-                        <mwc-icon>${this.icon}</mwc-icon> `:e.nothing}focus(){var t;null===(t=this.button)||void 0===t||t.focus()}getLabel(){return this.label||this.textContent}get textContent(){var t,e;return null!==(e=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==e?e:""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}isDisabled(){return this.disabled||this.loading}};ei.elementDefinitions={"ft-ripple":De,"ft-tooltip":Ge,"ft-typography":ee,"mwc-icon":je,"ft-loader":Ze},qe([i.property({type:Boolean})],ei.prototype,"primary",void 0),qe([i.property({type:Boolean})],ei.prototype,"outlined",void 0),qe([i.property({type:Boolean})],ei.prototype,"disabled",void 0),qe([i.property({type:Boolean})],ei.prototype,"dense",void 0),qe([i.property({type:Boolean})],ei.prototype,"round",void 0),qe([i.property({type:String})],ei.prototype,"label",void 0),qe([i.property({type:String})],ei.prototype,"icon",void 0),qe([i.property({type:Boolean})],ei.prototype,"trailingIcon",void 0),qe([i.property({type:Boolean})],ei.prototype,"loading",void 0),qe([i.property({type:String})],ei.prototype,"tooltipPosition",void 0),qe([i.query(".ft-button")],ei.prototype,"button",void 0),qe([i.query(".ft-button--label slot")],ei.prototype,"slottedContent",void 0),ei=qe([r.customElement("ft-button")],ei);
+                        <mwc-icon>${this.icon}</mwc-icon> `:e.nothing}focus(){var t;null===(t=this.button)||void 0===t||t.focus()}getLabel(){return this.label||this.textContent}get textContent(){return this.unslotText(this.slottedContent).trim()}unslotText(t){return t instanceof HTMLSlotElement?t.assignedNodes().map((t=>this.unslotText(t))).join(""):(null==t?void 0:t.textContent)||""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}isDisabled(){return this.disabled||this.loading}};ei.elementDefinitions={"ft-ripple":De,"ft-tooltip":Ge,"ft-typography":ee,"mwc-icon":je,"ft-loader":Ze},qe([i.property({type:Boolean})],ei.prototype,"primary",void 0),qe([i.property({type:Boolean})],ei.prototype,"outlined",void 0),qe([i.property({type:Boolean})],ei.prototype,"disabled",void 0),qe([i.property({type:Boolean})],ei.prototype,"dense",void 0),qe([i.property({type:Boolean})],ei.prototype,"round",void 0),qe([i.property({type:String})],ei.prototype,"label",void 0),qe([i.property({type:String})],ei.prototype,"icon",void 0),qe([i.property({type:Boolean})],ei.prototype,"trailingIcon",void 0),qe([i.property({type:Boolean})],ei.prototype,"loading",void 0),qe([i.property({type:String})],ei.prototype,"tooltipPosition",void 0),qe([i.query(".ft-button")],ei.prototype,"button",void 0),qe([i.query(".ft-button--label slot")],ei.prototype,"slottedContent",void 0),ei=qe([r.customElement("ft-button")],ei);
 /**
      * @license
      * Copyright 2017 Google Inc.
@@ -1041,7 +1045,7 @@ const bi=e.css`.mdc-touch-target-wrapper{display:inline}.mdc-radio{padding:calc(
             </div>
         `}updated(t){var e;super.updated(t),this.contentSlot&&(this.resizeObserver.observe(this.contentSlot),this.listenedContainer!==this.contentSlot&&(this.listenedContainer&&this.listenedContainer.removeEventListener("scroll",this.updateScrollCallback),this.listenedContainer=this.contentSlot,null===(e=this.listenedContainer)||void 0===e||e.addEventListener("scroll",this.updateScrollCallback))),t.has("horizontal")&&(this.horizontal?(this.offsetAttribute="offsetLeft",this.scrollAttribute="scrollLeft",this.sizeAttribute="clientWidth",this.scrollSizeAttribute="scrollWidth"):(this.offsetAttribute="offsetTop",this.scrollAttribute="scrollTop",this.sizeAttribute="clientHeight",this.scrollSizeAttribute="scrollHeight")),t.has("currentElement")&&this.dispatchEvent(new wi(this.currentElement,this.elements[this.currentElement]))}onScroll(){this.scrollDebouncer.run((()=>this.snap())),this.scheduleUpdateScroll()}snap(){let t=this.closestElementFromStart();if(null!=t){const e=this.getDistanceFromStart(t);Math.abs(this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]-this.contentSlot[this.scrollSizeAttribute])<e&&(t=this.lastElement),this.scrollToElement(t)}}scrollToElement(t){var e,i;t&&(this.horizontal?null===(e=this.contentSlot)||void 0===e||e.scrollTo({left:this.getOffset(t)-this.controlsSize,behavior:"smooth"}):null===(i=this.contentSlot)||void 0===i||i.scrollTo({top:this.getOffset(t)-this.controlsSize,behavior:"smooth"}),this.currentElement=this.elements.indexOf(t))}onSlotChange(){var t,e;this.elements=null!==(e=null===(t=this.contentSlot)||void 0===t?void 0:t.assignedElements().map((t=>t)))&&void 0!==e?e:[],this.scheduleUpdateScroll()}closestElementFromStart(){return this.elements[this.closestIndexFromStart()]}closestIndexFromStart(){let t=-1;for(let e=0;e<this.elements.length;e++)(t<0||this.getDistanceFromStart(this.elements[e])<this.getDistanceFromStart(this.elements[t]))&&(t=e);return t}scheduleUpdateScroll(){this.updateScrollDebouncer.run((()=>this.updateScroll()))}updateScroll(){null!=this.contentSlot?(this.withScroll=this.contentSlot[this.scrollSizeAttribute]>this.contentSlot[this.sizeAttribute],this.startReached=0===this.contentSlot[this.scrollAttribute],this.endReached=this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]+1>=this.contentSlot[this.scrollSizeAttribute]):(this.withScroll=!1,this.startReached=!0,this.endReached=!0)}get lastElement(){return this.elements[this.elements.length-1]}get firstElementOffset(){let t=this.elements[0];return t?t[this.offsetAttribute]:0}get controlsSize(){return this.controls?36:0}get nextSize(){return this.endReached?0:this.controlsSize}get prevSize(){return this.startReached?0:this.controlsSize}getOffset(t){return t[this.offsetAttribute]-this.firstElementOffset}getDistanceFromStart(t){const e=t===this.elements[0]?0:this.controlsSize;return Math.abs(this.getOffset(t)-this.contentSlot[this.scrollAttribute]-e)}};$i.elementDefinitions={"ft-button":ei},xi([i.property({type:Boolean})],$i.prototype,"horizontal",void 0),xi([i.property({type:Boolean})],$i.prototype,"hideScrollbar",void 0),xi([i.property({type:Boolean})],$i.prototype,"controls",void 0),xi([i.property({type:Boolean})],$i.prototype,"limitSize",void 0),xi([i.state()],$i.prototype,"elements",void 0),xi([i.state()],$i.prototype,"currentElement",void 0),xi([i.state()],$i.prototype,"withScroll",void 0),xi([i.state()],$i.prototype,"startReached",void 0),xi([i.state()],$i.prototype,"endReached",void 0),xi([i.query(".ft-snap-scroll--content")],$i.prototype,"contentSlot",void 0),$i=xi([r.customElement("ft-snap-scroll")],$i);var zi=function(t,e,i,r){for(var o,c=arguments.length,a=c<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,n=t.length-1;n>=0;n--)(o=t[n])&&(a=(c<3?o(a):c>3?o(e,i,a):o(e,i))||a);return c>3&&a&&Object.defineProperty(e,i,a),a};t.FtFilterOption=class extends r.FtLitElement{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1,this.subOptions=[]}getTemplate(){return e.html`
             <slot @slotchange=${this.updateSubOptionsFromSlot}></slot>
-        `}updateSubOptionsFromSlot(t){const e=t.composedPath()[0];this.subOptions=e.assignedElements().map((t=>t))}},t.FtFilterOption.elementDefinitions={},zi([i.property({type:String})],t.FtFilterOption.prototype,"label",void 0),zi([i.property({type:Object,converter:t=>t})],t.FtFilterOption.prototype,"value",void 0),zi([i.property({type:Boolean,reflect:!0})],t.FtFilterOption.prototype,"selected",void 0),zi([i.property({type:Object})],t.FtFilterOption.prototype,"subOptions",void 0),t.FtFilterOption=zi([r.customElement("ft-filter-option")],t.FtFilterOption);var Si=function(t,e,i,r){for(var o,c=arguments.length,a=c<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,n=t.length-1;n>=0;n--)(o=t[n])&&(a=(c<3?o(a):c>3?o(e,i,a):o(e,i))||a);return c>3&&a&&Object.defineProperty(e,i,a),a};const Oi={colorOutline:r.FtCssVariable.external(r.designSystemVariables.colorOutline,"Design system"),colorOnSurface:r.FtCssVariable.external(r.designSystemVariables.colorOnSurface,"Design system"),colorOnSurfaceMedium:r.FtCssVariable.external(r.designSystemVariables.colorOnSurfaceMedium,"Design system"),colorPrimary:r.FtCssVariable.external(r.designSystemVariables.colorPrimary,"Design system"),colorSurface:r.FtCssVariable.external(r.designSystemVariables.colorSurface,"Design system"),transitionDuration:r.FtCssVariable.external(r.designSystemVariables.transitionDuration,"Design system"),transitionTimingFunction:r.FtCssVariable.external(r.designSystemVariables.transitionTimingFunction,"Design system")};class Ti extends CustomEvent{constructor(t){super("change",{detail:t})}}t.FtFilter=class extends r.FtLitElement{constructor(){super(...arguments),this.id="",this.label="",this.filterPlaceHolder="Filter {0}",this.clearButtonLabel="Clear",this.moreValuesButtonLabel="More",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 r.Debouncer(300)}getStyles(){return[Yt,e.css`
+        `}updateSubOptionsFromSlot(t){const e=t.composedPath()[0];this.subOptions=e.assignedElements().map((t=>t))}updated(t){super.updated(t),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}},t.FtFilterOption.elementDefinitions={},zi([i.property({type:String})],t.FtFilterOption.prototype,"label",void 0),zi([i.property({type:Object,converter:t=>t})],t.FtFilterOption.prototype,"value",void 0),zi([i.property({type:Boolean,reflect:!0})],t.FtFilterOption.prototype,"selected",void 0),zi([i.property({type:Object})],t.FtFilterOption.prototype,"subOptions",void 0),t.FtFilterOption=zi([r.customElement("ft-filter-option")],t.FtFilterOption);var Si=function(t,e,i,r){for(var o,c=arguments.length,a=c<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,n=t.length-1;n>=0;n--)(o=t[n])&&(a=(c<3?o(a):c>3?o(e,i,a):o(e,i))||a);return c>3&&a&&Object.defineProperty(e,i,a),a};const Oi={colorOutline:r.FtCssVariable.external(r.designSystemVariables.colorOutline,"Design system"),colorOnSurface:r.FtCssVariable.external(r.designSystemVariables.colorOnSurface,"Design system"),colorOnSurfaceMedium:r.FtCssVariable.external(r.designSystemVariables.colorOnSurfaceMedium,"Design system"),colorPrimary:r.FtCssVariable.external(r.designSystemVariables.colorPrimary,"Design system"),colorSurface:r.FtCssVariable.external(r.designSystemVariables.colorSurface,"Design system"),transitionDuration:r.FtCssVariable.external(r.designSystemVariables.transitionDuration,"Design system"),transitionTimingFunction:r.FtCssVariable.external(r.designSystemVariables.transitionTimingFunction,"Design system")};class Ti extends CustomEvent{constructor(t){super("change",{detail:t})}}t.FtFilter=class extends r.FtLitElement{constructor(){super(...arguments),this.id="",this.label="",this.filterPlaceHolder="Filter {0}",this.clearButtonLabel="Clear",this.moreValuesButtonLabel="More",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 r.Debouncer(300)}getStyles(){return[Yt,e.css`
                 :host {
                     display: flex;
                     max-height: 100%;
@@ -1171,7 +1175,8 @@ const bi=e.css`.mdc-touch-target-wrapper{display:inline}.mdc-radio{padding:calc(
                 <div class="ft-filter--values">
                     ${this.renderLevels()}
                 </div>
-                <slot @slotchange=${this.updateOptionsFromSlot}></slot>
+                <slot @slotchange=${this.updateOptionsFromSlot}
+                      @option-change=${this.updateOptionsFromSlot}></slot>
             </div>
         `}update(t){if(super.update(t),t.has("options")){const t=new Set(this.flatOptions.map((t=>t.value)));this.displayedLevels=this.displayedLevels.filter((e=>t.has(e)))}}contentAvailableCallback(t){var e,i;super.contentAvailableCallback(t),this.valuesContainer&&this.scrollResizeObserver.observe(this.valuesContainer),this.container&&this.scrollResizeObserver.observe(this.container),t.has("options")&&(this.updateScroll(),null===(e=this.levelsContainer)||void 0===e||e.scrollToIndex(this.displayedLevels.length)),t.has("slideIn")&&this.slideIn&&setTimeout((()=>{var t;null===(t=this.levelsContainer)||void 0===t||t.next(),this.slideIn=void 0}),0),t.has("slideOut")&&this.slideOut&&(null===(i=this.levelsContainer)||void 0===i||i.previous(),setTimeout((()=>{this.displayedLevels.pop(),this.slideOut=void 0}),300))}renderLevels(){const t=this.flatOptions,i=t.filter((t=>t.selected)),r=this.slideIn||this.slideOut?this.displayedLevels.length-2:this.displayedLevels.length-1,o=r<0?"ft-filter--level-center":"ft-filter--level-left";return e.html`
             ${this.raiseSelectedOptions&&i.length>0?e.html`

package/build/ft-filter.min.js

@@ -189,7 +189,11 @@ function ut(t,e,i){let r,o=t;return"object"==typeof t?(o=t.slot,r=t):r={flatten:
         line-height: ${Re.lineHeight};
         text-transform: ${Re.textTransform};
     }
-`;let Le=class extends yt{constructor(){super(...arguments),this.variant=Rt.body1}getStyles(){return[Ce,Ee,Te,Fe,Ae,Ne,Me,Be,je,De]}getTemplate(){return this.element?zt`
+`;let Le=class extends yt{constructor(){super(...arguments),this.variant=Rt.body1}getStyles(){return[Ce,Ee,Te,Fe,Ae,Ne,Me,Be,je,De,n`
+                .ft-typography {
+                    vertical-align: inherit;
+                }
+            `]}getTemplate(){return this.element?zt`
                 <${Ot(this.element)}
                         class="ft-typography ft-typography--${this.variant}">
                     <slot></slot>
@@ -742,7 +746,7 @@ const Ni=n`:host{font-family:var(--mdc-icon-font, "Material Icons");font-weight:
             </ft-tooltip>
         `}resolveIcon(){return this.loading?M`
                 <ft-loader></ft-loader> `:this.icon?M`
-                        <mwc-icon>${this.icon}</mwc-icon> `:j}focus(){var t;null===(t=this.button)||void 0===t||t.focus()}getLabel(){return this.label||this.textContent}get textContent(){var t,e;return null!==(e=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==e?e:""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}isDisabled(){return this.disabled||this.loading}};Qi.elementDefinitions={"ft-ripple":Ai,"ft-tooltip":Pi,"ft-typography":Le,"mwc-icon":Mi,"ft-loader":Wi},Gi([ct({type:Boolean})],Qi.prototype,"primary",void 0),Gi([ct({type:Boolean})],Qi.prototype,"outlined",void 0),Gi([ct({type:Boolean})],Qi.prototype,"disabled",void 0),Gi([ct({type:Boolean})],Qi.prototype,"dense",void 0),Gi([ct({type:Boolean})],Qi.prototype,"round",void 0),Gi([ct({type:String})],Qi.prototype,"label",void 0),Gi([ct({type:String})],Qi.prototype,"icon",void 0),Gi([ct({type:Boolean})],Qi.prototype,"trailingIcon",void 0),Gi([ct({type:Boolean})],Qi.prototype,"loading",void 0),Gi([ct({type:String})],Qi.prototype,"tooltipPosition",void 0),Gi([dt(".ft-button")],Qi.prototype,"button",void 0),Gi([dt(".ft-button--label slot")],Qi.prototype,"slottedContent",void 0),Qi=Gi([mt("ft-button")],Qi);
+                        <mwc-icon>${this.icon}</mwc-icon> `:j}focus(){var t;null===(t=this.button)||void 0===t||t.focus()}getLabel(){return this.label||this.textContent}get textContent(){return this.unslotText(this.slottedContent).trim()}unslotText(t){return t instanceof HTMLSlotElement?t.assignedNodes().map((t=>this.unslotText(t))).join(""):(null==t?void 0:t.textContent)||""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}isDisabled(){return this.disabled||this.loading}};Qi.elementDefinitions={"ft-ripple":Ai,"ft-tooltip":Pi,"ft-typography":Le,"mwc-icon":Mi,"ft-loader":Wi},Gi([ct({type:Boolean})],Qi.prototype,"primary",void 0),Gi([ct({type:Boolean})],Qi.prototype,"outlined",void 0),Gi([ct({type:Boolean})],Qi.prototype,"disabled",void 0),Gi([ct({type:Boolean})],Qi.prototype,"dense",void 0),Gi([ct({type:Boolean})],Qi.prototype,"round",void 0),Gi([ct({type:String})],Qi.prototype,"label",void 0),Gi([ct({type:String})],Qi.prototype,"icon",void 0),Gi([ct({type:Boolean})],Qi.prototype,"trailingIcon",void 0),Gi([ct({type:Boolean})],Qi.prototype,"loading",void 0),Gi([ct({type:String})],Qi.prototype,"tooltipPosition",void 0),Gi([dt(".ft-button")],Qi.prototype,"button",void 0),Gi([dt(".ft-button--label slot")],Qi.prototype,"slottedContent",void 0),Qi=Gi([mt("ft-button")],Qi);
 /**
      * @license
      * Copyright 2017 Google Inc.
@@ -1156,7 +1160,7 @@ const fr=n`.mdc-touch-target-wrapper{display:inline}.mdc-radio{padding:calc((40p
             </div>
         `}updated(t){var e;super.updated(t),this.contentSlot&&(this.resizeObserver.observe(this.contentSlot),this.listenedContainer!==this.contentSlot&&(this.listenedContainer&&this.listenedContainer.removeEventListener("scroll",this.updateScrollCallback),this.listenedContainer=this.contentSlot,null===(e=this.listenedContainer)||void 0===e||e.addEventListener("scroll",this.updateScrollCallback))),t.has("horizontal")&&(this.horizontal?(this.offsetAttribute="offsetLeft",this.scrollAttribute="scrollLeft",this.sizeAttribute="clientWidth",this.scrollSizeAttribute="scrollWidth"):(this.offsetAttribute="offsetTop",this.scrollAttribute="scrollTop",this.sizeAttribute="clientHeight",this.scrollSizeAttribute="scrollHeight")),t.has("currentElement")&&this.dispatchEvent(new kr(this.currentElement,this.elements[this.currentElement]))}onScroll(){this.scrollDebouncer.run((()=>this.snap())),this.scheduleUpdateScroll()}snap(){let t=this.closestElementFromStart();if(null!=t){const e=this.getDistanceFromStart(t);Math.abs(this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]-this.contentSlot[this.scrollSizeAttribute])<e&&(t=this.lastElement),this.scrollToElement(t)}}scrollToElement(t){var e,i;t&&(this.horizontal?null===(e=this.contentSlot)||void 0===e||e.scrollTo({left:this.getOffset(t)-this.controlsSize,behavior:"smooth"}):null===(i=this.contentSlot)||void 0===i||i.scrollTo({top:this.getOffset(t)-this.controlsSize,behavior:"smooth"}),this.currentElement=this.elements.indexOf(t))}onSlotChange(){var t,e;this.elements=null!==(e=null===(t=this.contentSlot)||void 0===t?void 0:t.assignedElements().map((t=>t)))&&void 0!==e?e:[],this.scheduleUpdateScroll()}closestElementFromStart(){return this.elements[this.closestIndexFromStart()]}closestIndexFromStart(){let t=-1;for(let e=0;e<this.elements.length;e++)(t<0||this.getDistanceFromStart(this.elements[e])<this.getDistanceFromStart(this.elements[t]))&&(t=e);return t}scheduleUpdateScroll(){this.updateScrollDebouncer.run((()=>this.updateScroll()))}updateScroll(){null!=this.contentSlot?(this.withScroll=this.contentSlot[this.scrollSizeAttribute]>this.contentSlot[this.sizeAttribute],this.startReached=0===this.contentSlot[this.scrollAttribute],this.endReached=this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]+1>=this.contentSlot[this.scrollSizeAttribute]):(this.withScroll=!1,this.startReached=!0,this.endReached=!0)}get lastElement(){return this.elements[this.elements.length-1]}get firstElementOffset(){let t=this.elements[0];return t?t[this.offsetAttribute]:0}get controlsSize(){return this.controls?36:0}get nextSize(){return this.endReached?0:this.controlsSize}get prevSize(){return this.startReached?0:this.controlsSize}getOffset(t){return t[this.offsetAttribute]-this.firstElementOffset}getDistanceFromStart(t){const e=t===this.elements[0]?0:this.controlsSize;return Math.abs(this.getOffset(t)-this.contentSlot[this.scrollAttribute]-e)}};_r.elementDefinitions={"ft-button":Qi},yr([ct({type:Boolean})],_r.prototype,"horizontal",void 0),yr([ct({type:Boolean})],_r.prototype,"hideScrollbar",void 0),yr([ct({type:Boolean})],_r.prototype,"controls",void 0),yr([ct({type:Boolean})],_r.prototype,"limitSize",void 0),yr([nt()],_r.prototype,"elements",void 0),yr([nt()],_r.prototype,"currentElement",void 0),yr([nt()],_r.prototype,"withScroll",void 0),yr([nt()],_r.prototype,"startReached",void 0),yr([nt()],_r.prototype,"endReached",void 0),yr([dt(".ft-snap-scroll--content")],_r.prototype,"contentSlot",void 0),_r=yr([mt("ft-snap-scroll")],_r);var wr=function(t,e,i,r){for(var o,c=arguments.length,n=c<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,a=t.length-1;a>=0;a--)(o=t[a])&&(n=(c<3?o(n):c>3?o(e,i,n):o(e,i))||n);return c>3&&n&&Object.defineProperty(e,i,n),n};t.FtFilterOption=class extends yt{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1,this.subOptions=[]}getTemplate(){return M`
             <slot @slotchange=${this.updateSubOptionsFromSlot}></slot>
-        `}updateSubOptionsFromSlot(t){const e=t.composedPath()[0];this.subOptions=e.assignedElements().map((t=>t))}},t.FtFilterOption.elementDefinitions={},wr([ct({type:String})],t.FtFilterOption.prototype,"label",void 0),wr([ct({type:Object,converter:t=>t})],t.FtFilterOption.prototype,"value",void 0),wr([ct({type:Boolean,reflect:!0})],t.FtFilterOption.prototype,"selected",void 0),wr([ct({type:Object})],t.FtFilterOption.prototype,"subOptions",void 0),t.FtFilterOption=wr([mt("ft-filter-option")],t.FtFilterOption);var $r=function(t,e,i,r){for(var o,c=arguments.length,n=c<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,a=t.length-1;a>=0;a--)(o=t[a])&&(n=(c<3?o(n):c>3?o(e,i,n):o(e,i))||n);return c>3&&n&&Object.defineProperty(e,i,n),n};const Or={colorOutline:bt.external(gt.colorOutline,"Design system"),colorOnSurface:bt.external(gt.colorOnSurface,"Design system"),colorOnSurfaceMedium:bt.external(gt.colorOnSurfaceMedium,"Design system"),colorPrimary:bt.external(gt.colorPrimary,"Design system"),colorSurface:bt.external(gt.colorSurface,"Design system"),transitionDuration:bt.external(gt.transitionDuration,"Design system"),transitionTimingFunction:bt.external(gt.transitionTimingFunction,"Design system")};class Sr extends CustomEvent{constructor(t){super("change",{detail:t})}}t.FtFilter=class extends yt{constructor(){super(...arguments),this.id="",this.label="",this.filterPlaceHolder="Filter {0}",this.clearButtonLabel="Clear",this.moreValuesButtonLabel="More",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 ft(300)}getStyles(){return[Me,n`
+        `}updateSubOptionsFromSlot(t){const e=t.composedPath()[0];this.subOptions=e.assignedElements().map((t=>t))}updated(t){super.updated(t),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}},t.FtFilterOption.elementDefinitions={},wr([ct({type:String})],t.FtFilterOption.prototype,"label",void 0),wr([ct({type:Object,converter:t=>t})],t.FtFilterOption.prototype,"value",void 0),wr([ct({type:Boolean,reflect:!0})],t.FtFilterOption.prototype,"selected",void 0),wr([ct({type:Object})],t.FtFilterOption.prototype,"subOptions",void 0),t.FtFilterOption=wr([mt("ft-filter-option")],t.FtFilterOption);var $r=function(t,e,i,r){for(var o,c=arguments.length,n=c<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,a=t.length-1;a>=0;a--)(o=t[a])&&(n=(c<3?o(n):c>3?o(e,i,n):o(e,i))||n);return c>3&&n&&Object.defineProperty(e,i,n),n};const Or={colorOutline:bt.external(gt.colorOutline,"Design system"),colorOnSurface:bt.external(gt.colorOnSurface,"Design system"),colorOnSurfaceMedium:bt.external(gt.colorOnSurfaceMedium,"Design system"),colorPrimary:bt.external(gt.colorPrimary,"Design system"),colorSurface:bt.external(gt.colorSurface,"Design system"),transitionDuration:bt.external(gt.transitionDuration,"Design system"),transitionTimingFunction:bt.external(gt.transitionTimingFunction,"Design system")};class Sr extends CustomEvent{constructor(t){super("change",{detail:t})}}t.FtFilter=class extends yt{constructor(){super(...arguments),this.id="",this.label="",this.filterPlaceHolder="Filter {0}",this.clearButtonLabel="Clear",this.moreValuesButtonLabel="More",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 ft(300)}getStyles(){return[Me,n`
                 :host {
                     display: flex;
                     max-height: 100%;
@@ -1286,7 +1290,8 @@ const fr=n`.mdc-touch-target-wrapper{display:inline}.mdc-radio{padding:calc((40p
                 <div class="ft-filter--values">
                     ${this.renderLevels()}
                 </div>
-                <slot @slotchange=${this.updateOptionsFromSlot}></slot>
+                <slot @slotchange=${this.updateOptionsFromSlot}
+                      @option-change=${this.updateOptionsFromSlot}></slot>
             </div>
         `}update(t){if(super.update(t),t.has("options")){const t=new Set(this.flatOptions.map((t=>t.value)));this.displayedLevels=this.displayedLevels.filter((e=>t.has(e)))}}contentAvailableCallback(t){var e,i;super.contentAvailableCallback(t),this.valuesContainer&&this.scrollResizeObserver.observe(this.valuesContainer),this.container&&this.scrollResizeObserver.observe(this.container),t.has("options")&&(this.updateScroll(),null===(e=this.levelsContainer)||void 0===e||e.scrollToIndex(this.displayedLevels.length)),t.has("slideIn")&&this.slideIn&&setTimeout((()=>{var t;null===(t=this.levelsContainer)||void 0===t||t.next(),this.slideIn=void 0}),0),t.has("slideOut")&&this.slideOut&&(null===(i=this.levelsContainer)||void 0===i||i.previous(),setTimeout((()=>{this.displayedLevels.pop(),this.slideOut=void 0}),300))}renderLevels(){const t=this.flatOptions,e=t.filter((t=>t.selected)),i=this.slideIn||this.slideOut?this.displayedLevels.length-2:this.displayedLevels.length-1,r=i<0?"ft-filter--level-center":"ft-filter--level-left";return M`
             ${this.raiseSelectedOptions&&e.length>0?M`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-filter",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "description": "Flat selector for multivalued or monovalued filters",
   "keywords": [
     "Lit"
@@ -19,16 +19,16 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-button": "^0.1.7",
-    "@fluid-topics/ft-ripple": "^0.1.7",
-    "@fluid-topics/ft-snap-scroll": "^0.1.7",
-    "@fluid-topics/ft-typography": "^0.1.7",
-    "@fluid-topics/ft-wc-utils": "^0.1.7",
+    "@fluid-topics/ft-button": "^0.1.10",
+    "@fluid-topics/ft-ripple": "^0.1.10",
+    "@fluid-topics/ft-snap-scroll": "^0.1.10",
+    "@fluid-topics/ft-typography": "^0.1.10",
+    "@fluid-topics/ft-wc-utils": "^0.1.10",
     "@material/mwc-checkbox": "^0.25.3",
     "@material/mwc-formfield": "^0.25.3",
     "@material/mwc-icon": "^0.25.3",
     "@material/mwc-radio": "^0.25.3",
     "lit": "^2.0.2"
   },
-  "gitHead": "78397cca67971191c46739cfb6c87481aaa65745"
+  "gitHead": "af9249642eff7416fb4aa6371f82cb3f99086cec"
 }