@fluid-topics/ftds-combobox 2.2.7 → 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;
|
|
@@ -2782,6 +2786,11 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:o.extend("--ftds-con
|
|
|
2782
2786
|
outline: ${k.focusOutlineWidth} solid ${k.focusFocusRingColor};
|
|
2783
2787
|
}
|
|
2784
2788
|
|
|
2789
|
+
|
|
2790
|
+
.inside-structure .inside-structure--icon ftds-icon {
|
|
2791
|
+
--ftds-icon-font-size: var(--icon-size);
|
|
2792
|
+
}
|
|
2793
|
+
|
|
2785
2794
|
.inside-structure .inside-structure--icon {
|
|
2786
2795
|
position: absolute;
|
|
2787
2796
|
top: calc((var(--field-height) - var(--icon-size)) / 2);
|
|
@@ -3110,7 +3119,7 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:o.extend("--ftds-con
|
|
|
3110
3119
|
${yt.messages.noResultLabel()}
|
|
3111
3120
|
</ftds-typography>
|
|
3112
3121
|
</li>
|
|
3113
|
-
`}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`
|
|
3114
3123
|
:host {
|
|
3115
3124
|
display: block;
|
|
3116
3125
|
position: relative;
|
|
@@ -3277,7 +3286,7 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:o.extend("--ftds-con
|
|
|
3277
3286
|
.listbox-option[aria-selected="true"][data-active="true"] {
|
|
3278
3287
|
background-color: color-mix(in srgb, ${U.defaultCheckedStateLayerColor} calc(${U.defaultCheckedFocusStateLayerOpacity} * 100%), transparent);
|
|
3279
3288
|
}
|
|
3280
|
-
`;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`
|
|
3281
3290
|
${this.renderField()}
|
|
3282
3291
|
${this.renderListboxContainer(!1)}
|
|
3283
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;
|
|
@@ -2862,6 +2866,11 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
|
|
|
2862
2866
|
outline: ${D.focusOutlineWidth} solid ${D.focusFocusRingColor};
|
|
2863
2867
|
}
|
|
2864
2868
|
|
|
2869
|
+
|
|
2870
|
+
.inside-structure .inside-structure--icon ftds-icon {
|
|
2871
|
+
--ftds-icon-font-size: var(--icon-size);
|
|
2872
|
+
}
|
|
2873
|
+
|
|
2865
2874
|
.inside-structure .inside-structure--icon {
|
|
2866
2875
|
position: absolute;
|
|
2867
2876
|
top: calc((var(--field-height) - var(--icon-size)) / 2);
|
|
@@ -3190,7 +3199,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
|
|
|
3190
3199
|
${Mt.messages.noResultLabel()}
|
|
3191
3200
|
</ftds-typography>
|
|
3192
3201
|
</li>
|
|
3193
|
-
`}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`
|
|
3194
3203
|
:host {
|
|
3195
3204
|
display: block;
|
|
3196
3205
|
position: relative;
|
|
@@ -3357,7 +3366,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
|
|
|
3357
3366
|
.listbox-option[aria-selected="true"][data-active="true"] {
|
|
3358
3367
|
background-color: color-mix(in srgb, ${G.defaultCheckedStateLayerColor} calc(${G.defaultCheckedFocusStateLayerOpacity} * 100%), transparent);
|
|
3359
3368
|
}
|
|
3360
|
-
`;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 _`
|
|
3361
3370
|
${this.renderField()}
|
|
3362
3371
|
${this.renderListboxContainer(!1)}
|
|
3363
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
|
}
|