@infineon/infineon-design-system-stencil 39.5.3--canary.2143.df790fabdc350922c24a2831c6694c57d6d12352.0 → 39.5.3--canary.2143.7e22c74e4f4e08bfb2cb8d5e5811adf79267a112.0
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-alert_2.cjs.entry.js +1 -1
- package/dist/cjs/ifx-basic-table.cjs.entry.js +1 -1
- package/dist/cjs/ifx-faq.cjs.entry.js +1 -1
- package/dist/cjs/ifx-filter-accordion.cjs.entry.js +2 -2
- package/dist/cjs/ifx-filter-bar.cjs.entry.js +1 -1
- package/dist/cjs/ifx-filter-search.cjs.entry.js +1 -1
- package/dist/cjs/ifx-filter-type-group.cjs.entry.js +1 -1
- package/dist/cjs/ifx-list-entry.cjs.entry.js +1 -1
- package/dist/cjs/ifx-multiselect_2.cjs.entry.js +10 -10
- package/dist/cjs/ifx-search-field.cjs.entry.js +2 -74
- package/dist/cjs/ifx-search-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-search-field.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-segment.cjs.entry.js +1 -1
- package/dist/cjs/ifx-segmented-control.cjs.entry.js +2 -2
- package/dist/cjs/ifx-select.cjs.entry.js +2 -2
- package/dist/cjs/ifx-slider.cjs.entry.js +2 -2
- package/dist/cjs/ifx-spinner_2.cjs.entry.js +4 -4
- package/dist/cjs/ifx-status.cjs.entry.js +1 -1
- package/dist/cjs/ifx-step.cjs.entry.js +4 -4
- package/dist/cjs/ifx-stepper.cjs.entry.js +2 -2
- package/dist/cjs/ifx-switch.cjs.entry.js +1 -1
- package/dist/cjs/ifx-tab.cjs.entry.js +1 -1
- package/dist/cjs/ifx-table.cjs.entry.js +2 -2
- package/dist/cjs/ifx-tabs.cjs.entry.js +2 -2
- package/dist/cjs/ifx-templates-ui.cjs.entry.js +1 -1
- package/dist/cjs/ifx-textarea.cjs.entry.js +2 -2
- package/dist/cjs/ifx-tooltip.cjs.entry.js +4 -4
- package/dist/cjs/ifx-tree-view-item.cjs.entry.js +2 -2
- package/dist/cjs/ifx-tree-view.cjs.entry.js +1 -1
- package/dist/collection/components/search-field/search-field.js +2 -74
- package/dist/collection/components/search-field/search-field.js.map +1 -1
- package/dist/collection/components/segmented-control/segment/segment.js +1 -1
- package/dist/collection/components/segmented-control/segmented-control.js +2 -2
- package/dist/collection/components/select/multi-select/multiselect-option.js +4 -4
- package/dist/collection/components/select/multi-select/multiselect.js +6 -6
- package/dist/collection/components/select/single-select/select.js +2 -2
- package/dist/collection/components/slider/slider.js +2 -2
- package/dist/collection/components/spinner/spinner.js +2 -2
- package/dist/collection/components/status/status.js +1 -1
- package/dist/collection/components/stepper/step/step.js +4 -4
- package/dist/collection/components/stepper/stepper.js +2 -2
- package/dist/collection/components/switch/switch.js +1 -1
- package/dist/collection/components/table-advanced-version/filter-bar/filter-bar.js +1 -1
- package/dist/collection/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.js +2 -2
- package/dist/collection/components/table-advanced-version/filter-type-group/filter-search/filter-search.js +1 -1
- package/dist/collection/components/table-advanced-version/filter-type-group/filter-type-group.js +1 -1
- package/dist/collection/components/table-advanced-version/list/list-entry/list-entry.js +1 -1
- package/dist/collection/components/table-advanced-version/table.js +2 -2
- package/dist/collection/components/table-basic-version/table.js +1 -1
- package/dist/collection/components/tabs/tab.js +1 -1
- package/dist/collection/components/tabs/tabs.js +2 -2
- package/dist/collection/components/templates/template/template.js +1 -1
- package/dist/collection/components/templates/templates-ui/templates-ui.js +1 -1
- package/dist/collection/components/text-field/text-field.js +2 -2
- package/dist/collection/components/textarea/textarea.js +2 -2
- package/dist/collection/components/tooltip/tooltip.js +4 -4
- package/dist/collection/components/tree-view/tree-view-item.js +2 -2
- package/dist/collection/components/tree-view/tree-view.js +1 -1
- package/dist/collection/stories/setup-and-installation/faq/faq.js +1 -1
- package/dist/components/ifx-basic-table.js +1 -1
- package/dist/components/ifx-faq.js +1 -1
- package/dist/components/ifx-filter-accordion.js +2 -2
- package/dist/components/ifx-filter-bar.js +1 -1
- package/dist/components/ifx-filter-search.js +2 -2
- package/dist/components/ifx-filter-type-group.js +1 -1
- package/dist/components/ifx-icons-preview.js +1 -1
- package/dist/components/ifx-list-entry.js +1 -1
- package/dist/components/ifx-multiselect-option.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-segment.js +1 -1
- package/dist/components/ifx-segmented-control.js +2 -2
- package/dist/components/ifx-select.js +1 -1
- package/dist/components/ifx-set-filter.js +5 -5
- package/dist/components/ifx-slider.js +2 -2
- package/dist/components/ifx-spinner.js +1 -1
- package/dist/components/ifx-status.js +1 -1
- package/dist/components/ifx-step.js +4 -4
- package/dist/components/ifx-stepper.js +2 -2
- package/dist/components/ifx-switch.js +1 -1
- package/dist/components/ifx-tab.js +1 -1
- package/dist/components/ifx-table.js +4 -4
- package/dist/components/ifx-tabs.js +2 -2
- package/dist/components/ifx-template.js +1 -1
- package/dist/components/ifx-templates-ui.js +4 -4
- package/dist/components/ifx-text-field.js +1 -1
- package/dist/components/ifx-textarea.js +2 -2
- package/dist/components/ifx-tooltip.js +4 -4
- package/dist/components/ifx-tree-view-item.js +2 -2
- package/dist/components/ifx-tree-view.js +1 -1
- package/dist/components/{p-dwBbLAVm.js → p-BO6nWGLo.js} +4 -76
- package/dist/components/p-BO6nWGLo.js.map +1 -0
- package/dist/components/{p-DdOsLLJc.js → p-BxWZjkxk.js} +4 -4
- package/dist/components/{p-DdOsLLJc.js.map → p-BxWZjkxk.js.map} +1 -1
- package/dist/components/{p-C53lC4vo.js → p-D7r3u21_.js} +3 -3
- package/dist/components/{p-C53lC4vo.js.map → p-D7r3u21_.js.map} +1 -1
- package/dist/components/{p-B61i82g5.js → p-DGAOPH_P.js} +4 -4
- package/dist/components/{p-B61i82g5.js.map → p-DGAOPH_P.js.map} +1 -1
- package/dist/components/{p-CG8WUF7S.js → p-DQYngnHn.js} +9 -9
- package/dist/components/{p-CG8WUF7S.js.map → p-DQYngnHn.js.map} +1 -1
- package/dist/components/{p-DmM40b2X.js → p-Dce2xAGf.js} +5 -5
- package/dist/components/{p-DmM40b2X.js.map → p-Dce2xAGf.js.map} +1 -1
- package/dist/components/{p-Cmd43Oxg.js → p-DxKWinW1.js} +6 -6
- package/dist/components/{p-Cmd43Oxg.js.map → p-DxKWinW1.js.map} +1 -1
- package/dist/components/{p-GP5uSTr1.js → p-kFkxPh9g.js} +4 -4
- package/dist/components/{p-GP5uSTr1.js.map → p-kFkxPh9g.js.map} +1 -1
- package/dist/esm/ifx-alert_2.entry.js +1 -1
- package/dist/esm/ifx-basic-table.entry.js +1 -1
- package/dist/esm/ifx-faq.entry.js +1 -1
- package/dist/esm/ifx-filter-accordion.entry.js +2 -2
- package/dist/esm/ifx-filter-bar.entry.js +1 -1
- package/dist/esm/ifx-filter-search.entry.js +1 -1
- package/dist/esm/ifx-filter-type-group.entry.js +1 -1
- package/dist/esm/ifx-list-entry.entry.js +1 -1
- package/dist/esm/ifx-multiselect_2.entry.js +10 -10
- package/dist/esm/ifx-search-field.entry.js +2 -74
- package/dist/esm/ifx-search-field.entry.js.map +1 -1
- package/dist/esm/ifx-segment.entry.js +1 -1
- package/dist/esm/ifx-segmented-control.entry.js +2 -2
- package/dist/esm/ifx-select.entry.js +2 -2
- package/dist/esm/ifx-slider.entry.js +2 -2
- package/dist/esm/ifx-spinner_2.entry.js +4 -4
- package/dist/esm/ifx-status.entry.js +1 -1
- package/dist/esm/ifx-step.entry.js +4 -4
- package/dist/esm/ifx-stepper.entry.js +2 -2
- package/dist/esm/ifx-switch.entry.js +1 -1
- package/dist/esm/ifx-tab.entry.js +1 -1
- package/dist/esm/ifx-table.entry.js +2 -2
- package/dist/esm/ifx-tabs.entry.js +2 -2
- package/dist/esm/ifx-templates-ui.entry.js +1 -1
- package/dist/esm/ifx-textarea.entry.js +2 -2
- package/dist/esm/ifx-tooltip.entry.js +4 -4
- package/dist/esm/ifx-tree-view-item.entry.js +2 -2
- package/dist/esm/ifx-tree-view.entry.js +1 -1
- package/dist/infineon-design-system-stencil/ifx-search-field.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/{p-98c2e3a9.entry.js → p-07e1efa5.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-9ea43bb7.entry.js → p-0d5a32ec.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-fe373208.entry.js → p-1fcb504e.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-2537f7fe.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-2a7e30cf.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-22a45c93.entry.js.map → p-2a7e30cf.entry.js.map} +1 -1
- package/dist/infineon-design-system-stencil/{p-242fc6b0.entry.js → p-2b4778da.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-54785004.entry.js → p-39a29970.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-dcc7240e.entry.js → p-3b5cf4ca.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-0d9da371.entry.js → p-44026267.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-e7b72d33.entry.js → p-4fca78a6.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-6504f8d0.entry.js → p-6162a610.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-8ab64504.entry.js → p-8aabbd26.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-8d19ae4f.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-8d19ae4f.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-0d4211db.entry.js → p-8eef85bc.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-913a8693.entry.js → p-9577d799.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-9c93e258.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-b5efb1d6.entry.js → p-9dbede78.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-f5811026.entry.js → p-a827c4bc.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-13fed6df.entry.js → p-b3ba9994.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-bfbe3ddc.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-c9d594e1.entry.js.map → p-bfbe3ddc.entry.js.map} +1 -1
- package/dist/infineon-design-system-stencil/{p-453bd9bd.entry.js → p-c3362d41.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-3f3a5140.entry.js → p-ddff8e4e.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-372fa9eb.entry.js → p-ebce6648.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-6407c496.entry.js → p-f06af3d9.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-af1e0cb5.entry.js → p-f855d12d.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-83816596.entry.js → p-fc030370.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-eed36710.entry.js → p-fef185c2.entry.js} +2 -2
- package/dist/types/components/search-field/search-field.d.ts +0 -4
- package/package.json +1 -1
- package/dist/components/p-dwBbLAVm.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-22a45c93.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-36758398.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-36758398.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-ba4ee343.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-c9d594e1.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-d3a6bbf7.entry.js +0 -2
- /package/dist/infineon-design-system-stencil/{p-98c2e3a9.entry.js.map → p-07e1efa5.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-9ea43bb7.entry.js.map → p-0d5a32ec.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-fe373208.entry.js.map → p-1fcb504e.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-d3a6bbf7.entry.js.map → p-2537f7fe.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-242fc6b0.entry.js.map → p-2b4778da.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-54785004.entry.js.map → p-39a29970.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-dcc7240e.entry.js.map → p-3b5cf4ca.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-0d9da371.entry.js.map → p-44026267.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-e7b72d33.entry.js.map → p-4fca78a6.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-6504f8d0.entry.js.map → p-6162a610.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-8ab64504.entry.js.map → p-8aabbd26.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-0d4211db.entry.js.map → p-8eef85bc.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-913a8693.entry.js.map → p-9577d799.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-ba4ee343.entry.js.map → p-9c93e258.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-b5efb1d6.entry.js.map → p-9dbede78.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-f5811026.entry.js.map → p-a827c4bc.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-13fed6df.entry.js.map → p-b3ba9994.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-453bd9bd.entry.js.map → p-c3362d41.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-3f3a5140.entry.js.map → p-ddff8e4e.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-372fa9eb.entry.js.map → p-ebce6648.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-6407c496.entry.js.map → p-f06af3d9.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-af1e0cb5.entry.js.map → p-f855d12d.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-83816596.entry.js.map → p-fc030370.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-eed36710.entry.js.map → p-fef185c2.entry.js.map} +0 -0
|
@@ -182,7 +182,7 @@ const Template = class {
|
|
|
182
182
|
}
|
|
183
183
|
}
|
|
184
184
|
render() {
|
|
185
|
-
return (index.h("div", { key: '
|
|
185
|
+
return (index.h("div", { key: 'd08a82aa561c8fcf22ef3175f49ef8f52df575ae' }, this.isTemplatePage
|
|
186
186
|
?
|
|
187
187
|
index.h("div", { class: "template__page-wrapper" }, !this.repoUrl && !this.repoError &&
|
|
188
188
|
index.h("div", null, index.h("h3", null, "Your repository is getting ready.."), index.h("p", null, "This will only take a minute.")), this.isLoading && !this.repoError && index.h("div", null, index.h("ifx-spinner", { variant: 'default', size: 's' })), this.repoUrl && index.h("ifx-link", { href: this.repoUrl, target: "_parent", size: "m", variant: "underlined" }, "Your repository"), this.repoError && index.h("div", null, this.repoError))
|
|
@@ -188,7 +188,7 @@ const Table = class {
|
|
|
188
188
|
return {};
|
|
189
189
|
}
|
|
190
190
|
render() {
|
|
191
|
-
return (index.h(index.Host, { key: '
|
|
191
|
+
return (index.h(index.Host, { key: 'f6d04d5333ee1e105a65b9e39b79c80856d19854' }, index.h("div", { key: 'ad141399ab5fc164a8750ff6ed0b695ddd784fd5', id: "table-wrapper", class: this.getClassNames() }, index.h("div", { key: '8393218ed13358ec0cd59a9a410dbe5bc48aca4e', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
|
|
192
192
|
}
|
|
193
193
|
get host() { return index.getElement(this); }
|
|
194
194
|
};
|
|
@@ -9,7 +9,7 @@ const Faq = class {
|
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (index.h("div", { key: '
|
|
12
|
+
return (index.h("div", { key: 'd9d7bd3c764cf067643c553edec9ef4fee4fd67e', class: 'container' }, index.h("ifx-accordion", { key: 'f275a73f5beb84d14ca616341994098300a9609a' }, index.h("ifx-accordion-item", { key: 'e99f371ca8e210b4a75d877e4dd4c9b224a66ddb', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), index.h("ifx-accordion-item", { key: '94ff35a6859266b9ba7d89776eb7c6c203ba37cf', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), index.h("ifx-accordion-item", { key: '2e98a643ad287859b90eff1a843410ec58291792', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), index.h("ifx-accordion-item", { key: 'ecd64d4fd87408466f64e3a9f1dc89f2a2529bd4', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), index.h("ifx-accordion-item", { key: 'fb92e8c982211992ebf99d886d2223e2fbdc5afe', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
|
|
13
13
|
}
|
|
14
14
|
};
|
|
15
15
|
Faq.style = faqCss;
|
|
@@ -50,8 +50,8 @@ const FilterAccordion = class {
|
|
|
50
50
|
this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);
|
|
51
51
|
}
|
|
52
52
|
render() {
|
|
53
|
-
return (index.h("div", { key: '
|
|
54
|
-
index.h("div", { key: '
|
|
53
|
+
return (index.h("div", { key: 'b4a21b89e0d939e05deae72440aef2159a6c1bda', class: `accordion ${this.expanded ? 'expanded' : ''}` }, index.h("div", { key: '270907a017f3fcd0130f1aaf979df5570884c04b', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, index.h("div", { key: 'cff21898f155ab2ba80d8bbfd5b299f2c013674e', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, index.h("div", { key: 'a3a72e8c8e5b27e7d583dd79e495b07e6627996d', class: "text" }, index.h("span", { key: '88fb60623b86205e8212e4a86f1d3870964112e2' }, this.filterGroupName), index.h("ifx-indicator", { key: 'ef21b584256849cae07b792cc072dfc404454fc8', variant: 'number', number: this.count })), index.h("ifx-icon", { key: '49b73fdb66254dcd887b8640dc016bd76e027546', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), index.h("ifx-icon", { key: '9d08f6314056b2c0c44e37976c5102a762a5f086', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
|
|
54
|
+
index.h("div", { key: '22152489e3de743eff22354cfe12c413261ce488', class: "filter-accordion-container" }, index.h("slot", { key: '68b884d7fd28e8d68157ab05cd07b329a34b7dae', name: "list" }))));
|
|
55
55
|
}
|
|
56
56
|
get el() { return index.getElement(this); }
|
|
57
57
|
};
|
|
@@ -94,7 +94,7 @@ const FilterBar = class {
|
|
|
94
94
|
// Calculate slotsToShow safely
|
|
95
95
|
const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);
|
|
96
96
|
const slots = Array.from({ length: slotsToShow }, (_, i) => (index.h("div", { class: "filter-slot-wrapper" }, index.h("slot", { name: `filter-component-${i + 1}` }))));
|
|
97
|
-
return (index.h(index.Host, { key: '
|
|
97
|
+
return (index.h(index.Host, { key: '02000df6ef2931de33429f8c0c7e170a5d47d4dc' }, index.h("div", { key: '6d0f05f8f25ed15cd429307ee6b4806a243d2d2f', class: "search-container" }, index.h("slot", { key: '9d6960ae3bb4ee1febebe5a214ef91bc7d268719', name: "filter-search" }), " "), index.h("div", { key: '331f5a5d98e4bae8ecd4ba060e31eb14fe272a9f', class: "components-container" }, slots.length > 0 ? slots : index.h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (index.h("div", { key: '0021278e9914ade252e9e69560884d53c6e7d46f', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, index.h("ifx-button", { key: '093ac3688331f0bddbd5a3d10ec43bc9c2ea5c0f', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, index.h("ifx-icon", { key: '0878577d5870cbffe310234b0b81b9ec334f90ce', icon: "filter-16" }), "More filters"))))));
|
|
98
98
|
}
|
|
99
99
|
get el() { return index.getElement(this); }
|
|
100
100
|
};
|
|
@@ -30,7 +30,7 @@ const FilterSearch = class {
|
|
|
30
30
|
this.ifxFilterSearchChange.emit({ filterName: this.filterName, filterValue: this.filterValue, filterKey: this.filterKey }); // Emitting filterKey along with other properties
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
|
-
return (index.h("div", { key: '
|
|
33
|
+
return (index.h("div", { key: '36a21542c911a805093270bab4338b5a4ba81c94', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, index.h("div", { key: 'dbfdbdf56e5c540a465fdfa099d84628b1539bf6', class: "filter-name" }, this.filterName), index.h("ifx-search-field", { key: '48ca7812defbd768675ab49bae081664c5630892', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
|
|
34
34
|
}
|
|
35
35
|
get host() { return index.getElement(this); }
|
|
36
36
|
static get watchers() { return {
|
|
@@ -126,7 +126,7 @@ const IfxFilterTypeGroup = class {
|
|
|
126
126
|
window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);
|
|
127
127
|
}
|
|
128
128
|
render() {
|
|
129
|
-
return (index.h(index.Host, { key: '
|
|
129
|
+
return (index.h(index.Host, { key: 'f7718698368335b6f2dba728a7d0bb04ee108122' }, index.h("div", { key: '9d24441d487b7a8be2194b0024a29dc42703b5d4', class: "filter-type-group" }, index.h("slot", { key: '918ab2eac7736bfd96f8b407f12c1bed4844ba70', name: "filter-search" }), index.h("slot", { key: 'fb69779d06e7da53479ea8cd6936c36cc2bc48f3', name: "filter-accordion" }))));
|
|
130
130
|
}
|
|
131
131
|
get el() { return index.getElement(this); }
|
|
132
132
|
};
|
|
@@ -22,7 +22,7 @@ const ListEntry = class {
|
|
|
22
22
|
this.ifxListEntryChange.emit({ label: this.label, value: this.value, type: this.type });
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
|
-
return (index.h("div", { key: '
|
|
25
|
+
return (index.h("div", { key: 'a141d7bb36e2a1b02b38f72fb4d299fc4b3b3d9f', class: "wrapper" }, this.type === 'checkbox' ? (index.h("div", { class: "list-entry" }, index.h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (index.h("div", { class: "list-entry" }, index.h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
|
|
26
26
|
}
|
|
27
27
|
get host() { return index.getElement(this); }
|
|
28
28
|
static get watchers() { return {
|
|
@@ -490,15 +490,15 @@ const Multiselect = class {
|
|
|
490
490
|
if (allOptionElements.length > 0) {
|
|
491
491
|
isFlatMultiselect = Array.from(allOptionElements).every(option => option.children.length === 0);
|
|
492
492
|
}
|
|
493
|
-
return (index.h("div", { key: '
|
|
493
|
+
return (index.h("div", { key: 'd0643a04050d28db8a1d162832a5bd01699e46cc', class: `ifx-multiselect-container ${this.disabled && !this.error ? 'disabled' : ''}`, ref: el => (this.dropdownElement = el) }, index.h("div", { key: '5cbe0844098305cb052e5384635571e24e6fbe1c', class: "ifx-label-wrapper" }, this.label && (index.h("span", { key: '69dbafbcbfa0b836666846a0ea3ff7126c9b5e43', class: "wrapper-label" }, index.h("span", { key: 'a2ee5fd71ae7f6f00ae1a004cda4e3e8cc2feb16' }, this.label), this.required && index.h("span", { key: 'e4e902879f8237e32045f4b037a72b3bf5025ebf', class: `required ${this.error ? 'error' : ''}` }, "*")))), index.h("div", { key: '97870fecccab25f3775fbd0d7685ad7844efc8bb', class: `ifx-multiselect-wrapper
|
|
494
494
|
${this.dropdownOpen ? 'active' : ''}
|
|
495
495
|
${this.dropdownFlipped ? 'is-flipped' : ''}
|
|
496
496
|
${this.internalError ? 'error' : ''}
|
|
497
|
-
${this.disabled && !this.error ? 'disabled' : ''}`, role: "combobox", "aria-label": this.ariaMultiSelectLabel, "aria-labelledby": this.ariaMultiSelectLabelledBy || undefined, "aria-describedby": this.ariaMultiSelectDescribedBy || undefined, "aria-expanded": this.dropdownOpen, "aria-haspopup": "listbox", "aria-disabled": this.disabled && !this.error, tabindex: "0", onClick: this.disabled && !this.error ? undefined : event => this.handleWrapperClick(event), onKeyDown: this.disabled && !this.error ? undefined : event => this.handleKeyDown(event) }, index.h("div", { key: '
|
|
497
|
+
${this.disabled && !this.error ? 'disabled' : ''}`, role: "combobox", "aria-label": this.ariaMultiSelectLabel, "aria-labelledby": this.ariaMultiSelectLabelledBy || undefined, "aria-describedby": this.ariaMultiSelectDescribedBy || undefined, "aria-expanded": this.dropdownOpen, "aria-haspopup": "listbox", "aria-disabled": this.disabled && !this.error, tabindex: "0", onClick: this.disabled && !this.error ? undefined : event => this.handleWrapperClick(event), onKeyDown: this.disabled && !this.error ? undefined : event => this.handleKeyDown(event) }, index.h("div", { key: 'fdf4c22a5b0f30a4f7b514bc39646b669871aecd', class: `ifx-multiselect-input
|
|
498
498
|
${hasSelections ? '' : 'placeholder'}
|
|
499
|
-
`, onClick: this.disabled && !this.error ? undefined : () => this.toggleDropdown() }, hasSelections ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (index.h("div", { key: '
|
|
499
|
+
`, onClick: this.disabled && !this.error ? undefined : () => this.toggleDropdown() }, hasSelections ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (index.h("div", { key: '9556190732b4ef5d96053ca4976be86c95b5edb8', class: "ifx-multiselect-dropdown-menu" }, (this.showSearch || this.showSelectAll || (this.showExpandCollapse && !isFlatMultiselect)) && (index.h("div", { key: 'b7da4fd10300eda5bfdd55dbe35b133b3fdadc34', class: "ifx-multiselect-dropdown-functions", onClick: e => e.stopPropagation() }, this.showSearch && (index.h("div", { key: '88745790d159eaee099d67f47da895347c643bf2', class: "ifx-multiselect-dropdown-search" }, index.h("ifx-search-field", { key: '23929393f48d8f8c42bf8bc0540bba51e63f2a5a', class: "search-input", placeholder: this.searchPlaceholder, size: "s", "show-delete-icon": "true", "aria-label": this.ariaSearchLabel, onKeyDown: e => {
|
|
500
500
|
e.stopPropagation();
|
|
501
|
-
}, onIfxInput: event => this.handleSearch(event.target), onFocus: () => this.handleSearchFocus(true), onBlur: () => this.handleSearchFocus(false) }))), index.h("div", { key: '
|
|
501
|
+
}, onIfxInput: event => this.handleSearch(event.target), onFocus: () => this.handleSearchFocus(true), onBlur: () => this.handleSearchFocus(false) }))), index.h("div", { key: 'd4877d51dcaf0fbaf0005a35543316d9d971ff9a', class: "ifx-multiselect-dropdown-controls" }, this.showSelectAll && this.renderSelectAll(), this.showExpandCollapse && !isFlatMultiselect && (index.h("div", { key: '87b47b9f686188fa0accd7dc65cbe52b53ef9f35', class: "expand-collapse-controls" }, index.h("span", { key: '15cc27a42d424e9bd086900b473d9c38140ce55c', class: "control-item", role: "button", tabIndex: 0, "aria-label": this.ariaExpandAllLabel, onClick: e => {
|
|
502
502
|
e.stopPropagation();
|
|
503
503
|
this.expandAll();
|
|
504
504
|
}, onKeyDown: e => {
|
|
@@ -507,7 +507,7 @@ const Multiselect = class {
|
|
|
507
507
|
e.stopPropagation();
|
|
508
508
|
this.expandAll();
|
|
509
509
|
}
|
|
510
|
-
} }, this.expandLabel), index.h("span", { key: '
|
|
510
|
+
} }, this.expandLabel), index.h("span", { key: '23f0373cf51e46ee8d4bec3b0b4acfd2a1e927ff', class: "control-item", role: "button", tabIndex: 0, "aria-label": this.ariaCollapseAllLabel, onClick: e => {
|
|
511
511
|
e.stopPropagation();
|
|
512
512
|
this.collapseAll();
|
|
513
513
|
}, onKeyDown: e => {
|
|
@@ -516,7 +516,7 @@ const Multiselect = class {
|
|
|
516
516
|
e.stopPropagation();
|
|
517
517
|
this.collapseAll();
|
|
518
518
|
}
|
|
519
|
-
} }, this.collapseLabel)))))), index.h("div", { key: '
|
|
519
|
+
} }, this.collapseLabel)))))), index.h("div", { key: 'bd17374af6fccd246b8f95b8dcb0ffc7cc736a1a', class: "ifx-multiselect-options", role: "listbox", "aria-multiselectable": "true" }, index.h("slot", { key: '007836fb8658edf0cae20978916af89a5c0293e3' }), this.searchTerm && this.showNoResultsMessage && this.renderNoResultsMessage()))), index.h("div", { key: '80089a7f30ae376e6d06229abb9875ec051127e4', class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (index.h("div", { key: '98e96edd536d19c9ab5f199b0cb222bd4c07e063', class: `ifx-clear-button ${!this.showClearButton ? 'hide' : ''}`, onClick: this.disabled && !this.error ? undefined : () => this.clearSelection() }, index.h("ifx-icon", { key: '9ae175841f71314c4450e109219906745cfe3274', icon: "cRemove16" }))), index.h("div", { key: '11e0b4088fb5f85f69518b1bdab326f78a87a3c0', class: "icon-wrapper-up", onClick: this.disabled && !this.error ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), index.h("div", { key: 'a6d5d8a22605f7028571c63d6f2c59b43e097fac', class: "icon-wrapper-down", onClick: this.disabled && !this.error ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.caption && index.h("div", { key: '172f27a685b53a6f519a857c4a4b3966ea85b693', class: `multi__select-caption ${this.error ? 'error' : ''} ${this.disabled && !this.error ? 'disabled' : ''}` }, this.caption)));
|
|
520
520
|
}
|
|
521
521
|
get el() { return index.getElement(this); }
|
|
522
522
|
static get watchers() { return {
|
|
@@ -893,25 +893,25 @@ const MultiselectOption = class {
|
|
|
893
893
|
const additionalPadding = this.hasChildren ? 0 : 28;
|
|
894
894
|
let totalPadding = basePadding + additionalPadding;
|
|
895
895
|
const optionItemStyle = isFlatMultiselect ? undefined : { paddingLeft: `${totalPadding}px` };
|
|
896
|
-
return (index.h(index.Host, { key: '
|
|
896
|
+
return (index.h(index.Host, { key: '87fc18abf09bc48cc6429d9cf6a7c41bb27bf33c' }, index.h("div", { key: '6b453922a7f29c58a5ee60d3cb9e302a1062aa3a', class: {
|
|
897
897
|
'option': true,
|
|
898
898
|
'option--has-children': this.hasChildren,
|
|
899
899
|
'option--expanded': this.isExpanded,
|
|
900
900
|
'option--disabled': this.disabled,
|
|
901
901
|
'option--selected': this.selected,
|
|
902
|
-
}, role: "option", "aria-expanded": this.hasChildren ? (this.isExpanded ? 'true' : 'false') : undefined, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "data-level": this.depth, "data-value": this.value }, index.h("div", { key: '
|
|
902
|
+
}, role: "option", "aria-expanded": this.hasChildren ? (this.isExpanded ? 'true' : 'false') : undefined, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "data-level": this.depth, "data-value": this.value }, index.h("div", { key: 'ec104ce71c38d4b33e8e1b00c8be1d448f3b1d70', class: "option-item", style: optionItemStyle }, index.h("div", { key: '84684cf716bd80669252f611badd4570c696a3fd', class: "chevron-wrapper", tabIndex: this.hasChildren ? 0 : -1, role: this.hasChildren ? "button" : undefined, "aria-label": this.hasChildren ? (this.isExpanded ? "Collapse" : "Expand") : undefined, onClick: (e) => { e.stopPropagation(); this.toggleExpansion(); }, onKeyDown: (e) => {
|
|
903
903
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
904
904
|
e.preventDefault();
|
|
905
905
|
e.stopPropagation();
|
|
906
906
|
this.toggleExpansion();
|
|
907
907
|
}
|
|
908
|
-
} }, this.hasChildren && (index.h("ifx-icon", { key: '
|
|
908
|
+
} }, this.hasChildren && (index.h("ifx-icon", { key: '671daf9ed91d6aa31ae693530e205b882b43760d', class: `chevron ${this.isExpanded ? 'chevron--expanded' : 'chevron--collapsed'}`, icon: "chevron-right-16" }))), index.h("div", { key: '49cbd2830df83246e190c6b99fb8b4e032e1a00d', class: "checkbox-wrapper", onClick: (e) => e.stopPropagation() }, index.h("ifx-checkbox", { key: '815951eb3d5528dd9c987622ffe7886b51d8f592', size: 's', checked: (this.isSearchActive && this.isSearchDisabled) ? false : (this.indeterminate ? false : this.selected), indeterminate: (this.isSearchActive && this.isSearchDisabled) ? false : this.indeterminate, onClick: this.handleCheckboxClick, disabled: this.disabled || (this.isSearchActive && this.isSearchDisabled), onKeyDown: (e) => {
|
|
909
909
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
910
910
|
e.preventDefault();
|
|
911
911
|
e.stopPropagation();
|
|
912
912
|
this.handleCheckboxClick(e);
|
|
913
913
|
}
|
|
914
|
-
} })), index.h("div", { key: '
|
|
914
|
+
} })), index.h("div", { key: '374d1d3344dc99cb5efbb89dd744e1bbba969169', class: "option-label", onClick: this.handleHeaderClick, tabIndex: -1 }, index.h("slot", { key: 'f729b2f14d20953221a14c159743539e979b2d12' }))), this.isExpanded && index.h("div", { key: '248b9ca94f6781537ca7a651d25621bfabcdfcad', class: "option-children" }, index.h("slot", { key: '269266cc56a04693d6c08d3f80c45df3a4ad0c56', name: "children" })))));
|
|
915
915
|
}
|
|
916
916
|
get el() { return index.getElement(this); }
|
|
917
917
|
};
|
|
@@ -71,11 +71,6 @@ const SearchField = class {
|
|
|
71
71
|
}
|
|
72
72
|
this.hideDropdown();
|
|
73
73
|
};
|
|
74
|
-
// Handle click on history delete button
|
|
75
|
-
this.handleHistoryDelete = (event, term) => {
|
|
76
|
-
event.stopPropagation(); // Prevent selection of the entry
|
|
77
|
-
this.removeFromHistory(term);
|
|
78
|
-
};
|
|
79
74
|
}
|
|
80
75
|
handleOutsideClick(event) {
|
|
81
76
|
const path = event.composedPath();
|
|
@@ -190,27 +185,6 @@ const SearchField = class {
|
|
|
190
185
|
localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));
|
|
191
186
|
}
|
|
192
187
|
}
|
|
193
|
-
// Remove individual history entry
|
|
194
|
-
removeFromHistory(term) {
|
|
195
|
-
if (!this.enableHistory)
|
|
196
|
-
return;
|
|
197
|
-
const history = [...this.searchHistory];
|
|
198
|
-
const index = history.indexOf(term);
|
|
199
|
-
if (index > -1) {
|
|
200
|
-
history.splice(index, 1);
|
|
201
|
-
this.searchHistory = history;
|
|
202
|
-
// Update localStorage
|
|
203
|
-
if (typeof localStorage !== 'undefined') {
|
|
204
|
-
localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));
|
|
205
|
-
}
|
|
206
|
-
// Update suggestions after removal
|
|
207
|
-
this.updateSuggestions();
|
|
208
|
-
// Close dropdown if no history remains
|
|
209
|
-
if (this.searchHistory.length === 0 && this.value.length === 0) {
|
|
210
|
-
this.showDropdown = false;
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
188
|
requestSuggestions(query) {
|
|
215
189
|
this.ifxSuggestionRequested.emit(query);
|
|
216
190
|
this.updateSuggestions();
|
|
@@ -336,32 +310,6 @@ const SearchField = class {
|
|
|
336
310
|
this.filteredSuggestions = [];
|
|
337
311
|
}
|
|
338
312
|
}
|
|
339
|
-
// Check if only history entries are displayed (without text input)
|
|
340
|
-
isShowingOnlyHistory() {
|
|
341
|
-
return this.value.length === 0 &&
|
|
342
|
-
this.filteredSuggestions.length > 0 &&
|
|
343
|
-
this.filteredSuggestions.every(s => s.type === 'history');
|
|
344
|
-
}
|
|
345
|
-
// Render text with highlighted matches
|
|
346
|
-
renderHighlightedText(text, query) {
|
|
347
|
-
if (!query || query.length === 0) {
|
|
348
|
-
return text;
|
|
349
|
-
}
|
|
350
|
-
const lowerText = text.toLowerCase();
|
|
351
|
-
const lowerQuery = query.toLowerCase();
|
|
352
|
-
const index$1 = lowerText.indexOf(lowerQuery);
|
|
353
|
-
if (index$1 === -1) {
|
|
354
|
-
return text;
|
|
355
|
-
}
|
|
356
|
-
const before = text.substring(0, index$1);
|
|
357
|
-
const match = text.substring(index$1, index$1 + query.length);
|
|
358
|
-
const after = text.substring(index$1 + query.length);
|
|
359
|
-
return [
|
|
360
|
-
before,
|
|
361
|
-
index.h("strong", null, match),
|
|
362
|
-
after
|
|
363
|
-
];
|
|
364
|
-
}
|
|
365
313
|
componentWillLoad() {
|
|
366
314
|
this.loadSearchHistory();
|
|
367
315
|
}
|
|
@@ -379,32 +327,12 @@ const SearchField = class {
|
|
|
379
327
|
this.showDeleteIconInternalState = false;
|
|
380
328
|
}
|
|
381
329
|
render() {
|
|
382
|
-
|
|
383
|
-
this.filteredSuggestions.forEach((suggestion, index) => {
|
|
384
|
-
if (typeof suggestion.id === 'symbol' || typeof suggestion.text === 'symbol' || typeof suggestion.scope === 'symbol') {
|
|
385
|
-
// eslint-disable-next-line no-console
|
|
386
|
-
console.warn('Symbol value detected in suggestion', { suggestion, index });
|
|
387
|
-
}
|
|
388
|
-
});
|
|
389
|
-
return (index.h("div", { key: 'fa449752baf4a06c3160069d720db1bc4f63b69f', "aria-disabled": this.disabled, class: "search-field" }, index.h("div", { key: '91abbdb324e0f5d10a9916360b2576ddbe2073cc', class: this.getWrapperClassNames(), tabIndex: 1, onClick: () => this.focusInput() }, index.h("ifx-icon", { key: '80a75c095e19a85e03ea4d4cce872748079e43c8', icon: "search-16", class: "search-icon" }), index.h("input", { key: 'c9a56734a3056e581d88fe887f05bfd3f32ff566', ref: (el) => (this.inputElement = el), type: "text", autocomplete: String(this.autocomplete), onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: String(this.placeholder), disabled: this.disabled, maxlength: this.maxlength, value: String(this.value), role: "combobox", "aria-controls": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-expanded": this.showDropdown, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabel ? String(this.ariaLabel) : undefined, "aria-labelledby": this.ariaLabelledBy ? String(this.ariaLabelledBy) : undefined, "aria-describedby": this.ariaDescribedBy ? String(this.ariaDescribedBy) : undefined, "aria-owns": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-activedescendant": this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : 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 ? String(this.deleteIconAriaLabel) : undefined, onKeyDown: (event) => {
|
|
330
|
+
return (index.h("div", { key: 'f471fa3ed5a0f009c2beff388d6ff69738b58258', class: 'search-field' }, index.h("div", { key: '5f14c9d8ca1e1fbcdbef5baeb5a09e343447ce99', class: this.getWrapperClassNames(), onClick: () => this.focusInput() }, index.h("ifx-icon", { key: 'ec39eae8bff9109889e5859fe3e1d6bb83f50f51', icon: "search-16", class: "search-icon" }), index.h("input", { key: 'ed48f70ce624976b858e6d69bfc0f7a915eed3a4', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, role: "combobox" }), this.showDeleteIcon && this.showDeleteIconInternalState ? (index.h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, onKeyDown: (event) => {
|
|
390
331
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
391
332
|
event.preventDefault();
|
|
392
333
|
this.handleDelete();
|
|
393
334
|
}
|
|
394
|
-
} })) : null)
|
|
395
|
-
// Defensive string conversion for all dynamic attributes
|
|
396
|
-
const suggestionId = typeof suggestion.id === 'symbol' ? String(suggestion.id) : String(suggestion.id);
|
|
397
|
-
const suggestionText = typeof suggestion.text === 'symbol' ? String(suggestion.text) : String(suggestion.text);
|
|
398
|
-
const suggestionScope = suggestion.scope !== undefined && suggestion.scope !== null ? String(suggestion.scope) : '';
|
|
399
|
-
const suggestionResultCount = suggestion.resultCount !== undefined && suggestion.resultCount !== null ? String(suggestion.resultCount) : '';
|
|
400
|
-
const ariaLabel = `${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestionText}${suggestion.scope ? `, ${suggestionScope}` : ''}${suggestion.resultCount ? `, ${suggestionResultCount} results` : ''}`;
|
|
401
|
-
return (index.h("div", { key: suggestionId, id: `suggestion-${index$1}`, class: this.getSuggestionClassNames(index$1), role: "option", "aria-selected": index$1 === this.selectedSuggestionIndex, "aria-label": ariaLabel, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.selectedSuggestionIndex = index$1 }, index.h("div", { class: "suggestion-content" }, suggestion.type === 'history' && (index.h("ifx-icon", { icon: "history-16", class: "suggestion-icon suggestion-icon--history" })), suggestion.type === 'suggestion' && (index.h("ifx-icon", { icon: "search-16", class: "suggestion-icon suggestion-icon--suggestion" })), index.h("span", { class: "suggestion-text" }, index.h("span", { class: "suggestion-main-text" }, this.renderHighlightedText(suggestionText, this.value)), suggestion.scope && (index.h("span", { class: "suggestion-scope" }, "\u2013 ", suggestionScope))), suggestion.resultCount !== undefined && suggestion.scope && (index.h("span", { class: "suggestion-count" }, suggestionResultCount)), suggestion.type === 'history' && (index.h("ifx-icon", { icon: "cross16", class: "suggestion-delete-icon", role: "button", tabIndex: 0, "aria-label": `${this.historyDeleteAriaLabel ? String(this.historyDeleteAriaLabel) : ''}: ${suggestionText}`, onClick: (event) => this.handleHistoryDelete(event, suggestion.text), onKeyDown: (event) => {
|
|
402
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
403
|
-
event.preventDefault();
|
|
404
|
-
this.handleHistoryDelete(event, suggestion.text);
|
|
405
|
-
}
|
|
406
|
-
} })))));
|
|
407
|
-
})))));
|
|
335
|
+
} })) : null)));
|
|
408
336
|
}
|
|
409
337
|
getSizeClass() {
|
|
410
338
|
return `${this.size}` === "s"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-search-field.entry.cjs.js","mappings":"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","names":["index","h","isNestedInIfxComponent","detectFramework","trackComponent","classNames"],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n@use '../../global/font.scss';\n\n:host {\n display: flex;\n}\n\n.search-field {\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n width: 100%;\n font-family: var(--ifx-font-family);\n position: relative; // Wichtig für absolute positioning des Dropdowns\n\n .search-field__wrapper {\n box-sizing: border-box;\n height: tokens.$ifxSize500;\n display: flex;\n align-items: center;\n border: 1px solid #8d8786;\n border-radius: tokens.$ifxBorderRadius12;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n position: relative;\n width: 100%;\n outline: none;\n\n &:focus-visible:not(.disabled) {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &.search-field__wrapper-s {\n height: 36px;\n }\n\n &:hover:not(.focused, :focus) {\n border: 1px solid #3c3a39;\n }\n\n & .delete-icon {\n outline: 1px solid transparent;\n right: 12px;\n cursor: pointer;\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 1px;\n }\n }\n\n input[type='text'] {\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n //line-height: 24px;\n color: #8d8786;\n border: none;\n width: 100%;\n outline: none;\n //height: 100%;\n height: 16px;\n\n &:focus {\n outline: none;\n color: #1d1d1d;\n }\n\n &:disabled {\n background: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n\n &::placeholder {\n color: tokens.$ifxColorBaseWhite;\n }\n }\n }\n\n &.disabled {\n background: tokens.$ifxColorEngineering300;\n border: none;\n color: tokens.$ifxColorBaseWhite;\n\n &:hover {\n border: none;\n outline: none;\n }\n\n & .delete-icon { \n cursor: default;\n &:focus-visible { \n outline: 1px solid transparent;\n }\n }\n }\n }\n\n // Suggestions Dropdown Styles\n .suggestions-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: tokens.$ifxColorBaseWhite;\n margin-top: tokens.$ifxSpace50;\n border: 1px solid tokens.$ifxColorEngineering200;\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\n z-index: 1000;\n max-height: 300px;\n overflow-y: auto;\n container-type: inline-size; // Enable container queries\n\n .suggestions-header {\n // font: tokens.$ifxEyebrowEyebrow02; TODO\n font-family: Source Sans 3;\n font-size: 0.8125rem;\n font-weight: 600;\n line-height: 1.25rem;\n\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: tokens.$ifxColorEngineering500;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n }\n\n .suggestion-item {\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n cursor: pointer;\n transition: background-color 0.2s ease;\n\n &:last-child {\n border-bottom: none;\n }\n\n &:hover,\n &--selected {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n .suggestion-content {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace150;\n\n .suggestion-icon {\n color: tokens.$ifxColorEngineering500;\n flex-shrink: 0;\n\n &--history {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n .suggestion-text {\n flex: 1;\n display: flex;\n align-items: center;\n min-width: 0; // Important for flexbox truncation\n\n .suggestion-main-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex-shrink: 1;\n min-width: 0;\n }\n\n .suggestion-scope {\n color: tokens.$ifxColorEngineering400;\n flex-shrink: 0; // Never truncate the scope\n white-space: nowrap;\n margin-left: tokens.$ifxSpace25; // Add space before the scope\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeXs;\n }\n\n // When container is narrow, stack scope below main text\n @container (max-width: 320px) {\n flex-direction: column;\n align-items: flex-start;\n\n .suggestion-main-text {\n width: 100%;\n max-width: 100%;\n }\n\n .suggestion-scope {\n margin-left: 0;\n margin-top: 0;\n width: 100%;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-shrink: 1; // Allow truncation when narrow\n }\n }\n }\n\n .suggestion-count {\n color: tokens.$ifxColorEngineering400;\n margin-left: auto;\n flex-shrink: 0;\n }\n\n .suggestion-delete-icon {\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.2s ease, visibility 0.2s ease;\n cursor: pointer;\n margin-left: auto;\n flex-shrink: 0;\n color: tokens.$ifxColorEngineering500;\n\n &:hover {\n color: tokens.$ifxColorEngineering600;\n }\n }\n }\n\n &:hover {\n .suggestion-delete-icon {\n opacity: 1;\n visibility: visible;\n }\n }\n }\n }\n\n // Wrapper modifications when dropdown is open\n .search-field__wrapper.dropdown-open {\n border-radius: tokens.$ifxBorderRadius12 tokens.$ifxBorderRadius12 0 0;\n border-color: tokens.$ifxColorOcean500;\n }\n}\n","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n\nexport interface SuggestionItem {\n id: string;\n text: string;\n type?: 'suggestion' | 'history';\n scope?: string;\n resultCount?: number;\n metadata?: any;\n}\n\n@Component({\n tag: 'ifx-search-field',\n styleUrl: 'search-field.scss',\n shadow: true\n})\n\nexport class SearchField {\n @Element() el;\n private inputElement: HTMLInputElement;\n private dropdownElement: HTMLDivElement;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop() suggestions: SuggestionItem[] = [];\n @Prop() showSuggestions: boolean = false;\n @Prop() maxSuggestions: number = 10;\n @Prop() maxHistoryItems: number = 5;\n @Prop() enableHistory: boolean = true;\n @Prop() historyKey: string = 'ifx-search-history';\n @Prop() historyHeaderText: string = 'Recent Searches';\n\n // ARIA Labels and Accessibility Props\n @Prop() ariaLabel: string | null = \"Search Field\"\n @Prop() ariaLabelledBy?: string | null;\n @Prop() ariaDescribedBy?: string | null;\n @Prop() deleteIconAriaLabel: string = 'Clear search';\n @Prop() historyDeleteAriaLabel: string = 'Remove from history';\n @Prop() dropdownAriaLabel: string = 'Search suggestions and history';\n @Prop() suggestionAriaLabel: string = 'Search suggestion';\n @Prop() historyItemAriaLabel: string = 'Search history item';\n\n @Event() ifxInput: EventEmitter<string>;\n @Event() ifxSuggestionRequested: EventEmitter<string>;\n @Event() ifxSuggestionSelected: EventEmitter<SuggestionItem>;\n @Event() ifxFocus: EventEmitter<void>;\n @Event() ifxBlur: EventEmitter<void>;\n\n @State() showDropdown: boolean = false;\n @State() filteredSuggestions: SuggestionItem[] = [];\n @State() selectedSuggestionIndex: number = -1;\n @State() searchHistory: string[] = [];\n\n @Prop() showDeleteIcon: boolean = false;\n @State() showDeleteIconInternalState: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() size: string = 'l';\n @State() isFocused: boolean = false;\n @Prop() placeholder: string = \"Search...\";\n @Prop() autocomplete: string = \"off\";\n @Prop() maxlength?: number = null;\n\n private focusEmitted: boolean = false;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.inputElement) && !path.includes(this.dropdownElement)) {\n this.hideDropdown();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (!this.showDropdown) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.navigateSuggestions(1);\n break;\n case 'ArrowUp':\n event.preventDefault();\n this.navigateSuggestions(-1);\n break;\n case 'Enter':\n event.preventDefault();\n if (this.selectedSuggestionIndex >= 0) {\n this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex]);\n } else {\n this.handleSearch();\n }\n break;\n case 'Escape':\n this.hideDropdown();\n break;\n }\n }\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (this.inputElement && newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n this.updateSuggestions();\n }\n\n @Watch('suggestions')\n suggestionsWatcher() {\n this.updateSuggestions();\n }\n\n\n handleInput = () => {\n const query = this.inputElement.value;\n this.value = query;\n this.ifxInput.emit(this.value);\n\n if (this.showSuggestions) {\n this.showDropdown = true;\n this.selectedSuggestionIndex = -1;\n this.requestSuggestions(query);\n }\n };\n\n handleDelete = () => {\n if(!this.disabled) { \n this.inputElement.value = '';\n this.value = \"\";\n this.ifxInput.emit(this.value);\n this.hideDropdown();\n }\n }\n\n handleSearch = () => {\n if (this.value.trim() && this.enableHistory) {\n // Only add to history if there are actual results\n if (this.filteredSuggestions.length > 0) {\n this.addToHistory(this.value);\n }\n }\n this.hideDropdown();\n }\n\n focusInput() {\n // Only emit focus event if it hasn't been emitted already\n if (!this.focusEmitted) {\n this.focusEmitted = true;\n this.isFocused = true;\n this.ifxFocus.emit();\n }\n\n if (this.showSuggestions) {\n // On focus without input: Show only history\n if (this.value.length === 0) {\n this.showHistoryDropdown();\n // Only show dropdown if history is actually present\n this.showDropdown = this.enableHistory && this.searchHistory.length > 0;\n } else {\n // With existing input: Normal suggestion logic\n this.updateSuggestions();\n this.showDropdown = this.filteredSuggestions.length > 0;\n }\n }\n }\n\n blurInput() {\n setTimeout(() => {\n this.isFocused = false;\n this.focusEmitted = false; // Reset focus flag when blur occurs\n this.ifxBlur.emit();\n }, 150);\n }\n\n // Public method to update history from external sources\n public loadSearchHistory() {\n if (this.enableHistory && typeof localStorage !== 'undefined') {\n const stored = localStorage.getItem(this.historyKey);\n this.searchHistory = stored ? JSON.parse(stored) : [];\n\n // Update suggestions when history is loaded\n this.updateSuggestions();\n\n // If no input and no history left, close dropdown\n if (this.value.length === 0 && this.searchHistory.length === 0) {\n this.showDropdown = false;\n }\n }\n }\n\n // Public method to completely clear history\n public clearSearchHistory() {\n if (this.enableHistory && typeof localStorage !== 'undefined') {\n // Clear from localStorage\n localStorage.removeItem(this.historyKey);\n\n // Clear internal history\n this.searchHistory = [];\n\n // Reset all dropdown-relevant states\n this.filteredSuggestions = [];\n this.selectedSuggestionIndex = -1;\n this.showDropdown = false;\n\n // Update suggestions after reset\n this.updateSuggestions();\n }\n }\n\n // Suggestion Management Methods\n private addToHistory(term: string) {\n if (!this.enableHistory || !term.trim()) return;\n\n const history = [...this.searchHistory];\n const existingIndex = history.indexOf(term);\n\n if (existingIndex > -1) {\n history.splice(existingIndex, 1);\n }\n\n history.unshift(term);\n // Limit history to maxHistoryItems (default 5)\n this.searchHistory = history.slice(0, this.maxHistoryItems);\n\n if (typeof localStorage !== 'undefined') {\n localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));\n }\n }\n\n // Remove individual history entry\n private removeFromHistory(term: string) {\n if (!this.enableHistory) return;\n\n const history = [...this.searchHistory];\n const index = history.indexOf(term);\n\n if (index > -1) {\n history.splice(index, 1);\n this.searchHistory = history;\n\n // Update localStorage\n if (typeof localStorage !== 'undefined') {\n localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));\n }\n\n // Update suggestions after removal\n this.updateSuggestions();\n\n // Close dropdown if no history remains\n if (this.searchHistory.length === 0 && this.value.length === 0) {\n this.showDropdown = false;\n }\n }\n }\n\n // Handle click on history delete button\n private handleHistoryDelete = (event: Event, term: string) => {\n event.stopPropagation(); // Prevent selection of the entry\n this.removeFromHistory(term);\n }\n\n private requestSuggestions(query: string) {\n this.ifxSuggestionRequested.emit(query);\n this.updateSuggestions();\n }\n\n private updateSuggestions() {\n const query = this.value.toLowerCase();\n let suggestions: SuggestionItem[] = [];\n\n if (query.length > 0) {\n // For text input: Mix external suggestions and relevant history\n\n // 1. Filter external suggestions\n if (this.suggestions && this.suggestions.length > 0) {\n const filteredExternal = this.suggestions.filter(s =>\n s.text.toLowerCase().includes(query)\n );\n suggestions = [...suggestions, ...filteredExternal];\n }\n\n // 2. Filter relevant history entries\n if (this.enableHistory && this.searchHistory.length > 0) {\n const filteredHistory = this.searchHistory\n .filter(term => term.toLowerCase().includes(query))\n .map((term, index) => ({\n id: `history-${index}`,\n text: term,\n type: 'history' as const\n }));\n suggestions = [...suggestions, ...filteredHistory];\n }\n\n // 3. Sort by relevance (exact matches first, then prefix matches)\n suggestions.sort((a, b) => {\n const aText = a.text.toLowerCase();\n const bText = b.text.toLowerCase();\n\n // Exact match has highest priority\n if (aText === query && bText !== query) return -1;\n if (bText === query && aText !== query) return 1;\n\n // Prefix match has second highest priority\n const aStartsWith = aText.startsWith(query);\n const bStartsWith = bText.startsWith(query);\n\n if (aStartsWith && !bStartsWith) return -1;\n if (bStartsWith && !aStartsWith) return 1;\n\n // With equal relevance: external suggestions before history\n if (a.type === 'suggestion' && b.type === 'history') return -1;\n if (a.type === 'history' && b.type === 'suggestion') return 1;\n\n // Alphabetical sorting as last criterion\n return aText.localeCompare(bText);\n });\n\n } else {\n // For empty query: Show only history (no external suggestions)\n if (this.enableHistory && this.searchHistory.length > 0) {\n const historySuggestions = this.searchHistory.map((term, index) => ({\n id: `history-${index}`,\n text: term,\n type: 'history' as const\n }));\n\n suggestions = historySuggestions;\n }\n // For empty query DO NOT show external suggestions\n }\n\n // Remove duplicates based on text and scope combination (history takes precedence over external)\n const uniqueSuggestions = suggestions.reduce((unique: SuggestionItem[], current) => {\n const existingIndex = unique.findIndex(item =>\n item.text.toLowerCase() === current.text.toLowerCase() &&\n item.scope === current.scope\n );\n if (existingIndex === -1) {\n unique.push(current);\n } else {\n // If already exists, prefer history over external suggestions\n if (current.type === 'history' && unique[existingIndex].type !== 'history') {\n unique[existingIndex] = current;\n }\n }\n return unique;\n }, []);\n\n this.filteredSuggestions = uniqueSuggestions.slice(0, this.maxSuggestions);\n this.selectedSuggestionIndex = -1;\n }\n\n private navigateSuggestions(direction: number) {\n const maxIndex = this.filteredSuggestions.length - 1;\n\n if (direction > 0) {\n this.selectedSuggestionIndex = this.selectedSuggestionIndex < maxIndex\n ? this.selectedSuggestionIndex + 1\n : 0;\n } else {\n this.selectedSuggestionIndex = this.selectedSuggestionIndex > 0\n ? this.selectedSuggestionIndex - 1\n : maxIndex;\n }\n }\n\n private selectSuggestion(suggestion: SuggestionItem) {\n this.value = suggestion.text;\n this.inputElement.value = suggestion.text;\n this.ifxSuggestionSelected.emit(suggestion);\n this.ifxInput.emit(this.value);\n\n if (this.enableHistory) {\n // Always add selected suggestions to history since they are valid results\n this.addToHistory(suggestion.text);\n }\n\n this.hideDropdown();\n }\n\n private hideDropdown() {\n this.showDropdown = false;\n this.selectedSuggestionIndex = -1;\n this.isFocused = false;\n }\n\n // Show only history in dropdown (e.g. on focus without input)\n private showHistoryDropdown() {\n if (this.enableHistory && this.searchHistory.length > 0) {\n // Show only history entries\n const historySuggestions = this.searchHistory.map((term, index) => ({\n id: `history-${index}`,\n text: term,\n type: 'history' as const\n }));\n\n this.filteredSuggestions = historySuggestions.slice(0, this.maxSuggestions);\n this.selectedSuggestionIndex = -1;\n } else {\n this.filteredSuggestions = [];\n }\n }\n\n // Check if only history entries are displayed (without text input)\n private isShowingOnlyHistory(): boolean {\n return this.value.length === 0 &&\n this.filteredSuggestions.length > 0 &&\n this.filteredSuggestions.every(s => s.type === 'history');\n }\n\n // Render text with highlighted matches\n private renderHighlightedText(text: string, query: string) {\n if (!query || query.length === 0) {\n return text;\n }\n\n const lowerText = text.toLowerCase();\n const lowerQuery = query.toLowerCase();\n const index = lowerText.indexOf(lowerQuery);\n\n if (index === -1) {\n return text;\n }\n\n const before = text.substring(0, index);\n const match = text.substring(index, index + query.length);\n const after = text.substring(index + query.length);\n\n return [\n before,\n <strong>{match}</strong>,\n after\n ];\n }\n\n componentWillLoad() {\n this.loadSearchHistory();\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) {\n const framework = detectFramework()\n trackComponent('ifx-search-field', await framework)\n }\n }\n\n componentWillUpdate() {\n if (this.value !== \"\") {\n this.showDeleteIconInternalState = true;\n } else this.showDeleteIconInternalState = false;\n }\n\n render() {\n // Debug: Check for Symbol values in suggestions\n this.filteredSuggestions.forEach((suggestion, index) => {\n if (typeof suggestion.id === 'symbol' || typeof suggestion.text === 'symbol' || typeof suggestion.scope === 'symbol') {\n // eslint-disable-next-line no-console\n console.warn('Symbol value detected in suggestion', { suggestion, index });\n }\n });\n\n return (\n <div\n aria-disabled={this.disabled}\n class=\"search-field\"\n >\n <div\n class={this.getWrapperClassNames()}\n tabIndex={1}\n onClick={() => this.focusInput()}\n >\n <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n <input\n ref={(el) => (this.inputElement = el)}\n type=\"text\"\n autocomplete={String(this.autocomplete)}\n onInput={() => this.handleInput()}\n onFocus={() => this.focusInput()}\n onBlur={() => this.blurInput()}\n placeholder={String(this.placeholder)}\n disabled={this.disabled}\n maxlength={this.maxlength}\n value={String(this.value)}\n role=\"combobox\"\n aria-controls={this.showDropdown ? 'suggestions-dropdown' : undefined}\n aria-expanded={this.showDropdown}\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-label={this.ariaLabel ? String(this.ariaLabel) : undefined}\n aria-labelledby={this.ariaLabelledBy ? String(this.ariaLabelledBy) : undefined}\n aria-describedby={this.ariaDescribedBy ? String(this.ariaDescribedBy) : undefined}\n aria-owns={this.showDropdown ? 'suggestions-dropdown' : undefined}\n aria-activedescendant={this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined}\n />\n {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n <ifx-icon\n icon=\"cRemove16\"\n class=\"delete-icon\"\n onClick={this.handleDelete}\n role=\"button\"\n tabIndex={0}\n aria-label={this.deleteIconAriaLabel ? String(this.deleteIconAriaLabel) : undefined}\n onKeyDown={(event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handleDelete();\n }\n }}>\n </ifx-icon>\n ) : null}\n </div>\n\n {/* Suggestions Dropdown */}\n {this.showDropdown && this.filteredSuggestions.length > 0 && (\n <div\n ref={(el) => (this.dropdownElement = el)}\n id=\"suggestions-dropdown\"\n class=\"suggestions-dropdown\"\n role=\"listbox\"\n aria-label={this.dropdownAriaLabel ? String(this.dropdownAriaLabel) : undefined}\n >\n {/* History Header - only show when exclusively showing history entries */}\n {this.isShowingOnlyHistory() && (\n <div class=\"suggestions-header\">\n {this.historyHeaderText}\n </div>\n )}\n\n {this.filteredSuggestions.map((suggestion, index) => {\n // Defensive string conversion for all dynamic attributes\n const suggestionId = typeof suggestion.id === 'symbol' ? String(suggestion.id) : String(suggestion.id);\n const suggestionText = typeof suggestion.text === 'symbol' ? String(suggestion.text) : String(suggestion.text);\n const suggestionScope = suggestion.scope !== undefined && suggestion.scope !== null ? String(suggestion.scope) : '';\n const suggestionResultCount = suggestion.resultCount !== undefined && suggestion.resultCount !== null ? String(suggestion.resultCount) : '';\n const ariaLabel = `${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestionText}${suggestion.scope ? `, ${suggestionScope}` : ''}${suggestion.resultCount ? `, ${suggestionResultCount} results` : ''}`;\n return (\n <div\n key={suggestionId}\n id={`suggestion-${index}`}\n class={this.getSuggestionClassNames(index)}\n role=\"option\"\n aria-selected={index === this.selectedSuggestionIndex}\n aria-label={ariaLabel}\n onClick={() => this.selectSuggestion(suggestion)}\n onMouseEnter={() => this.selectedSuggestionIndex = index}\n >\n <div class=\"suggestion-content\">\n {suggestion.type === 'history' && (\n <ifx-icon icon=\"history-16\" class=\"suggestion-icon suggestion-icon--history\"></ifx-icon>\n )}\n {suggestion.type === 'suggestion' && (\n <ifx-icon icon=\"search-16\" class=\"suggestion-icon suggestion-icon--suggestion\"></ifx-icon>\n )}\n <span class=\"suggestion-text\">\n <span class=\"suggestion-main-text\">\n {this.renderHighlightedText(suggestionText, this.value)}\n </span>\n {suggestion.scope && (\n <span class=\"suggestion-scope\">– {suggestionScope}</span>\n )}\n </span>\n\n {suggestion.resultCount !== undefined && suggestion.scope && (\n <span class=\"suggestion-count\">{suggestionResultCount}</span>\n )}\n\n {/* Delete Button only for history entries */}\n {suggestion.type === 'history' && (\n <ifx-icon\n icon=\"cross16\"\n class=\"suggestion-delete-icon\"\n role=\"button\"\n tabIndex={0}\n aria-label={`${this.historyDeleteAriaLabel ? String(this.historyDeleteAriaLabel) : ''}: ${suggestionText}`}\n onClick={(event) => this.handleHistoryDelete(event, suggestion.text)}\n onKeyDown={(event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handleHistoryDelete(event, suggestion.text);\n }\n }}\n ></ifx-icon>\n )}\n </div>\n </div>\n );\n })}\n </div>\n )}\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"search-field__wrapper-s\"\n : \"\";\n }\n\n getWrapperClassNames() {\n return classNames(\n `search-field__wrapper`,\n `search-field__wrapper ${this.getSizeClass()}`,\n `${this.isFocused ? 'focused' : \"\"}`,\n `${this.showDropdown ? 'dropdown-open' : \"\"}`,\n `${this.disabled ? 'disabled' : \"\"}`\n );\n }\n\n getSuggestionClassNames(index: number) {\n return classNames(\n 'suggestion-item',\n {\n 'suggestion-item--selected': index === this.selectedSuggestionIndex,\n 'suggestion-item--history': this.filteredSuggestions[index]?.type === 'history'\n }\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"ifx-search-field.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h","classNames"],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n@use '../../global/font.scss';\n\n:host {\n display: flex;\n}\n\n.search-field {\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n width: 100%;\n font-family: var(--ifx-font-family);\n position: relative; // Wichtig für absolute positioning des Dropdowns\n\n .search-field__wrapper {\n box-sizing: border-box;\n height: tokens.$ifxSize500;\n display: flex;\n align-items: center;\n border: 1px solid #8d8786;\n border-radius: tokens.$ifxBorderRadius12;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n position: relative;\n width: 100%;\n outline: none;\n\n &:focus-visible:not(.disabled) {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &.search-field__wrapper-s {\n height: 36px;\n }\n\n &:hover:not(.focused, :focus) {\n border: 1px solid #3c3a39;\n }\n\n & .delete-icon {\n outline: 1px solid transparent;\n right: 12px;\n cursor: pointer;\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 1px;\n }\n }\n\n input[type='text'] {\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n //line-height: 24px;\n color: #8d8786;\n border: none;\n width: 100%;\n outline: none;\n //height: 100%;\n height: 16px;\n\n &:focus {\n outline: none;\n color: #1d1d1d;\n }\n\n &:disabled {\n background: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n\n &::placeholder {\n color: tokens.$ifxColorBaseWhite;\n }\n }\n }\n\n &.disabled {\n background: tokens.$ifxColorEngineering300;\n border: none;\n color: tokens.$ifxColorBaseWhite;\n\n &:hover {\n border: none;\n outline: none;\n }\n\n & .delete-icon { \n cursor: default;\n &:focus-visible { \n outline: 1px solid transparent;\n }\n }\n }\n }\n\n // Suggestions Dropdown Styles\n .suggestions-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: tokens.$ifxColorBaseWhite;\n margin-top: tokens.$ifxSpace50;\n border: 1px solid tokens.$ifxColorEngineering200;\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\n z-index: 1000;\n max-height: 300px;\n overflow-y: auto;\n container-type: inline-size; // Enable container queries\n\n .suggestions-header {\n // font: tokens.$ifxEyebrowEyebrow02; TODO\n font-family: Source Sans 3;\n font-size: 0.8125rem;\n font-weight: 600;\n line-height: 1.25rem;\n\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: tokens.$ifxColorEngineering500;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n }\n\n .suggestion-item {\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n cursor: pointer;\n transition: background-color 0.2s ease;\n\n &:last-child {\n border-bottom: none;\n }\n\n &:hover,\n &--selected {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n .suggestion-content {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace150;\n\n .suggestion-icon {\n color: tokens.$ifxColorEngineering500;\n flex-shrink: 0;\n\n &--history {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n .suggestion-text {\n flex: 1;\n display: flex;\n align-items: center;\n min-width: 0; // Important for flexbox truncation\n\n .suggestion-main-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex-shrink: 1;\n min-width: 0;\n }\n\n .suggestion-scope {\n color: tokens.$ifxColorEngineering400;\n flex-shrink: 0; // Never truncate the scope\n white-space: nowrap;\n margin-left: tokens.$ifxSpace25; // Add space before the scope\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeXs;\n }\n\n // When container is narrow, stack scope below main text\n @container (max-width: 320px) {\n flex-direction: column;\n align-items: flex-start;\n\n .suggestion-main-text {\n width: 100%;\n max-width: 100%;\n }\n\n .suggestion-scope {\n margin-left: 0;\n margin-top: 0;\n width: 100%;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-shrink: 1; // Allow truncation when narrow\n }\n }\n }\n\n .suggestion-count {\n color: tokens.$ifxColorEngineering400;\n margin-left: auto;\n flex-shrink: 0;\n }\n\n .suggestion-delete-icon {\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.2s ease, visibility 0.2s ease;\n cursor: pointer;\n margin-left: auto;\n flex-shrink: 0;\n color: tokens.$ifxColorEngineering500;\n\n &:hover {\n color: tokens.$ifxColorEngineering600;\n }\n }\n }\n\n &:hover {\n .suggestion-delete-icon {\n opacity: 1;\n visibility: visible;\n }\n }\n }\n }\n\n // Wrapper modifications when dropdown is open\n .search-field__wrapper.dropdown-open {\n border-radius: tokens.$ifxBorderRadius12 tokens.$ifxBorderRadius12 0 0;\n border-color: tokens.$ifxColorOcean500;\n }\n}\n","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n\nexport interface SuggestionItem {\n id: string;\n text: string;\n type?: 'suggestion' | 'history';\n scope?: string;\n resultCount?: number;\n metadata?: any;\n}\n\n@Component({\n tag: 'ifx-search-field',\n styleUrl: 'search-field.scss',\n shadow: true\n})\n\nexport class SearchField {\n @Element() el;\n private inputElement: HTMLInputElement;\n private dropdownElement: HTMLDivElement;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop() suggestions: SuggestionItem[] = [];\n @Prop() showSuggestions: boolean = false;\n @Prop() maxSuggestions: number = 10;\n @Prop() maxHistoryItems: number = 5;\n @Prop() enableHistory: boolean = true;\n @Prop() historyKey: string = 'ifx-search-history';\n @Prop() historyHeaderText: string = 'Recent Searches';\n\n // ARIA Labels and Accessibility Props\n @Prop() ariaLabel: string | null = \"Search Field\"\n @Prop() ariaLabelledBy?: string | null;\n @Prop() ariaDescribedBy?: string | null;\n @Prop() deleteIconAriaLabel: string = 'Clear search';\n @Prop() historyDeleteAriaLabel: string = 'Remove from history';\n @Prop() dropdownAriaLabel: string = 'Search suggestions and history';\n @Prop() suggestionAriaLabel: string = 'Search suggestion';\n @Prop() historyItemAriaLabel: string = 'Search history item';\n\n @Event() ifxInput: EventEmitter<string>;\n @Event() ifxSuggestionRequested: EventEmitter<string>;\n @Event() ifxSuggestionSelected: EventEmitter<SuggestionItem>;\n @Event() ifxFocus: EventEmitter<void>;\n @Event() ifxBlur: EventEmitter<void>;\n\n @State() showDropdown: boolean = false;\n @State() filteredSuggestions: SuggestionItem[] = [];\n @State() selectedSuggestionIndex: number = -1;\n @State() searchHistory: string[] = [];\n\n @Prop() showDeleteIcon: boolean = false;\n @State() showDeleteIconInternalState: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() size: string = 'l';\n @State() isFocused: boolean = false;\n @Prop() placeholder: string = \"Search...\";\n @Prop() autocomplete: string = \"off\";\n @Prop() maxlength?: number = null;\n\n private focusEmitted: boolean = false;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.inputElement) && !path.includes(this.dropdownElement)) {\n this.hideDropdown();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (!this.showDropdown) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.navigateSuggestions(1);\n break;\n case 'ArrowUp':\n event.preventDefault();\n this.navigateSuggestions(-1);\n break;\n case 'Enter':\n event.preventDefault();\n if (this.selectedSuggestionIndex >= 0) {\n this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex]);\n } else {\n this.handleSearch();\n }\n break;\n case 'Escape':\n this.hideDropdown();\n break;\n }\n }\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (this.inputElement && newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n this.updateSuggestions();\n }\n\n @Watch('suggestions')\n suggestionsWatcher() {\n this.updateSuggestions();\n }\n\n\n handleInput = () => {\n const query = this.inputElement.value;\n this.value = query;\n this.ifxInput.emit(this.value);\n\n if (this.showSuggestions) {\n this.showDropdown = true;\n this.selectedSuggestionIndex = -1;\n this.requestSuggestions(query);\n }\n };\n\n handleDelete = () => {\n if(!this.disabled) { \n this.inputElement.value = '';\n this.value = \"\";\n this.ifxInput.emit(this.value);\n this.hideDropdown();\n }\n }\n\n handleSearch = () => {\n if (this.value.trim() && this.enableHistory) {\n // Only add to history if there are actual results\n if (this.filteredSuggestions.length > 0) {\n this.addToHistory(this.value);\n }\n }\n this.hideDropdown();\n }\n\n focusInput() {\n // Only emit focus event if it hasn't been emitted already\n if (!this.focusEmitted) {\n this.focusEmitted = true;\n this.isFocused = true;\n this.ifxFocus.emit();\n }\n\n if (this.showSuggestions) {\n // On focus without input: Show only history\n if (this.value.length === 0) {\n this.showHistoryDropdown();\n // Only show dropdown if history is actually present\n this.showDropdown = this.enableHistory && this.searchHistory.length > 0;\n } else {\n // With existing input: Normal suggestion logic\n this.updateSuggestions();\n this.showDropdown = this.filteredSuggestions.length > 0;\n }\n }\n }\n\n blurInput() {\n setTimeout(() => {\n this.isFocused = false;\n this.focusEmitted = false; // Reset focus flag when blur occurs\n this.ifxBlur.emit();\n }, 150);\n }\n\n // Public method to update history from external sources\n public loadSearchHistory() {\n if (this.enableHistory && typeof localStorage !== 'undefined') {\n const stored = localStorage.getItem(this.historyKey);\n this.searchHistory = stored ? JSON.parse(stored) : [];\n\n // Update suggestions when history is loaded\n this.updateSuggestions();\n\n // If no input and no history left, close dropdown\n if (this.value.length === 0 && this.searchHistory.length === 0) {\n this.showDropdown = false;\n }\n }\n }\n\n // Public method to completely clear history\n public clearSearchHistory() {\n if (this.enableHistory && typeof localStorage !== 'undefined') {\n // Clear from localStorage\n localStorage.removeItem(this.historyKey);\n\n // Clear internal history\n this.searchHistory = [];\n\n // Reset all dropdown-relevant states\n this.filteredSuggestions = [];\n this.selectedSuggestionIndex = -1;\n this.showDropdown = false;\n\n // Update suggestions after reset\n this.updateSuggestions();\n }\n }\n\n // Suggestion Management Methods\n private addToHistory(term: string) {\n if (!this.enableHistory || !term.trim()) return;\n\n const history = [...this.searchHistory];\n const existingIndex = history.indexOf(term);\n\n if (existingIndex > -1) {\n history.splice(existingIndex, 1);\n }\n\n history.unshift(term);\n // Limit history to maxHistoryItems (default 5)\n this.searchHistory = history.slice(0, this.maxHistoryItems);\n\n if (typeof localStorage !== 'undefined') {\n localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));\n }\n }\n\n private requestSuggestions(query: string) {\n this.ifxSuggestionRequested.emit(query);\n this.updateSuggestions();\n }\n\n private updateSuggestions() {\n const query = this.value.toLowerCase();\n let suggestions: SuggestionItem[] = [];\n\n if (query.length > 0) {\n // For text input: Mix external suggestions and relevant history\n\n // 1. Filter external suggestions\n if (this.suggestions && this.suggestions.length > 0) {\n const filteredExternal = this.suggestions.filter(s =>\n s.text.toLowerCase().includes(query)\n );\n suggestions = [...suggestions, ...filteredExternal];\n }\n\n // 2. Filter relevant history entries\n if (this.enableHistory && this.searchHistory.length > 0) {\n const filteredHistory = this.searchHistory\n .filter(term => term.toLowerCase().includes(query))\n .map((term, index) => ({\n id: `history-${index}`,\n text: term,\n type: 'history' as const\n }));\n suggestions = [...suggestions, ...filteredHistory];\n }\n\n // 3. Sort by relevance (exact matches first, then prefix matches)\n suggestions.sort((a, b) => {\n const aText = a.text.toLowerCase();\n const bText = b.text.toLowerCase();\n\n // Exact match has highest priority\n if (aText === query && bText !== query) return -1;\n if (bText === query && aText !== query) return 1;\n\n // Prefix match has second highest priority\n const aStartsWith = aText.startsWith(query);\n const bStartsWith = bText.startsWith(query);\n\n if (aStartsWith && !bStartsWith) return -1;\n if (bStartsWith && !aStartsWith) return 1;\n\n // With equal relevance: external suggestions before history\n if (a.type === 'suggestion' && b.type === 'history') return -1;\n if (a.type === 'history' && b.type === 'suggestion') return 1;\n\n // Alphabetical sorting as last criterion\n return aText.localeCompare(bText);\n });\n\n } else {\n // For empty query: Show only history (no external suggestions)\n if (this.enableHistory && this.searchHistory.length > 0) {\n const historySuggestions = this.searchHistory.map((term, index) => ({\n id: `history-${index}`,\n text: term,\n type: 'history' as const\n }));\n\n suggestions = historySuggestions;\n }\n // For empty query DO NOT show external suggestions\n }\n\n // Remove duplicates based on text and scope combination (history takes precedence over external)\n const uniqueSuggestions = suggestions.reduce((unique: SuggestionItem[], current) => {\n const existingIndex = unique.findIndex(item =>\n item.text.toLowerCase() === current.text.toLowerCase() &&\n item.scope === current.scope\n );\n if (existingIndex === -1) {\n unique.push(current);\n } else {\n // If already exists, prefer history over external suggestions\n if (current.type === 'history' && unique[existingIndex].type !== 'history') {\n unique[existingIndex] = current;\n }\n }\n return unique;\n }, []);\n\n this.filteredSuggestions = uniqueSuggestions.slice(0, this.maxSuggestions);\n this.selectedSuggestionIndex = -1;\n }\n\n private navigateSuggestions(direction: number) {\n const maxIndex = this.filteredSuggestions.length - 1;\n\n if (direction > 0) {\n this.selectedSuggestionIndex = this.selectedSuggestionIndex < maxIndex\n ? this.selectedSuggestionIndex + 1\n : 0;\n } else {\n this.selectedSuggestionIndex = this.selectedSuggestionIndex > 0\n ? this.selectedSuggestionIndex - 1\n : maxIndex;\n }\n }\n\n private selectSuggestion(suggestion: SuggestionItem) {\n this.value = suggestion.text;\n this.inputElement.value = suggestion.text;\n this.ifxSuggestionSelected.emit(suggestion);\n this.ifxInput.emit(this.value);\n\n if (this.enableHistory) {\n // Always add selected suggestions to history since they are valid results\n this.addToHistory(suggestion.text);\n }\n\n this.hideDropdown();\n }\n\n private hideDropdown() {\n this.showDropdown = false;\n this.selectedSuggestionIndex = -1;\n this.isFocused = false;\n }\n\n // Show only history in dropdown (e.g. on focus without input)\n private showHistoryDropdown() {\n if (this.enableHistory && this.searchHistory.length > 0) {\n // Show only history entries\n const historySuggestions = this.searchHistory.map((term, index) => ({\n id: `history-${index}`,\n text: term,\n type: 'history' as const\n }));\n\n this.filteredSuggestions = historySuggestions.slice(0, this.maxSuggestions);\n this.selectedSuggestionIndex = -1;\n } else {\n this.filteredSuggestions = [];\n }\n }\n\n componentWillLoad() {\n this.loadSearchHistory();\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) {\n const framework = detectFramework()\n trackComponent('ifx-search-field', await framework)\n }\n }\n\n componentWillUpdate() {\n if (this.value !== \"\") {\n this.showDeleteIconInternalState = true;\n } else this.showDeleteIconInternalState = false;\n }\n\n render() {\n return (\n <div\n class='search-field'\n >\n <div\n class={this.getWrapperClassNames()}\n onClick={() => this.focusInput()}\n >\n <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n <input\n ref={(el) => (this.inputElement = el)}\n type=\"text\"\n autocomplete={this.autocomplete}\n onInput={() => this.handleInput()}\n onFocus={() => this.focusInput()}\n onBlur={() => this.blurInput()}\n placeholder={this.placeholder}\n disabled={this.disabled}\n maxlength={this.maxlength}\n value={this.value}\n role=\"combobox\"\n />\n {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n <ifx-icon\n icon=\"cRemove16\"\n class=\"delete-icon\"\n onClick={this.handleDelete}\n onKeyDown={(event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handleDelete();\n }\n }}>\n </ifx-icon>\n ) : null}\n </div>\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"search-field__wrapper-s\"\n : \"\";\n }\n\n getWrapperClassNames() {\n return classNames(\n `search-field__wrapper`,\n `search-field__wrapper ${this.getSizeClass()}`,\n `${this.isFocused ? 'focused' : \"\"}`,\n `${this.showDropdown ? 'dropdown-open' : \"\"}`,\n `${this.disabled ? 'disabled' : \"\"}`\n );\n }\n\n getSuggestionClassNames(index: number) {\n return classNames(\n 'suggestion-item',\n {\n 'suggestion-item--selected': index === this.selectedSuggestionIndex,\n 'suggestion-item--history': this.filteredSuggestions[index]?.type === 'history'\n }\n );\n }\n}\n"],"version":3}
|