@fluid-topics/ft-search-bar 0.2.20 → 0.2.21

package/build/ft-search-bar.light.js

@@ -555,14 +555,8 @@ const V=Symbol.for(""),K=t=>{var e,i;if((null===(e=t)||void 0===e?void 0:e.r)===
         `}resolveIcon(){return this.loading?i.html`
                 <ft-loader></ft-loader> `:this.icon?i.html`
                         <ft-icon variant="material">${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}}Le.elementDefinitions={"ft-ripple":pe,"ft-tooltip":ue,"ft-typography":Yt,"ft-icon":Se,"ft-loader":ve},ze([o.property({type:Boolean})],Le.prototype,"primary",void 0),ze([o.property({type:Boolean})],Le.prototype,"outlined",void 0),ze([o.property({type:Boolean})],Le.prototype,"disabled",void 0),ze([o.property({type:Boolean})],Le.prototype,"dense",void 0),ze([o.property({type:Boolean})],Le.prototype,"round",void 0),ze([o.property({type:String})],Le.prototype,"label",void 0),ze([o.property({type:String})],Le.prototype,"icon",void 0),ze([o.property({type:Boolean})],Le.prototype,"trailingIcon",void 0),ze([o.property({type:Boolean})],Le.prototype,"loading",void 0),ze([o.property({type:String})],Le.prototype,"tooltipPosition",void 0),ze([o.query(".ft-button")],Le.prototype,"button",void 0),ze([o.query(".ft-button--label slot")],Le.prototype,"slottedContent",void 0),e.customElement("ft-button")(Le);var De=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};const Fe=e.FtCssVariable.extend("--ft-checkbox-text-color",e.designSystemVariables.colorOnSurfaceHigh),je=e.FtCssVariable.external(e.designSystemVariables.colorPrimary,"Design system"),Me=e.FtCssVariable.external(e.designSystemVariables.colorOnPrimary,"Design system"),Pe=e.FtCssVariable.extend("--ft-checkbox-border-color",e.designSystemVariables.colorOnSurfaceMedium),Ae=e.FtCssVariable.external(e.designSystemVariables.colorOnSurfaceDisabled,"Design system");class Te extends e.FtLitElement{constructor(){super(...arguments),this.name="",this.checked=!1,this.indeterminate=!1,this.disabled=!1}render(){const t={"ft-checkbox":!0,"ft-checkbox--checked":this.checked,"ft-checkbox--indeterminate":this.indeterminate,"ft-checkbox--disabled":this.disabled};return i.html`
-            <label class="${r.classMap(t)}">
+            <label class="${r.classMap(t)}" for="checkbox-input">
                 <div class="ft-checkbox--box-container">
-                    <input type="checkbox"
-                           name=${this.name}
-                           .checked=${this.checked}
-                           .disabled=${this.disabled}
-                           @change=${this.onChange}
-                    >
                     <ft-ripple
                             ?disabled=${this.disabled}
                             ?primary=${this.checked||this.indeterminate}
@@ -574,6 +568,13 @@ const V=Symbol.for(""),K=t=>{var e,i;if((null===(e=t)||void 0===e?void 0:e.r)===
                                   d=${this.indeterminate&&!this.checked?"M2,12 22,12":"M1.73,12.91 8.1,19.28 22.79,4.59"}></path>
                         </svg>
                     </div>
+                    <input type="checkbox"
+                           id="checkbox-input"
+                           name="${this.name}"
+                           .checked=${this.checked}
+                           .disabled=${this.disabled}
+                           @change=${this.onChange}
+                    >
                 </div>
                 <ft-typography variant="body2">
                     <slot></slot>
@@ -659,6 +660,13 @@ const V=Symbol.for(""),K=t=>{var e,i;if((null===(e=t)||void 0===e?void 0:e.r)===
     `,De([o.property()],Te.prototype,"name",void 0),De([o.property({type:Boolean,reflect:!0})],Te.prototype,"checked",void 0),De([o.property({type:Boolean})],Te.prototype,"indeterminate",void 0),De([o.property({type:Boolean})],Te.prototype,"disabled",void 0),De([o.query(".ft-checkbox")],Te.prototype,"container",void 0),De([o.query("ft-ripple")],Te.prototype,"ripple",void 0),e.customElement("ft-checkbox")(Te);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};const Re=e.FtCssVariable.extend("--ft-radio-text-color",e.designSystemVariables.colorOnSurfaceHigh),Ze=e.FtCssVariable.external(e.designSystemVariables.colorPrimary,"Design system"),Ue=(e.FtCssVariable.external(e.designSystemVariables.colorOnPrimary,"Design system"),e.FtCssVariable.extend("--ft-radio-border-color",e.designSystemVariables.colorOnSurfaceMedium)),_e=e.FtCssVariable.external(e.designSystemVariables.colorOnSurfaceDisabled,"Design system");class He extends CustomEvent{constructor(t,e){super("change",{detail:{value:t,checked:e},bubbles:!0,composed:!0})}}class Ve extends e.FtLitElement{constructor(){super(...arguments),this.value="",this.name="",this.checked=!1,this.disabled=!1}render(){const t={"ft-radio":!0,"ft-radio--checked":this.checked,"ft-radio--disabled":this.disabled};return i.html`
             <div class="${r.classMap(t)}">
                 <div class="ft-radio--box-container">
+                    <ft-ripple
+                            ?disabled=${this.disabled}
+                            ?primary=${this.checked}
+                            unbounded>
+                    </ft-ripple>
+                    <div class="ft-radio--box">
+                    </div>
                     <input id="radio-button"
                            type="radio"
                            name="${this.name}"
@@ -667,13 +675,6 @@ const V=Symbol.for(""),K=t=>{var e,i;if((null===(e=t)||void 0===e?void 0:e.r)===
                            .disabled=${this.disabled}
                            @change=${this.onChange}
                     >
-                    <ft-ripple
-                            ?disabled=${this.disabled}
-                            ?primary=${this.checked}
-                            unbounded>
-                    </ft-ripple>
-                    <div class="ft-radio--box">
-                    </div>
                 </div>
                 <label for="radio-button" @click=${t=>t.stopPropagation()}>
                     <ft-typography variant="body2">
@@ -764,9 +765,9 @@ const V=Symbol.for(""),K=t=>{var e,i;if((null===(e=t)||void 0===e?void 0:e.r)===
             <slot @slotchange=${this.onSlotChange}
                   @change=${this.onChange}
                   @keydown=${this.onKeyDown}
-                  @focusin=${this.onFocusIn}
+                  @focusin=${this.focusCurrentValue}
             ></slot>
-        `}onSlotChange(){this.radioButtons.forEach((t=>t.name=this.name))}onChange(t){t.stopPropagation(),this.radioButtons.forEach((e=>e.checked=t.detail.value===e.value)),this.dispatchEvent(new CustomEvent("change",{detail:t.detail.value}))}onKeyDown(t){switch(t.key){case"ArrowUp":case"ArrowLeft":{let e=this.findFtRadio(t),i=this.radioButtons.indexOf(e)-1;this.radioButtons[i<0?this.radioButtons.length-1:i].select();break}case"ArrowDown":case"ArrowRight":{let e=this.radioButtons.indexOf(this.findFtRadio(t))+1;this.radioButtons[e>this.radioButtons.length-1?0:e].select();break}}}findFtRadio(t){return t.composedPath().find((t=>"FT-RADIO"===t.tagName))}onFocusIn(){setTimeout((()=>{var t;return null===(t=this.radioButtons.find((t=>t.checked)))||void 0===t?void 0:t.focus()}),10)}}qe.elementDefinitions={},qe.styles=i.css`
+        `}onSlotChange(){this.radioButtons.forEach((t=>t.name=this.name))}onChange(t){t.stopPropagation(),this.radioButtons.forEach((e=>e.checked=t.detail.value===e.value)),this.dispatchEvent(new CustomEvent("change",{detail:t.detail.value})),this.focusCurrentValue()}onKeyDown(t){switch(t.key){case"ArrowUp":case"ArrowLeft":{let e=this.findFtRadio(t),i=this.radioButtons.indexOf(e)-1;this.radioButtons[i<0?this.radioButtons.length-1:i].select();break}case"ArrowDown":case"ArrowRight":{let e=this.radioButtons.indexOf(this.findFtRadio(t))+1;this.radioButtons[e>this.radioButtons.length-1?0:e].select();break}}}findFtRadio(t){return t.composedPath().find((t=>"FT-RADIO"===t.tagName))}focusCurrentValue(){setTimeout((()=>{var t;return null===(t=this.radioButtons.find((t=>t.checked)))||void 0===t?void 0:t.focus()}),10)}}qe.elementDefinitions={},qe.styles=i.css`
         :host {
             display: contents;
         }
@@ -890,7 +891,7 @@ const V=Symbol.for(""),K=t=>{var e,i;if((null===(e=t)||void 0===e?void 0:e.r)===
             ft-radio, ft-checkbox {
                 flex-shrink: 1;
                 flex-grow: 1;
-                display: block;
+                display: flex;
                 max-width: calc(100% + 10px);
                 margin-left: -10px;
                 word-break: break-word;
@@ -1533,7 +1534,6 @@ const V=Symbol.for(""),K=t=>{var e,i;if((null===(e=t)||void 0===e?void 0:e.r)===
                 position: absolute;
                 top: calc(50% - var(--ft-typography-caption-line-height) / 2);
                 transition: top 250ms;
-                width: calc(100% - 8px);
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;