@fluid-topics/ft-search-bar 0.3.54 → 0.3.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/README.md +6 -2
- package/build/ft-search-bar.light.js +6 -16
- package/build/ft-search-bar.min.js +378 -377
- package/package.json +16 -16
package/README.md
CHANGED
|
@@ -50,7 +50,8 @@ function render() {
|
|
|
50
50
|
<html lang="en">
|
|
51
51
|
<head>
|
|
52
52
|
<title>My custom integration</title>
|
|
53
|
-
<link href="
|
|
53
|
+
<link href="http://doc.fluidtopics.com/api/stylesheets/fonts.css" rel="stylesheet">
|
|
54
|
+
<link href="http://doc.fluidtopics.com/api/stylesheets/theme.css" rel="stylesheet">
|
|
54
55
|
</head>
|
|
55
56
|
<body>
|
|
56
57
|
<ft-search-bar
|
|
@@ -66,7 +67,10 @@ function render() {
|
|
|
66
67
|
filtersButton: "Refine your search",
|
|
67
68
|
inputPlaceHolder: "Search our documentation"
|
|
68
69
|
}));
|
|
69
|
-
searchBar.addEventListener("launch-search", event =>
|
|
70
|
+
searchBar.addEventListener("launch-search", event => {
|
|
71
|
+
console.log("Launch search:", event.detail)
|
|
72
|
+
console.log("URL:", searchBar.searchRequestSerializer(event.detail))
|
|
73
|
+
});
|
|
70
74
|
</script>
|
|
71
75
|
</body>
|
|
72
76
|
</html>
|
|
@@ -218,7 +218,7 @@ const q=Symbol.for(""),W=t=>{if((null==t?void 0:t.r)===q)return null==t?void 0:t
|
|
|
218
218
|
opacity: ${ne.opacityContentOnSurfacePressed};
|
|
219
219
|
transform: translate(-50%, -50%) scale(1);
|
|
220
220
|
}
|
|
221
|
-
`;var ue=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class be 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.rippleSize=0,this.originX=0,this.originY=0,this.resizeObserver=new ResizeObserver((()=>this.setRippleSize())),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.moveRipple=t=>{var e,i;let{x:o,y:s}=this.getCoordinates(t),r=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-r.x:r.width/2),this.originY=Math.round(null!=s?s-r.y:r.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.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`
|
|
221
|
+
`;var ue=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class be 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.rippleSize=0,this.originX=0,this.originY=0,this.resizeObserver=new ResizeObserver((()=>this.setRippleSize())),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),r=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-r.x:r.width/2),this.originY=Math.round(null!=s?s-r.y:r.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.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`
|
|
222
222
|
<style>
|
|
223
223
|
.ft-ripple .ft-ripple--effect,
|
|
224
224
|
.ft-ripple.ft-ripple--unbounded .ft-ripple--background {
|
|
@@ -235,7 +235,7 @@ const q=Symbol.for(""),W=t=>{if((null==t?void 0:t.r)===q)return null==t?void 0:t
|
|
|
235
235
|
<div class="ft-ripple--background"></div>
|
|
236
236
|
<div class="ft-ripple--effect"></div>
|
|
237
237
|
</div>
|
|
238
|
-
`}contentAvailableCallback(t){super.contentAvailableCallback(t),this.ripple&&this.resizeObserver.observe(this.ripple),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}updated(t){var e,i;super.updated(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")),t.has("unbounded")&&this.setRippleSize()}endRipple(){this.endHover(),this.endFocus(),this.endPress(),this.rippling=!1}setRippleSize(){if(this.ripple){const t=this.ripple.getBoundingClientRect();this.rippleSize=(this.unbounded?1:1.7)*Math.max(t.width,t.height)}}connectedCallback(){
|
|
238
|
+
`}contentAvailableCallback(t){super.contentAvailableCallback(t),this.ripple&&this.resizeObserver.observe(this.ripple),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}updated(t){var e,i;super.updated(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")),t.has("unbounded")&&this.setRippleSize()}endRipple(){this.endHover(),this.endFocus(),this.endPress(),this.rippling=!1}setRippleSize(){if(this.ripple){const t=this.ripple.getBoundingClientRect();this.rippleSize=(this.unbounded?1:1.7)*Math.max(t.width,t.height)}}connectedCallback(){super.connectedCallback(),this.setupDebouncer.run((()=>{var t;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentElement;e&&this.setupFor(e),this.setRippleSize()}))}setupFor(t){if(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}}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.resizeObserver.disconnect(),this.endRipple()}}be.elementDefinitions={},be.styles=de,ue([o.property({type:Boolean})],be.prototype,"primary",void 0),ue([o.property({type:Boolean})],be.prototype,"secondary",void 0),ue([o.property({type:Boolean})],be.prototype,"unbounded",void 0),ue([o.property({type:Boolean})],be.prototype,"activated",void 0),ue([o.property({type:Boolean})],be.prototype,"selected",void 0),ue([o.property({type:Boolean})],be.prototype,"disabled",void 0),ue([o.state()],be.prototype,"hovered",void 0),ue([o.state()],be.prototype,"focused",void 0),ue([o.state()],be.prototype,"pressed",void 0),ue([o.state()],be.prototype,"rippling",void 0),ue([o.state()],be.prototype,"rippleSize",void 0),ue([o.state()],be.prototype,"originX",void 0),ue([o.state()],be.prototype,"originY",void 0),ue([o.query(".ft-ripple")],be.prototype,"ripple",void 0),ue([o.query(".ft-ripple--effect")],be.prototype,"rippleEffect",void 0),e.customElement("ft-ripple")(be);const ve={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","1"),borderRadiusS:e.FtCssVariableFactory.external(e.designSystemVariables.borderRadiusS,"Design system"),maxWidth:e.FtCssVariableFactory.create("--ft-tooltip-max-width","SIZE","150px")},ge=i.css`
|
|
239
239
|
.ft-tooltip--container {
|
|
240
240
|
display: block;
|
|
241
241
|
position: relative;
|
|
@@ -512,17 +512,7 @@ const q=Symbol.for(""),W=t=>{if((null==t?void 0:t.r)===q)return null==t?void 0:t
|
|
|
512
512
|
${e.setVariable(Zt.fontSize,"1em")};
|
|
513
513
|
${e.setVariable(Zt.lineHeight,"var(--ft-button-internal-content-height)")};
|
|
514
514
|
}
|
|
515
|
-
|
|
516
|
-
.ft-button--safari-fix .ft-button--label {
|
|
517
|
-
margin-right: 0;
|
|
518
|
-
}
|
|
519
|
-
|
|
520
|
-
.ft-button--safari-fix .ft-button--label:after {
|
|
521
|
-
content: "\\0000a0";
|
|
522
|
-
display: inline-block;
|
|
523
|
-
width: 0;
|
|
524
|
-
}
|
|
525
|
-
|
|
515
|
+
|
|
526
516
|
.ft-button--label[hidden] {
|
|
527
517
|
display: none;
|
|
528
518
|
}
|
|
@@ -546,7 +536,7 @@ const q=Symbol.for(""),W=t=>{if((null==t?void 0:t.r)===q)return null==t?void 0:t
|
|
|
546
536
|
${e.setVariable(me.size,Le.iconSize)};
|
|
547
537
|
${e.setVariable(me.color,"var(--ft-button-internal-color)")};
|
|
548
538
|
}
|
|
549
|
-
`];var Ne=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class Te extends e.FtLitElement{constructor(){super(...arguments),this.primary=!1,this.outlined=!1,this.disabled=!1,this.dense=!1,this.round=!1,this.label="",this.icon=void 0,this.iconVariant=Ee.material,this.trailingIcon=!1,this.loading=!1,this.tooltipPosition="bottom",this.hideTooltip=!1,this.forceTooltip=!1,this.onclick=t=>{this.isDisabled()&&(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation())}}render(){const t={"ft-button":!0,"ft-button--primary":this.primary,"ft-button--outlined":this.outlined,"ft-button--dense":this.dense,"ft-button--round":this.round,"ft-button--trailing-icon":this.trailingIcon,"ft-button--loading":this.trailingIcon,"ft-
|
|
539
|
+
`];var Ne=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class Te extends e.FtLitElement{constructor(){super(...arguments),this.primary=!1,this.outlined=!1,this.disabled=!1,this.dense=!1,this.round=!1,this.label="",this.icon=void 0,this.iconVariant=Ee.material,this.trailingIcon=!1,this.loading=!1,this.tooltipPosition="bottom",this.hideTooltip=!1,this.forceTooltip=!1,this.onclick=t=>{this.isDisabled()&&(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation())}}render(){const t={"ft-button":!0,"ft-button--primary":this.primary,"ft-button--outlined":this.outlined,"ft-button--dense":this.dense,"ft-button--round":this.round,"ft-button--trailing-icon":this.trailingIcon,"ft-button--loading":this.trailingIcon,"ft-no-text-select":!0};return this.addTooltipIfNeeded(i.html`
|
|
550
540
|
<button part="button"
|
|
551
541
|
class="${r.classMap(t)}"
|
|
552
542
|
aria-label="${this.getLabel()}"
|
|
@@ -555,7 +545,7 @@ const q=Symbol.for(""),W=t=>{if((null==t?void 0:t.r)===q)return null==t?void 0:t
|
|
|
555
545
|
<ft-typography part="label"
|
|
556
546
|
variant="button"
|
|
557
547
|
element="span"
|
|
558
|
-
class="ft-button--label"
|
|
548
|
+
class="ft-button--label ${e.isSafari?"ft-safari-ellipsis-fix":""}"
|
|
559
549
|
?hidden=${!this.hasTextContent()}>
|
|
560
550
|
<slot @slotchange=${this.onSlotchange}></slot>
|
|
561
551
|
</ft-typography>
|
|
@@ -569,7 +559,7 @@ const q=Symbol.for(""),W=t=>{if((null==t?void 0:t.r)===q)return null==t?void 0:t
|
|
|
569
559
|
</ft-tooltip>
|
|
570
560
|
`:t}resolveIcon(){return this.loading?i.html`
|
|
571
561
|
<ft-loader></ft-loader> `:this.icon?i.html`
|
|
572
|
-
<ft-icon variant="${this.iconVariant}" value="${this.icon}"></ft-icon> `:i.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}}Te.elementDefinitions={"ft-ripple":be,"ft-tooltip":ye,"ft-typography":te,"ft-icon":De,"ft-loader":we},Te.styles=Ae,Ne([o.property({type:Boolean})],Te.prototype,"primary",void 0),Ne([o.property({type:Boolean})],Te.prototype,"outlined",void 0),Ne([o.property({type:Boolean})],Te.prototype,"disabled",void 0),Ne([o.property({type:Boolean})],Te.prototype,"dense",void 0),Ne([o.property({type:Boolean})],Te.prototype,"round",void 0),Ne([o.property({type:String})],Te.prototype,"label",void 0),Ne([o.property({type:String})],Te.prototype,"icon",void 0),Ne([o.property({type:String})],Te.prototype,"iconVariant",void 0),Ne([o.property({type:Boolean})],Te.prototype,"trailingIcon",void 0),Ne([o.property({type:Boolean})],Te.prototype,"loading",void 0),Ne([o.property({type:String})],Te.prototype,"tooltipPosition",void 0),Ne([o.property({type:Boolean})],Te.prototype,"hideTooltip",void 0),Ne([o.property({type:Boolean})],Te.prototype,"forceTooltip",void 0),Ne([o.query(".ft-button")],Te.prototype,"button",void 0),Ne([o.query(".ft-button--label slot")],Te.prototype,"slottedContent",void 0),e.customElement("ft-button")(Te);const Re=e.FtCssVariableFactory.extend("--ft-checkbox-text-color",e.designSystemVariables.colorOnSurfaceHigh),Ze=e.FtCssVariableFactory.external(e.designSystemVariables.colorPrimary,"Design system"),Ue=e.FtCssVariableFactory.external(e.designSystemVariables.colorOnPrimary,"Design system"),_e=e.FtCssVariableFactory.extend("--ft-checkbox-border-color",e.designSystemVariables.colorOnSurfaceMedium),He=e.FtCssVariableFactory.external(e.designSystemVariables.colorOnSurfaceDisabled,"Design system"),Ve=i.css`
|
|
562
|
+
<ft-icon variant="${this.iconVariant}" value="${this.icon}"></ft-icon> `:i.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}}Te.elementDefinitions={"ft-ripple":be,"ft-tooltip":ye,"ft-typography":te,"ft-icon":De,"ft-loader":we},Te.styles=[e.safariEllipsisFix,Ae],Ne([o.property({type:Boolean})],Te.prototype,"primary",void 0),Ne([o.property({type:Boolean})],Te.prototype,"outlined",void 0),Ne([o.property({type:Boolean})],Te.prototype,"disabled",void 0),Ne([o.property({type:Boolean})],Te.prototype,"dense",void 0),Ne([o.property({type:Boolean})],Te.prototype,"round",void 0),Ne([o.property({type:String})],Te.prototype,"label",void 0),Ne([o.property({type:String})],Te.prototype,"icon",void 0),Ne([o.property({type:String})],Te.prototype,"iconVariant",void 0),Ne([o.property({type:Boolean})],Te.prototype,"trailingIcon",void 0),Ne([o.property({type:Boolean})],Te.prototype,"loading",void 0),Ne([o.property({type:String})],Te.prototype,"tooltipPosition",void 0),Ne([o.property({type:Boolean})],Te.prototype,"hideTooltip",void 0),Ne([o.property({type:Boolean})],Te.prototype,"forceTooltip",void 0),Ne([o.query(".ft-button")],Te.prototype,"button",void 0),Ne([o.query(".ft-button--label slot")],Te.prototype,"slottedContent",void 0),e.customElement("ft-button")(Te);const Re=e.FtCssVariableFactory.extend("--ft-checkbox-text-color",e.designSystemVariables.colorOnSurfaceHigh),Ze=e.FtCssVariableFactory.external(e.designSystemVariables.colorPrimary,"Design system"),Ue=e.FtCssVariableFactory.external(e.designSystemVariables.colorOnPrimary,"Design system"),_e=e.FtCssVariableFactory.extend("--ft-checkbox-border-color",e.designSystemVariables.colorOnSurfaceMedium),He=e.FtCssVariableFactory.external(e.designSystemVariables.colorOnSurfaceDisabled,"Design system"),Ve=i.css`
|
|
573
563
|
* {
|
|
574
564
|
box-sizing: border-box;
|
|
575
565
|
}
|