@infineon/infineon-design-system-stencil 41.8.0 → 41.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ifx-search-field.cjs.entry.js +12 -2
- package/dist/collection/components/search-field/search-field.js +12 -2
- package/dist/components/ifx-filter-search.js +1 -1
- package/dist/components/ifx-icons-preview.js +1 -1
- package/dist/components/ifx-multiselect.js +1 -1
- package/dist/components/ifx-pagination.js +1 -1
- package/dist/components/ifx-search-bar.js +1 -1
- package/dist/components/ifx-search-field.js +1 -1
- package/dist/components/ifx-select.js +1 -1
- package/dist/components/ifx-set-filter.js +1 -1
- package/dist/components/ifx-table.js +1 -1
- package/dist/components/{p-BqzzoexV.js → p-8AvAmbFz.js} +1 -1
- package/dist/components/p-9moV-E7e.js +1 -0
- package/dist/components/{p-Ce5lDXoN.js → p-BxHqn0Pd.js} +1 -1
- package/dist/components/{p-Dt68nuTz.js → p-DqHqd31w.js} +1 -1
- package/dist/docs.json +1 -1
- package/dist/esm/ifx-search-field.entry.js +12 -2
- package/dist/hydrate/index.js +12 -2
- package/dist/hydrate/index.mjs +12 -2
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/p-b6721042.entry.js +1 -0
- package/dist/types/components/search-field/search-field.d.ts +2 -0
- package/package.json +2 -2
- package/dist/components/p-7D-ZlOPX.js +0 -1
- package/dist/infineon-design-system-stencil/p-2a86f43f.entry.js +0 -1
|
@@ -418,6 +418,13 @@ const SearchField = class {
|
|
|
418
418
|
: maxIndex;
|
|
419
419
|
}
|
|
420
420
|
}
|
|
421
|
+
// Scroll the currently selected suggestion into view within the dropdown
|
|
422
|
+
scrollSelectedSuggestionIntoView() {
|
|
423
|
+
if (!this.dropdownElement || this.selectedSuggestionIndex < 0)
|
|
424
|
+
return;
|
|
425
|
+
const selectedSuggestion = this.dropdownElement.querySelector(`#suggestion-${this.selectedSuggestionIndex}`);
|
|
426
|
+
selectedSuggestion?.scrollIntoView({ block: "nearest" });
|
|
427
|
+
}
|
|
421
428
|
selectSuggestion(suggestion) {
|
|
422
429
|
this.value = suggestion.text;
|
|
423
430
|
if (this.inputElement) {
|
|
@@ -499,6 +506,9 @@ const SearchField = class {
|
|
|
499
506
|
tracking.trackComponent("ifx-search-field", await framework);
|
|
500
507
|
}
|
|
501
508
|
}
|
|
509
|
+
componentDidRender() {
|
|
510
|
+
this.scrollSelectedSuggestionIntoView();
|
|
511
|
+
}
|
|
502
512
|
componentWillUpdate() {
|
|
503
513
|
if (this.value !== "") {
|
|
504
514
|
this.showDeleteIconInternalState = true;
|
|
@@ -507,14 +517,14 @@ const SearchField = class {
|
|
|
507
517
|
this.showDeleteIconInternalState = false;
|
|
508
518
|
}
|
|
509
519
|
render() {
|
|
510
|
-
return (index.h("div", { key: '
|
|
520
|
+
return (index.h("div", { key: '0fad0541006084547df01bc173db505e2e0ea7c9', "aria-disabled": this.disabled, class: "search-field", onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut }, index.h("output", { key: 'f035e49f366c82c31bc32956baa39e6ece8d7ad0', "aria-atomic": "true", "aria-live": "polite", class: "suggestion-status" }, this.suggestionAnnouncement), index.h("div", { key: '083b4f2939554d547554d0d3e42bf76373dd97b5', ref: (el) => (this.wrapperElement = el), class: this.getWrapperClassNames() }, index.h("label", { key: 'af24292a57fcb2de04baa008c4d447dfe25b6eed', class: "search-field__label" }, index.h("ifx-icon", { key: '1a4d3a47ec00f08cbb969ea653b563af955b7942', icon: "search-16", class: "search-icon" }), index.h("input", { key: 'a99f958e6ff77bb70adb9f800b95d991b383811a', ref: (el) => (this.inputElement = el), type: "search", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, "aria-controls": this.showDropdown ? "suggestions-dropdown" : undefined, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabelText, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-activedescendant": this.selectedSuggestionIndex >= 0
|
|
511
521
|
? `suggestion-${this.selectedSuggestionIndex}`
|
|
512
522
|
: undefined })), this.showDeleteIcon && this.showDeleteIconInternalState ? (index.h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
|
|
513
523
|
if (event.key === "Enter" || event.key === " ") {
|
|
514
524
|
event.preventDefault();
|
|
515
525
|
this.handleDelete();
|
|
516
526
|
}
|
|
517
|
-
} })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (index.h("div", { key: '
|
|
527
|
+
} })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (index.h("div", { key: '534bdc8e0dc45953de57903578903a04a45f4f14', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (index.h("div", { key: 'f796dba6b3971eab3ac35f629db041be589fc950', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index$1) => (index.h("div", { key: suggestion.id, id: `suggestion-${index$1}`, class: this.getSuggestionClassNames(index$1), role: "option", tabIndex: 0, "aria-selected": index$1 === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === "history" ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ""}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ""}`, onClick: () => this.selectSuggestion(suggestion), onKeyDown: (event) => {
|
|
518
528
|
if (event.key === "Enter" || event.key === " ") {
|
|
519
529
|
event.preventDefault();
|
|
520
530
|
this.selectSuggestion(suggestion);
|
|
@@ -406,6 +406,13 @@ export class SearchField {
|
|
|
406
406
|
: maxIndex;
|
|
407
407
|
}
|
|
408
408
|
}
|
|
409
|
+
// Scroll the currently selected suggestion into view within the dropdown
|
|
410
|
+
scrollSelectedSuggestionIntoView() {
|
|
411
|
+
if (!this.dropdownElement || this.selectedSuggestionIndex < 0)
|
|
412
|
+
return;
|
|
413
|
+
const selectedSuggestion = this.dropdownElement.querySelector(`#suggestion-${this.selectedSuggestionIndex}`);
|
|
414
|
+
selectedSuggestion?.scrollIntoView({ block: "nearest" });
|
|
415
|
+
}
|
|
409
416
|
selectSuggestion(suggestion) {
|
|
410
417
|
this.value = suggestion.text;
|
|
411
418
|
if (this.inputElement) {
|
|
@@ -487,6 +494,9 @@ export class SearchField {
|
|
|
487
494
|
trackComponent("ifx-search-field", await framework);
|
|
488
495
|
}
|
|
489
496
|
}
|
|
497
|
+
componentDidRender() {
|
|
498
|
+
this.scrollSelectedSuggestionIntoView();
|
|
499
|
+
}
|
|
490
500
|
componentWillUpdate() {
|
|
491
501
|
if (this.value !== "") {
|
|
492
502
|
this.showDeleteIconInternalState = true;
|
|
@@ -495,14 +505,14 @@ export class SearchField {
|
|
|
495
505
|
this.showDeleteIconInternalState = false;
|
|
496
506
|
}
|
|
497
507
|
render() {
|
|
498
|
-
return (h("div", { key: '
|
|
508
|
+
return (h("div", { key: '0fad0541006084547df01bc173db505e2e0ea7c9', "aria-disabled": this.disabled, class: "search-field", onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut }, h("output", { key: 'f035e49f366c82c31bc32956baa39e6ece8d7ad0', "aria-atomic": "true", "aria-live": "polite", class: "suggestion-status" }, this.suggestionAnnouncement), h("div", { key: '083b4f2939554d547554d0d3e42bf76373dd97b5', ref: (el) => (this.wrapperElement = el), class: this.getWrapperClassNames() }, h("label", { key: 'af24292a57fcb2de04baa008c4d447dfe25b6eed', class: "search-field__label" }, h("ifx-icon", { key: '1a4d3a47ec00f08cbb969ea653b563af955b7942', icon: "search-16", class: "search-icon" }), h("input", { key: 'a99f958e6ff77bb70adb9f800b95d991b383811a', ref: (el) => (this.inputElement = el), type: "search", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, "aria-controls": this.showDropdown ? "suggestions-dropdown" : undefined, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabelText, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-activedescendant": this.selectedSuggestionIndex >= 0
|
|
499
509
|
? `suggestion-${this.selectedSuggestionIndex}`
|
|
500
510
|
: undefined })), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
|
|
501
511
|
if (event.key === "Enter" || event.key === " ") {
|
|
502
512
|
event.preventDefault();
|
|
503
513
|
this.handleDelete();
|
|
504
514
|
}
|
|
505
|
-
} })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (h("div", { key: '
|
|
515
|
+
} })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (h("div", { key: '534bdc8e0dc45953de57903578903a04a45f4f14', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: 'f796dba6b3971eab3ac35f629db041be589fc950', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index) => (h("div", { key: suggestion.id, id: `suggestion-${index}`, class: this.getSuggestionClassNames(index), role: "option", tabIndex: 0, "aria-selected": index === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === "history" ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ""}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ""}`, onClick: () => this.selectSuggestion(suggestion), onKeyDown: (event) => {
|
|
506
516
|
if (event.key === "Enter" || event.key === " ") {
|
|
507
517
|
event.preventDefault();
|
|
508
518
|
this.selectSuggestion(suggestion);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as i,h as r,t as a}from"./p-BT_2CyMS.js";import{d as s}from"./p-DMAv4MDG.js";import{d as l}from"./p-
|
|
1
|
+
import{p as e,H as t,c as i,h as r,t as a}from"./p-BT_2CyMS.js";import{d as s}from"./p-DMAv4MDG.js";import{d as l}from"./p-9moV-E7e.js";const f=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.ifxFilterSearchChange=i(this,"ifxFilterSearchChange",7)}get host(){return this}filterName;disabled=!1;filterValue;filterKey;showDeleteIcon=!1;filterOrientation="sidebar";placeholder;ifxFilterSearchChange;valueChanged(e){this.host.setAttribute("value",""+e)}handleFilterSearchChange(e){const t=this.host.parentElement.querySelector(`ifx-filter-search[filter-name="${this.filterName}"]`);if(t&&t!==this.host)throw Error(`A search filter with the name '${this.filterName}' already exists.`);this.filterValue=e.detail,this.showDeleteIcon=""!==this.filterValue,this.ifxFilterSearchChange.emit({filterName:this.filterName,filterValue:this.filterValue,filterKey:this.filterKey})}render(){return r("div",{key:"72c7e2cbebe8787b304026f91b565a9a55f32dd9",class:"sidebar"===this.filterOrientation?"sidebar-filter-search-wrapper":"topbar-filter-search-wrapper"},r("div",{key:"0b2b63d909b45eb9eef326112513ca0d0125ee1a",class:"filter-name"},this.filterName),r("ifx-search-field",{key:"5c0ff5c0741676b41af5be30c004255f756a46fe",placeholder:this.placeholder,"show-delete-icon":this.showDeleteIcon,disabled:this.disabled,value:this.filterValue}))}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return".sidebar-filter-search-wrapper{display:flex;padding:12px 16px 16px 16px;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family);background:#eeeded}.topbar-filter-search-wrapper{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family)}.topbar-filter-search-wrapper ifx-search-field{width:100%;}.filter-name{font-family:var(--ifx-font-family);font-size:1rem;line-height:1.5rem;font-weight:600}"}},[513,"ifx-filter-search",{filterName:[1,"filter-name"],disabled:[4],filterValue:[1025,"filter-value"],filterKey:[1,"filter-key"],filterOrientation:[1,"filter-orientation"],placeholder:[1],showDeleteIcon:[32]},[[0,"ifxInput","handleFilterSearchChange"]],{value:[{valueChanged:0}]}]),h=f,n=function(){"undefined"!=typeof customElements&&["ifx-filter-search","ifx-icon","ifx-search-field"].forEach((e=>{switch(e){case"ifx-filter-search":customElements.get(a(e))||customElements.define(a(e),f);break;case"ifx-icon":customElements.get(a(e))||s();break;case"ifx-search-field":customElements.get(a(e))||l()}}))};export{h as IfxFilterSearch,n as defineCustomElement}
|