@fluid-topics/ft-viewer 2.2.13 → 2.2.15

package/build/ft-viewer.light.js

@@ -1497,6 +1497,10 @@
         outline: none;
     }
 
+    .ft-text-field-suggestion--remove {
+        margin: 0 4px;
+    }
+
     .ft-text-field-suggestion,
     .ft-text-field-suggestion--suggestion,
     .ft-text-field-suggestion--label {
@@ -1639,7 +1643,7 @@
                      .variant=${this.iconVariant}
                      .value=${this.icon}
                      @click=${()=>{var e;return(e=this.input)===null||e===void 0?void 0:e.focus()}}></ft-icon>
-        `:ve.nothing}update(e){super.update(e),(e.has("value")||e.has("filterSuggestions")||e.has("suggestionsProvider"))&&this.updateSuggestions(),e.has("value")&&e.get("value")!=null&&(this.hideSuggestions=!1),e.has("dispatchedValue")&&e.get("dispatchedValue")!=null&&(this.hideSuggestions=!0)}async updateSuggestions(){var e;if(this.suggestionsProvider){(e=this.cancelableSuggest)===null||e===void 0||e.cancel();let i=this.suggestionsProvider(this.value);i instanceof Promise?(this.cancelableSuggest=(0,ze.cancelable)(i),this.providedSuggestions=await this.cancelableSuggest):(this.cancelableSuggest=void 0,this.providedSuggestions=i)}else this.filterSuggestionsIfNeeded()}filterSuggestionsIfNeeded(){this.filterSuggestions?(this.slottedSuggestions.forEach(e=>e.hidden=!e.getValue().toLowerCase().includes(this.value.toLowerCase())),this.visibleSuggestions=this.slottedSuggestions.filter(e=>!e.hidden)):this.visibleSuggestions=this.slottedSuggestions,this.newValueSuggestion&&(this.visibleSuggestions=[...this.visibleSuggestions,this.newValueSuggestion]),this.hideSuggestions=this.visibleSuggestions.length<=0}contentAvailableCallback(e){super.contentAvailableCallback(e),e.has("focused")&&!this.hideSuggestions&&this.visibleSuggestions.length>0&&this.setSuggestionPosition(),e.has("providedSuggestions")&&(this.visibleSuggestions=[...this.providedSuggestionsInDom]),e.has("autocomplete")&&this.setupWatchAutofill(),this.suggestionsShouldBeDisplayed()&&this.setSuggestionPosition()}setupWatchAutofill(){var e;this.clearWatchAutofill(),((e=this.autocomplete)!==null&&e!==void 0?e:"off")!=="off"&&(this.watchAutofillInterval=setInterval(()=>{var i,r,n;!((i=this.input)===null||i===void 0)&&i.matches(":autofill")&&this.dispatchedValue!==((r=this.input)===null||r===void 0?void 0:r.value)&&this.setValue((n=this.input)===null||n===void 0?void 0:n.value,!0)},200))}clearWatchAutofill(){this.watchAutofillInterval&&clearInterval(this.watchAutofillInterval)}connectedCallback(){super.connectedCallback(),this.setupWatchAutofill()}disconnectedCallback(){super.disconnectedCallback(),this.clearWatchAutofill()}setValue(e,i=!1){var r,n;this.value!==e&&(this.inputValid=!0,this.setInternalValue(e),this.dispatchEvent(new ks(e))),i&&this.dispatchedValue!==e&&(this.inputValid=(n=(r=this.input)===null||r===void 0?void 0:r.checkValidity())!==null&&n!==void 0?n:!0,this.inputValid?(this.dispatchedValue=e,this.dispatchEvent(new Ds(e))):this.dispatchEvent(new Ls(this.input.validationMessage)))}handleInput(e){var i;let r=((i=this.input)===null||i===void 0?void 0:i.value)||"";this.setValue(r,e.key=="Escape"||e.key=="Enter")}catchComposingEvents(e){}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(e){var i,r;if(e.key==="ArrowDown"||e.key==="ArrowUp"){e.preventDefault(),e.stopPropagation(),this.hideSuggestions=!1;let n=this.visibleSuggestions.findIndex(s=>s.matches(":focus-within")),o;e.key==="ArrowDown"?o=n<this.visibleSuggestions.length-1?n+1:0:o=n>0?n-1:this.visibleSuggestions.length-1,(i=this.visibleSuggestions[o])===null||i===void 0||i.focus(void 0,(r=this.visibleSuggestions[n])===null||r===void 0?void 0:r.isRemoveButtonFocused())}(e.key=="Escape"||e.key=="Enter")&&(this.hideSuggestions=!0)}onSuggestionSelected(e){var i;this.setValue(e.detail,!0),(i=this.input)===null||i===void 0||i.focus(),setTimeout(()=>this.hideSuggestions=!0,0)}onSuggestionRemoved(){setTimeout(()=>this.updateSuggestions())}onFocus(){this.focused=!0,this.hideSuggestions=!1}onMainPanelBlur(){var e,i;!((e=this.mainPanel)===null||e===void 0)&&e.matches(":focus-within")||(this.focused=!1,this.setValue(((i=this.input)===null||i===void 0?void 0:i.value)||"",!0))}togglePasswordVisibility(){this.hidePassword=!this.hidePassword}isPasswordField(){return this.password||this.type==="password"}setSuggestionPosition(){this.suggestionsContainer.style.width=this.mainPanel.getBoundingClientRect().width+"px";let e=["bottom","top"];(0,ze.computeOffsetAutoPosition)(this.mainPanel,this.suggestionsContainer,"bottom",e,"fixed","--text-field-internal-suggest-size",0).then(({x:i,y:r})=>{this.suggestionsContainer.style.left=`${i}px`,this.suggestionsContainer.style.top=`${r}px`})}suggestionsShouldBeDisplayed(){return!this.hideSuggestions&&(this.visibleSuggestions.length||this.providedSuggestions.length)}};_.elementDefinitions={"ft-input-label":lt,"ft-ripple":P,"ft-typography":F,"ft-icon":z,"ft-text-field-suggestion":He};_.styles=[fi,ze.noTextInputDefaultClearButton,Sf];$([(0,M.property)()],_.prototype,"label",void 0);$([(0,M.property)({noAccessor:!0})],_.prototype,"value",null);$([(0,M.state)()],_.prototype,"dispatchedValue",void 0);$([(0,M.property)()],_.prototype,"helper",void 0);$([(0,M.property)()],_.prototype,"suggestionsHelper",void 0);$([(0,M.property)({type:Boolean})],_.prototype,"outlined",void 0);$([(0,M.property)({type:Boolean})],_.prototype,"disabled",void 0);$([(0,M.property)({type:Boolean})],_.prototype,"error",void 0);$([(0,M.property)({type:Boolean})],_.prototype,"fixedMenuPosition",void 0);$([(0,M.property)()],_.prototype,"prefix",void 0);$([(0,M.property)()],_.prototype,"icon",void 0);$([(0,M.property)()],_.prototype,"name",void 0);$([(0,M.property)()],_.prototype,"type",void 0);$([(0,M.property)()],_.prototype,"passwordHiddenIcon",void 0);$([(0,M.property)()],_.prototype,"passwordRevealedIcon",void 0);$([(0,M.property)()],_.prototype,"iconVariant",void 0);$([(0,M.property)({type:Boolean})],_.prototype,"filterSuggestions",void 0);$([(0,ze.numberProperty)()],_.prototype,"maxLength",void 0);$([(0,M.property)({type:Boolean})],_.prototype,"password",void 0);$([(0,M.property)({type:String})],_.prototype,"autocomplete",void 0);$([(0,M.property)({attribute:!1})],_.prototype,"suggestionsProvider",void 0);$([(0,M.property)({type:Boolean})],_.prototype,"hideCurrentValueSuggestion",void 0);$([(0,M.state)()],_.prototype,"focused",void 0);$([(0,M.state)()],_.prototype,"inputValid",void 0);$([(0,M.state)()],_.prototype,"hidePassword",void 0);$([(0,M.state)()],_.prototype,"hideSuggestions",void 0);$([(0,M.state)()],_.prototype,"visibleSuggestions",void 0);$([(0,M.state)()],_.prototype,"providedSuggestions",void 0);$([(0,M.query)(".ft-text-field--main-panel")],_.prototype,"mainPanel",void 0);$([(0,M.query)(".ft-text-field--input")],_.prototype,"input",void 0);$([(0,M.query)(".ft-text-field-suggestion--new-value")],_.prototype,"newValueSuggestion",void 0);$([(0,M.query)(".ft-text-field--suggestions")],_.prototype,"suggestionsContainer",void 0);$([(0,M.queryAll)("ft-text-field-suggestion")],_.prototype,"providedSuggestionsInDom",void 0);$([(0,M.queryAssignedElements)({selector:"ft-text-field-suggestion"})],_.prototype,"slottedSuggestions",void 0);$([(0,ze.ignoreComposingEvents)()],_.prototype,"handleInput",null);$([(0,ze.ignoreComposingEvents)()],_.prototype,"catchComposingEvents",null);var Of=c(h());var Rf={"ft-text-field":_,"ft-text-field-suggestion":He};(0,Of.customElements)(Rf);var Is=class extends CustomEvent{constructor(e){super("send-feedback",{detail:e})}};var we=function(t,e,i,r){var n=arguments.length,o=n<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,i):r,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(t,e,i,r);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(o=(n<3?s(o):n>3?s(e,i,o):s(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o},Q=class extends mt(Fr.FtLitElementRedux){constructor(){super(),this.hideTitle=!1,this.withMoreOptionsButton=!1,this.emptyStarIcon="STAR",this.filledStarIcon="STAR_PLAIN",this.emptyLikeIcon="THUMBS_UP",this.filledLikeIcon="THUMBS_UP_PLAIN",this.emptyDislikeIcon="THUMBS_DOWN",this.filledDislikeIcon="THUMBS_DOWN_PLAIN",this.canAccessFeedback=!1,this.canRateThisContent=!1,this.from="",this.feedbackMessage="",this.addI18nContext(J,xf),this.addStore(x)}get configuredRatingType(){var e,i;return(i=(e=this.ratingSummary)===null||e===void 0?void 0:e.type)!==null&&i!==void 0?i:_e.NO_RATING}get ratingTypeOfDoneRatingOfThisContent(){var e,i,r;return(r=(i=(e=this.ratingSummary)===null||e===void 0?void 0:e.rating)===null||i===void 0?void 0:i.type)!==null&&r!==void 0?r:_e.NO_RATING}get ratingValue(){var e,i,r;return(r=(i=(e=this.ratingSummary)===null||e===void 0?void 0:e.rating)===null||i===void 0?void 0:i.value)!==null&&r!==void 0?r:-1}get ratingDate(){var e,i;let r=(i=(e=this.ratingSummary)===null||e===void 0?void 0:e.rating)===null||i===void 0?void 0:i.date;return typeof r=="string"?(0,Fr.parseDate)(r):r}render(){return!this.canAccessFeedback&&!this.canRateThisContent?ue.nothing:ue.html`
+        `:ve.nothing}update(e){super.update(e),(e.has("value")||e.has("filterSuggestions")||e.has("suggestionsProvider"))&&this.updateSuggestions(),e.has("value")&&e.get("value")!=null&&(this.hideSuggestions=!1),e.has("dispatchedValue")&&e.get("dispatchedValue")!=null&&(this.hideSuggestions=!0)}async updateSuggestions(){var e;if(this.suggestionsProvider){(e=this.cancelableSuggest)===null||e===void 0||e.cancel();let i=this.suggestionsProvider(this.value);i instanceof Promise?(this.cancelableSuggest=(0,ze.cancelable)(i),this.providedSuggestions=await this.cancelableSuggest):(this.cancelableSuggest=void 0,this.providedSuggestions=i)}else this.filterSuggestionsIfNeeded()}filterSuggestionsIfNeeded(){this.filterSuggestions?(this.slottedSuggestions.forEach(e=>e.hidden=!e.getValue().toLowerCase().includes(this.value.toLowerCase())),this.visibleSuggestions=this.slottedSuggestions.filter(e=>!e.hidden)):this.visibleSuggestions=this.slottedSuggestions,this.newValueSuggestion&&(this.visibleSuggestions=[...this.visibleSuggestions,this.newValueSuggestion]),this.hideSuggestions=this.visibleSuggestions.length<=0}contentAvailableCallback(e){super.contentAvailableCallback(e),e.has("focused")&&!this.hideSuggestions&&this.visibleSuggestions.length>0&&this.setSuggestionPosition(),e.has("providedSuggestions")&&this.suggestionsProvider&&(this.visibleSuggestions=[...this.providedSuggestionsInDom]),e.has("autocomplete")&&this.setupWatchAutofill(),this.suggestionsShouldBeDisplayed()&&this.setSuggestionPosition()}setupWatchAutofill(){var e;this.clearWatchAutofill(),((e=this.autocomplete)!==null&&e!==void 0?e:"off")!=="off"&&(this.watchAutofillInterval=setInterval(()=>{var i,r,n;!((i=this.input)===null||i===void 0)&&i.matches(":autofill")&&this.dispatchedValue!==((r=this.input)===null||r===void 0?void 0:r.value)&&this.setValue((n=this.input)===null||n===void 0?void 0:n.value,!0)},200))}clearWatchAutofill(){this.watchAutofillInterval&&clearInterval(this.watchAutofillInterval)}connectedCallback(){super.connectedCallback(),this.setupWatchAutofill()}disconnectedCallback(){super.disconnectedCallback(),this.clearWatchAutofill()}setValue(e,i=!1){var r,n;this.value!==e&&(this.inputValid=!0,this.setInternalValue(e),this.dispatchEvent(new ks(e))),i&&this.dispatchedValue!==e&&(this.inputValid=(n=(r=this.input)===null||r===void 0?void 0:r.checkValidity())!==null&&n!==void 0?n:!0,this.inputValid?(this.dispatchedValue=e,this.dispatchEvent(new Ds(e))):this.dispatchEvent(new Ls(this.input.validationMessage)))}handleInput(e){var i;let r=((i=this.input)===null||i===void 0?void 0:i.value)||"";this.setValue(r,e.key=="Escape"||e.key=="Enter")}catchComposingEvents(e){}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(e){var i,r;if(e.key==="ArrowDown"||e.key==="ArrowUp"){e.preventDefault(),e.stopPropagation(),this.hideSuggestions=!1;let n=this.visibleSuggestions.findIndex(s=>s.matches(":focus-within")),o;e.key==="ArrowDown"?o=n<this.visibleSuggestions.length-1?n+1:0:o=n>0?n-1:this.visibleSuggestions.length-1,(i=this.visibleSuggestions[o])===null||i===void 0||i.focus(void 0,(r=this.visibleSuggestions[n])===null||r===void 0?void 0:r.isRemoveButtonFocused())}(e.key=="Escape"||e.key=="Enter")&&(this.hideSuggestions=!0)}onSuggestionSelected(e){var i;this.setValue(e.detail,!0),(i=this.input)===null||i===void 0||i.focus(),setTimeout(()=>this.hideSuggestions=!0,0)}onSuggestionRemoved(){setTimeout(()=>this.updateSuggestions())}onFocus(){this.focused=!0,this.hideSuggestions=!1}onMainPanelBlur(){var e,i;!((e=this.mainPanel)===null||e===void 0)&&e.matches(":focus-within")||(this.focused=!1,this.setValue(((i=this.input)===null||i===void 0?void 0:i.value)||"",!0))}togglePasswordVisibility(){this.hidePassword=!this.hidePassword}isPasswordField(){return this.password||this.type==="password"}setSuggestionPosition(){this.suggestionsContainer.style.width=this.mainPanel.getBoundingClientRect().width+"px";let e=["bottom","top"];(0,ze.computeOffsetAutoPosition)(this.mainPanel,this.suggestionsContainer,"bottom",e,"fixed","--text-field-internal-suggest-size",0).then(({x:i,y:r})=>{this.suggestionsContainer.style.left=`${i}px`,this.suggestionsContainer.style.top=`${r}px`})}suggestionsShouldBeDisplayed(){return!this.hideSuggestions&&(this.visibleSuggestions.length||this.providedSuggestions.length)}};_.elementDefinitions={"ft-input-label":lt,"ft-ripple":P,"ft-typography":F,"ft-icon":z,"ft-text-field-suggestion":He};_.styles=[fi,ze.noTextInputDefaultClearButton,Sf];$([(0,M.property)()],_.prototype,"label",void 0);$([(0,M.property)({noAccessor:!0})],_.prototype,"value",null);$([(0,M.state)()],_.prototype,"dispatchedValue",void 0);$([(0,M.property)()],_.prototype,"helper",void 0);$([(0,M.property)()],_.prototype,"suggestionsHelper",void 0);$([(0,M.property)({type:Boolean})],_.prototype,"outlined",void 0);$([(0,M.property)({type:Boolean})],_.prototype,"disabled",void 0);$([(0,M.property)({type:Boolean})],_.prototype,"error",void 0);$([(0,M.property)({type:Boolean})],_.prototype,"fixedMenuPosition",void 0);$([(0,M.property)()],_.prototype,"prefix",void 0);$([(0,M.property)()],_.prototype,"icon",void 0);$([(0,M.property)()],_.prototype,"name",void 0);$([(0,M.property)()],_.prototype,"type",void 0);$([(0,M.property)()],_.prototype,"passwordHiddenIcon",void 0);$([(0,M.property)()],_.prototype,"passwordRevealedIcon",void 0);$([(0,M.property)()],_.prototype,"iconVariant",void 0);$([(0,M.property)({type:Boolean})],_.prototype,"filterSuggestions",void 0);$([(0,ze.numberProperty)()],_.prototype,"maxLength",void 0);$([(0,M.property)({type:Boolean})],_.prototype,"password",void 0);$([(0,M.property)({type:String})],_.prototype,"autocomplete",void 0);$([(0,M.property)({attribute:!1})],_.prototype,"suggestionsProvider",void 0);$([(0,M.property)({type:Boolean})],_.prototype,"hideCurrentValueSuggestion",void 0);$([(0,M.state)()],_.prototype,"focused",void 0);$([(0,M.state)()],_.prototype,"inputValid",void 0);$([(0,M.state)()],_.prototype,"hidePassword",void 0);$([(0,M.state)()],_.prototype,"hideSuggestions",void 0);$([(0,M.state)()],_.prototype,"visibleSuggestions",void 0);$([(0,M.state)()],_.prototype,"providedSuggestions",void 0);$([(0,M.query)(".ft-text-field--main-panel")],_.prototype,"mainPanel",void 0);$([(0,M.query)(".ft-text-field--input")],_.prototype,"input",void 0);$([(0,M.query)(".ft-text-field-suggestion--new-value")],_.prototype,"newValueSuggestion",void 0);$([(0,M.query)(".ft-text-field--suggestions")],_.prototype,"suggestionsContainer",void 0);$([(0,M.queryAll)("ft-text-field-suggestion")],_.prototype,"providedSuggestionsInDom",void 0);$([(0,M.queryAssignedElements)({selector:"ft-text-field-suggestion"})],_.prototype,"slottedSuggestions",void 0);$([(0,ze.ignoreComposingEvents)()],_.prototype,"handleInput",null);$([(0,ze.ignoreComposingEvents)()],_.prototype,"catchComposingEvents",null);var Of=c(h());var Rf={"ft-text-field":_,"ft-text-field-suggestion":He};(0,Of.customElements)(Rf);var Is=class extends CustomEvent{constructor(e){super("send-feedback",{detail:e})}};var we=function(t,e,i,r){var n=arguments.length,o=n<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,i):r,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(t,e,i,r);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(o=(n<3?s(o):n>3?s(e,i,o):s(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o},Q=class extends mt(Fr.FtLitElementRedux){constructor(){super(),this.hideTitle=!1,this.withMoreOptionsButton=!1,this.emptyStarIcon="STAR",this.filledStarIcon="STAR_PLAIN",this.emptyLikeIcon="THUMBS_UP",this.filledLikeIcon="THUMBS_UP_PLAIN",this.emptyDislikeIcon="THUMBS_DOWN",this.filledDislikeIcon="THUMBS_DOWN_PLAIN",this.canAccessFeedback=!1,this.canRateThisContent=!1,this.from="",this.feedbackMessage="",this.addI18nContext(J,xf),this.addStore(x)}get configuredRatingType(){var e,i;return(i=(e=this.ratingSummary)===null||e===void 0?void 0:e.type)!==null&&i!==void 0?i:_e.NO_RATING}get ratingTypeOfDoneRatingOfThisContent(){var e,i,r;return(r=(i=(e=this.ratingSummary)===null||e===void 0?void 0:e.rating)===null||i===void 0?void 0:i.type)!==null&&r!==void 0?r:_e.NO_RATING}get ratingValue(){var e,i,r;return(r=(i=(e=this.ratingSummary)===null||e===void 0?void 0:e.rating)===null||i===void 0?void 0:i.value)!==null&&r!==void 0?r:-1}get ratingDate(){var e,i;let r=(i=(e=this.ratingSummary)===null||e===void 0?void 0:e.rating)===null||i===void 0?void 0:i.date;return typeof r=="string"?(0,Fr.parseDate)(r):r}render(){return!this.canAccessFeedback&&!this.canRateThisContent?ue.nothing:ue.html`
             <div part="container">
                 ${this.hideTitle?ue.nothing:ue.html`
                         <ft-typography variant="${V.title}" part="main-title">