@fluid-topics/ftds-combobox 2.2.8 → 2.2.9
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { nothing, PropertyValues, TemplateResult } from "lit";
|
|
2
2
|
import { ElementDefinitionsMap, FtdsBase, ValidationRule } from "@fluid-topics/ft-wc-utils";
|
|
3
3
|
import { FtdsIcons } from "@fluid-topics/ftds-icon";
|
|
4
|
-
import { ActionableListboxItem, FtdsBaseComboboxProperties, ListboxItem, SuggestionListboxItem, SuggestionsProvider } from "./ftds-base-combobox.properties";
|
|
4
|
+
import { ActionableListboxItem, ComboboxSuggestion, FtdsBaseComboboxProperties, ListboxItem, SuggestionListboxItem, SuggestionsProvider } from "./ftds-base-combobox.properties";
|
|
5
5
|
declare const FtdsBaseComboboxBase: typeof FtdsBase & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-wc-utils").FtInputInterface<any>> & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
|
|
6
6
|
export declare abstract class FtdsBaseCombobox<T> extends FtdsBaseComboboxBase implements FtdsBaseComboboxProperties {
|
|
7
7
|
value: T;
|
|
@@ -54,6 +54,7 @@ export declare abstract class FtdsBaseCombobox<T> extends FtdsBaseComboboxBase i
|
|
|
54
54
|
private setAriaDescribeBy;
|
|
55
55
|
private computeSuggestions;
|
|
56
56
|
private runSuggestionsProvider;
|
|
57
|
+
protected findMatchingSuggestion<S extends ComboboxSuggestion>(suggestions: S[], inputValue: string, selector: (suggestion: S) => string): S | undefined;
|
|
57
58
|
protected suggestionId(index: number): string;
|
|
58
59
|
protected onType(e: Event): Promise<void>;
|
|
59
60
|
protected onInputClick(): Promise<void>;
|
|
@@ -270,8 +270,8 @@ export class FtdsBaseCombobox extends FtdsBaseComboboxBase {
|
|
|
270
270
|
async getListboxItems() {
|
|
271
271
|
const filteredListboxItems = this.filteredSuggestions;
|
|
272
272
|
const listboxItemsWithLimit = this.filteredSuggestionsWithLimit;
|
|
273
|
-
const
|
|
274
|
-
const shouldShowNewValue = this.canOfferNewValue && this.inputValue !== "" && !
|
|
273
|
+
const matchIgnoreCase = this.filteredSuggestions.some((s) => s.label.toLowerCase() === this.inputValue.toLowerCase());
|
|
274
|
+
const shouldShowNewValue = this.canOfferNewValue && this.inputValue !== "" && !matchIgnoreCase;
|
|
275
275
|
const shouldShowNoResults = !this.canOfferNewValue && this.filteredSuggestions.length === 0 && this.inputValue !== "";
|
|
276
276
|
if (shouldShowNewValue) {
|
|
277
277
|
listboxItemsWithLimit.push({ label: this.inputValue, value: this.inputValue, type: ListboxItemType.newValue });
|
|
@@ -309,6 +309,10 @@ export class FtdsBaseCombobox extends FtdsBaseComboboxBase {
|
|
|
309
309
|
const suggestions = await this.suggestionsProvider(this.inputValue);
|
|
310
310
|
this.providedSuggestions = suggestions.map((s) => ({ ...s, type: ListboxItemType.suggestion }));
|
|
311
311
|
}
|
|
312
|
+
findMatchingSuggestion(suggestions, inputValue, selector) {
|
|
313
|
+
const exactMatch = suggestions.find((s) => selector(s) === inputValue);
|
|
314
|
+
return exactMatch !== null && exactMatch !== void 0 ? exactMatch : suggestions.find((s) => selector(s).toLowerCase() === inputValue.toLowerCase());
|
|
315
|
+
}
|
|
312
316
|
suggestionId(index) {
|
|
313
317
|
return `${this.listboxId}-option-${index}`;
|
|
314
318
|
}
|
package/build/ftds-combobox.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ export declare class FtdsCombobox extends FtdsBaseCombobox<string> implements Ft
|
|
|
9
9
|
private previousCommittedLabel;
|
|
10
10
|
constructor();
|
|
11
11
|
handleBlurStrategy(): void;
|
|
12
|
+
private findSuggestionMatchingInput;
|
|
12
13
|
commitSelection(suggestion: ActionableListboxItem): void;
|
|
13
14
|
commitTypedText(typedText: string): void;
|
|
14
15
|
private commit;
|
package/build/ftds-combobox.js
CHANGED
|
@@ -17,7 +17,7 @@ export class FtdsCombobox extends FtdsBaseCombobox {
|
|
|
17
17
|
if (this.inputValue === "") {
|
|
18
18
|
return;
|
|
19
19
|
}
|
|
20
|
-
const matchedSuggestion = this.
|
|
20
|
+
const matchedSuggestion = this.findSuggestionMatchingInput();
|
|
21
21
|
if (matchedSuggestion) {
|
|
22
22
|
this.commitSelection(matchedSuggestion);
|
|
23
23
|
}
|
|
@@ -28,6 +28,9 @@ export class FtdsCombobox extends FtdsBaseCombobox {
|
|
|
28
28
|
this.resetCombobox();
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
+
findSuggestionMatchingInput() {
|
|
32
|
+
return this.findMatchingSuggestion(this.filteredSuggestions, this.inputValue, (s) => s.label);
|
|
33
|
+
}
|
|
31
34
|
commitSelection(suggestion) {
|
|
32
35
|
if (!isSelectableListboxItem(suggestion)) {
|
|
33
36
|
return;
|
|
@@ -71,7 +74,7 @@ export class FtdsCombobox extends FtdsBaseCombobox {
|
|
|
71
74
|
}
|
|
72
75
|
async computeNewSuggestionFromProvider(value) {
|
|
73
76
|
const suggestions = await this.suggestionsProvider(value);
|
|
74
|
-
const matchingSuggestion =
|
|
77
|
+
const matchingSuggestion = this.findMatchingSuggestion(suggestions, value, (s) => s.value);
|
|
75
78
|
if (matchingSuggestion) {
|
|
76
79
|
return matchingSuggestion;
|
|
77
80
|
}
|
|
@@ -2387,7 +2387,7 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:o.extend("--ftds-con
|
|
|
2387
2387
|
.hidden {
|
|
2388
2388
|
display: none;
|
|
2389
2389
|
}
|
|
2390
|
-
`;var Es=b($e());var he=function(e,t,r,n){var a=arguments.length,i=a<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,r):n,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(e,t,r,n);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(i=(a<3?s(i):a>3?s(t,r,i):s(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i},j=class extends fo.FtLitElement{constructor(){super(...arguments),this.closeButtonLabel="close info",this.openButtonIcon=p.QUESTION,this.openButtonIconVariant=f.
|
|
2390
|
+
`;var Es=b($e());var he=function(e,t,r,n){var a=arguments.length,i=a<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,r):n,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(e,t,r,n);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(i=(a<3?s(i):a>3?s(t,r,i):s(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i},j=class extends fo.FtLitElement{constructor(){super(...arguments),this.closeButtonLabel="close info",this.openButtonIcon=p.QUESTION,this.openButtonIconVariant=f.regular,this.openButtonLabel="more info",this.openButtonTooltipPosition="bottom",this.opened=!1,this.hidden=!1,this.openButtonFamily=Ft.info,this.isTriggerSlotAssigned=!1,this.heading="",this.margins=rn.default,this.wrapperId="ftds-popover-wrapper",this.headingId="ftds-popover-heading",this.contentId="ftds-popover-content",this.maxWidth=J.maxWidth,this.openButtonSize=Me.small,this.onTriggerSlotChange=()=>{var t,r;let n=(r=(t=this.triggerSlot)===null||t===void 0?void 0:t.assignedElements())!==null&&r!==void 0?r:[];this.isTriggerSlotAssigned=n.length>0},this.onTriggerKeydown=t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.open())},this.watchFocusIn=t=>{this.popoverWrapper&&!t.composedPath().includes(this.popoverWrapper)&&this.close()},this.watchEscapeKey=t=>{var r;t.key==="Escape"&&(this.close(),(r=this.openingElement)===null||r===void 0||r.focus())}}get openingElement(){var t;let r=(t=this.triggerSlot)===null||t===void 0?void 0:t.assignedElements();return r?.length&&r[0]instanceof HTMLElement?r[0]:this.openingButton}render(){let t={opened:this.opened};return this.hidden?tt.nothing:tt.html`
|
|
2391
2391
|
<div part="root-container" class="${(0,Es.classMap)(t)}">
|
|
2392
2392
|
<slot name="trigger"
|
|
2393
2393
|
@slotchange=${this.onTriggerSlotChange}
|
|
@@ -2415,11 +2415,15 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:o.extend("--ftds-con
|
|
|
2415
2415
|
<ftds-button @focusin=${this.close}
|
|
2416
2416
|
secondary
|
|
2417
2417
|
part="opening-button"
|
|
2418
|
-
icon
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
label
|
|
2422
|
-
|
|
2418
|
+
.icon=${this.openButtonIcon}
|
|
2419
|
+
.iconVariant=${this.openButtonIconVariant}
|
|
2420
|
+
.family=${this.openButtonFamily}
|
|
2421
|
+
.label=${this.openButtonLabel}
|
|
2422
|
+
.tooltipPosition=${this.openButtonTooltipPosition}
|
|
2423
|
+
size="${this.openButtonSize}"
|
|
2424
|
+
aria-haspopup="true"
|
|
2425
|
+
aria-expanded="${this.opened}"
|
|
2426
|
+
aria-controls="${this.wrapperId}"
|
|
2423
2427
|
@click=${this.open}>
|
|
2424
2428
|
</ftds-button>
|
|
2425
2429
|
`}renderClosingButton(){return tt.html`
|
|
@@ -2454,7 +2458,7 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:o.extend("--ftds-con
|
|
|
2454
2458
|
<div part="popover-sections">
|
|
2455
2459
|
<slot name="sections" part="popover-sections-slot"></slot>
|
|
2456
2460
|
</div>
|
|
2457
|
-
`}hideUnusedSlots(){var t,r,n;(t=this.popoverLinkTypography)===null||t===void 0||t.classList.toggle("hidden",this.hasEmptySlot(this.slottedLinkContent)),(r=this.popoverContentDiv)===null||r===void 0||r.classList.toggle("hidden",this.hasEmptySlot(this.popoverContentSlot)),(n=this.popoverSectionsDiv)===null||n===void 0||n.classList.toggle("hidden",this.hasEmptySlot(this.popoverSectionsSlot))}hasEmptySlot(t){return(0,fo.unslotText)(t).trim().length===0}updated(t){super.updated(t),t.has("opened")&&(this.opened?setTimeout(()=>{this.positionWrapper(),document.addEventListener("keydown",this.watchEscapeKey),document.addEventListener("focusin",this.watchFocusIn)},0):(document.removeEventListener("keydown",this.watchEscapeKey),document.removeEventListener("focusin",this.watchFocusIn)))}close(){this.opened=!1,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!1}}))}open(){this.opened=!0,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!0}}))}closeAndFocusOpeningButton(){var t;this.close(),(t=this.openingElement)===null||t===void 0||t.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&this.openingElement instanceof V&&this.openingElement.showTooltip()}async positionWrapper(){var t,r;if(this.popoverWrapper){if(this.popoverWrapper.classList.remove("positioned"),this.popoverWrapper.style.left="",this.popoverWrapper.style.top="",this.openingElement){let i={placement:"bottom-start",allowedPlacements:["bottom-start","right-start","bottom-end","right-end","left-start","left-end","top-start","top-end"],maxWidthCssVariable:this.maxWidth},{x:s,y:l}=await(0,fo.computeOffsetAutoPosition)(this.openingElement,this.popoverWrapper,i);this.popoverWrapper.style.left=`${s}px`,this.popoverWrapper.style.top=`${l}px`}this.popoverWrapper.classList.add("positioned")}this.hideUnusedSlots(),(t=this.closingButton)===null||t===void 0||t.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&((r=this.closingButton)===null||r===void 0||r.showTooltip())}};j.styles=Q0;j.elementDefinitions={"ftds-typography":ae,"ftds-button":V};he([(0,ne.property)()],j.prototype,"closeButtonLabel",void 0);he([(0,ne.property)()],j.prototype,"openButtonIcon",void 0);he([(0,ne.property)()],j.prototype,"openButtonIconVariant",void 0);he([(0,ne.property)()],j.prototype,"openButtonLabel",void 0);he([(0,ne.property)()],j.prototype,"openButtonTooltipPosition",void 0);he([(0,ne.property)({type:Boolean})],j.prototype,"opened",void 0);he([(0,ne.property)({type:Boolean})],j.prototype,"hidden",void 0);he([(0,ne.property)({type:Ft})],j.prototype,"openButtonFamily",void 0);he([(0,ne.state)()],j.prototype,"isTriggerSlotAssigned",void 0);he([(0,ne.property)()],j.prototype,"heading",void 0);he([(0,ne.property)()],j.prototype,"margins",void 0);he([(0,ne.query)('[part="wrapper"]')],j.prototype,"popoverWrapper",void 0);he([(0,ne.query)('slot[name="trigger"]')],j.prototype,"triggerSlot",void 0);he([(0,ne.query)('[part="opening-button"]')],j.prototype,"openingButton",void 0);he([(0,ne.query)('[part="closing-button"]')],j.prototype,"closingButton",void 0);he([(0,ne.query)('[part="content"]')],j.prototype,"popoverContentDiv",void 0);he([(0,ne.query)('[part="popover-content-slot"]')],j.prototype,"popoverContentSlot",void 0);he([(0,ne.query)('[part="popover-link"]')],j.prototype,"slottedLinkContent",void 0);he([(0,ne.query)('[part="popover-link-typography"]')],j.prototype,"popoverLinkTypography",void 0);he([(0,ne.query)('[part="popover-sections"]')],j.prototype,"popoverSectionsDiv",void 0);he([(0,ne.query)('[part="popover-sections-slot"]')],j.prototype,"popoverSectionsSlot",void 0);var on=b(B()),nn=b(te()),ka=b(N());var J0=b(B());var e4=J0.css`
|
|
2461
|
+
`}hideUnusedSlots(){var t,r,n;(t=this.popoverLinkTypography)===null||t===void 0||t.classList.toggle("hidden",this.hasEmptySlot(this.slottedLinkContent)),(r=this.popoverContentDiv)===null||r===void 0||r.classList.toggle("hidden",this.hasEmptySlot(this.popoverContentSlot)),(n=this.popoverSectionsDiv)===null||n===void 0||n.classList.toggle("hidden",this.hasEmptySlot(this.popoverSectionsSlot))}hasEmptySlot(t){return(0,fo.unslotText)(t).trim().length===0}updated(t){super.updated(t),t.has("opened")&&(this.opened?setTimeout(()=>{this.positionWrapper(),document.addEventListener("keydown",this.watchEscapeKey),document.addEventListener("focusin",this.watchFocusIn)},0):(document.removeEventListener("keydown",this.watchEscapeKey),document.removeEventListener("focusin",this.watchFocusIn)))}close(){this.opened=!1,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!1}}))}open(){this.opened=!0,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!0}}))}closeAndFocusOpeningButton(){var t;this.close(),(t=this.openingElement)===null||t===void 0||t.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&this.openingElement instanceof V&&this.openingElement.showTooltip()}async positionWrapper(){var t,r;if(this.popoverWrapper){if(this.popoverWrapper.classList.remove("positioned"),this.popoverWrapper.style.left="",this.popoverWrapper.style.top="",this.openingElement){let i={placement:"bottom-start",allowedPlacements:["bottom-start","right-start","bottom-end","right-end","left-start","left-end","top-start","top-end"],maxWidthCssVariable:this.maxWidth},{x:s,y:l}=await(0,fo.computeOffsetAutoPosition)(this.openingElement,this.popoverWrapper,i);this.popoverWrapper.style.left=`${s}px`,this.popoverWrapper.style.top=`${l}px`}this.popoverWrapper.classList.add("positioned")}this.hideUnusedSlots(),(t=this.closingButton)===null||t===void 0||t.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&((r=this.closingButton)===null||r===void 0||r.showTooltip())}};j.styles=Q0;j.elementDefinitions={"ftds-typography":ae,"ftds-button":V};he([(0,ne.property)()],j.prototype,"closeButtonLabel",void 0);he([(0,ne.property)({type:p})],j.prototype,"openButtonIcon",void 0);he([(0,ne.property)({type:f})],j.prototype,"openButtonIconVariant",void 0);he([(0,ne.property)()],j.prototype,"openButtonLabel",void 0);he([(0,ne.property)()],j.prototype,"openButtonTooltipPosition",void 0);he([(0,ne.property)({type:Boolean})],j.prototype,"opened",void 0);he([(0,ne.property)({type:Boolean})],j.prototype,"hidden",void 0);he([(0,ne.property)({type:Ft})],j.prototype,"openButtonFamily",void 0);he([(0,ne.state)()],j.prototype,"isTriggerSlotAssigned",void 0);he([(0,ne.property)()],j.prototype,"heading",void 0);he([(0,ne.property)()],j.prototype,"margins",void 0);he([(0,ne.query)('[part="wrapper"]')],j.prototype,"popoverWrapper",void 0);he([(0,ne.query)('slot[name="trigger"]')],j.prototype,"triggerSlot",void 0);he([(0,ne.query)('[part="opening-button"]')],j.prototype,"openingButton",void 0);he([(0,ne.query)('[part="closing-button"]')],j.prototype,"closingButton",void 0);he([(0,ne.query)('[part="content"]')],j.prototype,"popoverContentDiv",void 0);he([(0,ne.query)('[part="popover-content-slot"]')],j.prototype,"popoverContentSlot",void 0);he([(0,ne.query)('[part="popover-link"]')],j.prototype,"slottedLinkContent",void 0);he([(0,ne.query)('[part="popover-link-typography"]')],j.prototype,"popoverLinkTypography",void 0);he([(0,ne.query)('[part="popover-sections"]')],j.prototype,"popoverSectionsDiv",void 0);he([(0,ne.query)('[part="popover-sections-slot"]')],j.prototype,"popoverSectionsSlot",void 0);var on=b(B()),nn=b(te()),ka=b(N());var J0=b(B());var e4=J0.css`
|
|
2458
2462
|
.ftds-popover-section--heading ftds-typography {
|
|
2459
2463
|
flex-grow: 1;
|
|
2460
2464
|
flex-shrink: 1;
|
|
@@ -3115,7 +3119,7 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:o.extend("--ftds-con
|
|
|
3115
3119
|
${yt.messages.noResultLabel()}
|
|
3116
3120
|
</ftds-typography>
|
|
3117
3121
|
</li>
|
|
3118
|
-
`}async computeListboxItems(){await this.computeSuggestions(),this.listboxItems=await this.getListboxItems(),this.setAriaDescribeBy()}async getListboxItems(){let t=this.filteredSuggestions,r=this.filteredSuggestionsWithLimit,n=this.filteredSuggestions.some(l=>l.label.toLowerCase()===this.inputValue.toLowerCase()),a=this.canOfferNewValue&&this.inputValue!==""&&!n,i=!this.canOfferNewValue&&this.filteredSuggestions.length===0&&this.inputValue!=="";return a?r.push({label:this.inputValue,value:this.inputValue,type:re.newValue}):i&&r.push({type:re.noResult}),t.length>this.maxDisplayedSuggestions&&r.push({type:re.maxSuggestions}),r}async setAriaDescribeBy(){this.ariaLiveMessage="",await this.updateComplete,this.filteredSuggestions.length===0&&(this.ariaLiveMessage=yt.messages.noResultLabel()),this.maxDisplayedSuggestions<this.filteredSuggestions.length&&(this.ariaLiveMessage=yt.messages.maxSuggestionsAriaLabel(this.maxDisplayedSuggestions))}async computeSuggestions(){var t;if(this.debouncerTimeout&&this.debouncerTimeout>0)(t=this.debounceTimer)!==null&&t!==void 0||(this.debounceTimer=new _e.Debouncer(this.debouncerTimeout)),await this.debounceTimer.run(()=>this.runSuggestionsProvider());else return this.runSuggestionsProvider()}async runSuggestionsProvider(){let t=await this.suggestionsProvider(this.inputValue);this.providedSuggestions=t.map(r=>({...r,type:re.suggestion}))}suggestionId(t){return`${this.listboxId}-option-${t}`}async onType(t){this.disabled||(this.inputValue=t.target.value,this.isOpen?await this.computeListboxItems():await this.openMenu(),this.activeIndex=-1)}async onInputClick(){this.disabled||(this.isOpen?this.closeMenu():await this.openMenu())}onBlur(){this.disabled||(this.isOpen&&this.closeMenu(),this.handleBlurStrategy(),super.onBlur())}async openMenu(){this.disabled||this.isOpen||(await this.computeListboxItems(),this.isOpen=!0)}closeMenu(){this.isOpen&&(this.isOpen=!1,this.activeIndex=-1)}onItemSelected(t){if(this.disabled)return;let r=this.listboxItems[t];r&&vi(r)&&this.commitSelection(r)}async onKeyDown(t){var r,n;if(!this.disabled)switch(t.key){case"ArrowDown":if(t.preventDefault(),t.altKey){this.isOpen||await this.openMenu();return}if(this.isOpen)this.moveActiveIndex(1);else{await this.openMenu();let a=this.getSelectableIndexes();this.activeIndex=(r=a[0])!==null&&r!==void 0?r:-1}return;case"ArrowUp":if(t.preventDefault(),this.isOpen)this.moveActiveIndex(-1);else{await this.openMenu();let a=this.getSelectableIndexes();this.activeIndex=(n=a[a.length-1])!==null&&n!==void 0?n:-1}return;case"ArrowRight":case"ArrowLeft":case"Home":case"End":this.activeIndex=-1;return;case"Enter":if(!this.isOpen)return;t.preventDefault(),this.activeIndex>=0?this.onItemSelected(this.activeIndex):this.closeMenu();return;case"Escape":t.preventDefault(),this.isOpen?this.closeMenu():this.inputValue="";return;case"Tab":this.isOpen&&this.closeMenu();return}}getSelectableIndexes(){return this.listboxItems.reduce((t,r,n)=>vi(r)?[...t,n]:t,[])}moveActiveIndex(t){let r=this.getSelectableIndexes();if(r.length===0){this.activeIndex=-1;return}let n=r.indexOf(this.activeIndex),a=n===-1?t===1?0:r.length-1:(n+t+r.length)%r.length;this.activeIndex=r[a],this.scrollSuggestionIntoView(this.activeIndex)}scrollSuggestionIntoView(t){requestAnimationFrame(()=>{let r=this.getElementToScrollTo(t);if(r&&r instanceof HTMLElement&&this.listbox){let n=this.listbox.scrollTop+this.listbox.offsetHeight<r.offsetTop+r.offsetHeight,a=this.listbox.scrollTop>r.offsetTop+2;n?this.listbox.scrollTop=r.offsetTop+r.offsetHeight-this.listbox.offsetHeight:a&&(this.listbox.scrollTop=r.offsetTop)}})}getElementToScrollTo(t){var r,n,a,i,s;let l=((a=(n=(r=this.listbox)===null||r===void 0?void 0:r.querySelectorAll(".listbox-option"))===null||n===void 0?void 0:n.length)!==null&&a!==void 0?a:0)-1===t,u=(i=this.listbox)===null||i===void 0?void 0:i.querySelector(".listbox-option--message--max");return l&&u?u:(s=this.listbox)===null||s===void 0?void 0:s.children.item(t)}};q.baseComboboxElementDefinitions={"ftds-base-input":Z,"ftds-typography":ae,"ftds-notice":De};Le([(0,Ae.property)({attribute:!1})],q.prototype,"suggestionsProvider",void 0);Le([(0,_e.numberProperty)()],q.prototype,"debouncerTimeout",void 0);Le([(0,Ae.property)({type:Boolean})],q.prototype,"filterSuggestions",void 0);Le([(0,Ae.property)({type:Boolean})],q.prototype,"canOfferNewValue",void 0);Le([(0,Ae.property)({type:Boolean})],q.prototype,"required",void 0);Le([(0,_e.numberProperty)()],q.prototype,"maxDisplayedSuggestions",void 0);Le([(0,Ae.property)()],q.prototype,"newValueValidationRules",void 0);Le([(0,Ae.state)()],q.prototype,"isOpen",void 0);Le([(0,Ae.state)()],q.prototype,"inputValue",void 0);Le([(0,Ae.state)()],q.prototype,"activeIndex",void 0);Le([(0,Ae.state)()],q.prototype,"providedSuggestions",void 0);Le([(0,Ae.state)()],q.prototype,"ariaLiveMessage",void 0);Le([(0,Ae.state)()],q.prototype,"ariaDescribedBy",void 0);Le([(0,Ae.state)()],q.prototype,"listboxItems",void 0);Le([(0,Ae.query)("input")],q.prototype,"input",void 0);Le([(0,Ae.query)(".listbox")],q.prototype,"listbox",void 0);Le([(0,_e.ignoreComposingEvents)()],q.prototype,"onKeyDown",null);var z4=b(B());var I4=b(N());var Ua=z4.css`
|
|
3122
|
+
`}async computeListboxItems(){await this.computeSuggestions(),this.listboxItems=await this.getListboxItems(),this.setAriaDescribeBy()}async getListboxItems(){let t=this.filteredSuggestions,r=this.filteredSuggestionsWithLimit,n=this.filteredSuggestions.some(l=>l.label.toLowerCase()===this.inputValue.toLowerCase()),a=this.canOfferNewValue&&this.inputValue!==""&&!n,i=!this.canOfferNewValue&&this.filteredSuggestions.length===0&&this.inputValue!=="";return a?r.push({label:this.inputValue,value:this.inputValue,type:re.newValue}):i&&r.push({type:re.noResult}),t.length>this.maxDisplayedSuggestions&&r.push({type:re.maxSuggestions}),r}async setAriaDescribeBy(){this.ariaLiveMessage="",await this.updateComplete,this.filteredSuggestions.length===0&&(this.ariaLiveMessage=yt.messages.noResultLabel()),this.maxDisplayedSuggestions<this.filteredSuggestions.length&&(this.ariaLiveMessage=yt.messages.maxSuggestionsAriaLabel(this.maxDisplayedSuggestions))}async computeSuggestions(){var t;if(this.debouncerTimeout&&this.debouncerTimeout>0)(t=this.debounceTimer)!==null&&t!==void 0||(this.debounceTimer=new _e.Debouncer(this.debouncerTimeout)),await this.debounceTimer.run(()=>this.runSuggestionsProvider());else return this.runSuggestionsProvider()}async runSuggestionsProvider(){let t=await this.suggestionsProvider(this.inputValue);this.providedSuggestions=t.map(r=>({...r,type:re.suggestion}))}findMatchingSuggestion(t,r,n){let a=t.find(i=>n(i)===r);return a??t.find(i=>n(i).toLowerCase()===r.toLowerCase())}suggestionId(t){return`${this.listboxId}-option-${t}`}async onType(t){this.disabled||(this.inputValue=t.target.value,this.isOpen?await this.computeListboxItems():await this.openMenu(),this.activeIndex=-1)}async onInputClick(){this.disabled||(this.isOpen?this.closeMenu():await this.openMenu())}onBlur(){this.disabled||(this.isOpen&&this.closeMenu(),this.handleBlurStrategy(),super.onBlur())}async openMenu(){this.disabled||this.isOpen||(await this.computeListboxItems(),this.isOpen=!0)}closeMenu(){this.isOpen&&(this.isOpen=!1,this.activeIndex=-1)}onItemSelected(t){if(this.disabled)return;let r=this.listboxItems[t];r&&vi(r)&&this.commitSelection(r)}async onKeyDown(t){var r,n;if(!this.disabled)switch(t.key){case"ArrowDown":if(t.preventDefault(),t.altKey){this.isOpen||await this.openMenu();return}if(this.isOpen)this.moveActiveIndex(1);else{await this.openMenu();let a=this.getSelectableIndexes();this.activeIndex=(r=a[0])!==null&&r!==void 0?r:-1}return;case"ArrowUp":if(t.preventDefault(),this.isOpen)this.moveActiveIndex(-1);else{await this.openMenu();let a=this.getSelectableIndexes();this.activeIndex=(n=a[a.length-1])!==null&&n!==void 0?n:-1}return;case"ArrowRight":case"ArrowLeft":case"Home":case"End":this.activeIndex=-1;return;case"Enter":if(!this.isOpen)return;t.preventDefault(),this.activeIndex>=0?this.onItemSelected(this.activeIndex):this.closeMenu();return;case"Escape":t.preventDefault(),this.isOpen?this.closeMenu():this.inputValue="";return;case"Tab":this.isOpen&&this.closeMenu();return}}getSelectableIndexes(){return this.listboxItems.reduce((t,r,n)=>vi(r)?[...t,n]:t,[])}moveActiveIndex(t){let r=this.getSelectableIndexes();if(r.length===0){this.activeIndex=-1;return}let n=r.indexOf(this.activeIndex),a=n===-1?t===1?0:r.length-1:(n+t+r.length)%r.length;this.activeIndex=r[a],this.scrollSuggestionIntoView(this.activeIndex)}scrollSuggestionIntoView(t){requestAnimationFrame(()=>{let r=this.getElementToScrollTo(t);if(r&&r instanceof HTMLElement&&this.listbox){let n=this.listbox.scrollTop+this.listbox.offsetHeight<r.offsetTop+r.offsetHeight,a=this.listbox.scrollTop>r.offsetTop+2;n?this.listbox.scrollTop=r.offsetTop+r.offsetHeight-this.listbox.offsetHeight:a&&(this.listbox.scrollTop=r.offsetTop)}})}getElementToScrollTo(t){var r,n,a,i,s;let l=((a=(n=(r=this.listbox)===null||r===void 0?void 0:r.querySelectorAll(".listbox-option"))===null||n===void 0?void 0:n.length)!==null&&a!==void 0?a:0)-1===t,u=(i=this.listbox)===null||i===void 0?void 0:i.querySelector(".listbox-option--message--max");return l&&u?u:(s=this.listbox)===null||s===void 0?void 0:s.children.item(t)}};q.baseComboboxElementDefinitions={"ftds-base-input":Z,"ftds-typography":ae,"ftds-notice":De};Le([(0,Ae.property)({attribute:!1})],q.prototype,"suggestionsProvider",void 0);Le([(0,_e.numberProperty)()],q.prototype,"debouncerTimeout",void 0);Le([(0,Ae.property)({type:Boolean})],q.prototype,"filterSuggestions",void 0);Le([(0,Ae.property)({type:Boolean})],q.prototype,"canOfferNewValue",void 0);Le([(0,Ae.property)({type:Boolean})],q.prototype,"required",void 0);Le([(0,_e.numberProperty)()],q.prototype,"maxDisplayedSuggestions",void 0);Le([(0,Ae.property)()],q.prototype,"newValueValidationRules",void 0);Le([(0,Ae.state)()],q.prototype,"isOpen",void 0);Le([(0,Ae.state)()],q.prototype,"inputValue",void 0);Le([(0,Ae.state)()],q.prototype,"activeIndex",void 0);Le([(0,Ae.state)()],q.prototype,"providedSuggestions",void 0);Le([(0,Ae.state)()],q.prototype,"ariaLiveMessage",void 0);Le([(0,Ae.state)()],q.prototype,"ariaDescribedBy",void 0);Le([(0,Ae.state)()],q.prototype,"listboxItems",void 0);Le([(0,Ae.query)("input")],q.prototype,"input",void 0);Le([(0,Ae.query)(".listbox")],q.prototype,"listbox",void 0);Le([(0,_e.ignoreComposingEvents)()],q.prototype,"onKeyDown",null);var z4=b(B());var I4=b(N());var Ua=z4.css`
|
|
3119
3123
|
:host {
|
|
3120
3124
|
display: block;
|
|
3121
3125
|
position: relative;
|
|
@@ -3282,7 +3286,7 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:o.extend("--ftds-con
|
|
|
3282
3286
|
.listbox-option[aria-selected="true"][data-active="true"] {
|
|
3283
3287
|
background-color: color-mix(in srgb, ${U.defaultCheckedStateLayerColor} calc(${U.defaultCheckedFocusStateLayerOpacity} * 100%), transparent);
|
|
3284
3288
|
}
|
|
3285
|
-
`;var go=class extends q{constructor(){var t;super(),this.previousCommittedLabel="",this.value=(t=this.value)!==null&&t!==void 0?t:""}handleBlurStrategy(){if(this.inputValue==="")return;let t=this.
|
|
3289
|
+
`;var go=class extends q{constructor(){var t;super(),this.previousCommittedLabel="",this.value=(t=this.value)!==null&&t!==void 0?t:""}handleBlurStrategy(){if(this.inputValue==="")return;let t=this.findSuggestionMatchingInput();t?this.commitSelection(t):this.canOfferNewValue?this.commitTypedText(this.inputValue):this.resetCombobox()}findSuggestionMatchingInput(){return this.findMatchingSuggestion(this.filteredSuggestions,this.inputValue,t=>t.label)}commitSelection(t){Ao(t)&&(t.type===re.newValue&&(0,dn.processValidationRules)(t.value,this.newValueValidationRules).length>0||(this.commit(t.value,t.label),this.closeMenu()))}commitTypedText(t){(0,dn.processValidationRules)(t,this.newValueValidationRules).length>0||this.commit(t,t)}commit(t,r){this.value=t,this.inputValue=r,this.previousCommittedLabel=r,this.dispatchEvent(new ln(t))}resetCombobox(){this.inputValue=this.previousCommittedLabel}updated(t){var r;if(super.updated(t),t.has("value")){let n=(r=t.get("value"))!==null&&r!==void 0?r:"";this.value!==n&&!this.isOpen&&this.inputValue===this.previousCommittedLabel&&this.computeNewSuggestionFromProvider(this.value).then(i=>{this.value=i.value,this.inputValue=i.label,this.previousCommittedLabel=i.label})}}async computeNewSuggestionFromProvider(t){let r=await this.suggestionsProvider(t),n=this.findMatchingSuggestion(r,t,a=>a.value);return n||{value:this.canOfferNewValue?t:"",label:this.canOfferNewValue?t:""}}isSuggestionSelected(t){return t===this.value}async onType(t){await super.onType(t),this.inputValue===""&&this.value!==""&&(this.previousCommittedLabel="",this.value="",this.dispatchEvent(new ln("")))}render(){return Ms.html`
|
|
3286
3290
|
${this.renderField()}
|
|
3287
3291
|
${this.renderListboxContainer(!1)}
|
|
3288
3292
|
`}renderSuggestionItem(t){return Ms.html`
|
|
@@ -2467,7 +2467,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
|
|
|
2467
2467
|
.hidden {
|
|
2468
2468
|
display: none;
|
|
2469
2469
|
}
|
|
2470
|
-
`;var Ce=function(t,e,r,o){var i=arguments.length,a=i<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(t,e,r,o);else for(var c=t.length-1;c>=0;c--)(s=t[c])&&(a=(i<3?s(a):i>3?s(e,r,a):s(e,r))||a);return i>3&&a&&Object.defineProperty(e,r,a),a},ie=class extends ee{constructor(){super(...arguments),this.closeButtonLabel="close info",this.openButtonIcon=h.QUESTION,this.openButtonIconVariant=p.
|
|
2470
|
+
`;var Ce=function(t,e,r,o){var i=arguments.length,a=i<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(t,e,r,o);else for(var c=t.length-1;c>=0;c--)(s=t[c])&&(a=(i<3?s(a):i>3?s(e,r,a):s(e,r))||a);return i>3&&a&&Object.defineProperty(e,r,a),a},ie=class extends ee{constructor(){super(...arguments),this.closeButtonLabel="close info",this.openButtonIcon=h.QUESTION,this.openButtonIconVariant=p.regular,this.openButtonLabel="more info",this.openButtonTooltipPosition="bottom",this.opened=!1,this.hidden=!1,this.openButtonFamily=oe.info,this.isTriggerSlotAssigned=!1,this.heading="",this.margins=On.default,this.wrapperId="ftds-popover-wrapper",this.headingId="ftds-popover-heading",this.contentId="ftds-popover-content",this.maxWidth=ce.maxWidth,this.openButtonSize=he.small,this.onTriggerSlotChange=()=>{var e,r;let o=(r=(e=this.triggerSlot)===null||e===void 0?void 0:e.assignedElements())!==null&&r!==void 0?r:[];this.isTriggerSlotAssigned=o.length>0},this.onTriggerKeydown=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.open())},this.watchFocusIn=e=>{this.popoverWrapper&&!e.composedPath().includes(this.popoverWrapper)&&this.close()},this.watchEscapeKey=e=>{var r;e.key==="Escape"&&(this.close(),(r=this.openingElement)===null||r===void 0||r.focus())}}get openingElement(){var e;let r=(e=this.triggerSlot)===null||e===void 0?void 0:e.assignedElements();return r?.length&&r[0]instanceof HTMLElement?r[0]:this.openingButton}render(){let e={opened:this.opened};return this.hidden?V:_`
|
|
2471
2471
|
<div part="root-container" class="${ae(e)}">
|
|
2472
2472
|
<slot name="trigger"
|
|
2473
2473
|
@slotchange=${this.onTriggerSlotChange}
|
|
@@ -2495,11 +2495,15 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
|
|
|
2495
2495
|
<ftds-button @focusin=${this.close}
|
|
2496
2496
|
secondary
|
|
2497
2497
|
part="opening-button"
|
|
2498
|
-
icon
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
label
|
|
2502
|
-
|
|
2498
|
+
.icon=${this.openButtonIcon}
|
|
2499
|
+
.iconVariant=${this.openButtonIconVariant}
|
|
2500
|
+
.family=${this.openButtonFamily}
|
|
2501
|
+
.label=${this.openButtonLabel}
|
|
2502
|
+
.tooltipPosition=${this.openButtonTooltipPosition}
|
|
2503
|
+
size="${this.openButtonSize}"
|
|
2504
|
+
aria-haspopup="true"
|
|
2505
|
+
aria-expanded="${this.opened}"
|
|
2506
|
+
aria-controls="${this.wrapperId}"
|
|
2503
2507
|
@click=${this.open}>
|
|
2504
2508
|
</ftds-button>
|
|
2505
2509
|
`}renderClosingButton(){return _`
|
|
@@ -2534,7 +2538,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
|
|
|
2534
2538
|
<div part="popover-sections">
|
|
2535
2539
|
<slot name="sections" part="popover-sections-slot"></slot>
|
|
2536
2540
|
</div>
|
|
2537
|
-
`}hideUnusedSlots(){var e,r,o;(e=this.popoverLinkTypography)===null||e===void 0||e.classList.toggle("hidden",this.hasEmptySlot(this.slottedLinkContent)),(r=this.popoverContentDiv)===null||r===void 0||r.classList.toggle("hidden",this.hasEmptySlot(this.popoverContentSlot)),(o=this.popoverSectionsDiv)===null||o===void 0||o.classList.toggle("hidden",this.hasEmptySlot(this.popoverSectionsSlot))}hasEmptySlot(e){return Kt(e).trim().length===0}updated(e){super.updated(e),e.has("opened")&&(this.opened?setTimeout(()=>{this.positionWrapper(),document.addEventListener("keydown",this.watchEscapeKey),document.addEventListener("focusin",this.watchFocusIn)},0):(document.removeEventListener("keydown",this.watchEscapeKey),document.removeEventListener("focusin",this.watchFocusIn)))}close(){this.opened=!1,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!1}}))}open(){this.opened=!0,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!0}}))}closeAndFocusOpeningButton(){var e;this.close(),(e=this.openingElement)===null||e===void 0||e.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&this.openingElement instanceof Q&&this.openingElement.showTooltip()}async positionWrapper(){var e,r;if(this.popoverWrapper){if(this.popoverWrapper.classList.remove("positioned"),this.popoverWrapper.style.left="",this.popoverWrapper.style.top="",this.openingElement){let a={placement:"bottom-start",allowedPlacements:["bottom-start","right-start","bottom-end","right-end","left-start","left-end","top-start","top-end"],maxWidthCssVariable:this.maxWidth},{x:s,y:c}=await us(this.openingElement,this.popoverWrapper,a);this.popoverWrapper.style.left=`${s}px`,this.popoverWrapper.style.top=`${c}px`}this.popoverWrapper.classList.add("positioned")}this.hideUnusedSlots(),(e=this.closingButton)===null||e===void 0||e.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&((r=this.closingButton)===null||r===void 0||r.showTooltip())}};ie.styles=Wu;ie.elementDefinitions={"ftds-typography":me,"ftds-button":Q};Ce([v()],ie.prototype,"closeButtonLabel",void 0);Ce([v()],ie.prototype,"openButtonIcon",void 0);Ce([v()],ie.prototype,"openButtonIconVariant",void 0);Ce([v()],ie.prototype,"openButtonLabel",void 0);Ce([v()],ie.prototype,"openButtonTooltipPosition",void 0);Ce([v({type:Boolean})],ie.prototype,"opened",void 0);Ce([v({type:Boolean})],ie.prototype,"hidden",void 0);Ce([v({type:oe})],ie.prototype,"openButtonFamily",void 0);Ce([K()],ie.prototype,"isTriggerSlotAssigned",void 0);Ce([v()],ie.prototype,"heading",void 0);Ce([v()],ie.prototype,"margins",void 0);Ce([te('[part="wrapper"]')],ie.prototype,"popoverWrapper",void 0);Ce([te('slot[name="trigger"]')],ie.prototype,"triggerSlot",void 0);Ce([te('[part="opening-button"]')],ie.prototype,"openingButton",void 0);Ce([te('[part="closing-button"]')],ie.prototype,"closingButton",void 0);Ce([te('[part="content"]')],ie.prototype,"popoverContentDiv",void 0);Ce([te('[part="popover-content-slot"]')],ie.prototype,"popoverContentSlot",void 0);Ce([te('[part="popover-link"]')],ie.prototype,"slottedLinkContent",void 0);Ce([te('[part="popover-link-typography"]')],ie.prototype,"popoverLinkTypography",void 0);Ce([te('[part="popover-sections"]')],ie.prototype,"popoverSectionsDiv",void 0);Ce([te('[part="popover-sections-slot"]')],ie.prototype,"popoverSectionsSlot",void 0);var ju=N`
|
|
2541
|
+
`}hideUnusedSlots(){var e,r,o;(e=this.popoverLinkTypography)===null||e===void 0||e.classList.toggle("hidden",this.hasEmptySlot(this.slottedLinkContent)),(r=this.popoverContentDiv)===null||r===void 0||r.classList.toggle("hidden",this.hasEmptySlot(this.popoverContentSlot)),(o=this.popoverSectionsDiv)===null||o===void 0||o.classList.toggle("hidden",this.hasEmptySlot(this.popoverSectionsSlot))}hasEmptySlot(e){return Kt(e).trim().length===0}updated(e){super.updated(e),e.has("opened")&&(this.opened?setTimeout(()=>{this.positionWrapper(),document.addEventListener("keydown",this.watchEscapeKey),document.addEventListener("focusin",this.watchFocusIn)},0):(document.removeEventListener("keydown",this.watchEscapeKey),document.removeEventListener("focusin",this.watchFocusIn)))}close(){this.opened=!1,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!1}}))}open(){this.opened=!0,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!0}}))}closeAndFocusOpeningButton(){var e;this.close(),(e=this.openingElement)===null||e===void 0||e.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&this.openingElement instanceof Q&&this.openingElement.showTooltip()}async positionWrapper(){var e,r;if(this.popoverWrapper){if(this.popoverWrapper.classList.remove("positioned"),this.popoverWrapper.style.left="",this.popoverWrapper.style.top="",this.openingElement){let a={placement:"bottom-start",allowedPlacements:["bottom-start","right-start","bottom-end","right-end","left-start","left-end","top-start","top-end"],maxWidthCssVariable:this.maxWidth},{x:s,y:c}=await us(this.openingElement,this.popoverWrapper,a);this.popoverWrapper.style.left=`${s}px`,this.popoverWrapper.style.top=`${c}px`}this.popoverWrapper.classList.add("positioned")}this.hideUnusedSlots(),(e=this.closingButton)===null||e===void 0||e.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&((r=this.closingButton)===null||r===void 0||r.showTooltip())}};ie.styles=Wu;ie.elementDefinitions={"ftds-typography":me,"ftds-button":Q};Ce([v()],ie.prototype,"closeButtonLabel",void 0);Ce([v({type:h})],ie.prototype,"openButtonIcon",void 0);Ce([v({type:p})],ie.prototype,"openButtonIconVariant",void 0);Ce([v()],ie.prototype,"openButtonLabel",void 0);Ce([v()],ie.prototype,"openButtonTooltipPosition",void 0);Ce([v({type:Boolean})],ie.prototype,"opened",void 0);Ce([v({type:Boolean})],ie.prototype,"hidden",void 0);Ce([v({type:oe})],ie.prototype,"openButtonFamily",void 0);Ce([K()],ie.prototype,"isTriggerSlotAssigned",void 0);Ce([v()],ie.prototype,"heading",void 0);Ce([v()],ie.prototype,"margins",void 0);Ce([te('[part="wrapper"]')],ie.prototype,"popoverWrapper",void 0);Ce([te('slot[name="trigger"]')],ie.prototype,"triggerSlot",void 0);Ce([te('[part="opening-button"]')],ie.prototype,"openingButton",void 0);Ce([te('[part="closing-button"]')],ie.prototype,"closingButton",void 0);Ce([te('[part="content"]')],ie.prototype,"popoverContentDiv",void 0);Ce([te('[part="popover-content-slot"]')],ie.prototype,"popoverContentSlot",void 0);Ce([te('[part="popover-link"]')],ie.prototype,"slottedLinkContent",void 0);Ce([te('[part="popover-link-typography"]')],ie.prototype,"popoverLinkTypography",void 0);Ce([te('[part="popover-sections"]')],ie.prototype,"popoverSectionsDiv",void 0);Ce([te('[part="popover-sections-slot"]')],ie.prototype,"popoverSectionsSlot",void 0);var ju=N`
|
|
2538
2542
|
.ftds-popover-section--heading ftds-typography {
|
|
2539
2543
|
flex-grow: 1;
|
|
2540
2544
|
flex-shrink: 1;
|
|
@@ -3195,7 +3199,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
|
|
|
3195
3199
|
${Mt.messages.noResultLabel()}
|
|
3196
3200
|
</ftds-typography>
|
|
3197
3201
|
</li>
|
|
3198
|
-
`}async computeListboxItems(){await this.computeSuggestions(),this.listboxItems=await this.getListboxItems(),this.setAriaDescribeBy()}async getListboxItems(){let e=this.filteredSuggestions,r=this.filteredSuggestionsWithLimit,o=this.filteredSuggestions.some(c=>c.label.toLowerCase()===this.inputValue.toLowerCase()),i=this.canOfferNewValue&&this.inputValue!==""&&!o,a=!this.canOfferNewValue&&this.filteredSuggestions.length===0&&this.inputValue!=="";return i?r.push({label:this.inputValue,value:this.inputValue,type:ue.newValue}):a&&r.push({type:ue.noResult}),e.length>this.maxDisplayedSuggestions&&r.push({type:ue.maxSuggestions}),r}async setAriaDescribeBy(){this.ariaLiveMessage="",await this.updateComplete,this.filteredSuggestions.length===0&&(this.ariaLiveMessage=Mt.messages.noResultLabel()),this.maxDisplayedSuggestions<this.filteredSuggestions.length&&(this.ariaLiveMessage=Mt.messages.maxSuggestionsAriaLabel(this.maxDisplayedSuggestions))}async computeSuggestions(){var e;if(this.debouncerTimeout&&this.debouncerTimeout>0)(e=this.debounceTimer)!==null&&e!==void 0||(this.debounceTimer=new Ie(this.debouncerTimeout)),await this.debounceTimer.run(()=>this.runSuggestionsProvider());else return this.runSuggestionsProvider()}async runSuggestionsProvider(){let e=await this.suggestionsProvider(this.inputValue);this.providedSuggestions=e.map(r=>({...r,type:ue.suggestion}))}suggestionId(e){return`${this.listboxId}-option-${e}`}async onType(e){this.disabled||(this.inputValue=e.target.value,this.isOpen?await this.computeListboxItems():await this.openMenu(),this.activeIndex=-1)}async onInputClick(){this.disabled||(this.isOpen?this.closeMenu():await this.openMenu())}onBlur(){this.disabled||(this.isOpen&&this.closeMenu(),this.handleBlurStrategy(),super.onBlur())}async openMenu(){this.disabled||this.isOpen||(await this.computeListboxItems(),this.isOpen=!0)}closeMenu(){this.isOpen&&(this.isOpen=!1,this.activeIndex=-1)}onItemSelected(e){if(this.disabled)return;let r=this.listboxItems[e];r&&Zc(r)&&this.commitSelection(r)}async onKeyDown(e){var r,o;if(!this.disabled)switch(e.key){case"ArrowDown":if(e.preventDefault(),e.altKey){this.isOpen||await this.openMenu();return}if(this.isOpen)this.moveActiveIndex(1);else{await this.openMenu();let i=this.getSelectableIndexes();this.activeIndex=(r=i[0])!==null&&r!==void 0?r:-1}return;case"ArrowUp":if(e.preventDefault(),this.isOpen)this.moveActiveIndex(-1);else{await this.openMenu();let i=this.getSelectableIndexes();this.activeIndex=(o=i[i.length-1])!==null&&o!==void 0?o:-1}return;case"ArrowRight":case"ArrowLeft":case"Home":case"End":this.activeIndex=-1;return;case"Enter":if(!this.isOpen)return;e.preventDefault(),this.activeIndex>=0?this.onItemSelected(this.activeIndex):this.closeMenu();return;case"Escape":e.preventDefault(),this.isOpen?this.closeMenu():this.inputValue="";return;case"Tab":this.isOpen&&this.closeMenu();return}}getSelectableIndexes(){return this.listboxItems.reduce((e,r,o)=>Zc(r)?[...e,o]:e,[])}moveActiveIndex(e){let r=this.getSelectableIndexes();if(r.length===0){this.activeIndex=-1;return}let o=r.indexOf(this.activeIndex),i=o===-1?e===1?0:r.length-1:(o+e+r.length)%r.length;this.activeIndex=r[i],this.scrollSuggestionIntoView(this.activeIndex)}scrollSuggestionIntoView(e){requestAnimationFrame(()=>{let r=this.getElementToScrollTo(e);if(r&&r instanceof HTMLElement&&this.listbox){let o=this.listbox.scrollTop+this.listbox.offsetHeight<r.offsetTop+r.offsetHeight,i=this.listbox.scrollTop>r.offsetTop+2;o?this.listbox.scrollTop=r.offsetTop+r.offsetHeight-this.listbox.offsetHeight:i&&(this.listbox.scrollTop=r.offsetTop)}})}getElementToScrollTo(e){var r,o,i,a,s;let c=((i=(o=(r=this.listbox)===null||r===void 0?void 0:r.querySelectorAll(".listbox-option"))===null||o===void 0?void 0:o.length)!==null&&i!==void 0?i:0)-1===e,d=(a=this.listbox)===null||a===void 0?void 0:a.querySelector(".listbox-option--message--max");return c&&d?d:(s=this.listbox)===null||s===void 0?void 0:s.children.item(e)}};le.baseComboboxElementDefinitions={"ftds-base-input":se,"ftds-typography":me,"ftds-notice":We};Te([v({attribute:!1})],le.prototype,"suggestionsProvider",void 0);Te([lt()],le.prototype,"debouncerTimeout",void 0);Te([v({type:Boolean})],le.prototype,"filterSuggestions",void 0);Te([v({type:Boolean})],le.prototype,"canOfferNewValue",void 0);Te([v({type:Boolean})],le.prototype,"required",void 0);Te([lt()],le.prototype,"maxDisplayedSuggestions",void 0);Te([v()],le.prototype,"newValueValidationRules",void 0);Te([K()],le.prototype,"isOpen",void 0);Te([K()],le.prototype,"inputValue",void 0);Te([K()],le.prototype,"activeIndex",void 0);Te([K()],le.prototype,"providedSuggestions",void 0);Te([K()],le.prototype,"ariaLiveMessage",void 0);Te([K()],le.prototype,"ariaDescribedBy",void 0);Te([K()],le.prototype,"listboxItems",void 0);Te([te("input")],le.prototype,"input",void 0);Te([te(".listbox")],le.prototype,"listbox",void 0);Te([Aa()],le.prototype,"onKeyDown",null);var Yi=N`
|
|
3202
|
+
`}async computeListboxItems(){await this.computeSuggestions(),this.listboxItems=await this.getListboxItems(),this.setAriaDescribeBy()}async getListboxItems(){let e=this.filteredSuggestions,r=this.filteredSuggestionsWithLimit,o=this.filteredSuggestions.some(c=>c.label.toLowerCase()===this.inputValue.toLowerCase()),i=this.canOfferNewValue&&this.inputValue!==""&&!o,a=!this.canOfferNewValue&&this.filteredSuggestions.length===0&&this.inputValue!=="";return i?r.push({label:this.inputValue,value:this.inputValue,type:ue.newValue}):a&&r.push({type:ue.noResult}),e.length>this.maxDisplayedSuggestions&&r.push({type:ue.maxSuggestions}),r}async setAriaDescribeBy(){this.ariaLiveMessage="",await this.updateComplete,this.filteredSuggestions.length===0&&(this.ariaLiveMessage=Mt.messages.noResultLabel()),this.maxDisplayedSuggestions<this.filteredSuggestions.length&&(this.ariaLiveMessage=Mt.messages.maxSuggestionsAriaLabel(this.maxDisplayedSuggestions))}async computeSuggestions(){var e;if(this.debouncerTimeout&&this.debouncerTimeout>0)(e=this.debounceTimer)!==null&&e!==void 0||(this.debounceTimer=new Ie(this.debouncerTimeout)),await this.debounceTimer.run(()=>this.runSuggestionsProvider());else return this.runSuggestionsProvider()}async runSuggestionsProvider(){let e=await this.suggestionsProvider(this.inputValue);this.providedSuggestions=e.map(r=>({...r,type:ue.suggestion}))}findMatchingSuggestion(e,r,o){let i=e.find(a=>o(a)===r);return i??e.find(a=>o(a).toLowerCase()===r.toLowerCase())}suggestionId(e){return`${this.listboxId}-option-${e}`}async onType(e){this.disabled||(this.inputValue=e.target.value,this.isOpen?await this.computeListboxItems():await this.openMenu(),this.activeIndex=-1)}async onInputClick(){this.disabled||(this.isOpen?this.closeMenu():await this.openMenu())}onBlur(){this.disabled||(this.isOpen&&this.closeMenu(),this.handleBlurStrategy(),super.onBlur())}async openMenu(){this.disabled||this.isOpen||(await this.computeListboxItems(),this.isOpen=!0)}closeMenu(){this.isOpen&&(this.isOpen=!1,this.activeIndex=-1)}onItemSelected(e){if(this.disabled)return;let r=this.listboxItems[e];r&&Zc(r)&&this.commitSelection(r)}async onKeyDown(e){var r,o;if(!this.disabled)switch(e.key){case"ArrowDown":if(e.preventDefault(),e.altKey){this.isOpen||await this.openMenu();return}if(this.isOpen)this.moveActiveIndex(1);else{await this.openMenu();let i=this.getSelectableIndexes();this.activeIndex=(r=i[0])!==null&&r!==void 0?r:-1}return;case"ArrowUp":if(e.preventDefault(),this.isOpen)this.moveActiveIndex(-1);else{await this.openMenu();let i=this.getSelectableIndexes();this.activeIndex=(o=i[i.length-1])!==null&&o!==void 0?o:-1}return;case"ArrowRight":case"ArrowLeft":case"Home":case"End":this.activeIndex=-1;return;case"Enter":if(!this.isOpen)return;e.preventDefault(),this.activeIndex>=0?this.onItemSelected(this.activeIndex):this.closeMenu();return;case"Escape":e.preventDefault(),this.isOpen?this.closeMenu():this.inputValue="";return;case"Tab":this.isOpen&&this.closeMenu();return}}getSelectableIndexes(){return this.listboxItems.reduce((e,r,o)=>Zc(r)?[...e,o]:e,[])}moveActiveIndex(e){let r=this.getSelectableIndexes();if(r.length===0){this.activeIndex=-1;return}let o=r.indexOf(this.activeIndex),i=o===-1?e===1?0:r.length-1:(o+e+r.length)%r.length;this.activeIndex=r[i],this.scrollSuggestionIntoView(this.activeIndex)}scrollSuggestionIntoView(e){requestAnimationFrame(()=>{let r=this.getElementToScrollTo(e);if(r&&r instanceof HTMLElement&&this.listbox){let o=this.listbox.scrollTop+this.listbox.offsetHeight<r.offsetTop+r.offsetHeight,i=this.listbox.scrollTop>r.offsetTop+2;o?this.listbox.scrollTop=r.offsetTop+r.offsetHeight-this.listbox.offsetHeight:i&&(this.listbox.scrollTop=r.offsetTop)}})}getElementToScrollTo(e){var r,o,i,a,s;let c=((i=(o=(r=this.listbox)===null||r===void 0?void 0:r.querySelectorAll(".listbox-option"))===null||o===void 0?void 0:o.length)!==null&&i!==void 0?i:0)-1===e,d=(a=this.listbox)===null||a===void 0?void 0:a.querySelector(".listbox-option--message--max");return c&&d?d:(s=this.listbox)===null||s===void 0?void 0:s.children.item(e)}};le.baseComboboxElementDefinitions={"ftds-base-input":se,"ftds-typography":me,"ftds-notice":We};Te([v({attribute:!1})],le.prototype,"suggestionsProvider",void 0);Te([lt()],le.prototype,"debouncerTimeout",void 0);Te([v({type:Boolean})],le.prototype,"filterSuggestions",void 0);Te([v({type:Boolean})],le.prototype,"canOfferNewValue",void 0);Te([v({type:Boolean})],le.prototype,"required",void 0);Te([lt()],le.prototype,"maxDisplayedSuggestions",void 0);Te([v()],le.prototype,"newValueValidationRules",void 0);Te([K()],le.prototype,"isOpen",void 0);Te([K()],le.prototype,"inputValue",void 0);Te([K()],le.prototype,"activeIndex",void 0);Te([K()],le.prototype,"providedSuggestions",void 0);Te([K()],le.prototype,"ariaLiveMessage",void 0);Te([K()],le.prototype,"ariaDescribedBy",void 0);Te([K()],le.prototype,"listboxItems",void 0);Te([te("input")],le.prototype,"input",void 0);Te([te(".listbox")],le.prototype,"listbox",void 0);Te([Aa()],le.prototype,"onKeyDown",null);var Yi=N`
|
|
3199
3203
|
:host {
|
|
3200
3204
|
display: block;
|
|
3201
3205
|
position: relative;
|
|
@@ -3362,7 +3366,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
|
|
|
3362
3366
|
.listbox-option[aria-selected="true"][data-active="true"] {
|
|
3363
3367
|
background-color: color-mix(in srgb, ${G.defaultCheckedStateLayerColor} calc(${G.defaultCheckedFocusStateLayerOpacity} * 100%), transparent);
|
|
3364
3368
|
}
|
|
3365
|
-
`;var ko=class extends le{constructor(){var e;super(),this.previousCommittedLabel="",this.value=(e=this.value)!==null&&e!==void 0?e:""}handleBlurStrategy(){if(this.inputValue==="")return;let e=this.
|
|
3369
|
+
`;var ko=class extends le{constructor(){var e;super(),this.previousCommittedLabel="",this.value=(e=this.value)!==null&&e!==void 0?e:""}handleBlurStrategy(){if(this.inputValue==="")return;let e=this.findSuggestionMatchingInput();e?this.commitSelection(e):this.canOfferNewValue?this.commitTypedText(this.inputValue):this.resetCombobox()}findSuggestionMatchingInput(){return this.findMatchingSuggestion(this.filteredSuggestions,this.inputValue,e=>e.label)}commitSelection(e){bn(e)&&(e.type===ue.newValue&&Rt(e.value,this.newValueValidationRules).length>0||(this.commit(e.value,e.label),this.closeMenu()))}commitTypedText(e){Rt(e,this.newValueValidationRules).length>0||this.commit(e,e)}commit(e,r){this.value=e,this.inputValue=r,this.previousCommittedLabel=r,this.dispatchEvent(new Rn(e))}resetCombobox(){this.inputValue=this.previousCommittedLabel}updated(e){var r;if(super.updated(e),e.has("value")){let o=(r=e.get("value"))!==null&&r!==void 0?r:"";this.value!==o&&!this.isOpen&&this.inputValue===this.previousCommittedLabel&&this.computeNewSuggestionFromProvider(this.value).then(a=>{this.value=a.value,this.inputValue=a.label,this.previousCommittedLabel=a.label})}}async computeNewSuggestionFromProvider(e){let r=await this.suggestionsProvider(e),o=this.findMatchingSuggestion(r,e,i=>i.value);return o||{value:this.canOfferNewValue?e:"",label:this.canOfferNewValue?e:""}}isSuggestionSelected(e){return e===this.value}async onType(e){await super.onType(e),this.inputValue===""&&this.value!==""&&(this.previousCommittedLabel="",this.value="",this.dispatchEvent(new Rn("")))}render(){return _`
|
|
3366
3370
|
${this.renderField()}
|
|
3367
3371
|
${this.renderListboxContainer(!1)}
|
|
3368
3372
|
`}renderSuggestionItem(e){return _`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ftds-combobox",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.9",
|
|
4
4
|
"description": "Single-select combobox for the Fluid Topics Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -20,17 +20,17 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@fluid-topics/design-system-variables": "3.8.0",
|
|
23
|
-
"@fluid-topics/ft-i18n": "2.2.
|
|
24
|
-
"@fluid-topics/ft-wc-utils": "2.2.
|
|
25
|
-
"@fluid-topics/ftds-base-input": "2.2.
|
|
26
|
-
"@fluid-topics/ftds-chip-group": "2.2.
|
|
27
|
-
"@fluid-topics/ftds-icon": "2.2.
|
|
28
|
-
"@fluid-topics/ftds-notice": "2.2.
|
|
29
|
-
"@fluid-topics/ftds-typography": "2.2.
|
|
23
|
+
"@fluid-topics/ft-i18n": "2.2.9",
|
|
24
|
+
"@fluid-topics/ft-wc-utils": "2.2.9",
|
|
25
|
+
"@fluid-topics/ftds-base-input": "2.2.9",
|
|
26
|
+
"@fluid-topics/ftds-chip-group": "2.2.9",
|
|
27
|
+
"@fluid-topics/ftds-icon": "2.2.9",
|
|
28
|
+
"@fluid-topics/ftds-notice": "2.2.9",
|
|
29
|
+
"@fluid-topics/ftds-typography": "2.2.9",
|
|
30
30
|
"lit": "3.3.3"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@fluid-topics/ft-wc-test-utils": "2.2.
|
|
33
|
+
"@fluid-topics/ft-wc-test-utils": "2.2.9"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "e12bf480f5ee00623f87caff8c918fccae85585c"
|
|
36
36
|
}
|