@fluid-topics/ft-filter 0.0.88 → 0.1.0

package/build/ft-filter.min.js

@@ -484,4 +484,4 @@ const Ye=c`.mdc-touch-target-wrapper{display:inline}.mdc-radio{padding:calc((40p
      * @license
      * Copyright 2018 Google LLC
      * SPDX-License-Identifier: Apache-2.0
-     */;let Qe=class extends Je{};Qe.styles=[Ye],Qe=Qt([it("mwc-radio")],Qe);var ti=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};let ei=class extends mt{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}getStyles(){return[c`.ft-filter-level--container{display:flex;flex-direction:column}.ft-filter-level--container>*{padding:0 10px}.ft-filter-level--go-back{flex-shrink:0;text-decoration:none;position:relative;border-radius:var(--ft-border-radius-M,8px);overflow:hidden;display:flex;align-items:center;padding:4px 4px;gap:4px;cursor:pointer;color:var(--ft-color-on-surface,rgba(0,0,0,.87))}.ft-filter-level--go-back:focus{outline:0}.ft-filter-level--go-back mwc-icon{flex-shrink:0}.ft-filter-level--go-back ft-typography{display:block;flex-grow:1;flex-shrink:0}.ft-filter-level--option{display:flex;align-items:center;max-width:100%}.ft-filter-level--option ft-button{margin-right:-10px;flex-shrink:0}ft-button{--ft-color-primary:var(--ft-color-on-surface, rgba(0, 0, 0, 0.87))}mwc-formfield{flex-shrink:1;flex-grow:1;display:block;max-width:calc(100% + 10px);margin-left:-10px;word-break:break-word;--mdc-theme-secondary:var(--ft-color-primary, #2196F3);--mdc-radio-unchecked-color:var(--ft-color-on-surface-medium, rgba(0, 0, 0, 0.60));--mdc-checkbox-unchecked-color:var(--ft-color-on-surface-medium, rgba(0, 0, 0, 0.60));--mdc-checkbox-ink-color:var(--ft-color-on-primary, #FFFFFF);--mdc-radio-disabled-color:var(--ft-color-on-surface-disabled, rgba(0, 0, 0, 0.38));--mdc-checkbox-disabled-color:var(--ft-color-on-surface-disabled, rgba(0, 0, 0, 0.38));--mdc-theme-on-surface:var(--ft-color-primary, #2196F3);--mdc-typography-body2-font-family:var(--ft-typography-font-family, var(--ft-content-font, 'Open Sans')),system-ui,sans-serif;--mdc-typography-body2-font-size:var(--ft-typography-font-size, 14px);--mdc-typography-body2-font-weight:var(--ft-typography-font-weight, normal);--mdc-typography-body2-letter-spacing:var(--ft-typography-letter-spacing, 0.252px);--mdc-typography-body2-line-height:var(--ft-typography-line-height, 20px);--mdc-typography-body2-text-transform:var(--ft-typography-text-transform, inherit)}.ft-filter--disabled{--mdc-theme-text-primary-on-background:var(--ft-color-on-surface-disabled, rgba(0, 0, 0, 0.38))}`]}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}getTemplate(){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 F`<div class="ft-filter-level--container ${this.disabled?"ft-filter--disabled":""}">${null==this.parent?null:F`<div tabindex="0" class="ft-filter-level--go-back" ?disabled="${this.disabled}" @keyup="${this.goBackOnKeyPress}" @click="${this.goBackOnClick}"><ft-ripple></ft-ripple><mwc-icon>chevron_left</mwc-icon><ft-typography variant="body2">${this.parent.label}</ft-typography></div>`} ${Zt(e,(t=>t.value),(t=>{var e;return F`<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?B:F`<ft-button icon="chevron_right" label="${t.label}" ?disabled="${this.disabled}" tooltipPosition="left" @click="${()=>this.displayLevel(t)}"></ft-button>`}</div>`}))} ${e.length<t.length?F`<ft-button class="ft-filter-level--display-more" icon="expand_more" dense trailingIcon @click="${this.displayMore}">${this.moreValuesButtonLabel}</ft-button>`:B}</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 F`<mwc-formfield label="${t.label}"><mwc-checkbox reducedTouchTarget ?checked="${t.selected}" ?disabled="${this.disabled}" ?indeterminate="${Nt(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.toggleMultiValuedOption(e,t)}"></mwc-checkbox></mwc-formfield>`}toggleMultiValuedOption(t,e){var i;Nt(null!==(i=e.subOptions)&&void 0!==i?i:[],(t=>{var e;return null!==(e=t.subOptions)&&void 0!==e?e:[]})).forEach((t=>t.selected=!1)),this.optionsChanged(t,e)}buildMonoValuedOption(t){return F`<mwc-formfield label="${t.label}"><mwc-radio reducedTouchTarget name="${this.id}" ?checked="${t.selected}" ?disabled="${this.disabled}" @click="${e=>this.toggleMonoValuedOption(e,t)}"></mwc-radio></mwc-formfield>`}toggleMonoValuedOption(t,e){this.optionsChanged(t,e)}optionsChanged(t,e){t.stopPropagation(),e.selected=!e.selected,this.dispatchEvent(new CustomEvent("change",{detail:e}))}displayLevel(t){this.dispatchEvent(new CustomEvent("display-level",{detail:t}))}};ei.elementDefinitions={"ft-button":Ie,"ft-ripple":Ae,"ft-typography":Ht,"mwc-checkbox":Oe,"mwc-formfield":Ue,"mwc-icon":Ee,"mwc-radio":Qe},ti([ot({type:String})],ei.prototype,"id",void 0),ti([ot({type:Object})],ei.prototype,"parent",void 0),ti([ot({type:Array})],ei.prototype,"options",void 0),ti([ot({type:Boolean})],ei.prototype,"multivalued",void 0),ti([ot({type:Boolean})],ei.prototype,"disabled",void 0),ti([ot({type:Boolean})],ei.prototype,"hideSelectedOptions",void 0),ti([ot({type:Boolean})],ei.prototype,"preventNavigation",void 0),ti([ot({type:String})],ei.prototype,"filter",void 0),ti([ot({type:String})],ei.prototype,"moreValuesButtonLabel",void 0),ti([ot({type:Number})],ei.prototype,"displayedValuesLimit",void 0),ti([st(".ft-filter-level--container")],ei.prototype,"container",void 0),ti([ct()],ei.prototype,"displayedPages",void 0),ei=ti([ft("ft-filter-level")],ei);var ii=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};class ri extends CustomEvent{constructor(t,e){super("current-element-change",{detail:{index:t,element:e}})}}let oi=class extends mt{constructor(){super(...arguments),this.horizontal=!1,this.hideScrollbar=!1,this.controls=!1,this.limitSize=!1,this.elements=[],this.currentElement=0,this.withScroll=!1,this.startReached=!0,this.endReached=!0,this.offsetAttribute="offsetTop",this.scrollAttribute="scrollTop",this.sizeAttribute="clientHeight",this.scrollSizeAttribute="scrollHeight",this.updateScrollCallback=()=>this.onScroll(),this.resizeObserver=new ResizeObserver((()=>this.scheduleUpdateScroll())),this.scrollDebouncer=new ut(200),this.updateScrollDebouncer=new ut(100)}getStyles(){return c`.ft-snap-scroll{box-sizing:border-box;position:relative;display:flex;--ft-snap-scroll-transparent-color:transparent}.ft-snap-scroll.ft-snap-scroll--safari-fix{--ft-snap-scroll-transparent-color:rgba(255, 255, 255, 0)}.ft-snap-scroll,.ft-snap-scroll--content{overflow:hidden}.ft-snap-scroll--limit-size,.ft-snap-scroll--limit-size .ft-snap-scroll--content{width:100%;height:100%}.ft-snap-scroll--content{flex-grow:1;flex-shrink:1;box-sizing:border-box;scroll-snap-align:start;display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:var(--ft-snap-scroll-gap,0)}.ft-snap-scroll--hide-scrollbar .ft-snap-scroll--content::-webkit-scrollbar{display:none}.ft-snap-scroll--hide-scrollbar .ft-snap-scroll--content{-ms-overflow-style:none;scrollbar-width:none}.ft-snap-scroll--content::slotted(*){flex-shrink:0;flex-grow:1;max-height:100%;max-width:100%}.ft-snap-scroll--horizontal,.ft-snap-scroll--horizontal .ft-snap-scroll--content{width:100%}.ft-snap-scroll--vertical,.ft-snap-scroll--vertical .ft-snap-scroll--content{height:100%}.ft-snap-scroll--horizontal .ft-snap-scroll--content{flex-direction:row;overflow-x:auto}.ft-snap-scroll--vertical .ft-snap-scroll--content{flex-direction:column;overflow-y:auto}.ft-snap-scroll--next,.ft-snap-scroll--previous{position:absolute;display:flex;z-index:var(--ft-snap-scroll-buttons-z-index,1);opacity:1;transition:background-color .5s ease-in-out,opacity .5s ease-in-out,z-index .5s ease-in-out;--ft-button-background-color:transparent;--ft-button-color:var(--ft-snap-scroll-buttons-color, var(--ft-color-primary, #2196F3))}.ft-snap-scroll--next[hidden],.ft-snap-scroll--previous[hidden]{z-index:-1;opacity:0}.ft-snap-scroll--horizontal .ft-snap-scroll--previous{top:0;left:-1px;bottom:0;background:linear-gradient(to right,var(--ft-color-surface,#fff) 50%,var(--ft-snap-scroll-transparent-color))}.ft-snap-scroll--vertical .ft-snap-scroll--previous{top:-1px;left:0;right:0;background:linear-gradient(to bottom,var(--ft-color-surface,#fff) 50%,var(--ft-snap-scroll-transparent-color))}.ft-snap-scroll--horizontal .ft-snap-scroll--next{top:0;right:-1px;bottom:0;background:linear-gradient(to left,var(--ft-color-surface,#fff) 50%,var(--ft-snap-scroll-transparent-color))}.ft-snap-scroll--vertical .ft-snap-scroll--next{left:0;right:0;bottom:-1px;background:linear-gradient(to top,var(--ft-color-surface,#fff) 50%,var(--ft-snap-scroll-transparent-color))}.ft-snap-scroll--horizontal .ft-snap-scroll--next:hover,.ft-snap-scroll--horizontal .ft-snap-scroll--previous:hover,.ft-snap-scroll--vertical .ft-snap-scroll--next:hover,.ft-snap-scroll--vertical .ft-snap-scroll--previous:hover{background-color:var(--ft-color-surface,#fff)}`}scrollToIndex(t){this.scrollToElement(this.elements[t])}scrollIndexIntoView(t){let e=this.elements[t];if(e){const t=this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]-this.nextSize,i=this.contentSlot[this.scrollAttribute]+this.prevSize;(e[this.offsetAttribute]<i||e[this.offsetAttribute]+e[this.sizeAttribute]>t)&&this.scrollToElement(e)}}previous(){this.scrollToElement(this.elements[Math.max(0,this.closestIndexFromStart()-1)])}next(){this.scrollToElement(this.elements[Math.min(this.closestIndexFromStart()+1,this.elements.length-1)])}getTemplate(){const t=ue({"ft-snap-scroll":!0,"ft-snap-scroll--horizontal":this.horizontal,"ft-snap-scroll--vertical":!this.horizontal,"ft-snap-scroll--hide-scrollbar":this.hideScrollbar,"ft-snap-scroll--limit-size":this.limitSize,"ft-snap-scroll--safari-fix":$t}),e=this.controls&&this.withScroll;return F`<div part="container" class="${t}"><ft-button class="ft-snap-scroll--previous" part="controls" primary icon="${this.horizontal?"arrow_back_ios_new":"expand_less"}" ?hidden="${!e||this.startReached}" ?disabled="${!e||this.startReached}" @click="${this.previous}"></ft-button><slot class="ft-snap-scroll--content" part="content" @slotchange="${this.onSlotChange}"></slot><ft-button class="ft-snap-scroll--next" part="controls" primary icon="${this.horizontal?"arrow_forward_ios":"expand_more"}" ?hidden="${!e||this.endReached}" ?disabled="${!e||this.endReached}" @click="${this.next}"></ft-button></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 ri(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)}};oi.elementDefinitions={"ft-button":Ie},ii([ot({type:Boolean})],oi.prototype,"horizontal",void 0),ii([ot({type:Boolean})],oi.prototype,"hideScrollbar",void 0),ii([ot({type:Boolean})],oi.prototype,"controls",void 0),ii([ot({type:Boolean})],oi.prototype,"limitSize",void 0),ii([ct()],oi.prototype,"elements",void 0),ii([ct()],oi.prototype,"currentElement",void 0),ii([ct()],oi.prototype,"withScroll",void 0),ii([ct()],oi.prototype,"startReached",void 0),ii([ct()],oi.prototype,"endReached",void 0),ii([st(".ft-snap-scroll--content")],oi.prototype,"contentSlot",void 0),oi=ii([ft("ft-snap-scroll")],oi);var ci=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 mt{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1,this.subOptions=[]}getTemplate(){return F`<slot @slotchange="${this.updateSubOptionsFromSlot}"></slot>`}updateSubOptionsFromSlot(t){const e=t.composedPath()[0];this.subOptions=e.assignedElements().map((t=>t))}},t.FtFilterOption.elementDefinitions={},ci([ot({type:String})],t.FtFilterOption.prototype,"label",void 0),ci([ot({type:Object,converter:t=>t})],t.FtFilterOption.prototype,"value",void 0),ci([ot({type:Boolean,reflect:!0})],t.FtFilterOption.prototype,"selected",void 0),ci([ot({type:Object})],t.FtFilterOption.prototype,"subOptions",void 0),t.FtFilterOption=ci([ft("ft-filter-option")],t.FtFilterOption);var ai=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};class ni extends CustomEvent{constructor(t){super("change",{detail:t})}}t.FtFilter=class extends mt{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 ut(300)}getStyles(){return[Bt,c`:host{display:flex;max-height:100%;max-width:100%}.ft-filter--container{flex-grow:1;display:flex;flex-direction:column;max-height:100%;max-width:100%;background:var(--ft-color-surface,#fff)}.ft-filter--header{display:flex;flex-wrap:wrap;gap:4px;flex-shrink:0;padding:0 10px;margin-bottom:8px;--ft-typography-font-size:14px}.ft-filter--header ft-button{flex-shrink:0;margin-left:auto;--ft-button-icon-size:18px}.ft-filter--label{display:block;flex-shrink:1;flex-grow:1;word-break:break-word;--ft-typography-line-height:22px;--ft-typography-font-weight:bold}.ft-filter--filter{flex-shrink:0;display:flex;margin:0;margin-bottom:8px;padding:0 10px;overflow:hidden;height:32px;transition:height 250ms ease-in-out,margin 250ms ease-in-out;transition-delay:.5s}.ft-filter--filter[hidden]{height:0;margin-bottom:0}input{display:block;width:100%;border-radius:4px;border:1px solid var(--ft-color-outline,rgba(0,0,0,.14));padding:4px;outline-color:var(--ft-color-primary,#2196f3)}.ft-filter--values{flex-grow:1;flex-shrink:1;max-width:100%;overflow-x:hidden;overflow-y:auto}.ft-filter--separator{border-top:1px solid var(--ft-color-outline,rgba(0,0,0,.14));margin:4px 10px}.ft-filter--levels-container{position:relative;overflow:hidden}.ft-filter--levels{position:relative;overflow:hidden}ft-filter-level{width:100%}.ft-filter--level-left{height:0}slot{display:none}`]}get flatOptions(){return Nt(this.options,(t=>{var e;return null!==(e=t.subOptions)&&void 0!==e?e:[]}))}getTemplate(){var t,e;const i=this.flatOptions.some((t=>t.selected));let r=this.withScroll||this.filter||null!==(e=null===(t=this.lastLevel)||void 0===t?void 0:t.hasHiddenValues)&&void 0!==e&&e;return F`<div class="ft-filter--container ${this.disabled?"ft-filter--disabled":""}" part="container">${this.label||i?F`<div class="ft-filter--header" part="header"><ft-typography class="ft-filter--label" variant="overline" part="label">${this.label}</ft-typography>${i?F`<ft-button icon="close" dense @click="${this.clear}" part="clear-button">${this.clearButtonLabel}</ft-button>`:null}</div>`:null}<div class="ft-filter--filter" ?hidden="${!r}"><input type="search" part="input" class="ft-typography--caption" ?disabled="${!r}" placeholder="${this.filterPlaceHolder.replace("{0}",this.label)}" @keyup="${this.onFilterChange}"></div><div class="ft-filter--values">${this.renderLevels()}</div><slot @slotchange="${this.updateOptionsFromSlot}"></slot></div>`}contentAvailableCallback(t){var e;super.contentAvailableCallback(t),this.valuesContainer&&this.scrollResizeObserver.observe(this.valuesContainer),this.container&&this.scrollResizeObserver.observe(this.container),t.has("options")&&this.updateScroll(),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===(e=this.levelsContainer)||void 0===e||e.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 F`${this.raiseSelectedOptions&&e.length>0?F`<ft-filter-level id="${this.id}" ?multivalued="${this.multivalued}" ?disabled="${this.disabled}" preventNavigation .options="${e}" @change="${this.onChange}" part="selected-values"></ft-filter-level><div class="ft-filter--separator"></div>`:null}<ft-snap-scroll horizontal hideScrollbar class="ft-filter--levels" @current-element-change="${t=>this.levelsScrollDebouncer.run((()=>{for(;t.detail.index<this.displayedLevels.length;)this.displayedLevels.pop();this.requestUpdate()}))}">${this.renderLevel(r,this.options)} ${this.displayedLevels.map((e=>t.find((t=>t.value===e)))).map(((t,e)=>{var r;const o=(null==t?void 0:t.value)===this.slideIn||(null==t?void 0:t.value)===this.slideOut?"ft-filter--level-right":e===i?"ft-filter--level-center":"ft-filter--level-left";return this.renderLevel(o,null!==(r=null==t?void 0:t.subOptions)&&void 0!==r?r:[],t)}))}</ft-snap-scroll>`}renderLevel(t,e,i){return F`<ft-filter-level class="${t}" id="${this.id}" filter="${this.filter}" moreValuesButtonLabel="${this.moreValuesButtonLabel}" ?multivalued="${this.multivalued}" ?disabled="${this.disabled||"ft-filter--level-center"!==t}" ?hideSelectedOptions="${this.raiseSelectedOptions}" .parent="${i}" .options="${e}" .displayedValuesLimit="${this.displayedValuesLimit}" @change="${this.onChange}" @go-back="${this.goBack}" @display-level="${this.onDisplayLevel}" part="values"></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){if(t.stopPropagation(),!this.multivalued){const e=i=>{var r;i.value!==t.detail.value&&(i.selected=!1),null===(r=i.subOptions)||void 0===r||r.forEach(e)};this.options.forEach(e)}this.optionsChanged()}optionsChanged(){var t;const e=this.flatOptions.filter((t=>t.selected)).map((t=>t.value));this.dispatchEvent(new ni(e)),this.requestUpdate(),null===(t=this.levels)||void 0===t||t.forEach((t=>t.requestUpdate()))}updateOptionsFromSlot(t){const e=t.composedPath()[0];this.options=e.assignedElements().map((t=>t))}onFilterChange(t){const e=t.composedPath()[0];this.filter=e.value}updateScroll(){this.valuesContainer&&(this.withScroll=this.valuesContainer.scrollHeight>this.valuesContainer.clientHeight)}},t.FtFilter.elementDefinitions={"ft-button":Ie,"ft-filter-level":ei,"ft-snap-scroll":oi,"ft-typography":Ht},ai([ot({type:String})],t.FtFilter.prototype,"id",void 0),ai([ot({type:String})],t.FtFilter.prototype,"label",void 0),ai([ot({type:String})],t.FtFilter.prototype,"filterPlaceHolder",void 0),ai([ot({type:String})],t.FtFilter.prototype,"clearButtonLabel",void 0),ai([ot({type:String})],t.FtFilter.prototype,"moreValuesButtonLabel",void 0),ai([ot({type:Array})],t.FtFilter.prototype,"options",void 0),ai([ot({type:Boolean})],t.FtFilter.prototype,"multivalued",void 0),ai([ot({type:Boolean})],t.FtFilter.prototype,"disabled",void 0),ai([ot({type:Boolean})],t.FtFilter.prototype,"raiseSelectedOptions",void 0),ai([ot({type:Number})],t.FtFilter.prototype,"displayedValuesLimit",void 0),ai([st(".ft-filter--container")],t.FtFilter.prototype,"container",void 0),ai([st(".ft-filter--values")],t.FtFilter.prototype,"valuesContainer",void 0),ai([st(".ft-filter--levels")],t.FtFilter.prototype,"levelsContainer",void 0),ai([st(".ft-filter--levels ft-filter-level:last-child")],t.FtFilter.prototype,"lastLevel",void 0),ai([function(t){return at({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")],t.FtFilter.prototype,"levels",void 0),ai([ct()],t.FtFilter.prototype,"withScroll",void 0),ai([ct()],t.FtFilter.prototype,"filter",void 0),ai([ct()],t.FtFilter.prototype,"slideIn",void 0),ai([ct()],t.FtFilter.prototype,"slideOut",void 0),t.FtFilter=ai([ft("ft-filter")],t.FtFilter),t.FtFilterChangeEvent=ni,Object.defineProperty(t,"t",{value:!0})}({});
+     */;let Qe=class extends Je{};Qe.styles=[Ye],Qe=Qt([it("mwc-radio")],Qe);var ti=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};let ei=class extends mt{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}getStyles(){return[c`.ft-filter-level--container{display:flex;flex-direction:column}.ft-filter-level--container>*{padding:0 10px}.ft-filter-level--go-back{flex-shrink:0;text-decoration:none;position:relative;border-radius:var(--ft-border-radius-M,8px);overflow:hidden;display:flex;align-items:center;padding:4px 4px;gap:4px;cursor:pointer;color:var(--ft-color-on-surface,rgba(0,0,0,.87))}.ft-filter-level--go-back:focus{outline:0}.ft-filter-level--go-back mwc-icon{flex-shrink:0}.ft-filter-level--go-back ft-typography{display:block;flex-grow:1;flex-shrink:0}.ft-filter-level--option{display:flex;align-items:center;max-width:100%}.ft-filter-level--option ft-button{margin-right:-10px;flex-shrink:0}ft-button{--ft-color-primary:var(--ft-color-on-surface, rgba(0, 0, 0, 0.87))}mwc-formfield{flex-shrink:1;flex-grow:1;display:block;max-width:calc(100% + 10px);margin-left:-10px;word-break:break-word;--mdc-theme-secondary:var(--ft-color-primary, #2196F3);--mdc-radio-unchecked-color:var(--ft-color-on-surface-medium, rgba(0, 0, 0, 0.60));--mdc-checkbox-unchecked-color:var(--ft-color-on-surface-medium, rgba(0, 0, 0, 0.60));--mdc-checkbox-ink-color:var(--ft-color-on-primary, #FFFFFF);--mdc-radio-disabled-color:var(--ft-color-on-surface-disabled, rgba(0, 0, 0, 0.38));--mdc-checkbox-disabled-color:var(--ft-color-on-surface-disabled, rgba(0, 0, 0, 0.38));--mdc-theme-on-surface:var(--ft-color-primary, #2196F3);--mdc-typography-body2-font-family:var(--ft-typography-font-family, var(--ft-content-font, 'Open Sans')),system-ui,sans-serif;--mdc-typography-body2-font-size:var(--ft-typography-font-size, 14px);--mdc-typography-body2-font-weight:var(--ft-typography-font-weight, normal);--mdc-typography-body2-letter-spacing:var(--ft-typography-letter-spacing, 0.252px);--mdc-typography-body2-line-height:var(--ft-typography-line-height, 20px);--mdc-typography-body2-text-transform:var(--ft-typography-text-transform, inherit)}.ft-filter--disabled{--mdc-theme-text-primary-on-background:var(--ft-color-on-surface-disabled, rgba(0, 0, 0, 0.38))}`]}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}getTemplate(){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 F`<div class="ft-filter-level--container ${this.disabled?"ft-filter--disabled":""}">${null==this.parent?null:F`<div tabindex="0" class="ft-filter-level--go-back" ?disabled="${this.disabled}" @keyup="${this.goBackOnKeyPress}" @click="${this.goBackOnClick}"><ft-ripple></ft-ripple><mwc-icon>chevron_left</mwc-icon><ft-typography variant="body2">${this.parent.label}</ft-typography></div>`} ${Zt(e,(t=>t.value),(t=>{var e;return F`<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?B:F`<ft-button icon="chevron_right" label="${t.label}" ?disabled="${this.disabled}" tooltipPosition="left" @click="${()=>this.displayLevel(t)}"></ft-button>`}</div>`}))} ${e.length<t.length?F`<ft-button class="ft-filter-level--display-more" icon="expand_more" dense trailingIcon @click="${this.displayMore}">${this.moreValuesButtonLabel}</ft-button>`:B}</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 F`<mwc-formfield label="${t.label}"><mwc-checkbox reducedTouchTarget ?checked="${t.selected}" ?disabled="${this.disabled}" ?indeterminate="${Nt(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.toggleMultiValuedOption(e,t)}"></mwc-checkbox></mwc-formfield>`}toggleMultiValuedOption(t,e){var i;Nt(null!==(i=e.subOptions)&&void 0!==i?i:[],(t=>{var e;return null!==(e=t.subOptions)&&void 0!==e?e:[]})).forEach((t=>t.selected=!1)),this.optionsChanged(t,e)}buildMonoValuedOption(t){return F`<mwc-formfield label="${t.label}"><mwc-radio reducedTouchTarget name="${this.id}" ?checked="${t.selected}" ?disabled="${this.disabled}" @click="${e=>this.toggleMonoValuedOption(e,t)}"></mwc-radio></mwc-formfield>`}toggleMonoValuedOption(t,e){this.optionsChanged(t,e)}optionsChanged(t,e){t.stopPropagation(),e.selected=!e.selected,this.dispatchEvent(new CustomEvent("change",{detail:e}))}displayLevel(t){this.dispatchEvent(new CustomEvent("display-level",{detail:t}))}};ei.elementDefinitions={"ft-button":Ie,"ft-ripple":Ae,"ft-typography":Ht,"mwc-checkbox":Oe,"mwc-formfield":Ue,"mwc-icon":Ee,"mwc-radio":Qe},ti([ot({type:String})],ei.prototype,"id",void 0),ti([ot({type:Object})],ei.prototype,"parent",void 0),ti([ot({type:Array})],ei.prototype,"options",void 0),ti([ot({type:Boolean})],ei.prototype,"multivalued",void 0),ti([ot({type:Boolean})],ei.prototype,"disabled",void 0),ti([ot({type:Boolean})],ei.prototype,"hideSelectedOptions",void 0),ti([ot({type:Boolean})],ei.prototype,"preventNavigation",void 0),ti([ot({type:String})],ei.prototype,"filter",void 0),ti([ot({type:String})],ei.prototype,"moreValuesButtonLabel",void 0),ti([ot({type:Number})],ei.prototype,"displayedValuesLimit",void 0),ti([st(".ft-filter-level--container")],ei.prototype,"container",void 0),ti([ct()],ei.prototype,"displayedPages",void 0),ei=ti([ft("ft-filter-level")],ei);var ii=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};class ri extends CustomEvent{constructor(t,e){super("current-element-change",{detail:{index:t,element:e}})}}let oi=class extends mt{constructor(){super(...arguments),this.horizontal=!1,this.hideScrollbar=!1,this.controls=!1,this.limitSize=!1,this.elements=[],this.currentElement=0,this.withScroll=!1,this.startReached=!0,this.endReached=!0,this.offsetAttribute="offsetTop",this.scrollAttribute="scrollTop",this.sizeAttribute="clientHeight",this.scrollSizeAttribute="scrollHeight",this.updateScrollCallback=()=>this.onScroll(),this.resizeObserver=new ResizeObserver((()=>this.scheduleUpdateScroll())),this.scrollDebouncer=new ut(200),this.updateScrollDebouncer=new ut(100)}getStyles(){return c`.ft-snap-scroll{box-sizing:border-box;position:relative;display:flex;--ft-snap-scroll-transparent-color:transparent}.ft-snap-scroll.ft-snap-scroll--safari-fix{--ft-snap-scroll-transparent-color:rgba(255, 255, 255, 0)}.ft-snap-scroll,.ft-snap-scroll--content{overflow:hidden}.ft-snap-scroll--limit-size,.ft-snap-scroll--limit-size .ft-snap-scroll--content{width:100%;height:100%}.ft-snap-scroll--content{flex-grow:1;flex-shrink:1;box-sizing:border-box;scroll-snap-align:start;display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:var(--ft-snap-scroll-gap,0)}.ft-snap-scroll--hide-scrollbar .ft-snap-scroll--content::-webkit-scrollbar{display:none}.ft-snap-scroll--hide-scrollbar .ft-snap-scroll--content{-ms-overflow-style:none;scrollbar-width:none}.ft-snap-scroll--content::slotted(*){flex-shrink:0;flex-grow:1;max-height:100%;max-width:100%}.ft-snap-scroll--horizontal,.ft-snap-scroll--horizontal .ft-snap-scroll--content{width:100%}.ft-snap-scroll--vertical,.ft-snap-scroll--vertical .ft-snap-scroll--content{height:100%}.ft-snap-scroll--horizontal .ft-snap-scroll--content{flex-direction:row;overflow-x:auto}.ft-snap-scroll--vertical .ft-snap-scroll--content{flex-direction:column;overflow-y:auto}.ft-snap-scroll--next,.ft-snap-scroll--previous{position:absolute;display:flex;z-index:var(--ft-snap-scroll-buttons-z-index,1);opacity:1;transition:background-color .5s ease-in-out,opacity .5s ease-in-out,z-index .5s ease-in-out;--ft-button-background-color:transparent;--ft-button-color:var(--ft-snap-scroll-buttons-color, var(--ft-color-primary, #2196F3))}.ft-snap-scroll--next[hidden],.ft-snap-scroll--previous[hidden]{z-index:-1;opacity:0}.ft-snap-scroll--horizontal .ft-snap-scroll--previous{top:0;left:-1px;bottom:0;background:linear-gradient(to right,var(--ft-color-surface,#fff) 50%,var(--ft-snap-scroll-transparent-color))}.ft-snap-scroll--vertical .ft-snap-scroll--previous{top:-1px;left:0;right:0;background:linear-gradient(to bottom,var(--ft-color-surface,#fff) 50%,var(--ft-snap-scroll-transparent-color))}.ft-snap-scroll--horizontal .ft-snap-scroll--next{top:0;right:-1px;bottom:0;background:linear-gradient(to left,var(--ft-color-surface,#fff) 50%,var(--ft-snap-scroll-transparent-color))}.ft-snap-scroll--vertical .ft-snap-scroll--next{left:0;right:0;bottom:-1px;background:linear-gradient(to top,var(--ft-color-surface,#fff) 50%,var(--ft-snap-scroll-transparent-color))}.ft-snap-scroll--horizontal .ft-snap-scroll--next:hover,.ft-snap-scroll--horizontal .ft-snap-scroll--previous:hover,.ft-snap-scroll--vertical .ft-snap-scroll--next:hover,.ft-snap-scroll--vertical .ft-snap-scroll--previous:hover{background-color:var(--ft-color-surface,#fff)}`}scrollToIndex(t){this.scrollToElement(this.elements[t])}scrollIndexIntoView(t){let e=this.elements[t];if(e){const t=this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]-this.nextSize,i=this.contentSlot[this.scrollAttribute]+this.prevSize;(e[this.offsetAttribute]<i||e[this.offsetAttribute]+e[this.sizeAttribute]>t)&&this.scrollToElement(e)}}previous(){this.scrollToElement(this.elements[Math.max(0,this.closestIndexFromStart()-1)])}next(){this.scrollToElement(this.elements[Math.min(this.closestIndexFromStart()+1,this.elements.length-1)])}getTemplate(){const t=ue({"ft-snap-scroll":!0,"ft-snap-scroll--horizontal":this.horizontal,"ft-snap-scroll--vertical":!this.horizontal,"ft-snap-scroll--hide-scrollbar":this.hideScrollbar,"ft-snap-scroll--limit-size":this.limitSize,"ft-snap-scroll--safari-fix":$t}),e=this.controls&&this.withScroll;return F`<div part="container" class="${t}"><ft-button class="ft-snap-scroll--previous" part="controls" primary icon="${this.horizontal?"arrow_back_ios_new":"expand_less"}" ?hidden="${!e||this.startReached}" ?disabled="${!e||this.startReached}" @click="${this.previous}"></ft-button><slot class="ft-snap-scroll--content" part="content" @slotchange="${this.onSlotChange}"></slot><ft-button class="ft-snap-scroll--next" part="controls" primary icon="${this.horizontal?"arrow_forward_ios":"expand_more"}" ?hidden="${!e||this.endReached}" ?disabled="${!e||this.endReached}" @click="${this.next}"></ft-button></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 ri(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)}};oi.elementDefinitions={"ft-button":Ie},ii([ot({type:Boolean})],oi.prototype,"horizontal",void 0),ii([ot({type:Boolean})],oi.prototype,"hideScrollbar",void 0),ii([ot({type:Boolean})],oi.prototype,"controls",void 0),ii([ot({type:Boolean})],oi.prototype,"limitSize",void 0),ii([ct()],oi.prototype,"elements",void 0),ii([ct()],oi.prototype,"currentElement",void 0),ii([ct()],oi.prototype,"withScroll",void 0),ii([ct()],oi.prototype,"startReached",void 0),ii([ct()],oi.prototype,"endReached",void 0),ii([st(".ft-snap-scroll--content")],oi.prototype,"contentSlot",void 0),oi=ii([ft("ft-snap-scroll")],oi);var ci=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 mt{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1,this.subOptions=[]}getTemplate(){return F`<slot @slotchange="${this.updateSubOptionsFromSlot}"></slot>`}updateSubOptionsFromSlot(t){const e=t.composedPath()[0];this.subOptions=e.assignedElements().map((t=>t))}},t.FtFilterOption.elementDefinitions={},ci([ot({type:String})],t.FtFilterOption.prototype,"label",void 0),ci([ot({type:Object,converter:t=>t})],t.FtFilterOption.prototype,"value",void 0),ci([ot({type:Boolean,reflect:!0})],t.FtFilterOption.prototype,"selected",void 0),ci([ot({type:Object})],t.FtFilterOption.prototype,"subOptions",void 0),t.FtFilterOption=ci([ft("ft-filter-option")],t.FtFilterOption);var ai=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};class ni extends CustomEvent{constructor(t){super("change",{detail:t})}}t.FtFilter=class extends mt{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 ut(300)}getStyles(){return[Bt,c`:host{display:flex;max-height:100%;max-width:100%}.ft-filter--container{flex-grow:1;display:flex;flex-direction:column;max-height:100%;max-width:100%;background:var(--ft-color-surface,#fff)}.ft-filter--header{display:flex;flex-wrap:wrap;gap:4px;flex-shrink:0;padding:0 10px;margin-bottom:8px;--ft-typography-font-size:14px}.ft-filter--header ft-button{flex-shrink:0;margin-left:auto;--ft-button-icon-size:18px}.ft-filter--label{display:block;flex-shrink:1;flex-grow:1;word-break:break-word;--ft-typography-line-height:22px;--ft-typography-font-weight:bold}.ft-filter--filter{flex-shrink:0;display:flex;margin:0;margin-bottom:8px;padding:0 10px;overflow:hidden;height:32px;transition:height 250ms ease-in-out,margin 250ms ease-in-out;transition-delay:.5s}.ft-filter--filter[hidden]{height:0;margin-bottom:0}input{display:block;width:100%;border-radius:4px;border:1px solid var(--ft-color-outline,rgba(0,0,0,.14));padding:4px;outline-color:var(--ft-color-primary,#2196f3)}.ft-filter--values{flex-grow:1;flex-shrink:1;max-width:100%;overflow-x:hidden;overflow-y:auto}.ft-filter--separator{border-top:1px solid var(--ft-color-outline,rgba(0,0,0,.14));margin:4px 10px}.ft-filter--levels-container{position:relative;overflow:hidden}.ft-filter--levels{position:relative;overflow:hidden}ft-filter-level{width:100%}.ft-filter--level-left{height:0}slot{display:none}`]}get flatOptions(){return Nt(this.options,(t=>{var e;return null!==(e=t.subOptions)&&void 0!==e?e:[]}))}getTemplate(){var t,e;const i=this.flatOptions.some((t=>t.selected));let r=this.withScroll||this.filter||null!==(e=null===(t=this.lastLevel)||void 0===t?void 0:t.hasHiddenValues)&&void 0!==e&&e;return F`<div class="ft-filter--container ${this.disabled?"ft-filter--disabled":""}" part="container">${this.label||i?F`<div class="ft-filter--header" part="header"><ft-typography class="ft-filter--label" variant="overline" part="label">${this.label}</ft-typography>${i?F`<ft-button icon="close" dense @click="${this.clear}" part="clear-button">${this.clearButtonLabel}</ft-button>`:null}</div>`:null}<div class="ft-filter--filter" ?hidden="${!r}"><input type="search" part="input" class="ft-typography--caption" ?disabled="${!r}" placeholder="${this.filterPlaceHolder.replace("{0}",this.label)}" @keyup="${this.onFilterChange}"></div><div class="ft-filter--values">${this.renderLevels()}</div><slot @slotchange="${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 F`${this.raiseSelectedOptions&&e.length>0?F`<ft-filter-level id="${this.id}" ?multivalued="${this.multivalued}" ?disabled="${this.disabled}" preventNavigation .options="${e}" @change="${this.onChange}" part="selected-values"></ft-filter-level><div class="ft-filter--separator"></div>`:null}<ft-snap-scroll horizontal hideScrollbar class="ft-filter--levels" @current-element-change="${t=>this.levelsScrollDebouncer.run((()=>{for(;t.detail.index<this.displayedLevels.length;)this.displayedLevels.pop();this.requestUpdate()}))}">${this.renderLevel(r,this.options)} ${this.displayedLevels.map((e=>t.find((t=>t.value===e)))).map(((t,e)=>{var r;const o=(null==t?void 0:t.value)===this.slideIn||(null==t?void 0:t.value)===this.slideOut?"ft-filter--level-right":e===i?"ft-filter--level-center":"ft-filter--level-left";return this.renderLevel(o,null!==(r=null==t?void 0:t.subOptions)&&void 0!==r?r:[],t)}))}</ft-snap-scroll>`}renderLevel(t,e,i){return F`<ft-filter-level class="${t}" id="${this.id}" filter="${this.filter}" moreValuesButtonLabel="${this.moreValuesButtonLabel}" ?multivalued="${this.multivalued}" ?disabled="${this.disabled||"ft-filter--level-center"!==t}" ?hideSelectedOptions="${this.raiseSelectedOptions}" .parent="${i}" .options="${e}" .displayedValuesLimit="${this.displayedValuesLimit}" @change="${this.onChange}" @go-back="${this.goBack}" @display-level="${this.onDisplayLevel}" part="values"></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){if(t.stopPropagation(),!this.multivalued){const e=i=>{var r;i.value!==t.detail.value&&(i.selected=!1),null===(r=i.subOptions)||void 0===r||r.forEach(e)};this.options.forEach(e)}this.optionsChanged()}optionsChanged(){var t;const e=this.flatOptions.filter((t=>t.selected)).map((t=>t.value));this.dispatchEvent(new ni(e)),this.requestUpdate(),null===(t=this.levels)||void 0===t||t.forEach((t=>t.requestUpdate()))}updateOptionsFromSlot(t){const e=t.composedPath()[0];this.options=e.assignedElements().map((t=>t))}onFilterChange(t){const e=t.composedPath()[0];this.filter=e.value}updateScroll(){this.valuesContainer&&(this.withScroll=this.valuesContainer.scrollHeight>this.valuesContainer.clientHeight)}},t.FtFilter.elementDefinitions={"ft-button":Ie,"ft-filter-level":ei,"ft-snap-scroll":oi,"ft-typography":Ht},ai([ot({type:String})],t.FtFilter.prototype,"id",void 0),ai([ot({type:String})],t.FtFilter.prototype,"label",void 0),ai([ot({type:String})],t.FtFilter.prototype,"filterPlaceHolder",void 0),ai([ot({type:String})],t.FtFilter.prototype,"clearButtonLabel",void 0),ai([ot({type:String})],t.FtFilter.prototype,"moreValuesButtonLabel",void 0),ai([ot({type:Array})],t.FtFilter.prototype,"options",void 0),ai([ot({type:Boolean})],t.FtFilter.prototype,"multivalued",void 0),ai([ot({type:Boolean})],t.FtFilter.prototype,"disabled",void 0),ai([ot({type:Boolean})],t.FtFilter.prototype,"raiseSelectedOptions",void 0),ai([ot({type:Number})],t.FtFilter.prototype,"displayedValuesLimit",void 0),ai([st(".ft-filter--container")],t.FtFilter.prototype,"container",void 0),ai([st(".ft-filter--values")],t.FtFilter.prototype,"valuesContainer",void 0),ai([st(".ft-filter--levels")],t.FtFilter.prototype,"levelsContainer",void 0),ai([st(".ft-filter--levels ft-filter-level:last-child")],t.FtFilter.prototype,"lastLevel",void 0),ai([function(t){return at({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")],t.FtFilter.prototype,"levels",void 0),ai([ct()],t.FtFilter.prototype,"withScroll",void 0),ai([ct()],t.FtFilter.prototype,"filter",void 0),ai([ct()],t.FtFilter.prototype,"slideIn",void 0),ai([ct()],t.FtFilter.prototype,"slideOut",void 0),t.FtFilter=ai([ft("ft-filter")],t.FtFilter),t.FtFilterChangeEvent=ni,Object.defineProperty(t,"t",{value:!0})}({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-filter",
-  "version": "0.0.88",
+  "version": "0.1.0",
   "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.0.88",
-    "@fluid-topics/ft-ripple": "^0.0.88",
-    "@fluid-topics/ft-snap-scroll": "^0.0.88",
-    "@fluid-topics/ft-typography": "^0.0.88",
-    "@fluid-topics/ft-wc-utils": "^0.0.88",
+    "@fluid-topics/ft-button": "^0.1.0",
+    "@fluid-topics/ft-ripple": "^0.1.0",
+    "@fluid-topics/ft-snap-scroll": "^0.1.0",
+    "@fluid-topics/ft-typography": "^0.1.0",
+    "@fluid-topics/ft-wc-utils": "^0.1.0",
     "@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": "220e53dba55dfa1de1560abbc30067555f72198c"
+  "gitHead": "8a87041408cbaccded5dc7c2a8f6a8aa6c92b9ee"
 }