@fluid-topics/ft-search-bar 1.0.55 → 1.0.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/ft-search-bar.light.js +44 -28
- package/build/ft-search-bar.min.js +112 -96
- package/package.json +14 -14
|
@@ -151,6 +151,30 @@ const G=Symbol.for(""),X=t=>{if((null==t?void 0:t.r)===G)return null==t?void 0:t
|
|
|
151
151
|
opacity: 0;
|
|
152
152
|
}
|
|
153
153
|
|
|
154
|
+
.ft-ripple .ft-ripple--effect {
|
|
155
|
+
aspect-ratio: 1;
|
|
156
|
+
width: auto;
|
|
157
|
+
height: auto;
|
|
158
|
+
min-width: 170%;
|
|
159
|
+
min-height: 170%;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.ft-ripple .ft-ripple--background{
|
|
163
|
+
width: 100%;
|
|
164
|
+
height: 100%;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.ft-ripple.ft-ripple--unbounded .ft-ripple--effect,
|
|
168
|
+
.ft-ripple.ft-ripple--unbounded .ft-ripple--background {
|
|
169
|
+
aspect-ratio: 1;
|
|
170
|
+
width: auto;
|
|
171
|
+
height: auto;
|
|
172
|
+
max-width: unset;
|
|
173
|
+
max-height: unset;
|
|
174
|
+
min-width: 100%;
|
|
175
|
+
min-height: 100%;
|
|
176
|
+
}
|
|
177
|
+
|
|
154
178
|
.ft-ripple .ft-ripple--background {
|
|
155
179
|
background-color: ${le.backgroundColor};
|
|
156
180
|
}
|
|
@@ -178,8 +202,6 @@ const G=Symbol.for(""),X=t=>{if((null==t?void 0:t.r)===G)return null==t?void 0:t
|
|
|
178
202
|
.ft-ripple .ft-ripple--background {
|
|
179
203
|
top: 0;
|
|
180
204
|
left: 0;
|
|
181
|
-
height: 100%;
|
|
182
|
-
width: 100%;
|
|
183
205
|
transition: opacity 75ms linear;
|
|
184
206
|
}
|
|
185
207
|
|
|
@@ -219,14 +241,8 @@ const G=Symbol.for(""),X=t=>{if((null==t?void 0:t.r)===G)return null==t?void 0:t
|
|
|
219
241
|
opacity: ${le.opacityContentOnSurfacePressed};
|
|
220
242
|
transform: translate(-50%, -50%) scale(1);
|
|
221
243
|
}
|
|
222
|
-
`;var be=function(t,e,i,o){for(var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};class ve extends e.FtLitElement{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.unbounded=!1,this.activated=!1,this.selected=!1,this.disabled=!1,this.hovered=!1,this.focused=!1,this.pressed=!1,this.rippling=!1,this.
|
|
244
|
+
`;var be=function(t,e,i,o){for(var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};class ve extends e.FtLitElement{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.unbounded=!1,this.activated=!1,this.selected=!1,this.disabled=!1,this.hovered=!1,this.focused=!1,this.pressed=!1,this.rippling=!1,this.originX=0,this.originY=0,this.debouncer=new e.Debouncer(1e3),this.onTransitionStart=t=>{"transform"===t.propertyName&&(this.rippling=this.pressed,this.debouncer.run((()=>this.rippling=!1)))},this.onTransitionEnd=t=>{"transform"===t.propertyName&&(this.rippling=!1)},this.setupDebouncer=new e.Debouncer(10),this.moveRipple=t=>{var e,i;let{x:o,y:s}=this.getCoordinates(t),n=null!==(i=null===(e=this.ripple)||void 0===e?void 0:e.getBoundingClientRect())&&void 0!==i?i:{x:0,y:0,width:0,height:0};this.originX=Math.round(null!=o?o-n.x:n.width/2),this.originY=Math.round(null!=s?s-n.y:n.height/2)},this.startPress=t=>{this.moveRipple(t),this.pressed=!this.isIgnored(t)},this.endPress=()=>{this.pressed=!1},this.startHover=t=>{this.hovered=!this.isIgnored(t)},this.endHover=()=>{this.hovered=!1},this.startFocus=t=>{this.focused=this.isFocusVisible(null==t?void 0:t.target)&&!this.isIgnored(t)},this.endFocus=()=>{this.focused=!1}}render(){let t={"ft-ripple":!0,"ft-ripple--primary":this.primary,"ft-ripple--secondary":this.secondary,"ft-ripple--unbounded":this.unbounded,"ft-ripple--selected":(this.selected||this.activated)&&!this.disabled,"ft-ripple--pressed":(this.pressed||this.rippling)&&!this.disabled,"ft-ripple--hovered":this.hovered&&!this.disabled,"ft-ripple--focused":this.focused&&!this.disabled};return i.html`
|
|
223
245
|
<style>
|
|
224
|
-
.ft-ripple .ft-ripple--effect,
|
|
225
|
-
.ft-ripple.ft-ripple--unbounded .ft-ripple--background {
|
|
226
|
-
width: ${this.rippleSize}px;
|
|
227
|
-
height: ${this.rippleSize}px;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
246
|
.ft-ripple .ft-ripple--effect {
|
|
231
247
|
left: ${this.originX}px;
|
|
232
248
|
top: ${this.originY}px;
|
|
@@ -236,7 +252,7 @@ const G=Symbol.for(""),X=t=>{if((null==t?void 0:t.r)===G)return null==t?void 0:t
|
|
|
236
252
|
<div class="ft-ripple--background"></div>
|
|
237
253
|
<div class="ft-ripple--effect"></div>
|
|
238
254
|
</div>
|
|
239
|
-
`}contentAvailableCallback(t){super.contentAvailableCallback(t),this.
|
|
255
|
+
`}contentAvailableCallback(t){super.contentAvailableCallback(t),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}update(t){var e,i;super.update(t),t.has("disabled")&&(this.disabled?(this.endRipple(),null===(e=this.target)||void 0===e||e.removeAttribute("data-is-ft-ripple-target")):null===(i=this.target)||void 0===i||i.setAttribute("data-is-ft-ripple-target","true"))}endRipple(){this.endHover(),this.endFocus(),this.endPress(),this.rippling=!1}connectedCallback(){super.connectedCallback(),this.setupDebouncer.run((()=>this.defaultSetup()))}defaultSetup(){var t,e;const i=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentElement;i&&this.setupFor(null!==(e=this.target)&&void 0!==e?e:i)}setupFor(t){if(this.setupDebouncer.cancel(),this.target===t)return;this.onDisconnect&&this.onDisconnect(),this.target=t,t.setAttribute("data-is-ft-ripple-target","true");const e=(...t)=>e=>{t.forEach((t=>window.addEventListener(t,this.endPress,{once:!0}))),this.startPress(e)},i=e("mouseup","contextmenu"),o=e("touchend","touchcancel"),s=t=>{["Enter"," "].includes(t.key)&&e("keyup")(t)};t.addEventListener("mouseover",this.startHover),t.addEventListener("mousemove",this.moveRipple),t.addEventListener("mouseleave",this.endHover),t.addEventListener("mousedown",i),t.addEventListener("touchstart",o),t.addEventListener("touchmove",this.moveRipple),t.addEventListener("keydown",s),t.addEventListener("focus",this.startFocus),t.addEventListener("blur",this.endFocus),t.addEventListener("focusin",this.startFocus),t.addEventListener("focusout",this.endFocus),this.onDisconnect=()=>{t.removeAttribute("data-is-ft-ripple-target"),t.removeEventListener("mouseover",this.startHover),t.removeEventListener("mousemove",this.moveRipple),t.removeEventListener("mouseleave",this.endHover),t.removeEventListener("mousedown",i),t.removeEventListener("touchstart",o),t.removeEventListener("touchmove",this.moveRipple),t.removeEventListener("keydown",s),t.removeEventListener("focus",this.startFocus),t.removeEventListener("blur",this.endFocus),t.removeEventListener("focusin",this.startFocus),t.removeEventListener("focusout",this.endFocus),this.onDisconnect=void 0,this.target=void 0}}getCoordinates(t){const e=t,i=t;let o,s;return null!=e.x?({x:o,y:s}=e):null!=i.touches&&(o=i.touches[0].clientX,s=i.touches[0].clientY),{x:o,y:s}}isFocusVisible(t){return!(t instanceof HTMLElement)||t.matches(":focus-visible")}isIgnored(t){if(this.disabled)return!0;if(null!=t)for(let e of t.composedPath()){if(e===this.target)break;if("hasAttribute"in e&&e.hasAttribute("data-is-ft-ripple-target"))return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.endRipple()}}ve.elementDefinitions={},ve.styles=ue,be([o.property({type:Boolean})],ve.prototype,"primary",void 0),be([o.property({type:Boolean})],ve.prototype,"secondary",void 0),be([o.property({type:Boolean})],ve.prototype,"unbounded",void 0),be([o.property({type:Boolean})],ve.prototype,"activated",void 0),be([o.property({type:Boolean})],ve.prototype,"selected",void 0),be([o.property({type:Boolean})],ve.prototype,"disabled",void 0),be([o.state()],ve.prototype,"hovered",void 0),be([o.state()],ve.prototype,"focused",void 0),be([o.state()],ve.prototype,"pressed",void 0),be([o.state()],ve.prototype,"rippling",void 0),be([o.state()],ve.prototype,"originX",void 0),be([o.state()],ve.prototype,"originY",void 0),be([o.query(".ft-ripple")],ve.prototype,"ripple",void 0),be([o.query(".ft-ripple--effect")],ve.prototype,"rippleEffect",void 0),e.customElement("ft-ripple")(ve);const ge={distance:e.FtCssVariableFactory.create("--ft-tooltip-distance","SIZE","4px"),color:e.FtCssVariableFactory.create("--ft-tooltip-color","COLOR","#FFFFFF"),backgroundColor:e.FtCssVariableFactory.create("--ft-tooltip-background-color","COLOR","#666666"),zIndex:e.FtCssVariableFactory.create("--ft-tooltip-z-index","NUMBER","100"),borderRadiusS:e.FtCssVariableFactory.external(e.designSystemVariables.borderRadiusS,"Design system"),maxWidth:e.FtCssVariableFactory.create("--ft-tooltip-max-width","SIZE","150px")},xe=i.css`
|
|
240
256
|
.ft-tooltip--container {
|
|
241
257
|
display: block;
|
|
242
258
|
}
|
|
@@ -1046,28 +1062,28 @@ const G=Symbol.for(""),X=t=>{if((null==t?void 0:t.r)===G)return null==t?void 0:t
|
|
|
1046
1062
|
`;var bi=function(t,e,i,o){for(var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};class vi extends CustomEvent{constructor(t,e){super("current-element-change",{detail:{index:t,element:e}})}}class gi extends e.FtLitElement{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 e.Debouncer(200),this.updateScrollDebouncer=new e.Debouncer(100)}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)])}render(){const t=n.classMap({"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":e.isSafari}),o=this.controls&&this.withScroll;return i.html`
|
|
1047
1063
|
<div part="container" class="${t}">
|
|
1048
1064
|
<ft-button
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1065
|
+
class="ft-snap-scroll--previous"
|
|
1066
|
+
part="controls"
|
|
1067
|
+
primary
|
|
1068
|
+
icon="${this.horizontal?"THIN_ARROW_LEFT":"THIN_ARROW_UP"}"
|
|
1069
|
+
?hidden=${!o||this.startReached}
|
|
1070
|
+
?disabled=${!o||this.startReached}
|
|
1071
|
+
@click=${this.previous}
|
|
1056
1072
|
></ft-button>
|
|
1057
1073
|
<slot class="ft-snap-scroll--content"
|
|
1058
1074
|
part="content"
|
|
1059
1075
|
@slotchange=${this.onSlotChange}></slot>
|
|
1060
1076
|
<ft-button
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1077
|
+
class="ft-snap-scroll--next"
|
|
1078
|
+
part="controls"
|
|
1079
|
+
primary
|
|
1080
|
+
icon="${this.horizontal?"THIN_ARROW_RIGHT":"THIN_ARROW"}"
|
|
1081
|
+
?hidden=${!o||this.endReached}
|
|
1082
|
+
?disabled=${!o||this.endReached}
|
|
1083
|
+
@click=${this.next}
|
|
1068
1084
|
></ft-button>
|
|
1069
1085
|
</div>
|
|
1070
|
-
`}
|
|
1086
|
+
`}update(t){super.update(t),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 vi(this.currentElement,this.elements[this.currentElement]))}contentAvailableCallback(t){var e;super.contentAvailableCallback(t),this.contentSlot&&this.listenedContainer!==this.contentSlot&&(this.resizeObserver.observe(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))}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)}}gi.elementDefinitions={"ft-button":_e},gi.styles=ui,bi([o.property({type:Boolean})],gi.prototype,"horizontal",void 0),bi([o.property({type:Boolean})],gi.prototype,"hideScrollbar",void 0),bi([o.property({type:Boolean})],gi.prototype,"controls",void 0),bi([o.property({type:Boolean})],gi.prototype,"limitSize",void 0),bi([o.state()],gi.prototype,"elements",void 0),bi([o.state()],gi.prototype,"currentElement",void 0),bi([o.state()],gi.prototype,"withScroll",void 0),bi([o.state()],gi.prototype,"startReached",void 0),bi([o.state()],gi.prototype,"endReached",void 0),bi([o.query(".ft-snap-scroll--content")],gi.prototype,"contentSlot",void 0),e.customElement("ft-snap-scroll")(gi);const xi=e.FtCssVariableFactory.external(e.designSystemVariables.colorOutline,"Design system"),yi=e.FtCssVariableFactory.external(e.designSystemVariables.colorOnSurface,"Design system"),mi=e.FtCssVariableFactory.external(e.designSystemVariables.colorOnSurfaceMedium,"Design system"),$i=e.FtCssVariableFactory.external(e.designSystemVariables.colorPrimary,"Design system"),wi=e.FtCssVariableFactory.external(e.designSystemVariables.colorSurface,"Design system"),ki=e.FtCssVariableFactory.external(e.designSystemVariables.transitionDuration,"Design system"),Si=e.FtCssVariableFactory.external(e.designSystemVariables.transitionTimingFunction,"Design system"),zi=[Xt,i.css`
|
|
1071
1087
|
:host {
|
|
1072
1088
|
display: flex;
|
|
1073
1089
|
max-height: 100%;
|
|
@@ -1253,7 +1269,7 @@ const G=Symbol.for(""),X=t=>{if((null==t?void 0:t.r)===G)return null==t?void 0:t
|
|
|
1253
1269
|
></ft-filter-level>
|
|
1254
1270
|
`}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;this.sendEventIfValuesChanged(),this.requestUpdate(),null===(t=this.levels)||void 0===t||t.forEach((t=>t.requestUpdate()))}))}sendEventIfValuesChanged(){const t=this.selectedValues;e.deepEqual(this.lastDispatchedValues,t)||(this.dispatchEvent(new Ei(t)),this.lastDispatchedValues=t)}updateOptionsFromSlot(t){t.stopPropagation(),this.options=this.slotElement.assignedElements().map((t=>t)),this.optionsChanged()}onFilterChange(){var t,e;this.filter=null!==(e=null===(t=this.filterInput)||void 0===t?void 0:t.value)&&void 0!==e?e:""}updateScroll(){this.valuesContainer&&(this.withScroll=this.valuesContainer.scrollHeight>this.valuesContainer.clientHeight)}}Bi.elementDefinitions={"ft-button":_e,"ft-filter-level":fi,"ft-snap-scroll":gi,"ft-typography":ie},Bi.styles=zi,Oi([o.property({type:String})],Bi.prototype,"id",void 0),Oi([o.property({type:String})],Bi.prototype,"label",void 0),Oi([o.property({type:String})],Bi.prototype,"filterPlaceHolder",void 0),Oi([o.property({type:String})],Bi.prototype,"clearButtonLabel",void 0),Oi([o.property({type:String})],Bi.prototype,"moreValuesButtonLabel",void 0),Oi([o.property({type:String})],Bi.prototype,"noValuesLabel",void 0),Oi([e.jsonProperty([])],Bi.prototype,"options",void 0),Oi([o.property({type:Boolean})],Bi.prototype,"multivalued",void 0),Oi([o.property({type:Boolean})],Bi.prototype,"disabled",void 0),Oi([o.property({type:Boolean})],Bi.prototype,"raiseSelectedOptions",void 0),Oi([o.property({type:Number})],Bi.prototype,"displayedValuesLimit",void 0),Oi([o.property({type:Boolean})],Bi.prototype,"hideClearButton",void 0),Oi([o.query(".ft-filter--slot")],Bi.prototype,"slotElement",void 0),Oi([o.query(".ft-filter--container")],Bi.prototype,"container",void 0),Oi([o.query(".ft-filter--values")],Bi.prototype,"valuesContainer",void 0),Oi([o.query(".ft-filter--levels")],Bi.prototype,"levelsContainer",void 0),Oi([o.state()],Bi.prototype,"lastLevelHasHiddenvalues",void 0),Oi([o.query(".ft-filter--filter input")],Bi.prototype,"filterInput",void 0),Oi([o.queryAll(".ft-filter--levels ft-filter-level")],Bi.prototype,"levels",void 0),Oi([o.state()],Bi.prototype,"withScroll",void 0),Oi([o.state()],Bi.prototype,"filter",void 0),Oi([o.state()],Bi.prototype,"slideIn",void 0),Oi([o.state()],Bi.prototype,"slideOut",void 0);var Ci=function(t,e,i,o){for(var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};class Ii extends e.FtLitElement{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1,this.subOptions=[]}render(){return i.html`
|
|
1255
1271
|
<slot class="ft-filter-option--slot" @slotchange=${this.updateSubOptionsFromSlot}></slot>
|
|
1256
|
-
`}updateSubOptionsFromSlot(t){t.stopPropagation(),this.subOptions=this.slotElement.assignedElements().map((t=>t))}
|
|
1272
|
+
`}updateSubOptionsFromSlot(t){t.stopPropagation(),this.subOptions=this.slotElement.assignedElements().map((t=>t))}update(t){super.update(t),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}}Ii.elementDefinitions={},Ci([o.property({type:String})],Ii.prototype,"label",void 0),Ci([o.property({type:Object,converter:t=>t})],Ii.prototype,"value",void 0),Ci([o.property({type:Boolean,reflect:!0})],Ii.prototype,"selected",void 0),Ci([o.property({type:Object})],Ii.prototype,"subOptions",void 0),Ci([e.jsonProperty({})],Ii.prototype,"renderOption",void 0),Ci([o.query(".ft-filter-option--slot")],Ii.prototype,"slotElement",void 0),e.customElement("ft-filter")(Bi),e.customElement("ft-filter-option")(Ii);const Fi=i.css`
|
|
1257
1273
|
.ft-accordion {
|
|
1258
1274
|
box-sizing: border-box;
|
|
1259
1275
|
}
|
|
@@ -1776,7 +1792,7 @@ const G=Symbol.for(""),X=t=>{if((null==t?void 0:t.r)===G)return null==t?void 0:t
|
|
|
1776
1792
|
.ft-select--in-error .ft-select--helper-text {
|
|
1777
1793
|
color: ${to.colorError};
|
|
1778
1794
|
}
|
|
1779
|
-
`;var io=function(t,e,i,o){for(var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};class oo extends e.FtLitElement{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1}render(){return i.html``}
|
|
1795
|
+
`;var io=function(t,e,i,o){for(var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};class oo extends e.FtLitElement{constructor(){super(...arguments),this.label="",this.value=null,this.selected=!1}render(){return i.html``}update(t){super.update(t),this.dispatchEvent(new CustomEvent("option-change",{detail:this,bubbles:!0}))}}oo.elementDefinitions={},io([o.property({type:String})],oo.prototype,"label",void 0),io([o.property({type:Object,converter:t=>t})],oo.prototype,"value",void 0),io([o.property({type:Boolean,reflect:!0})],oo.prototype,"selected",void 0);class so extends e.FtLitElement{constructor(){super(...arguments),this.label="",this.helper="",this.outlined=!1,this.disabled=!1,this.error=!1,this.fixedMenuPosition=!1,this.options=[],this.optionsDisplayed=!1,this.focusOptions=!1,this.hideOptions=t=>this.optionsDisplayed=this.optionsDisplayed&&t.composedPath().includes(this.container)}render(){var t,e,o,r,l;let a=this.hasOptionsMenuOpen,c=this.disabled||!this.hasOptions;const h=null!=(null===(t=this.selectedOption)||void 0===t?void 0:t.value)||(null!==(o=null===(e=this.selectedOption)||void 0===e?void 0:e.label)&&void 0!==o?o:"").length>0,p={"ft-select":!0,"ft-select--filled":!this.outlined,"ft-select--outlined":this.outlined,"ft-select--disabled":c,"ft-select--options-displayed":a,"ft-select--has-option-selected":h,"ft-select--no-label":!this.label,"ft-select--fixed":this.fixedMenuPosition,"ft-select--in-error":this.error};return i.html`
|
|
1780
1796
|
<div class="${n.classMap(p)}" part="container">
|
|
1781
1797
|
<div class="ft-select--main-panel" part="main-panel">
|
|
1782
1798
|
<ft-input-label text="${this.label}"
|
|
@@ -1824,7 +1840,7 @@ const G=Symbol.for(""),X=t=>{if((null==t?void 0:t.r)===G)return null==t?void 0:t
|
|
|
1824
1840
|
<ft-ripple ?primary=${e} ?activated=${e}></ft-ripple>
|
|
1825
1841
|
<span>${t.label}</span>
|
|
1826
1842
|
</div>
|
|
1827
|
-
`}
|
|
1843
|
+
`}update(t){super.update(t),t.has("options")&&(this.selectedOption=this.options.filter((t=>t.selected))[0]),t.has("selectedOption")&&(this.optionsDisplayed=!1),t.has("optionsDisplayed")&&this.fixedMenuPosition&&this.hasOptionsMenuOpen&&this.positionOptionsMenu()}positionOptionsMenu(){this.optionsMenu.style.top=this.mainPanel.getBoundingClientRect().top+this.mainPanel.getBoundingClientRect().height+"px",this.optionsMenu.style.left=this.mainPanel.getBoundingClientRect().left+"px",this.optionsMenu.style.width=this.mainPanel.getBoundingClientRect().width+"px"}contentAvailableCallback(t){var e,i;super.contentAvailableCallback(t),t.has("focusOptions")&&this.focusOptions&&(null===(i=null!==(e=this.selectedOptionElement)&&void 0!==e?e:this.firstOption)||void 0===i||i.focus(),this.focusOptions=!1)}get hasOptionsMenuOpen(){return!this.disabled&&this.optionsDisplayed&&this.hasOptions}get hasOptions(){return this.options.length>0}updateOptionsFromSlot(t){var e;t.stopPropagation();let i=null===(e=this.optionsSlot)||void 0===e?void 0:e.assignedElements().map((t=>t));i&&i.length>0&&(this.options=i)}onMainPanelKeyDown(t){switch(t.key){case" ":t.preventDefault(),t.stopPropagation();case"Enter":this.optionsDisplayed=!this.optionsDisplayed,this.focusOptions=!0;break;case"ArrowUp":case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.optionsDisplayed=!0,this.focusOptions=!0}}onOptionsKeyDown(t){var e,i,o,s,n;let r;switch(t.key){case"Escape":this.optionsDisplayed=!1,null===(e=this.mainPanel)||void 0===e||e.focus();break;case"Tab":this.optionsDisplayed=!1;break;case"ArrowUp":t.preventDefault(),t.stopPropagation(),r=null!==(o=null===(i=this.focusedOption)||void 0===i?void 0:i.previousElementSibling)&&void 0!==o?o:this.lastOption;break;case"ArrowDown":t.preventDefault(),t.stopPropagation(),r=null!==(n=null===(s=this.focusedOption)||void 0===s?void 0:s.nextElementSibling)&&void 0!==n?n:this.firstOption}null==r||r.focus()}onOptionKeyDown(t,e){var i;"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),this.selectOption(e),this.optionsDisplayed=!1,null===(i=this.mainPanel)||void 0===i||i.focus())}selectOption(t){var i,o;if(!e.deepEqual(null===(i=this.selectedOption)||void 0===i?void 0:i.value,t.value)){this.selectedOption=t;for(let e of this.options)e.selected=e===t;this.dispatchEvent(new CustomEvent("change",{detail:null===(o=this.selectedOption)||void 0===o?void 0:o.value}))}this.optionsDisplayed=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.hideOptions)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.hideOptions)}}so.elementDefinitions={"ft-input-label":Qi,"ft-typography":ie,"ft-ripple":ve,"ft-icon":De},so.styles=[Gt,Xt,eo],io([o.property({type:String})],so.prototype,"label",void 0),io([o.property({type:String})],so.prototype,"helper",void 0),io([o.property({type:Boolean})],so.prototype,"outlined",void 0),io([o.property({type:Boolean})],so.prototype,"disabled",void 0),io([o.property({type:Boolean})],so.prototype,"error",void 0),io([o.property({type:Boolean})],so.prototype,"fixedMenuPosition",void 0),io([o.property({type:Array})],so.prototype,"options",void 0),io([o.state()],so.prototype,"selectedOption",void 0),io([o.state()],so.prototype,"optionsDisplayed",void 0),io([o.state()],so.prototype,"focusOptions",void 0),io([o.query(".ft-select")],so.prototype,"container",void 0),io([o.query(".ft-select--options")],so.prototype,"optionsMenu",void 0),io([o.query(".ft-select--input-panel")],so.prototype,"mainPanel",void 0),io([o.query(".ft-select--option:first-child")],so.prototype,"firstOption",void 0),io([o.query(".ft-select--option:focus")],so.prototype,"focusedOption",void 0),io([o.query(".ft-select--option.ft-select--option-selected")],so.prototype,"selectedOptionElement",void 0),io([o.query(".ft-select--option:last-child")],so.prototype,"lastOption",void 0),io([o.query("slot")],so.prototype,"optionsSlot",void 0),e.customElement("ft-select")(so),e.customElement("ft-select-option")(oo);const no={display:e.FtCssVariableFactory.create("--ft-skeleton--display","DISPLAY","block"),width:e.FtCssVariableFactory.create("--ft-skeleton--width","SIZE","100%"),height:e.FtCssVariableFactory.create("--ft-skeleton--height","SIZE","20px"),backgroundColor:e.FtCssVariableFactory.create("--ft-skeleton--background-color","COLOR","#f1f1f1"),glareWidth:e.FtCssVariableFactory.create("--ft-skeleton--glare-width","SIZE","200px"),glareColor:e.FtCssVariableFactory.create("--ft-skeleton--glare-color","COLOR","rgba(255, 255, 255, .6)"),animationDuration:e.FtCssVariableFactory.create("--ft-skeleton--animation-duration","UNKNOWN","2s"),borderRadiusM:e.FtCssVariableFactory.external(e.designSystemVariables.borderRadiusM,"Design system")},ro=i.css`
|
|
1828
1844
|
:host {
|
|
1829
1845
|
width: ${no.width};
|
|
1830
1846
|
height: ${no.height};
|