@infineon/infineon-design-system-stencil 37.2.0--canary.1935.bcd753db2b5ee68950d2fca82ac243bd652f4fba.0 → 38.0.0--canary.1954.f29b2d8edb0fe3ea64fff93b4a103a880db2a074.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 +4 -4
- package/dist/cjs/ifx-search-field.cjs.entry.js +349 -12
- package/dist/cjs/ifx-search-field.cjs.entry.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 +6 -6
- 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-tag.cjs.entry.js +1 -1
- package/dist/cjs/ifx-templates-ui.cjs.entry.js +1 -1
- package/dist/cjs/ifx-textarea.cjs.entry.js +1 -1
- 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/cjs/infineon-design-system-stencil.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/search-field/search-field.css +114 -0
- package/dist/collection/components/search-field/search-field.js +724 -17
- package/dist/collection/components/search-field/search-field.js.map +1 -1
- package/dist/collection/components/search-field/search-field.stories.js +378 -2
- package/dist/collection/components/search-field/search-field.stories.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/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/tag/tag.js +1 -1
- 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 +4 -4
- package/dist/collection/components/textarea/textarea.js +1 -1
- 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-tag.js +1 -1
- 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 +1 -1
- 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-31696649.js → p-0218abcd.js} +5 -5
- package/dist/components/{p-31696649.js.map → p-0218abcd.js.map} +1 -1
- package/dist/components/{p-6a9e1fb6.js → p-122e79fc.js} +3 -3
- package/dist/components/{p-6a9e1fb6.js.map → p-122e79fc.js.map} +1 -1
- package/dist/components/{p-da273970.js → p-43438af8.js} +4 -4
- package/dist/components/{p-da273970.js.map → p-43438af8.js.map} +1 -1
- package/dist/components/{p-bfc8b82f.js → p-5853a3c8.js} +2 -2
- package/dist/components/{p-bfc8b82f.js.map → p-5853a3c8.js.map} +1 -1
- package/dist/components/{p-cb92983f.js → p-96237222.js} +3 -3
- package/dist/components/{p-cb92983f.js.map → p-96237222.js.map} +1 -1
- package/dist/components/{p-8cbf32a7.js → p-c601034d.js} +2 -2
- package/dist/components/{p-8cbf32a7.js.map → p-c601034d.js.map} +1 -1
- package/dist/components/p-c7297dfd.js +471 -0
- package/dist/components/p-c7297dfd.js.map +1 -0
- package/dist/components/{p-c5f7a0e2.js → p-f9c7ad2e.js} +5 -5
- package/dist/components/{p-c5f7a0e2.js.map → p-f9c7ad2e.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 +4 -4
- package/dist/esm/ifx-search-field.entry.js +349 -12
- 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 +6 -6
- 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-tag.entry.js +1 -1
- package/dist/esm/ifx-templates-ui.entry.js +1 -1
- package/dist/esm/ifx-textarea.entry.js +1 -1
- 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/esm/infineon-design-system-stencil.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/{p-7adee2dd.entry.js → p-0cbdafca.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-2d7159a9.entry.js → p-10ef115a.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-f544fb03.entry.js → p-1e7646b7.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-0c1c831c.entry.js → p-253ea47f.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-09a8d63d.entry.js → p-273a91b3.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-3d037fa4.entry.js → p-33b46161.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-a2a44fbe.entry.js → p-37be5d65.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-18a81f5f.entry.js → p-3bce1f22.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-e5091718.entry.js → p-3dd8bdf4.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-6c2698a3.entry.js → p-6ec8258a.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-71e34467.entry.js → p-706a8ead.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-7705c159.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-1e0d789f.entry.js → p-8e838717.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-4eda4ef3.entry.js → p-8eab207b.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-8ecae73b.entry.js → p-9be0905e.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-90efbef9.entry.js → p-9cfe025d.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-bca4f6c8.entry.js → p-b393c1e7.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-b83380f8.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-e172e81c.entry.js.map → p-b83380f8.entry.js.map} +1 -1
- package/dist/infineon-design-system-stencil/{p-04d8ea38.entry.js → p-caef0e47.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-36dcebde.entry.js → p-d3d6a562.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-d4b4107a.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-d4b4107a.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-c36df3ce.entry.js → p-d660ebea.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-59c3ac10.entry.js → p-d8a57524.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-84d4d6a1.entry.js → p-e196740d.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-2e931b0d.entry.js → p-e45d85fc.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-437973f5.entry.js → p-e61d3fc6.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-c7e86c7c.entry.js → p-ed30fb98.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-05d9aa1f.entry.js → p-f84af2e3.entry.js} +2 -2
- package/dist/types/components/search-field/search-field.d.ts +53 -2
- package/dist/types/components/search-field/search-field.stories.d.ts +191 -0
- package/dist/types/components.d.ts +42 -2
- package/package.json +1 -1
- package/dist/components/p-c6e5f94d.js +0 -115
- package/dist/components/p-c6e5f94d.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-c164c83b.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-c164c83b.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-e172e81c.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-e571c002.entry.js +0 -2
- /package/dist/infineon-design-system-stencil/{p-7adee2dd.entry.js.map → p-0cbdafca.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-2d7159a9.entry.js.map → p-10ef115a.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-f544fb03.entry.js.map → p-1e7646b7.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-0c1c831c.entry.js.map → p-253ea47f.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-09a8d63d.entry.js.map → p-273a91b3.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-3d037fa4.entry.js.map → p-33b46161.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-a2a44fbe.entry.js.map → p-37be5d65.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-18a81f5f.entry.js.map → p-3bce1f22.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-e5091718.entry.js.map → p-3dd8bdf4.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-6c2698a3.entry.js.map → p-6ec8258a.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-71e34467.entry.js.map → p-706a8ead.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-e571c002.entry.js.map → p-7705c159.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-1e0d789f.entry.js.map → p-8e838717.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-4eda4ef3.entry.js.map → p-8eab207b.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-8ecae73b.entry.js.map → p-9be0905e.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-90efbef9.entry.js.map → p-9cfe025d.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-bca4f6c8.entry.js.map → p-b393c1e7.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-04d8ea38.entry.js.map → p-caef0e47.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-36dcebde.entry.js.map → p-d3d6a562.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-c36df3ce.entry.js.map → p-d660ebea.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-59c3ac10.entry.js.map → p-d8a57524.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-84d4d6a1.entry.js.map → p-e196740d.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-2e931b0d.entry.js.map → p-e45d85fc.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-437973f5.entry.js.map → p-e61d3fc6.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-c7e86c7c.entry.js.map → p-ed30fb98.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-05d9aa1f.entry.js.map → p-f84af2e3.entry.js.map} +0 -0
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as e,c as i,h as s,g as t}from"./p-b7a462e5.js";import{t as c}from"./p-6ecb6a6f.js";import{i as o}from"./p-1ecafb97.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-block;user-select:none}.container{display:flex;flex-direction:row;align-items:center}.container.gap{gap:16px}.switch__checkbox-container{padding:4px;display:flex;align-items:center;position:relative;width:32px;height:16px;background-color:#FFFFFF;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.switch__checkbox-container:focus{outline:4px solid #0A8276;outline-offset:2px}.switch__checkbox-container:focus:not(:focus-visible){outline:none}.switch__checkbox-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.switch__checkbox-container.disabled{cursor:default;border-color:#BFBBBB}.switch__label-wrapper label:hover{cursor:pointer}.switch__label-wrapper.disabled{color:#BFBBBB}.switch__checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease, background-color 0.3s ease}.switch__checkbox-wrapper .switch.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}.switch__checkbox-wrapper .switch.checked{transform:translateX(16px);background-color:#FFFFFF}.switch__checkbox-wrapper .switch.checked.disabled{cursor:default}.switch__checkbox-container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.switch__checkbox-container.checked{background-color:#0A8276;border-color:#0A8276}.switch__checkbox-container.checked.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}';const a=r;const h=class{constructor(s){e(this,s);this.ifxChange=i(this,"ifxChange",7);if(s.$hostElement$["s-ei"]){this.internals=s.$hostElement$["s-ei"]}else{this.internals=s.$hostElement$.attachInternals();s.$hostElement$["s-ei"]=this.internals}this.checked=false;this.name="";this.disabled=false;this.internalChecked=false}async isChecked(){return this.internalChecked}componentWillLoad(){if(!o(this.el)){c("ifx-switch")}this.internalChecked=this.checked}toggleLabelGap(){const e=this.el.shadowRoot.querySelector("slot");const i=this.el.shadowRoot.querySelector(".container");if(e.assignedNodes().length){i.classList.add("gap")}else{i.classList.remove("gap")}}componentDidLoad(){this.toggleLabelGap()}valueChanged(e,i){if(e!==i){this.internalChecked=e}}toggleSwitch(){if(this.disabled)return;this.internalChecked=!this.internalChecked;if(this.internalChecked){if(this.value!==undefined){this.internals.setFormValue(this.value)}else{this.internals.setFormValue("on")}}else{this.internals.setFormValue(null)}this.ifxChange.emit(this.internalChecked)}handleKeyDown(e){if(this.disabled)return;if(e.key==="Enter"||e.key===" "){this.toggleSwitch()}}formResetCallback(){this.internals.setFormValue(null)}render(){return s("div",{key:"fc2c10c5b46ef723c11ccb0877e94705ef960ae6",class:"container",role:"switch","aria-checked":this.internalChecked?"true":"false","aria-label":this.name,onClick:()=>this.toggleSwitch(),onKeyDown:e=>this.handleKeyDown(e)},s("div",{key:"7a468693514c6ae458ed38d7f12e9faa36b8ebed",class:`switch__checkbox-container ${this.internalChecked?"checked":""} ${this.disabled?"disabled":""}`,tabindex:"0"},s("div",{key:"8e3eb0f6a8128e7e26a592b832e3eea317e06564",class:"switch__checkbox-wrapper"},s("input",{key:"241bd2d7d9d9571980535c0e43475469ce8333d8",type:"checkbox",hidden:true,name:this.name,disabled:this.disabled,checked:this.internalChecked,value:`${this.value}`}),s("div",{key:"91ed4ade33a9bb823675d9e93df3ed3bac2d728e",class:`switch ${this.internalChecked?"checked":""} ${this.disabled?"disabled":""}`}))),s("div",{key:"e93d2dee48ee1d10553466996fb9cc381ccf61fa",class:`switch__label-wrapper ${this.disabled?"disabled":""}`},s("label",{key:"4e23394b1fd1545bc92e43481b48049401b9d185",htmlFor:"switch"},s("slot",{key:"32039bb97847c691fac995381e2557956f8d410e",onSlotchange:()=>this.toggleLabelGap()}))))}static get formAssociated(){return true}get el(){return t(this)}static get watchers(){return{checked:["valueChanged"]}}};h.style=a;export{h as ifx_switch};
|
2
|
+
//# sourceMappingURL=p-b83380f8.entry.js.map
|
package/dist/infineon-design-system-stencil/{p-e172e81c.entry.js.map → p-b83380f8.entry.js.map}
RENAMED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["switchCss","IfxSwitchStyle0","Switch","constructor","hostRef","this","checked","name","disabled","internalChecked","isChecked","componentWillLoad","isNestedInIfxComponent","el","trackComponent","toggleLabelGap","slot","shadowRoot","querySelector","container","assignedNodes","length","classList","add","remove","componentDidLoad","valueChanged","newValue","oldValue","toggleSwitch","value","undefined","internals","setFormValue","ifxChange","emit","handleKeyDown","event","key","formResetCallback","render","h","class","role","onClick","onKeyDown","tabindex","type","hidden","htmlFor","onSlotchange"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n display: inline-block;\n user-select: none;\n}\n\n.container {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n &.gap {\n gap: tokens.$ifxSpace200;\n }\n}\n\n\n.switch__checkbox-container {\n padding: tokens.$ifxSpace50;\n display: flex;\n align-items: center;\n position: relative;\n // Subtracting padding size from both height and width\n width: (tokens.$ifxSpace500)-8px;\n height: 16px;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering500;\n border-radius: 20px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n outline: none;\n\n &:focus {\n outline: 4px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &.disabled {\n cursor: default;\n border-color: tokens.$ifxColorEngineering300;\n }\n\n\n}\n\n\n.switch__label-wrapper {\n\n & label { \n &:hover { \n cursor: pointer;\n }\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n\n.switch__checkbox-wrapper {\n\n .switch {\n // position: absolute;\n width: tokens.$ifxSpace200;\n height: tokens.$ifxSpace200;\n background-color: tokens.$ifxColorEngineering500;\n border-radius: 50%;\n transition: transform 0.3s ease, background-color 0.3s ease;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n }\n\n .switch.checked {\n transform: translateX(16px);\n background-color: tokens.$ifxColorBaseWhite;\n\n &.disabled {\n cursor: default;\n }\n\n }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n background-color: tokens.$ifxColorOcean500;\n border-color: tokens.$ifxColorOcean500;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n tag: 'ifx-switch',\n styleUrl: 'switch.scss',\n shadow: true,\n formAssociated: true\n})\nexport class Switch {\n @Prop() checked: boolean = false;\n @Prop() name: string = '';\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @State() internalChecked: boolean = false;\n\n @AttachInternals() internals: ElementInternals;\n\n @Element() el: HTMLIfxSwitchElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n\n componentWillLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n trackComponent('ifx-switch')\n }\n this.internalChecked = this.checked;\n }\n \n\n toggleLabelGap() {\n const slot = this.el.shadowRoot.querySelector('slot');\n const container = this.el.shadowRoot.querySelector('.container');\n if (slot.assignedNodes().length) {\n container.classList.add('gap')\n } else { \n container.classList.remove('gap')\n }\n }\n \n componentDidLoad() {\n this.toggleLabelGap();\n\n }\n \n @Watch('checked')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalChecked = newValue;\n }\n }\n\n toggleSwitch() {\n if (this.disabled) return;\n this.internalChecked = !this.internalChecked;\n\n if (this.internalChecked) {\n if (this.value !== undefined) {\n this.internals.setFormValue(this.value);\n } else {\n this.internals.setFormValue(\"on\")\n }\n } else {\n this.internals.setFormValue(null)\n }\n\n this.ifxChange.emit(this.internalChecked);\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return;\n // If the pressed key is either 'Enter' or 'Space' \n if (event.key === 'Enter' || event.key === ' ') {\n this.toggleSwitch();\n }\n }\n\n /**\n * Callback for form association.\n * Called whenever the form is reset.\n */\n formResetCallback() {\n this.internals.setFormValue(null);\n }\n\n render() {\n return (\n <div\n class=\"container\"\n role=\"switch\"\n aria-checked={this.internalChecked ? 'true' : 'false'}\n aria-label={this.name}\n onClick={() => this.toggleSwitch()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n {/* Checkbox */}\n <div \n class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n tabindex=\"0\"\n >\n <div class=\"switch__checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n checked={this.internalChecked}\n value={`${this.value}`} />\n <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n </div >\n\n {/* Label */}\n <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot onSlotchange={() => this.toggleLabelGap()} />\n </label>\n </div>\n </div>\n )\n\n }\n}\n"],"mappings":"
|
1
|
+
{"version":3,"names":["switchCss","IfxSwitchStyle0","Switch","constructor","hostRef","this","checked","name","disabled","internalChecked","isChecked","componentWillLoad","isNestedInIfxComponent","el","trackComponent","toggleLabelGap","slot","shadowRoot","querySelector","container","assignedNodes","length","classList","add","remove","componentDidLoad","valueChanged","newValue","oldValue","toggleSwitch","value","undefined","internals","setFormValue","ifxChange","emit","handleKeyDown","event","key","formResetCallback","render","h","class","role","onClick","onKeyDown","tabindex","type","hidden","htmlFor","onSlotchange"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n display: inline-block;\n user-select: none;\n}\n\n.container {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n &.gap {\n gap: tokens.$ifxSpace200;\n }\n}\n\n\n.switch__checkbox-container {\n padding: tokens.$ifxSpace50;\n display: flex;\n align-items: center;\n position: relative;\n // Subtracting padding size from both height and width\n width: (tokens.$ifxSpace500)-8px;\n height: 16px;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering500;\n border-radius: 20px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n outline: none;\n\n &:focus {\n outline: 4px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &.disabled {\n cursor: default;\n border-color: tokens.$ifxColorEngineering300;\n }\n\n\n}\n\n\n.switch__label-wrapper {\n\n & label { \n &:hover { \n cursor: pointer;\n }\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n\n.switch__checkbox-wrapper {\n\n .switch {\n // position: absolute;\n width: tokens.$ifxSpace200;\n height: tokens.$ifxSpace200;\n background-color: tokens.$ifxColorEngineering500;\n border-radius: 50%;\n transition: transform 0.3s ease, background-color 0.3s ease;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n }\n\n .switch.checked {\n transform: translateX(16px);\n background-color: tokens.$ifxColorBaseWhite;\n\n &.disabled {\n cursor: default;\n }\n\n }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n background-color: tokens.$ifxColorOcean500;\n border-color: tokens.$ifxColorOcean500;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n tag: 'ifx-switch',\n styleUrl: 'switch.scss',\n shadow: true,\n formAssociated: true\n})\nexport class Switch {\n @Prop() checked: boolean = false;\n @Prop() name: string = '';\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @State() internalChecked: boolean = false;\n\n @AttachInternals() internals: ElementInternals;\n\n @Element() el: HTMLIfxSwitchElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n\n componentWillLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n trackComponent('ifx-switch')\n }\n this.internalChecked = this.checked;\n }\n \n\n toggleLabelGap() {\n const slot = this.el.shadowRoot.querySelector('slot');\n const container = this.el.shadowRoot.querySelector('.container');\n if (slot.assignedNodes().length) {\n container.classList.add('gap')\n } else { \n container.classList.remove('gap')\n }\n }\n \n componentDidLoad() {\n this.toggleLabelGap();\n\n }\n \n @Watch('checked')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalChecked = newValue;\n }\n }\n\n toggleSwitch() {\n if (this.disabled) return;\n this.internalChecked = !this.internalChecked;\n\n if (this.internalChecked) {\n if (this.value !== undefined) {\n this.internals.setFormValue(this.value);\n } else {\n this.internals.setFormValue(\"on\")\n }\n } else {\n this.internals.setFormValue(null)\n }\n\n this.ifxChange.emit(this.internalChecked);\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return;\n // If the pressed key is either 'Enter' or 'Space' \n if (event.key === 'Enter' || event.key === ' ') {\n this.toggleSwitch();\n }\n }\n\n /**\n * Callback for form association.\n * Called whenever the form is reset.\n */\n formResetCallback() {\n this.internals.setFormValue(null);\n }\n\n render() {\n return (\n <div\n class=\"container\"\n role=\"switch\"\n aria-checked={this.internalChecked ? 'true' : 'false'}\n aria-label={this.name}\n onClick={() => this.toggleSwitch()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n {/* Checkbox */}\n <div \n class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n tabindex=\"0\"\n >\n <div class=\"switch__checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n checked={this.internalChecked}\n value={`${this.value}`} />\n <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n </div >\n\n {/* Label */}\n <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot onSlotchange={() => this.toggleLabelGap()} />\n </label>\n </div>\n </div>\n )\n\n }\n}\n"],"mappings":"iIAAA,MAAMA,EAAY,sgDAClB,MAAAC,EAAeD,E,MCUFE,EAAM,MANnB,WAAAC,CAAAC,G,+MAOUC,KAAAC,QAAmB,MACnBD,KAAAE,KAAe,GACfF,KAAAG,SAAoB,MAEnBH,KAAAI,gBAA2B,K,CASpC,eAAMC,GACJ,OAAOL,KAAKI,e,CAGd,iBAAAE,GACE,IAAIC,EAAuBP,KAAKQ,IAAK,CACnCC,EAAe,a,CAEjBT,KAAKI,gBAAkBJ,KAAKC,O,CAI9B,cAAAS,GACE,MAAMC,EAAOX,KAAKQ,GAAGI,WAAWC,cAAc,QAC9C,MAAMC,EAAYd,KAAKQ,GAAGI,WAAWC,cAAc,cACnD,GAAIF,EAAKI,gBAAgBC,OAAQ,CAC/BF,EAAUG,UAAUC,IAAI,M,KACnB,CACLJ,EAAUG,UAAUE,OAAO,M,EAI/B,gBAAAC,GACEpB,KAAKU,gB,CAKP,YAAAW,CAAaC,EAAmBC,GAC9B,GAAID,IAAaC,EAAU,CACzBvB,KAAKI,gBAAkBkB,C,EAI3B,YAAAE,GACE,GAAIxB,KAAKG,SAAU,OACnBH,KAAKI,iBAAmBJ,KAAKI,gBAE7B,GAAIJ,KAAKI,gBAAiB,CACxB,GAAIJ,KAAKyB,QAAUC,UAAW,CAC5B1B,KAAK2B,UAAUC,aAAa5B,KAAKyB,M,KAC5B,CACLzB,KAAK2B,UAAUC,aAAa,K,MAEzB,CACL5B,KAAK2B,UAAUC,aAAa,K,CAG9B5B,KAAK6B,UAAUC,KAAK9B,KAAKI,gB,CAG3B,aAAA2B,CAAcC,GACZ,GAAIhC,KAAKG,SAAU,OAEnB,GAAI6B,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CjC,KAAKwB,c,EAQT,iBAAAU,GACElC,KAAK2B,UAAUC,aAAa,K,CAG9B,MAAAO,GACE,OACEC,EAAA,OAAAH,IAAA,2CACEI,MAAM,YACNC,KAAK,SAAQ,eACCtC,KAAKI,gBAAkB,OAAS,QAAO,aACzCJ,KAAKE,KACjBqC,QAAS,IAAMvC,KAAKwB,eACpBgB,UAAYR,GAAUhC,KAAK+B,cAAcC,IAGzCI,EAAA,OAAAH,IAAA,2CACEI,MAAO,8BAA8BrC,KAAKI,gBAAkB,UAAY,MAAMJ,KAAKG,SAAW,WAAa,KAC3GsC,SAAS,KAETL,EAAA,OAAAH,IAAA,2CAAKI,MAAM,4BACTD,EAAA,SAAAH,IAAA,2CAAOS,KAAK,WAAWC,OAAM,KAC3BzC,KAAMF,KAAKE,KACXC,SAAUH,KAAKG,SACfF,QAASD,KAAKI,gBACdqB,MAAO,GAAGzB,KAAKyB,UACjBW,EAAA,OAAAH,IAAA,2CAAKI,MAAO,UAAUrC,KAAKI,gBAAkB,UAAY,MAAMJ,KAAKG,SAAW,WAAa,SAKhGiC,EAAA,OAAAH,IAAA,2CAAKI,MAAO,yBAAyBrC,KAAKG,SAAW,WAAa,MAChEiC,EAAA,SAAAH,IAAA,2CAAOW,QAAQ,UACbR,EAAA,QAAAH,IAAA,2CAAMY,aAAc,IAAM7C,KAAKU,qB","ignoreList":[]}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as t,c as e,h as i,a as s,g as r}from"./p-b7a462e5.js";const
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as t,c as e,h as i,a as s,g as r}from"./p-b7a462e5.js";const a=":host{display:flex}.filter-type-group{width:260px;align-items:flex-start;gap:8px}.filter-type-group>::slotted(*){margin-bottom:8px}";const c=a;const o=class{constructor(i){t(this,i);this.ifxSidebarFilterChange=e(this,"ifxSidebarFilterChange",7);this.selectedOptions=[];this.handleResetEvent=()=>{const t=this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');const e=t.assignedElements({flatten:true});e.forEach((t=>{const e=t.querySelectorAll("ifx-list");e.forEach((t=>{t.resetTrigger=!t.resetTrigger}))}));const i=this.el.shadowRoot.querySelector('slot[name="filter-search"]');const s=i.assignedElements({flatten:true});s.forEach((t=>{const e=t.querySelector("ifx-filter-search");const i=e.shadowRoot.querySelectorAll("ifx-search-field");if(i.length>0){i.forEach((t=>{t.value=""}))}}));this.selectedOptions=[];this.ifxSidebarFilterChange.emit(this.selectedOptions)};this.handleUpdateSidebarFilter=t=>{const{filterName:e}=t.detail;const i=this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');const s=i?i.assignedElements({flatten:true}):[];s.forEach((t=>{const i=t.querySelectorAll("ifx-list");i.forEach((t=>{if(t.getAttribute("name")===e){t.resetTrigger=!t.resetTrigger}}))}));const r=this.el.shadowRoot.querySelector('slot[name="filter-search"]');const a=r?r.assignedNodes({flatten:true}):[];a.forEach((t=>{if(t.nodeType===Node.ELEMENT_NODE){const e=t;const i=e.firstElementChild;if(i){i.setAttribute("value","");i.dispatchEvent(new CustomEvent("ifxInput",{bubbles:true,composed:true,detail:""}))}}}));const c=this.selectedOptions.map((t=>{if(t.filterGroupName===e){return Object.assign(Object.assign({},t),{selectedItems:[],value:""})}return t}));this.selectedOptions=c;this.ifxSidebarFilterChange.emit(this.selectedOptions)};this.handleAccordionChange=t=>{this.handleFilterChange(t)};this.handleSearchChange=t=>{this.handleFilterChange(t)};this.handleFilterChange=t=>{const e=[...this.selectedOptions];if(t.type==="ifxFilterSearchChange"){const{filterName:i,filterValue:s}=t.detail;const r=e.findIndex((t=>typeof t!=="string"&&t.filterGroupName===i));if(r!==-1){e[r].value=s}else{e.push({filterGroupName:i,value:s})}}else if(t.type==="ifxFilterAccordionChange"){const{filterGroupName:i,selectedItems:s}=t.detail;const r=e.findIndex((t=>t.filterGroupName===i));if(r!==-1){e[r]={filterGroupName:i,selectedItems:s}}else{e.push({filterGroupName:i,selectedItems:s})}}this.selectedOptions=e;this.ifxSidebarFilterChange.emit(this.selectedOptions)}}connectedCallback(){this.el.addEventListener("ifxFilterAccordionChange",this.handleAccordionChange);this.el.addEventListener("ifxFilterSearchChange",this.handleSearchChange);window.addEventListener("ifxResetFiltersEvent",this.handleResetEvent);window.addEventListener("ifxUpdateSidebarFilter",this.handleUpdateSidebarFilter)}componentWillUnload(){this.el.removeEventListener("ifxFilterAccordionChange",this.handleAccordionChange);this.el.removeEventListener("ifxFilterSearchChange",this.handleSearchChange);window.removeEventListener("ifxResetFiltersEvent",this.handleResetEvent)}render(){return i(s,{key:"1d0bf0c68fb42e0394e0aa9bb5e66660d3ef5cda"},i("div",{key:"215cd4cb99b4200d6a37c73267658f5dea619fff",class:"filter-type-group"},i("slot",{key:"e3a96b1a72ae653d2bcd51faf9c3a297bc541de3",name:"filter-search"}),i("slot",{key:"828ff0797c6f7ae7b3d6a2b6b0cdbde982b95cb1",name:"filter-accordion"})))}get el(){return r(this)}};o.style=c;export{o as ifx_filter_type_group};
|
2
|
+
//# sourceMappingURL=p-caef0e47.entry.js.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as t,c as e,h as i,a as s,g as a}from"./p-b7a462e5.js";const l=":host{display:block;width:100%}.search-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-start;margin-bottom:16px}.components-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-end;align-content:flex-end;flex-wrap:wrap;gap:16px}.filter-slot-wrapper{flex-grow:1;flex-basis:100%;max-width:100%}@media (max-width: 1024px){.more-filters-wrapper{order:3;width:100%;display:flex;justify-content:center;padding-top:16px;}}@media (min-width: 720px) and (max-width: 1024px){.filter-slot-wrapper{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}}@media (min-width: 1025px){.filter-slot-wrapper{flex-basis:auto;max-width:200px}::slotted([slot=filter-search]){max-width:828px}}::slotted([slot=filter-search]){flex-grow:1;flex-basis:100%;width:100%}";const r=l;const
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as t,c as e,h as i,a as s,g as a}from"./p-b7a462e5.js";const l=":host{display:block;width:100%}.search-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-start;margin-bottom:16px}.components-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-end;align-content:flex-end;flex-wrap:wrap;gap:16px}.filter-slot-wrapper{flex-grow:1;flex-basis:100%;max-width:100%}@media (max-width: 1024px){.more-filters-wrapper{order:3;width:100%;display:flex;justify-content:center;padding-top:16px;}}@media (min-width: 720px) and (max-width: 1024px){.filter-slot-wrapper{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}}@media (min-width: 1025px){.filter-slot-wrapper{flex-basis:auto;max-width:200px}::slotted([slot=filter-search]){max-width:828px}}::slotted([slot=filter-search]){flex-grow:1;flex-basis:100%;width:100%}";const r=l;const n=class{constructor(i){t(this,i);this.ifxTopbarFilterChange=e(this,"ifxTopbarFilterChange",7);this.selectedOptions=[];this.showAllFilters=false;this.maxShownFilters=4;this.showMoreFiltersButton=true;this.handleMoreFiltersClick=()=>{this.showAllFilters=true;this.updateVisibleSlots()};this.handleResetEvent=()=>{var t;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector('slot[name="filter-search"]');if(e instanceof HTMLSlotElement){const t=e.assignedElements({flatten:true});t.forEach((t=>{const e=t.querySelector("ifx-filter-search");const i=e.shadowRoot.querySelectorAll("ifx-search-field");if(i.length>0){i.forEach((t=>{t.value=""}))}}))}this.selectedOptions=[];this.ifxTopbarFilterChange.emit(this.selectedOptions)};this.handleSearchChange=t=>{this.handleTopbarFilterChange(t)};this.handleFilterSelect=t=>{this.handleTopbarFilterChange(t)};this.handleTopbarFilterChange=t=>{const e=[...this.selectedOptions];if(t.type==="ifxFilterSearchChange"){const{filterName:i,filterValue:s}=t.detail;const a=e.findIndex((t=>t.filterName===i));if(a!==-1){e[a].filterValues=[s]}else{e.push({filterName:i,filterValues:[s],type:"text"})}}else if(t.type==="ifxFilterSelect"){const{filterName:i,filterValues:s,type:a}=t.detail;const l=e.findIndex((t=>t.filterName===i));if(l!==-1){e[l].filterValues=s;e[l].type=a}else{e.push({filterName:i,filterValues:s,type:a})}}this.selectedOptions=e;this.ifxTopbarFilterChange.emit(this.selectedOptions)}}connectedCallback(){this.el.addEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.addEventListener("ifxFilterSearchChange",this.handleSearchChange);window.addEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentWillUnload(){this.el.removeEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.removeEventListener("ifxFilterSearchChange",this.handleSearchChange);window.removeEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentDidLoad(){this.updateVisibleSlots()}updateVisibleSlots(){this.visibleSlots=this.showAllFilters?Number.MAX_SAFE_INTEGER:this.maxShownFilters}render(){const t=Math.max(0,this.visibleSlots);const e=this.el.querySelectorAll("ifx-set-filter").length;const a=Math.min(t,e,Number.MAX_SAFE_INTEGER);const l=Array.from({length:a},((t,e)=>i("div",{class:"filter-slot-wrapper"},i("slot",{name:`filter-component-${e+1}`}))));return i(s,{key:"390d4edb8b2681c33017c1245d3b47c254086065"},i("div",{key:"631db42c0db2e69c53a35a3a4878863215466783",class:"search-container"},i("slot",{key:"d3b7e942185a37da9af701ede28b22aabca08812",name:"filter-search"})," "),i("div",{key:"599234808c4076a085f19bbe489a5a6746bfcda9",class:"components-container"},l.length>0?l:i("slot",{name:"filter-component"}),this.showMoreFiltersButton&&!this.showAllFilters&&i("div",{key:"6ceade00712115f448158081ad7ec082d9c6c416",class:"more-filters-wrapper",onClick:this.handleMoreFiltersClick},i("ifx-button",{key:"d1dbd53565e30c526e75ceebff18ecaf9355997a",type:"button",disabled:false,variant:"tertiary",size:"m",target:"_blank",theme:"default","full-width":"false"},i("ifx-icon",{key:"43ec4bbcd0ac7b76534aafe26af8b330627d2f32",icon:"filter-16"}),"More filters"))))}get el(){return a(this)}};n.style=r;export{n as ifx_filter_bar};
|
2
|
+
//# sourceMappingURL=p-d3d6a562.entry.js.map
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as s,c as i,h as t,g as e}from"./p-b7a462e5.js";import{t as n}from"./p-6ecb6a6f.js";import{i as o}from"./p-1ecafb97.js";import{c as r}from"./p-5cdc6210.js";const h=':root {\n --ifx-font-family: "Source Sans 3", "Arial, sans-serif";\n}\n\n:host {\n display: flex;\n}\n\n.search-field {\n box-sizing: border-box;\n background-color: #FFFFFF;\n width: 100%;\n font-family: var(--ifx-font-family);\n position: relative;\n}\n.search-field .search-field__wrapper {\n box-sizing: border-box;\n height: 40px;\n display: flex;\n align-items: center;\n border: 1px solid #8D8786;\n border-radius: 1px;\n padding: 8px 16px;\n gap: 12px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n position: relative;\n width: 100%;\n outline: none;\n color: #8D8786;\n}\n.search-field .search-field__wrapper.focused {\n border: 1px solid #0A8276;\n}\n.search-field .search-field__wrapper.focused ifx-icon {\n color: #575352;\n}\n.search-field .search-field__wrapper.search-field__wrapper-s {\n height: 36px;\n}\n.search-field .search-field__wrapper:hover:not(.focused, :focus) {\n border: 1px solid #3C3A39;\n}\n.search-field .search-field__wrapper:focus {\n outline: none;\n border: 1px solid #0A8276;\n}\n.search-field .search-field__wrapper .delete-icon {\n right: 12px;\n cursor: pointer;\n}\n.search-field .search-field__wrapper input[type=text] {\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n color: #8D8786;\n border: none;\n width: 100%;\n outline: none;\n height: 16px;\n}\n.search-field .search-field__wrapper input[type=text]:focus {\n outline: none;\n color: #1d1d1d;\n}\n.search-field .search-field__wrapper input[type=text]:disabled {\n background-color: #EEEDED;\n}\n.search-field .search-field__wrapper:has(input[disabled]) {\n background-color: #EEEDED;\n}\n.search-field .suggestions-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: #FFFFFF;\n margin-top: 4px;\n border: 1px solid #EEEDED;\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;\n}\n.search-field .suggestions-dropdown .suggestions-header {\n font-family: Source Sans 3;\n font-size: 0.8125rem;\n font-weight: 600;\n line-height: 1.25rem;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: #575352;\n border-bottom: 1px solid #EEEDED;\n padding: 12px 16px;\n}\n.search-field .suggestions-dropdown .suggestion-item {\n padding: 12px 16px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.search-field .suggestions-dropdown .suggestion-item:last-child {\n border-bottom: none;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover, .search-field .suggestions-dropdown .suggestion-item--selected {\n background-color: #EEEDED;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon {\n color: #575352;\n flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon--history {\n color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n flex: 1;\n display: flex;\n align-items: center;\n min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex-shrink: 1;\n min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n color: #8D8786;\n flex-shrink: 0;\n white-space: nowrap;\n margin-left: 2px;\n font-weight: 600;\n font-size: 0.75rem;\n}\n@container (max-width: 320px) {\n .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n flex-direction: column;\n align-items: flex-start;\n }\n .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n width: 100%;\n max-width: 100%;\n }\n .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .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;\n }\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-count {\n color: #8D8786;\n margin-left: auto;\n flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .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: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon:hover {\n color: #3C3A39;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover .suggestion-delete-icon {\n opacity: 1;\n visibility: visible;\n}\n.search-field .search-field__wrapper.dropdown-open {\n border-radius: 1px 1px 0 0;\n border-color: #0A8276;\n}';const a=h;const c=class{constructor(t){s(this,t);this.ifxInput=i(this,"ifxInput",7);this.ifxSuggestionRequested=i(this,"ifxSuggestionRequested",7);this.ifxSuggestionSelected=i(this,"ifxSuggestionSelected",7);this.ifxFocus=i(this,"ifxFocus",7);this.ifxBlur=i(this,"ifxBlur",7);this.value="";this.suggestions=[];this.showSuggestions=false;this.maxSuggestions=10;this.maxHistoryItems=5;this.enableHistory=true;this.historyKey="ifx-search-history";this.historyHeaderText="Recent Searches";this.ariaLabel="Search field";this.deleteIconAriaLabel="Clear search";this.historyDeleteAriaLabel="Remove from history";this.dropdownAriaLabel="Search suggestions and history";this.suggestionAriaLabel="Search suggestion";this.historyItemAriaLabel="Search history item";this.showDropdown=false;this.filteredSuggestions=[];this.selectedSuggestionIndex=-1;this.searchHistory=[];this.showDeleteIcon=false;this.showDeleteIconInternalState=false;this.disabled=false;this.size="l";this.isFocused=false;this.placeholder="Search...";this.autocomplete="off";this.maxlength=null;this.focusEmitted=false;this.handleInput=()=>{const s=this.inputElement.value;this.value=s;this.ifxInput.emit(this.value);if(this.showSuggestions){this.showDropdown=true;this.selectedSuggestionIndex=-1;this.requestSuggestions(s)}};this.handleDelete=()=>{this.inputElement.value="";this.value="";this.ifxInput.emit(this.value);this.hideDropdown()};this.handleSearch=()=>{if(this.value.trim()&&this.enableHistory){if(this.filteredSuggestions.length>0){this.addToHistory(this.value)}}this.hideDropdown()};this.handleHistoryDelete=(s,i)=>{s.stopPropagation();this.removeFromHistory(i)}}componentDidLoad(){this.loadSearchHistory()}handleOutsideClick(s){const i=s.composedPath();if(!i.includes(this.inputElement)&&!i.includes(this.dropdownElement)){this.hideDropdown()}}handleKeyDown(s){if(!this.showDropdown)return;switch(s.key){case"ArrowDown":s.preventDefault();this.navigateSuggestions(1);break;case"ArrowUp":s.preventDefault();this.navigateSuggestions(-1);break;case"Enter":s.preventDefault();if(this.selectedSuggestionIndex>=0){this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex])}else{this.handleSearch()}break;case"Escape":this.hideDropdown();break}}valueWatcher(s){if(this.inputElement&&s!==this.inputElement.value){this.inputElement.value=s}this.updateSuggestions()}suggestionsWatcher(){this.updateSuggestions()}focusInput(){if(document.activeElement!==this.inputElement){this.inputElement.focus()}if(!this.focusEmitted){this.focusEmitted=true;this.isFocused=true;this.ifxFocus.emit()}if(this.showSuggestions){if(this.value.length===0){this.showHistoryDropdown();this.showDropdown=this.enableHistory&&this.searchHistory.length>0}else{this.updateSuggestions();this.showDropdown=this.filteredSuggestions.length>0}}}blurInput(){setTimeout((()=>{this.isFocused=false;this.focusEmitted=false;this.ifxBlur.emit()}),150)}loadSearchHistory(){if(this.enableHistory&&typeof localStorage!=="undefined"){const s=localStorage.getItem(this.historyKey);this.searchHistory=s?JSON.parse(s):[];this.updateSuggestions();if(this.value.length===0&&this.searchHistory.length===0){this.showDropdown=false}}}clearSearchHistory(){if(this.enableHistory&&typeof localStorage!=="undefined"){localStorage.removeItem(this.historyKey);this.searchHistory=[];this.filteredSuggestions=[];this.selectedSuggestionIndex=-1;this.showDropdown=false;this.updateSuggestions()}}addToHistory(s){if(!this.enableHistory||!s.trim())return;const i=[...this.searchHistory];const t=i.indexOf(s);if(t>-1){i.splice(t,1)}i.unshift(s);this.searchHistory=i.slice(0,this.maxHistoryItems);if(typeof localStorage!=="undefined"){localStorage.setItem(this.historyKey,JSON.stringify(this.searchHistory))}}removeFromHistory(s){if(!this.enableHistory)return;const i=[...this.searchHistory];const t=i.indexOf(s);if(t>-1){i.splice(t,1);this.searchHistory=i;if(typeof localStorage!=="undefined"){localStorage.setItem(this.historyKey,JSON.stringify(this.searchHistory))}this.updateSuggestions();if(this.searchHistory.length===0&&this.value.length===0){this.showDropdown=false}}}requestSuggestions(s){this.ifxSuggestionRequested.emit(s);this.updateSuggestions()}updateSuggestions(){const s=this.value.toLowerCase();let i=[];if(s.length>0){if(this.suggestions&&this.suggestions.length>0){const t=this.suggestions.filter((i=>i.text.toLowerCase().includes(s)));i=[...i,...t]}if(this.enableHistory&&this.searchHistory.length>0){const t=this.searchHistory.filter((i=>i.toLowerCase().includes(s))).map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));i=[...i,...t]}i.sort(((i,t)=>{const e=i.text.toLowerCase();const n=t.text.toLowerCase();if(e===s&&n!==s)return-1;if(n===s&&e!==s)return 1;const o=e.startsWith(s);const r=n.startsWith(s);if(o&&!r)return-1;if(r&&!o)return 1;if(i.type==="suggestion"&&t.type==="history")return-1;if(i.type==="history"&&t.type==="suggestion")return 1;return e.localeCompare(n)}))}else{if(this.enableHistory&&this.searchHistory.length>0){const s=this.searchHistory.map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));i=s}}const t=i.reduce(((s,i)=>{const t=s.findIndex((s=>s.text.toLowerCase()===i.text.toLowerCase()&&s.scope===i.scope));if(t===-1){s.push(i)}else{if(i.type==="history"&&s[t].type!=="history"){s[t]=i}}return s}),[]);this.filteredSuggestions=t.slice(0,this.maxSuggestions);this.selectedSuggestionIndex=-1}navigateSuggestions(s){const i=this.filteredSuggestions.length-1;if(s>0){this.selectedSuggestionIndex=this.selectedSuggestionIndex<i?this.selectedSuggestionIndex+1:0}else{this.selectedSuggestionIndex=this.selectedSuggestionIndex>0?this.selectedSuggestionIndex-1:i}}selectSuggestion(s){this.value=s.text;this.inputElement.value=s.text;this.ifxSuggestionSelected.emit(s);this.ifxInput.emit(this.value);if(this.enableHistory){this.addToHistory(s.text)}this.hideDropdown()}hideDropdown(){this.showDropdown=false;this.selectedSuggestionIndex=-1;this.isFocused=false}showHistoryDropdown(){if(this.enableHistory&&this.searchHistory.length>0){const s=this.searchHistory.map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));this.filteredSuggestions=s.slice(0,this.maxSuggestions);this.selectedSuggestionIndex=-1}else{this.filteredSuggestions=[]}}isShowingOnlyHistory(){return this.value.length===0&&this.filteredSuggestions.length>0&&this.filteredSuggestions.every((s=>s.type==="history"))}renderHighlightedText(s,i){if(!i||i.length===0){return s}const e=s.toLowerCase();const n=i.toLowerCase();const o=e.indexOf(n);if(o===-1){return s}const r=s.substring(0,o);const h=s.substring(o,o+i.length);const a=s.substring(o+i.length);return[r,t("strong",null,h),a]}componentWillLoad(){if(!o(this.el)){n("ifx-search-field")}}componentWillUpdate(){if(this.value!==""){this.showDeleteIconInternalState=true}else this.showDeleteIconInternalState=false}render(){return t("div",{key:"b7cf249b85fdd3b8de6e145e026031b55d689758","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledBy,"aria-describedby":this.ariaDescribedBy,"aria-disabled":this.disabled,"aria-value":this.value,class:"search-field"},t("div",{key:"0e19cb8ecf2bb3c82e0cc835aa66d2c144aac207",class:this.getWrapperClassNames(),tabindex:1,onClick:()=>this.focusInput()},t("ifx-icon",{key:"2c8f71752ac2c7aa1e520b5de67a31025e66ae5d",icon:"search-16",class:"search-icon"}),t("input",{key:"f9773fac1622f99251c7ed6c4662170bf7f94460",ref:s=>this.inputElement=s,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","aria-expanded":this.showDropdown,"aria-autocomplete":"list","aria-haspopup":"listbox","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledBy,"aria-describedby":this.ariaDescribedBy,"aria-owns":this.showDropdown?"suggestions-dropdown":undefined,"aria-activedescendant":this.selectedSuggestionIndex>=0?`suggestion-${this.selectedSuggestionIndex}`:undefined}),this.showDeleteIcon&&this.showDeleteIconInternalState?t("ifx-icon",{icon:"cRemove16",class:"delete-icon",onClick:this.handleDelete,role:"button",tabindex:"0","aria-label":this.deleteIconAriaLabel,onKeyDown:s=>{if(s.key==="Enter"||s.key===" "){s.preventDefault();this.handleDelete()}}}):null),this.showDropdown&&this.filteredSuggestions.length>0&&t("div",{key:"5c83b7c9655ae7bed7e56c366d77fa400d02a080",ref:s=>this.dropdownElement=s,id:"suggestions-dropdown",class:"suggestions-dropdown",role:"listbox","aria-label":this.dropdownAriaLabel},this.isShowingOnlyHistory()&&t("div",{key:"a053469803379f16fff04c053035095bffb7cbdc",class:"suggestions-header"},this.historyHeaderText),this.filteredSuggestions.map(((s,i)=>t("div",{key:s.id,id:`suggestion-${i}`,class:this.getSuggestionClassNames(i),role:"option","aria-selected":i===this.selectedSuggestionIndex,"aria-label":`${s.type==="history"?this.historyItemAriaLabel:this.suggestionAriaLabel}: ${s.text}${s.scope?`, ${s.scope}`:""}${s.resultCount?`, ${s.resultCount} results`:""}`,onClick:()=>this.selectSuggestion(s),onMouseEnter:()=>this.selectedSuggestionIndex=i},t("div",{class:"suggestion-content"},s.type==="history"&&t("ifx-icon",{icon:"history-16",class:"suggestion-icon suggestion-icon--history"}),s.type==="suggestion"&&t("ifx-icon",{icon:"search-16",class:"suggestion-icon suggestion-icon--suggestion"}),t("span",{class:"suggestion-text"},t("span",{class:"suggestion-main-text"},this.renderHighlightedText(s.text,this.value)),s.scope&&t("span",{class:"suggestion-scope"},"– ",s.scope)),s.resultCount!==undefined&&s.scope&&t("span",{class:"suggestion-count"},s.resultCount),s.type==="history"&&t("ifx-icon",{icon:"cross16",class:"suggestion-delete-icon",role:"button",tabindex:"0","aria-label":`${this.historyDeleteAriaLabel}: ${s.text}`,onClick:i=>this.handleHistoryDelete(i,s.text),onKeyDown:i=>{if(i.key==="Enter"||i.key===" "){i.preventDefault();this.handleHistoryDelete(i,s.text)}}})))))))}getSizeClass(){return`${this.size}`==="s"?"search-field__wrapper-s":""}getWrapperClassNames(){return r(`search-field__wrapper`,`search-field__wrapper ${this.getSizeClass()}`,`${this.isFocused?"focused":""}`,`${this.showDropdown?"dropdown-open":""}`)}getSuggestionClassNames(s){var i;return r("suggestion-item",{"suggestion-item--selected":s===this.selectedSuggestionIndex,"suggestion-item--history":((i=this.filteredSuggestions[s])===null||i===void 0?void 0:i.type)==="history"})}get el(){return e(this)}static get watchers(){return{value:["valueWatcher"],suggestions:["suggestionsWatcher"]}}};c.style=a;export{c as ifx_search_field};
|
2
|
+
//# sourceMappingURL=p-d4b4107a.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["searchFieldCss","IfxSearchFieldStyle0","SearchField","constructor","hostRef","this","value","suggestions","showSuggestions","maxSuggestions","maxHistoryItems","enableHistory","historyKey","historyHeaderText","ariaLabel","deleteIconAriaLabel","historyDeleteAriaLabel","dropdownAriaLabel","suggestionAriaLabel","historyItemAriaLabel","showDropdown","filteredSuggestions","selectedSuggestionIndex","searchHistory","showDeleteIcon","showDeleteIconInternalState","disabled","size","isFocused","placeholder","autocomplete","maxlength","focusEmitted","handleInput","query","inputElement","ifxInput","emit","requestSuggestions","handleDelete","hideDropdown","handleSearch","trim","length","addToHistory","handleHistoryDelete","event","term","stopPropagation","removeFromHistory","componentDidLoad","loadSearchHistory","handleOutsideClick","path","composedPath","includes","dropdownElement","handleKeyDown","key","preventDefault","navigateSuggestions","selectSuggestion","valueWatcher","newValue","updateSuggestions","suggestionsWatcher","focusInput","document","activeElement","focus","ifxFocus","showHistoryDropdown","blurInput","setTimeout","ifxBlur","localStorage","stored","getItem","JSON","parse","clearSearchHistory","removeItem","history","existingIndex","indexOf","splice","unshift","slice","setItem","stringify","index","ifxSuggestionRequested","toLowerCase","filteredExternal","filter","s","text","filteredHistory","map","id","type","sort","a","b","aText","bText","aStartsWith","startsWith","bStartsWith","localeCompare","historySuggestions","uniqueSuggestions","reduce","unique","current","findIndex","item","scope","push","direction","maxIndex","suggestion","ifxSuggestionSelected","isShowingOnlyHistory","every","renderHighlightedText","lowerText","lowerQuery","before","substring","match","after","h","componentWillLoad","isNestedInIfxComponent","el","trackComponent","componentWillUpdate","render","ariaLabelledBy","ariaDescribedBy","class","getWrapperClassNames","tabindex","onClick","icon","ref","onInput","onFocus","onBlur","role","undefined","onKeyDown","getSuggestionClassNames","resultCount","onMouseEnter","getSizeClass","classNames","_a"],"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 color: tokens.$ifxColorEngineering400;\n\n &.focused {\n border: 1px solid tokens.$ifxColorOcean500;\n\n & ifx-icon {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.search-field__wrapper-s {\n height: 36px;\n }\n\n\n &:hover:not(.focused, :focus) {\n border: 1px solid #3C3A39;\n }\n\n &:focus {\n outline: none;\n border: 1px solid #0A8276;\n }\n\n\n .delete-icon {\n right: 12px;\n cursor: pointer;\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-color: #EEEDED;\n }\n }\n\n &:has(input[disabled]) {\n background-color: #EEEDED;\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.10);\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 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 = 'Search field';\n @Prop() ariaLabelledBy?: string;\n @Prop() ariaDescribedBy?: string;\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 componentDidLoad() {\n this.loadSearchHistory();\n }\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 this.inputElement.value = '';\n this.value = \"\";\n this.ifxInput.emit(this.value);\n this.hideDropdown();\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 // Don't call focus() if the input is already focused to prevent unnecessary operations\n if (document.activeElement !== this.inputElement) {\n this.inputElement.focus();\n }\n\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 if(!isNestedInIfxComponent(this.el)) {\n trackComponent('ifx-search-field')\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 aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledBy}\n aria-describedby={this.ariaDescribedBy}\n aria-disabled={this.disabled}\n aria-value={this.value}\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={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 aria-expanded={this.showDropdown}\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledBy}\n aria-describedby={this.ariaDescribedBy}\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}\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}\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 <div\n key={suggestion.id}\n id={`suggestion-${index}`}\n class={this.getSuggestionClassNames(index)}\n role=\"option\"\n aria-selected={index === this.selectedSuggestionIndex}\n aria-label={`${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`}\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(suggestion.text, this.value)}\n </span>\n {suggestion.scope && (\n <span class=\"suggestion-scope\">– {suggestion.scope}</span>\n )}\n </span>\n\n {suggestion.resultCount !== undefined && suggestion.scope && (\n <span class=\"suggestion-count\">{suggestion.resultCount}</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}: ${suggestion.text}`}\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 </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 );\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"],"mappings":"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","ignoreList":[]}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as t,c as e,h as i,g as s,a as o}from"./p-b7a462e5.js";import{t as n}from"./p-6ecb6a6f.js";import{i as l}from"./p-1ecafb97.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.ifx-multiselect-container{position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{background-color:#FFFFFF;box-sizing:border-box;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;width:100%;font-weight:400;font-style:normal;height:40px;line-height:24px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-multiselect-container .ifx-multiselect-wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;display:flex;align-items:center;gap:8px}.ifx-multiselect-container .ifx-multiselect-icon-container .ifx-multiselect-icon-container{display:flex}.ifx-multiselect-container .ifx-multiselect-icon-container .icon-wrapper{display:flex;align-items:center;transition:transform 0.2s ease-in-out}.ifx-multiselect-container .ifx-multiselect-icon-container .icon-wrapper--open{transform:rotate(180deg)}.ifx-multiselect-container .ifx-clear-button{display:flex;align-items:center}.ifx-multiselect-container .ifx-clear-button.hide{display:none}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{box-sizing:border-box;position:absolute;top:100%;left:0;width:100%;margin-top:4px;border:1px solid #EEEDED;background-color:#fff;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);max-height:300px;z-index:1000;display:flex;flex-direction:column}.ifx-multiselect-dropdown-functions{padding:12px 16px;border-bottom:1px solid #EEEDED;flex-shrink:0}.ifx-multiselect-dropdown-search{margin-bottom:12px}.ifx-multiselect-dropdown-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}.ifx-multiselect-dropdown-controls .select-all-wrapper{display:flex}.ifx-multiselect-dropdown-controls .expand-collapse-controls{display:flex;gap:12px}.ifx-multiselect-dropdown-controls .control-item{font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-dropdown-controls .control-item:hover{color:#0A8276}.ifx-multiselect-dropdown-controls .control-item:active{color:#08665C}.ifx-multiselect-dropdown-controls .control-item:focus{outline:none}.ifx-multiselect-dropdown-controls .control-item:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.ifx-multiselect-options{flex:1;overflow-y:auto;padding-top:12px;padding-bottom:12px}.ifx-multiselect-options.show-no-results .ifx-multiselect-no-results{display:block}.ifx-multiselect-no-results{padding-left:16px;padding-right:16px;display:none}';const c=r;function a(t,e){let i;return function s(...o){const n=()=>{clearTimeout(i);t(...o)};clearTimeout(i);i=setTimeout(n,e)}}const h=class{constructor(i){t(this,i);this.ifxSelect=e(this,"ifxSelect",7);this.ifxOpen=e(this,"ifxOpen",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.disabled=false;this.error=false;this.errorMessage="Error";this.label="";this.placeholder="";this.showSearch=true;this.showSelectAll=true;this.showClearButton=true;this.showExpandCollapse=true;this.noResultsMessage="No results found.";this.showNoResultsMessage=true;this.searchPlaceholder="Search";this.selectAllLabel="Select all";this.expandLabel="Expand";this.collapseLabel="Collapse";this.ariaMultiSelectLabel="Multi-select dropdown";this.ariaMultiSelectLabelledBy="";this.ariaMultiSelectDescribedBy="";this.ariaSearchLabel="Search options";this.ariaClearLabel="Clear all selections";this.ariaToggleLabel="Toggle dropdown";this.ariaSelectAllLabel="Select all options";this.ariaExpandAllLabel="Expand all categories";this.ariaCollapseAllLabel="Collapse all categories";this.internalError=false;this.persistentSelectedOptions=[];this.dropdownOpen=false;this.searchTerm="";this.handleSearch=a((t=>{const e=t.value.toLowerCase();const i=e!=="";this.searchTerm=e;const s=this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper");if(s){if(i){s.classList.remove("active")}else{const t=this.el.shadowRoot.querySelector("ifx-search-field");const e=t&&t.matches(":focus-within");if(!e){s.classList.add("active")}}}const o=this.el.shadowRoot.querySelector(".ifx-multiselect-options");if(o){if(i){o.classList.add("has-search-filter")}else{o.classList.remove("has-search-filter")}}requestAnimationFrame((()=>{const t=this.el.querySelectorAll("ifx-multiselect-option");t.forEach((t=>{const s=new CustomEvent("ifx-search-filter",{detail:{searchTerm:e,isActive:i}});t.dispatchEvent(s)}));if(i){setTimeout((()=>{const t=this.el.querySelectorAll("ifx-multiselect-option");let e=0;t.forEach((t=>{const i=window.getComputedStyle(t);const s=t.getBoundingClientRect();if(i.display!=="none"&&i.visibility!=="hidden"&&i.opacity!=="0"&&s.height>0){e++}}));const i=this.el.shadowRoot.querySelector(".ifx-multiselect-options");if(i){if(e===0){i.classList.add("show-no-results")}else{i.classList.remove("show-no-results")}}}),200)}else{const t=this.el.shadowRoot.querySelector(".ifx-multiselect-options");if(t){t.classList.remove("show-no-results")}}}))}),150);this.pendingSelectionUpdate=false;this.handleDocumentClick=t=>{const e=t.composedPath();if(!e.includes(this.dropdownElement)){this.dropdownOpen=false;document.removeEventListener("click",this.handleDocumentClick);this.resetSearch();this.ifxOpen.emit(this.dropdownOpen)}}}parseChildOptions(){const t=[];const e=Array.from(this.el.children);e.forEach(((e,i)=>{if(e.tagName==="IFX-MULTISELECT-OPTION"){const s=this.parseOptionElement(e,i);if(s){t.push(s)}}}));return t}parseOptionElement(t,e){const i=t.getAttribute("value")||`option-${e}`;const s=t.hasAttribute("selected");const o=t.hasAttribute("disabled");const n=t.hasAttribute("indeterminate");const l={value:i,selected:s,disabled:o,indeterminate:n};const r=Array.from(t.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION")).map(((t,e)=>this.parseOptionElement(t,e))).filter((t=>t!==null));if(r.length>0){l.children=r}return l}loadInitialOptions(){this.internalError=this.error;this.internalErrorMessage=this.errorMessage;const t=this.parseChildOptions();const e=this.collectSelectedOptions(t);const i=e.filter((t=>!this.persistentSelectedOptions.some((e=>e.value==t.value))));this.persistentSelectedOptions=[...this.persistentSelectedOptions,...i]}collectSelectedOptions(t){let e=[];for(const i of t){if(i.selected){if(i.children&&i.children.length>0){e=e.concat(this.collectLeafOptions(i.children))}else{if(!e.some((t=>t.value===i.value))){e.push(i)}}}else{if(i.children&&i.children.length>0){e=e.concat(this.collectSelectedOptions(i.children))}}}return e}collectLeafOptions(t){let e=[];for(const i of t){if(i.children&&i.children.length>0){e=e.concat(this.collectLeafOptions(i.children))}else{e.push(i)}}return e}handleSearchFocus(t){const e=this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper");if(e){if(t||this.searchTerm!==""){e.classList.remove("active")}else{e.classList.add("active")}}}positionDropdown(){var t;const e=(t=this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper"))===null||t===void 0?void 0:t.getBoundingClientRect();const i=window.innerHeight-e.bottom;const s=e.top;if(s>i&&e.height>i||e.bottom>window.innerHeight){this.dropdownFlipped=true}else{this.dropdownFlipped=false}}updateSlotBasedSelections(t=false){const e=this.el.querySelectorAll("ifx-multiselect-option");const i=[];e.forEach((t=>{const e=t["__stencil_instance"];if(e&&e.selected&&!e.hasChildren){i.push({value:e.value,selected:true,disabled:e.disabled})}}));this.persistentSelectedOptions=i;if(t){this.ifxSelect.emit(this.persistentSelectedOptions)}}updateInitialParentStates(){const t=this.el.querySelectorAll("ifx-multiselect-option");const e=Array.from(t).map((t=>({element:t,instance:t["__stencil_instance"],depth:parseInt(t.getAttribute("data-level")||"0")}))).filter((t=>t.instance)).sort(((t,e)=>e.depth-t.depth));e.forEach((({instance:t})=>{if(t.hasChildren){this.updateParentState(t)}}))}updateParentState(t){const e=Array.from(t.el.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION")).map((t=>t["__stencil_instance"])).filter((t=>t!==null));const i=e.filter((t=>t.selected)).length;const s=e.filter((t=>t.indeterminate)).length;const o=e.length;if(i===o&&s===0){t.selected=true;t.indeterminate=false}else if(i===0&&s===0){t.selected=false;t.indeterminate=false}else{t.selected=false;t.indeterminate=true}}componentDidLoad(){setTimeout((()=>{this.positionDropdown()}),500);this.el.addEventListener("ifx-option-changed",(()=>{if(!this.pendingSelectionUpdate){this.pendingSelectionUpdate=true;requestAnimationFrame((()=>{this.updateSlotBasedSelections(true);setTimeout((()=>{this.pendingSelectionUpdate=false}),0)}))}}));setTimeout((()=>{this.updateSlotBasedSelections(false);this.updateInitialParentStates()}),100)}componentWillLoad(){if(!l(this.el)){n("ifx-multiselect")}this.loadInitialOptions()}updateInternalError(){this.internalError=this.error}updateInternalErrorMessage(){this.internalErrorMessage=this.errorMessage}onSelectionChange(t,e){const i=new FormData;t.forEach((t=>i.append(this.name,t.value)));this.internals.setFormValue(i)}collapseAll(){const t=this.el.querySelectorAll("ifx-multiselect-option");t.forEach((t=>{const e=t["__stencil_instance"];if(e&&e.hasChildren){e.isExpanded=false}}))}expandAll(){const t=this.el.querySelectorAll("ifx-multiselect-option");t.forEach((t=>{const e=t["__stencil_instance"];if(e&&e.hasChildren){e.isExpanded=true}}))}selectAll(){this.resetSearch();const t=this.el.querySelectorAll("ifx-multiselect-option");t.forEach((t=>{const e=t["__stencil_instance"];if(e){if(e.hasChildren){e.isExpanded=true}else{e.selected=true}}}));setTimeout((()=>{this.updateInitialParentStates();this.updateSlotBasedSelections(false);this.ifxSelect.emit(this.persistentSelectedOptions)}),0)}async clearSelection(){const t=this.el.querySelectorAll("ifx-multiselect-option");t.forEach((t=>{const e=t["__stencil_instance"];if(e){e.selected=false;e.indeterminate=false;if(e.hasChildren){e.isExpanded=false}}}));this.persistentSelectedOptions=[];setTimeout((()=>{this.updateSlotBasedSelections(false);this.ifxSelect.emit(this.persistentSelectedOptions)}),0)}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen;setTimeout((()=>{if(this.dropdownOpen){document.addEventListener("click",this.handleDocumentClick)}else{this.resetSearch()}this.ifxOpen.emit(this.dropdownOpen)}),0)}resetSearch(){this.searchTerm="";const t=this.el.shadowRoot.querySelector("ifx-search-field");if(t){t.value=""}const e=this.el.shadowRoot.querySelector(".ifx-multiselect-options");if(e){e.classList.remove("has-search-filter")}const i=this.el.querySelectorAll("ifx-multiselect-option");i.forEach((t=>{const e=new CustomEvent("ifx-search-filter",{detail:{searchTerm:"",isActive:false}});t.dispatchEvent(e)}))}handleWrapperClick(t){this.positionDropdown();if(t.currentTarget===t.target){this.toggleDropdown()}}handleKeyDown(t){if(this.disabled)return;if(!this.dropdownOpen){switch(t.code){case"Enter":case"Space":case"ArrowDown":t.preventDefault();this.toggleDropdown();break}return}switch(t.code){case"Escape":t.preventDefault();this.toggleDropdown();break;case"Enter":case"Space":const e=t.target;if(!e.closest(".ifx-multiselect-dropdown-functions")){t.preventDefault();this.toggleDropdown()}break;case"ArrowDown":case"ArrowUp":t.preventDefault();this.focusFirstOption();break}}focusFirstOption(){var t;const e=this.el.querySelector("ifx-multiselect-option:not(.search-hidden)");if(e){const i=(t=e.shadowRoot)===null||t===void 0?void 0:t.querySelector(".option-label");i===null||i===void 0?void 0:i.focus()}}renderSelectAll(){const t=this.el.querySelectorAll("ifx-multiselect-option");const e=Array.from(t).filter((t=>!t.hasChildren));const s=Array.from(t).filter((t=>!t.hasChildren&&t.selected));const o=e.length>0&&s.length===e.length;const n=t=>{if(t){t.preventDefault();t.stopPropagation()}if(o){this.clearSelection()}else{this.selectAll()}};return i("div",{class:"select-all-wrapper"},i("ifx-checkbox",{id:"selectAll",checked:o,size:"s","aria-label":this.ariaSelectAllLabel,onClick:n,onKeyDown:t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();t.stopPropagation();n(t)}}},this.selectAllLabel))}renderNoResultsMessage(){return i("div",{class:"ifx-multiselect-no-results"},i("div",{class:"no-results-content"},i("span",{class:"no-results-text"},this.noResultsMessage)))}render(){const t=this.persistentSelectedOptions.map((t=>{var e;const i=this.el.querySelector(`ifx-multiselect-option[value="${t.value}"]`);return((e=i===null||i===void 0?void 0:i.textContent)===null||e===void 0?void 0:e.trim())||t.value})).join(", ");const e=this.persistentSelectedOptions.length>0;let s=false;const o=this.el.querySelectorAll("ifx-multiselect-option");if(o.length>0){s=Array.from(o).every((t=>t.children.length===0))}return i("div",{class:`ifx-multiselect-container`,ref:t=>this.dropdownElement=t},this.label?i("div",{class:"ifx-label-wrapper"},i("span",null,this.label)):null,i("div",{class:`ifx-multiselect-wrapper\n ${this.dropdownOpen?"active":""}\n ${this.dropdownFlipped?"is-flipped":""}\n ${this.internalError?"error":""}\n ${this.disabled?"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,tabindex:"0",onClick:this.disabled?undefined:t=>this.handleWrapperClick(t),onKeyDown:this.disabled?undefined:t=>this.handleKeyDown(t)},i("div",{class:`ifx-multiselect-input\n ${e?"":"placeholder"}\n `,onClick:this.disabled?undefined:()=>this.toggleDropdown()},e?t:this.placeholder),this.dropdownOpen&&i("div",{class:"ifx-multiselect-dropdown-menu"},(this.showSearch||this.showSelectAll||this.showExpandCollapse&&!s)&&i("div",{class:"ifx-multiselect-dropdown-functions",onClick:t=>t.stopPropagation()},this.showSearch&&i("div",{class:"ifx-multiselect-dropdown-search"},i("ifx-search-field",{class:"search-input",placeholder:this.searchPlaceholder,size:"s","show-delete-icon":"true","aria-label":this.ariaSearchLabel,onKeyDown:t=>{t.stopPropagation()},onIfxInput:t=>this.handleSearch(t.target),onFocus:()=>this.handleSearchFocus(true),onBlur:()=>this.handleSearchFocus(false)})),i("div",{class:"ifx-multiselect-dropdown-controls"},this.showSelectAll&&this.renderSelectAll(),this.showExpandCollapse&&!s&&i("div",{class:"expand-collapse-controls"},i("span",{class:"control-item",role:"button",tabIndex:0,"aria-label":this.ariaExpandAllLabel,onClick:t=>{t.stopPropagation();this.expandAll()},onKeyDown:t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();t.stopPropagation();this.expandAll()}}},this.expandLabel),i("span",{class:"control-item",role:"button",tabIndex:0,"aria-label":this.ariaCollapseAllLabel,onClick:t=>{t.stopPropagation();this.collapseAll()},onKeyDown:t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();t.stopPropagation();this.collapseAll()}}},this.collapseLabel)))),i("div",{class:"ifx-multiselect-options",role:"listbox","aria-multiselectable":"true"},i("slot",null),this.searchTerm&&this.showNoResultsMessage&&this.renderNoResultsMessage())),i("div",{class:"ifx-multiselect-icon-container"},this.persistentSelectedOptions.length>0&&i("div",{class:`ifx-clear-button ${!this.showClearButton?"hide":""}`,onClick:this.disabled?undefined:()=>this.clearSelection()},i("ifx-icon",{icon:"cRemove16"})),i("div",{class:"icon-wrapper-up",onClick:this.disabled?undefined:()=>this.toggleDropdown()},i("ifx-icon",{key:"icon-up",icon:"chevron-up-16"})),i("div",{class:"icon-wrapper-down",onClick:this.disabled?undefined:()=>this.toggleDropdown()},i("ifx-icon",{key:"icon-down",icon:"chevron-down-16"})))),this.internalError?i("div",{class:"ifx-error-message-wrapper"},i("span",null,this.internalErrorMessage)):null)}static get formAssociated(){return true}get el(){return s(this)}static get watchers(){return{error:["updateInternalError"],errorMessage:["updateInternalErrorMessage"],persistentSelectedOptions:["onSelectionChange"]}}};h.style=c;const f=":host{display:block;width:100%}.option{display:flex;flex-direction:column;position:relative;cursor:pointer;list-style:none}.option.option--expanded{position:relative}.option.option--has-children{position:relative}.option.option--has-children .option-item>.chevron-wrapper{display:flex}.option--disabled{cursor:not-allowed;pointer-events:none;color:#BFBBBB}.option.search-hidden{display:none !important}.option.search-match .option-item .option-label .search-highlight{font-weight:bold}.option-item{display:flex;flex-direction:row;align-items:center;white-space:nowrap;min-height:20px;padding:4px 16px;background-color:#FFFFFF;transition:background-color 0.2s ease-in-out}.option-item:hover{background-color:#F7F7F7}.option--disabled .option-item:hover{background-color:transparent}.option-children{display:block}.chevron-wrapper{display:none;align-items:center;justify-content:center;margin-right:8px;width:20px;height:20px;flex-shrink:0}.chevron-wrapper:focus{outline:none}.chevron-wrapper:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.option--has-children .chevron-wrapper{display:flex}.chevron-wrapper .chevron{transition:transform 0.2s ease-in-out;color:#3C3A39}.chevron-wrapper .chevron.chevron--expanded{transform:rotate(90deg)}.chevron-wrapper .chevron.chevron--collapsed{transform:rotate(0deg)}.checkbox-wrapper{display:flex;align-items:center;margin-right:8px;flex-shrink:0}.option-label{flex-grow:1;display:flex;align-items:center;cursor:pointer;padding:2px 0;font-size:0.875rem}.option-label:focus{outline:none}.option-label:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.option--disabled .option-label{cursor:not-allowed;color:#BFBBBB}";const d=f;const p=class{constructor(e){t(this,e);this.selected=false;this.disabled=false;this.indeterminate=false;this.isExpanded=false;this.hasChildren=false;this.depth=0;this.searchTerm="";this.isSearchActive=false;this.isSearchDisabled=false;this.handleSearchFilter=t=>{const{searchTerm:e,isActive:i}=t.detail;this.searchTerm=e.toLowerCase();this.isSearchActive=i;requestAnimationFrame((()=>{this.updateSearchClasses()}))};this.handleCheckboxClick=t=>{if(this.disabled||this.isSearchActive&&this.isSearchDisabled)return;t.stopPropagation();let e;if(this.indeterminate){e=true}else{e=!this.selected}this.selected=e;this.indeterminate=false;if(this.hasChildren){this.isExpanded=e;requestAnimationFrame((()=>{this.selectAllChildren(e);this.expandAllChildren(e)}))}this.updateParentStates();this.notifyMultiselect()};this.handleHeaderClick=t=>{t.stopPropagation();if(!this.disabled&&!(this.isSearchActive&&this.isSearchDisabled)){this.handleClick(t)}}}componentWillLoad(){this.hasChildren=this.el.children.length>0;this.depth=this.calculateDepth();this.el.setAttribute("data-level",this.depth.toString());if(this.hasChildren){const t=this.hasAnySelectedChildren();if(t){this.isExpanded=true}}}componentDidLoad(){this.el["__stencil_instance"]=this;this.notifyMultiselect();this.el.addEventListener("ifx-search-filter",this.handleSearchFilter)}disconnectedCallback(){this.el.removeEventListener("ifx-search-filter",this.handleSearchFilter)}updateSearchClasses(){var t;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector(".option");if(!e)return;if(!this.isSearchActive){e.classList.remove("search-hidden","search-parent","search-match");this.removeHighlighting();this.isSearchDisabled=false;return}const i=this.getTextContent().toLowerCase();const s=i.includes(this.searchTerm);const o=this.hasMatchingParent();requestAnimationFrame((()=>{const t=this.hasMatchingChildren();e.classList.remove("search-hidden","search-parent","search-match");this.isSearchDisabled=false;if(s&&!this.hasChildren){e.classList.add("search-match");this.highlightSearchTerm()}else if(s&&this.hasChildren){e.classList.add("search-match");this.highlightSearchTerm();this.isExpanded=true}else if(!s&&this.hasChildren&&t){e.classList.add("search-parent");this.removeHighlighting();this.isExpanded=true;this.isSearchDisabled=true}else if(o){e.classList.add("search-match");this.removeHighlighting()}else{e.classList.add("search-hidden");this.removeHighlighting()}}))}highlightSearchTerm(){var t;if(!this.searchTerm)return;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector(".option-label");if(!e)return;const i=e.querySelector("slot");if(!i)return;this.removeHighlighting();const s=this.getTextContent();const o=this.searchTerm.toLowerCase();const n=s.toLowerCase();if(!n.includes(o))return;const l=n.indexOf(o);if(l===-1)return;const r=s.substring(0,l);const c=s.substring(l,l+o.length);const a=s.substring(l+o.length);const h=document.createElement("span");h.className="highlighted-text";if(r){h.appendChild(document.createTextNode(r))}const f=document.createElement("strong");f.className="search-highlight";f.textContent=c;h.appendChild(f);if(a){h.appendChild(document.createTextNode(a))}e.setAttribute("data-original-content","true");i.style.display="none";e.appendChild(h)}removeHighlighting(){var t;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector(".option-label");if(!e)return;const i=e.querySelector("slot");const s=e.querySelector(".highlighted-text");if(s){e.removeChild(s)}if(i){i.style.display=""}e.removeAttribute("data-original-content")}getTextContent(){let t="";Array.from(this.el.childNodes).forEach((e=>{var i;if(e.nodeType===Node.TEXT_NODE){t+=((i=e.textContent)===null||i===void 0?void 0:i.trim())||""}}));return t||this.value||""}hasMatchingChildren(){if(!this.hasChildren)return false;const t=Array.from(this.el.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION"));return t.some((t=>{const e=t["__stencil_instance"];if(!e)return false;const i=e.getTextContent().toLowerCase();const s=i.includes(this.searchTerm);const o=e.hasMatchingChildren();return s||o}))}hasMatchingParent(){let t=this.el.parentElement;while(t&&t.tagName==="IFX-MULTISELECT-OPTION"){const e=t["__stencil_instance"];if(e){const t=e.getTextContent().toLowerCase();if(t.includes(this.searchTerm)){return true}}t=t.parentElement}return false}calculateDepth(){let t=0;let e=this.el.parentElement;while(e&&e.tagName!=="IFX-MULTISELECT"){if(e.tagName==="IFX-MULTISELECT-OPTION"){t++}e=e.parentElement}return t}handleClick(t){if(this.disabled||this.isSearchActive&&this.isSearchDisabled)return;t.stopPropagation();if(t.type==="click"&&t.target.closest(".chevron-wrapper")){this.toggleExpansion();return}let e;if(this.indeterminate){e=true}else{e=!this.selected}this.selected=e;this.indeterminate=false;if(this.hasChildren){this.isExpanded=e;requestAnimationFrame((()=>{this.selectAllChildren(e);this.expandAllChildren(e)}))}this.updateParentStates();this.notifyMultiselect()}handleKeyDown(t){if(this.disabled||this.isSearchActive&&this.isSearchDisabled)return;const e=t.target;if(e.closest(".chevron-wrapper")||e.closest(".checkbox-wrapper")){return}if(t.key!=="ArrowUp"&&t.key!=="ArrowDown"){t.stopPropagation()}if(t.key==="ArrowRight"&&this.hasChildren){this.isExpanded=true}if(t.key==="ArrowLeft"&&this.hasChildren){this.isExpanded=false}}notifyMultiselect(){const t=new CustomEvent("ifx-option-changed",{bubbles:true,detail:{value:this.value,selected:this.selected,indeterminate:this.indeterminate}});this.el.dispatchEvent(t)}selectAllChildren(t){const e=Array.from(this.el.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION"));e.forEach((e=>{var i;const s=e["__stencil_instance"];if(s){s.selected=t;s.indeterminate=false;if(s.hasChildren){s.isExpanded=t;s.selectAllChildren(t)}(i=s.notifyMultiselect)===null||i===void 0?void 0:i.call(s)}}))}expandAllChildren(t){const e=Array.from(this.el.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION"));e.forEach((e=>{const i=e["__stencil_instance"];if(i&&i.hasChildren){i.isExpanded=t;i.expandAllChildren(t)}}))}updateParentStates(){var t;let e=this.el.parentElement;while(e&&e.tagName==="IFX-MULTISELECT-OPTION"){const i=e["__stencil_instance"];if(!i){e=e.parentElement;continue}const s=Array.from(e.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION")).map((t=>t["__stencil_instance"])).filter((t=>t!==null));const o=s.filter((t=>t.selected)).length;const n=s.filter((t=>t.indeterminate)).length;const l=s.length;if(o===l&&n===0){i.selected=true;i.indeterminate=false}else if(o===0&&n===0){i.selected=false;i.indeterminate=false}else{i.selected=false;i.indeterminate=true}(t=i.notifyMultiselect)===null||t===void 0?void 0:t.call(i);e=e.parentElement}}toggleExpansion(){this.isExpanded=!this.isExpanded}hasAnySelectedChildren(){const t=Array.from(this.el.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION"));return t.some((t=>{const e=t.hasAttribute("selected");const i=this.checkForSelectedDescendants(t);return e||i}))}checkForSelectedDescendants(t){const e=Array.from(t.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION"));return e.some((t=>{const e=t.hasAttribute("selected");const i=this.checkForSelectedDescendants(t);return e||i}))}render(){let t=false;const e=this.el.closest("ifx-multiselect");if(e){const i=Array.from(e.querySelectorAll("ifx-multiselect-option"));t=i.every((t=>t.children.length===0))}const s=this.depth*28+16;const n=this.hasChildren?0:28;let l=s+n;const r=t?undefined:{paddingLeft:`${l}px`};return i(o,{key:"f836f58884e2e57c4c5fb4953f10d5ff4a34c8da"},i("div",{key:"9eca6e87bb3c21512a051596b1e92931b707e88f",class:{option:true,"option--has-children":this.hasChildren,"option--expanded":this.isExpanded,"option--disabled":this.disabled,"option--selected":this.selected},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},i("div",{key:"41d24ef38470f5f7f8aa36daa33b339b7d8079f3",class:"option-item",style:r},i("div",{key:"27d33336e7d15ccce1703429b70494fe86808214",class:"chevron-wrapper",tabIndex:this.hasChildren?0:-1,role:this.hasChildren?"button":undefined,"aria-label":this.hasChildren?this.isExpanded?"Collapse":"Expand":undefined,onClick:t=>{t.stopPropagation();this.toggleExpansion()},onKeyDown:t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();t.stopPropagation();this.toggleExpansion()}}},this.hasChildren&&i("ifx-icon",{key:"68e975b49b4aa9edf564b80644c5a55809185629",class:`chevron ${this.isExpanded?"chevron--expanded":"chevron--collapsed"}`,icon:"chevron-right-16"})),i("div",{key:"f651aefe4cc30db6056331ffaafd8e6ea17039fc",class:"checkbox-wrapper",onClick:t=>t.stopPropagation()},i("ifx-checkbox",{key:"e8cb2c7a75921a81e0321ff22718d9373cb6f437",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:t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();t.stopPropagation();this.handleCheckboxClick(t)}}})),i("div",{key:"4f626380753927d4bedca0f78643e6647eff6356",class:"option-label",onClick:this.handleHeaderClick,tabIndex:-1},i("slot",{key:"8207d9f952bff231fda0bf0be43e1c567aa6a6da"}))),this.isExpanded&&i("div",{key:"930d611f27451ff393d1403386bb6cd6b4a54980",class:"option-children"},i("slot",{key:"269eb6381257f82b74b888188646559e6881a9d9",name:"children"}))))}get el(){return s(this)}};p.style=d;export{h as ifx_multiselect,p as ifx_multiselect_option};
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as t,c as e,h as i,g as s,a as o}from"./p-b7a462e5.js";import{t as n}from"./p-6ecb6a6f.js";import{i as l}from"./p-1ecafb97.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.ifx-multiselect-container{position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{background-color:#FFFFFF;box-sizing:border-box;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;width:100%;font-weight:400;font-style:normal;height:40px;line-height:24px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-multiselect-container .ifx-multiselect-wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;display:flex;align-items:center;gap:8px}.ifx-multiselect-container .ifx-multiselect-icon-container .ifx-multiselect-icon-container{display:flex}.ifx-multiselect-container .ifx-multiselect-icon-container .icon-wrapper{display:flex;align-items:center;transition:transform 0.2s ease-in-out}.ifx-multiselect-container .ifx-multiselect-icon-container .icon-wrapper--open{transform:rotate(180deg)}.ifx-multiselect-container .ifx-clear-button{display:flex;align-items:center}.ifx-multiselect-container .ifx-clear-button.hide{display:none}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{box-sizing:border-box;position:absolute;top:100%;left:0;width:100%;margin-top:4px;border:1px solid #EEEDED;background-color:#fff;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);max-height:300px;z-index:1000;display:flex;flex-direction:column}.ifx-multiselect-dropdown-functions{padding:12px 16px;border-bottom:1px solid #EEEDED;flex-shrink:0}.ifx-multiselect-dropdown-search{margin-bottom:12px}.ifx-multiselect-dropdown-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}.ifx-multiselect-dropdown-controls .select-all-wrapper{display:flex}.ifx-multiselect-dropdown-controls .expand-collapse-controls{display:flex;gap:12px}.ifx-multiselect-dropdown-controls .control-item{font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-dropdown-controls .control-item:hover{color:#0A8276}.ifx-multiselect-dropdown-controls .control-item:active{color:#08665C}.ifx-multiselect-dropdown-controls .control-item:focus{outline:none}.ifx-multiselect-dropdown-controls .control-item:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.ifx-multiselect-options{flex:1;overflow-y:auto;padding-top:12px;padding-bottom:12px}.ifx-multiselect-options.show-no-results .ifx-multiselect-no-results{display:block}.ifx-multiselect-no-results{padding-left:16px;padding-right:16px;display:none}';const c=r;function a(t,e){let i;return function s(...o){const n=()=>{clearTimeout(i);t(...o)};clearTimeout(i);i=setTimeout(n,e)}}const h=class{constructor(i){t(this,i);this.ifxSelect=e(this,"ifxSelect",7);this.ifxOpen=e(this,"ifxOpen",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.disabled=false;this.error=false;this.errorMessage="Error";this.label="";this.placeholder="";this.showSearch=true;this.showSelectAll=true;this.showClearButton=true;this.showExpandCollapse=true;this.noResultsMessage="No results found.";this.showNoResultsMessage=true;this.searchPlaceholder="Search";this.selectAllLabel="Select all";this.expandLabel="Expand";this.collapseLabel="Collapse";this.ariaMultiSelectLabel="Multi-select dropdown";this.ariaMultiSelectLabelledBy="";this.ariaMultiSelectDescribedBy="";this.ariaSearchLabel="Search options";this.ariaClearLabel="Clear all selections";this.ariaToggleLabel="Toggle dropdown";this.ariaSelectAllLabel="Select all options";this.ariaExpandAllLabel="Expand all categories";this.ariaCollapseAllLabel="Collapse all categories";this.internalError=false;this.persistentSelectedOptions=[];this.dropdownOpen=false;this.searchTerm="";this.handleSearch=a((t=>{const e=t.value.toLowerCase();const i=e!=="";this.searchTerm=e;const s=this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper");if(s){if(i){s.classList.remove("active")}else{const t=this.el.shadowRoot.querySelector("ifx-search-field");const e=t&&t.matches(":focus-within");if(!e){s.classList.add("active")}}}const o=this.el.shadowRoot.querySelector(".ifx-multiselect-options");if(o){if(i){o.classList.add("has-search-filter")}else{o.classList.remove("has-search-filter")}}requestAnimationFrame((()=>{const t=this.el.querySelectorAll("ifx-multiselect-option");t.forEach((t=>{const s=new CustomEvent("ifx-search-filter",{detail:{searchTerm:e,isActive:i}});t.dispatchEvent(s)}));if(i){setTimeout((()=>{const t=this.el.querySelectorAll("ifx-multiselect-option");let e=0;t.forEach((t=>{const i=window.getComputedStyle(t);const s=t.getBoundingClientRect();if(i.display!=="none"&&i.visibility!=="hidden"&&i.opacity!=="0"&&s.height>0){e++}}));const i=this.el.shadowRoot.querySelector(".ifx-multiselect-options");if(i){if(e===0){i.classList.add("show-no-results")}else{i.classList.remove("show-no-results")}}}),200)}else{const t=this.el.shadowRoot.querySelector(".ifx-multiselect-options");if(t){t.classList.remove("show-no-results")}}}))}),150);this.pendingSelectionUpdate=false;this.handleDocumentClick=t=>{const e=t.composedPath();if(!e.includes(this.dropdownElement)){this.dropdownOpen=false;document.removeEventListener("click",this.handleDocumentClick);this.resetSearch();this.ifxOpen.emit(this.dropdownOpen)}}}parseChildOptions(){const t=[];const e=Array.from(this.el.children);e.forEach(((e,i)=>{if(e.tagName==="IFX-MULTISELECT-OPTION"){const s=this.parseOptionElement(e,i);if(s){t.push(s)}}}));return t}parseOptionElement(t,e){const i=t.getAttribute("value")||`option-${e}`;const s=t.hasAttribute("selected");const o=t.hasAttribute("disabled");const n=t.hasAttribute("indeterminate");const l={value:i,selected:s,disabled:o,indeterminate:n};const r=Array.from(t.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION")).map(((t,e)=>this.parseOptionElement(t,e))).filter((t=>t!==null));if(r.length>0){l.children=r}return l}loadInitialOptions(){this.internalError=this.error;this.internalErrorMessage=this.errorMessage;const t=this.parseChildOptions();const e=this.collectSelectedOptions(t);const i=e.filter((t=>!this.persistentSelectedOptions.some((e=>e.value==t.value))));this.persistentSelectedOptions=[...this.persistentSelectedOptions,...i]}collectSelectedOptions(t){let e=[];for(const i of t){if(i.selected){if(i.children&&i.children.length>0){e=e.concat(this.collectLeafOptions(i.children))}else{if(!e.some((t=>t.value===i.value))){e.push(i)}}}else{if(i.children&&i.children.length>0){e=e.concat(this.collectSelectedOptions(i.children))}}}return e}collectLeafOptions(t){let e=[];for(const i of t){if(i.children&&i.children.length>0){e=e.concat(this.collectLeafOptions(i.children))}else{e.push(i)}}return e}handleSearchFocus(t){const e=this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper");if(e){if(t||this.searchTerm!==""){e.classList.remove("active")}else{e.classList.add("active")}}}positionDropdown(){var t;const e=(t=this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper"))===null||t===void 0?void 0:t.getBoundingClientRect();const i=window.innerHeight-e.bottom;const s=e.top;if(s>i&&e.height>i||e.bottom>window.innerHeight){this.dropdownFlipped=true}else{this.dropdownFlipped=false}}updateSlotBasedSelections(t=false){const e=this.el.querySelectorAll("ifx-multiselect-option");const i=[];e.forEach((t=>{const e=t["__stencil_instance"];if(e&&e.selected&&!e.hasChildren){i.push({value:e.value,selected:true,disabled:e.disabled})}}));this.persistentSelectedOptions=i;if(t){this.ifxSelect.emit(this.persistentSelectedOptions)}}updateInitialParentStates(){const t=this.el.querySelectorAll("ifx-multiselect-option");const e=Array.from(t).map((t=>({element:t,instance:t["__stencil_instance"],depth:parseInt(t.getAttribute("data-level")||"0")}))).filter((t=>t.instance)).sort(((t,e)=>e.depth-t.depth));e.forEach((({instance:t})=>{if(t.hasChildren){this.updateParentState(t)}}))}updateParentState(t){const e=Array.from(t.el.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION")).map((t=>t["__stencil_instance"])).filter((t=>t!==null));const i=e.filter((t=>t.selected)).length;const s=e.filter((t=>t.indeterminate)).length;const o=e.length;if(i===o&&s===0){t.selected=true;t.indeterminate=false}else if(i===0&&s===0){t.selected=false;t.indeterminate=false}else{t.selected=false;t.indeterminate=true}}componentDidLoad(){setTimeout((()=>{this.positionDropdown()}),500);this.el.addEventListener("ifx-option-changed",(()=>{if(!this.pendingSelectionUpdate){this.pendingSelectionUpdate=true;requestAnimationFrame((()=>{this.updateSlotBasedSelections(true);setTimeout((()=>{this.pendingSelectionUpdate=false}),0)}))}}));setTimeout((()=>{this.updateSlotBasedSelections(false);this.updateInitialParentStates()}),100)}componentWillLoad(){if(!l(this.el)){n("ifx-multiselect")}this.loadInitialOptions()}updateInternalError(){this.internalError=this.error}updateInternalErrorMessage(){this.internalErrorMessage=this.errorMessage}onSelectionChange(t,e){const i=new FormData;t.forEach((t=>i.append(this.name,t.value)));this.internals.setFormValue(i)}collapseAll(){const t=this.el.querySelectorAll("ifx-multiselect-option");t.forEach((t=>{const e=t["__stencil_instance"];if(e&&e.hasChildren){e.isExpanded=false}}))}expandAll(){const t=this.el.querySelectorAll("ifx-multiselect-option");t.forEach((t=>{const e=t["__stencil_instance"];if(e&&e.hasChildren){e.isExpanded=true}}))}selectAll(){this.resetSearch();const t=this.el.querySelectorAll("ifx-multiselect-option");t.forEach((t=>{const e=t["__stencil_instance"];if(e){if(e.hasChildren){e.isExpanded=true}else{e.selected=true}}}));setTimeout((()=>{this.updateInitialParentStates();this.updateSlotBasedSelections(false);this.ifxSelect.emit(this.persistentSelectedOptions)}),0)}async clearSelection(){const t=this.el.querySelectorAll("ifx-multiselect-option");t.forEach((t=>{const e=t["__stencil_instance"];if(e){e.selected=false;e.indeterminate=false;if(e.hasChildren){e.isExpanded=false}}}));this.persistentSelectedOptions=[];setTimeout((()=>{this.updateSlotBasedSelections(false);this.ifxSelect.emit(this.persistentSelectedOptions)}),0)}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen;setTimeout((()=>{if(this.dropdownOpen){document.addEventListener("click",this.handleDocumentClick)}else{this.resetSearch()}this.ifxOpen.emit(this.dropdownOpen)}),0)}resetSearch(){this.searchTerm="";const t=this.el.shadowRoot.querySelector("ifx-search-field");if(t){t.value=""}const e=this.el.shadowRoot.querySelector(".ifx-multiselect-options");if(e){e.classList.remove("has-search-filter")}const i=this.el.querySelectorAll("ifx-multiselect-option");i.forEach((t=>{const e=new CustomEvent("ifx-search-filter",{detail:{searchTerm:"",isActive:false}});t.dispatchEvent(e)}))}handleWrapperClick(t){this.positionDropdown();if(t.currentTarget===t.target){this.toggleDropdown()}}handleKeyDown(t){if(this.disabled)return;if(!this.dropdownOpen){switch(t.code){case"Enter":case"Space":case"ArrowDown":t.preventDefault();this.toggleDropdown();break}return}switch(t.code){case"Escape":t.preventDefault();this.toggleDropdown();break;case"Enter":case"Space":const e=t.target;if(!e.closest(".ifx-multiselect-dropdown-functions")){t.preventDefault();this.toggleDropdown()}break;case"ArrowDown":case"ArrowUp":t.preventDefault();this.focusFirstOption();break}}focusFirstOption(){var t;const e=this.el.querySelector("ifx-multiselect-option:not(.search-hidden)");if(e){const i=(t=e.shadowRoot)===null||t===void 0?void 0:t.querySelector(".option-label");i===null||i===void 0?void 0:i.focus()}}renderSelectAll(){const t=this.el.querySelectorAll("ifx-multiselect-option");const e=Array.from(t).filter((t=>!t.hasChildren));const s=Array.from(t).filter((t=>!t.hasChildren&&t.selected));const o=e.length>0&&s.length===e.length;const n=t=>{if(t){t.preventDefault();t.stopPropagation()}if(o){this.clearSelection()}else{this.selectAll()}};return i("div",{class:"select-all-wrapper"},i("ifx-checkbox",{id:"selectAll",checked:o,size:"s","aria-label":this.ariaSelectAllLabel,onClick:n,onKeyDown:t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();t.stopPropagation();n(t)}}},this.selectAllLabel))}renderNoResultsMessage(){return i("div",{class:"ifx-multiselect-no-results"},i("div",{class:"no-results-content"},i("span",{class:"no-results-text"},this.noResultsMessage)))}render(){const t=this.persistentSelectedOptions.map((t=>{var e;const i=this.el.querySelector(`ifx-multiselect-option[value="${t.value}"]`);return((e=i===null||i===void 0?void 0:i.textContent)===null||e===void 0?void 0:e.trim())||t.value})).join(", ");const e=this.persistentSelectedOptions.length>0;let s=false;const o=this.el.querySelectorAll("ifx-multiselect-option");if(o.length>0){s=Array.from(o).every((t=>t.children.length===0))}return i("div",{class:`ifx-multiselect-container`,ref:t=>this.dropdownElement=t},this.label?i("div",{class:"ifx-label-wrapper"},i("span",null,this.label)):null,i("div",{class:`ifx-multiselect-wrapper\n ${this.dropdownOpen?"active":""}\n ${this.dropdownFlipped?"is-flipped":""}\n ${this.internalError?"error":""}\n ${this.disabled?"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,tabindex:"0",onClick:this.disabled?undefined:t=>this.handleWrapperClick(t),onKeyDown:this.disabled?undefined:t=>this.handleKeyDown(t)},i("div",{class:`ifx-multiselect-input\n ${e?"":"placeholder"}\n `,onClick:this.disabled?undefined:()=>this.toggleDropdown()},e?t:this.placeholder),this.dropdownOpen&&i("div",{class:"ifx-multiselect-dropdown-menu"},(this.showSearch||this.showSelectAll||this.showExpandCollapse&&!s)&&i("div",{class:"ifx-multiselect-dropdown-functions",onClick:t=>t.stopPropagation()},this.showSearch&&i("div",{class:"ifx-multiselect-dropdown-search"},i("ifx-search-field",{class:"search-input",placeholder:this.searchPlaceholder,size:"s","show-delete-icon":"true","aria-label":this.ariaSearchLabel,onKeyDown:t=>{t.stopPropagation()},onIfxInput:t=>this.handleSearch(t.target),onFocus:()=>this.handleSearchFocus(true),onBlur:()=>this.handleSearchFocus(false)})),i("div",{class:"ifx-multiselect-dropdown-controls"},this.showSelectAll&&this.renderSelectAll(),this.showExpandCollapse&&!s&&i("div",{class:"expand-collapse-controls"},i("span",{class:"control-item",role:"button",tabIndex:0,"aria-label":this.ariaExpandAllLabel,onClick:t=>{t.stopPropagation();this.expandAll()},onKeyDown:t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();t.stopPropagation();this.expandAll()}}},this.expandLabel),i("span",{class:"control-item",role:"button",tabIndex:0,"aria-label":this.ariaCollapseAllLabel,onClick:t=>{t.stopPropagation();this.collapseAll()},onKeyDown:t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();t.stopPropagation();this.collapseAll()}}},this.collapseLabel)))),i("div",{class:"ifx-multiselect-options",role:"listbox","aria-multiselectable":"true"},i("slot",null),this.searchTerm&&this.showNoResultsMessage&&this.renderNoResultsMessage())),i("div",{class:"ifx-multiselect-icon-container"},this.persistentSelectedOptions.length>0&&i("div",{class:`ifx-clear-button ${!this.showClearButton?"hide":""}`,onClick:this.disabled?undefined:()=>this.clearSelection()},i("ifx-icon",{icon:"cRemove16"})),i("div",{class:"icon-wrapper-up",onClick:this.disabled?undefined:()=>this.toggleDropdown()},i("ifx-icon",{key:"icon-up",icon:"chevron-up-16"})),i("div",{class:"icon-wrapper-down",onClick:this.disabled?undefined:()=>this.toggleDropdown()},i("ifx-icon",{key:"icon-down",icon:"chevron-down-16"})))),this.internalError?i("div",{class:"ifx-error-message-wrapper"},i("span",null,this.internalErrorMessage)):null)}static get formAssociated(){return true}get el(){return s(this)}static get watchers(){return{error:["updateInternalError"],errorMessage:["updateInternalErrorMessage"],persistentSelectedOptions:["onSelectionChange"]}}};h.style=c;const f=":host{display:block;width:100%}.option{display:flex;flex-direction:column;position:relative;cursor:pointer;list-style:none}.option.option--expanded{position:relative}.option.option--has-children{position:relative}.option.option--has-children .option-item>.chevron-wrapper{display:flex}.option--disabled{cursor:not-allowed;pointer-events:none;color:#BFBBBB}.option.search-hidden{display:none !important}.option.search-match .option-item .option-label .search-highlight{font-weight:bold}.option-item{display:flex;flex-direction:row;align-items:center;white-space:nowrap;min-height:20px;padding:4px 16px;background-color:#FFFFFF;transition:background-color 0.2s ease-in-out}.option-item:hover{background-color:#F7F7F7}.option--disabled .option-item:hover{background-color:transparent}.option-children{display:block}.chevron-wrapper{display:none;align-items:center;justify-content:center;margin-right:8px;width:20px;height:20px;flex-shrink:0}.chevron-wrapper:focus{outline:none}.chevron-wrapper:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.option--has-children .chevron-wrapper{display:flex}.chevron-wrapper .chevron{transition:transform 0.2s ease-in-out;color:#3C3A39}.chevron-wrapper .chevron.chevron--expanded{transform:rotate(90deg)}.chevron-wrapper .chevron.chevron--collapsed{transform:rotate(0deg)}.checkbox-wrapper{display:flex;align-items:center;margin-right:8px;flex-shrink:0}.option-label{flex-grow:1;display:flex;align-items:center;cursor:pointer;padding:2px 0;font-size:0.875rem}.option-label:focus{outline:none}.option-label:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.option--disabled .option-label{cursor:not-allowed;color:#BFBBBB}";const d=f;const p=class{constructor(e){t(this,e);this.selected=false;this.disabled=false;this.indeterminate=false;this.isExpanded=false;this.hasChildren=false;this.depth=0;this.searchTerm="";this.isSearchActive=false;this.isSearchDisabled=false;this.handleSearchFilter=t=>{const{searchTerm:e,isActive:i}=t.detail;this.searchTerm=e.toLowerCase();this.isSearchActive=i;requestAnimationFrame((()=>{this.updateSearchClasses()}))};this.handleCheckboxClick=t=>{if(this.disabled||this.isSearchActive&&this.isSearchDisabled)return;t.stopPropagation();let e;if(this.indeterminate){e=true}else{e=!this.selected}this.selected=e;this.indeterminate=false;if(this.hasChildren){this.isExpanded=e;requestAnimationFrame((()=>{this.selectAllChildren(e);this.expandAllChildren(e)}))}this.updateParentStates();this.notifyMultiselect()};this.handleHeaderClick=t=>{t.stopPropagation();if(!this.disabled&&!(this.isSearchActive&&this.isSearchDisabled)){this.handleClick(t)}}}componentWillLoad(){this.hasChildren=this.el.children.length>0;this.depth=this.calculateDepth();this.el.setAttribute("data-level",this.depth.toString());if(this.hasChildren){const t=this.hasAnySelectedChildren();if(t){this.isExpanded=true}}}componentDidLoad(){this.el["__stencil_instance"]=this;this.notifyMultiselect();this.el.addEventListener("ifx-search-filter",this.handleSearchFilter)}disconnectedCallback(){this.el.removeEventListener("ifx-search-filter",this.handleSearchFilter)}updateSearchClasses(){var t;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector(".option");if(!e)return;if(!this.isSearchActive){e.classList.remove("search-hidden","search-parent","search-match");this.removeHighlighting();this.isSearchDisabled=false;return}const i=this.getTextContent().toLowerCase();const s=i.includes(this.searchTerm);const o=this.hasMatchingParent();requestAnimationFrame((()=>{const t=this.hasMatchingChildren();e.classList.remove("search-hidden","search-parent","search-match");this.isSearchDisabled=false;if(s&&!this.hasChildren){e.classList.add("search-match");this.highlightSearchTerm()}else if(s&&this.hasChildren){e.classList.add("search-match");this.highlightSearchTerm();this.isExpanded=true}else if(!s&&this.hasChildren&&t){e.classList.add("search-parent");this.removeHighlighting();this.isExpanded=true;this.isSearchDisabled=true}else if(o){e.classList.add("search-match");this.removeHighlighting()}else{e.classList.add("search-hidden");this.removeHighlighting()}}))}highlightSearchTerm(){var t;if(!this.searchTerm)return;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector(".option-label");if(!e)return;const i=e.querySelector("slot");if(!i)return;this.removeHighlighting();const s=this.getTextContent();const o=this.searchTerm.toLowerCase();const n=s.toLowerCase();if(!n.includes(o))return;const l=n.indexOf(o);if(l===-1)return;const r=s.substring(0,l);const c=s.substring(l,l+o.length);const a=s.substring(l+o.length);const h=document.createElement("span");h.className="highlighted-text";if(r){h.appendChild(document.createTextNode(r))}const f=document.createElement("strong");f.className="search-highlight";f.textContent=c;h.appendChild(f);if(a){h.appendChild(document.createTextNode(a))}e.setAttribute("data-original-content","true");i.style.display="none";e.appendChild(h)}removeHighlighting(){var t;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector(".option-label");if(!e)return;const i=e.querySelector("slot");const s=e.querySelector(".highlighted-text");if(s){e.removeChild(s)}if(i){i.style.display=""}e.removeAttribute("data-original-content")}getTextContent(){let t="";Array.from(this.el.childNodes).forEach((e=>{var i;if(e.nodeType===Node.TEXT_NODE){t+=((i=e.textContent)===null||i===void 0?void 0:i.trim())||""}}));return t||this.value||""}hasMatchingChildren(){if(!this.hasChildren)return false;const t=Array.from(this.el.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION"));return t.some((t=>{const e=t["__stencil_instance"];if(!e)return false;const i=e.getTextContent().toLowerCase();const s=i.includes(this.searchTerm);const o=e.hasMatchingChildren();return s||o}))}hasMatchingParent(){let t=this.el.parentElement;while(t&&t.tagName==="IFX-MULTISELECT-OPTION"){const e=t["__stencil_instance"];if(e){const t=e.getTextContent().toLowerCase();if(t.includes(this.searchTerm)){return true}}t=t.parentElement}return false}calculateDepth(){let t=0;let e=this.el.parentElement;while(e&&e.tagName!=="IFX-MULTISELECT"){if(e.tagName==="IFX-MULTISELECT-OPTION"){t++}e=e.parentElement}return t}handleClick(t){if(this.disabled||this.isSearchActive&&this.isSearchDisabled)return;t.stopPropagation();if(t.type==="click"&&t.target.closest(".chevron-wrapper")){this.toggleExpansion();return}let e;if(this.indeterminate){e=true}else{e=!this.selected}this.selected=e;this.indeterminate=false;if(this.hasChildren){this.isExpanded=e;requestAnimationFrame((()=>{this.selectAllChildren(e);this.expandAllChildren(e)}))}this.updateParentStates();this.notifyMultiselect()}handleKeyDown(t){if(this.disabled||this.isSearchActive&&this.isSearchDisabled)return;const e=t.target;if(e.closest(".chevron-wrapper")||e.closest(".checkbox-wrapper")){return}if(t.key!=="ArrowUp"&&t.key!=="ArrowDown"){t.stopPropagation()}if(t.key==="ArrowRight"&&this.hasChildren){this.isExpanded=true}if(t.key==="ArrowLeft"&&this.hasChildren){this.isExpanded=false}}notifyMultiselect(){const t=new CustomEvent("ifx-option-changed",{bubbles:true,detail:{value:this.value,selected:this.selected,indeterminate:this.indeterminate}});this.el.dispatchEvent(t)}selectAllChildren(t){const e=Array.from(this.el.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION"));e.forEach((e=>{var i;const s=e["__stencil_instance"];if(s){s.selected=t;s.indeterminate=false;if(s.hasChildren){s.isExpanded=t;s.selectAllChildren(t)}(i=s.notifyMultiselect)===null||i===void 0?void 0:i.call(s)}}))}expandAllChildren(t){const e=Array.from(this.el.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION"));e.forEach((e=>{const i=e["__stencil_instance"];if(i&&i.hasChildren){i.isExpanded=t;i.expandAllChildren(t)}}))}updateParentStates(){var t;let e=this.el.parentElement;while(e&&e.tagName==="IFX-MULTISELECT-OPTION"){const i=e["__stencil_instance"];if(!i){e=e.parentElement;continue}const s=Array.from(e.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION")).map((t=>t["__stencil_instance"])).filter((t=>t!==null));const o=s.filter((t=>t.selected)).length;const n=s.filter((t=>t.indeterminate)).length;const l=s.length;if(o===l&&n===0){i.selected=true;i.indeterminate=false}else if(o===0&&n===0){i.selected=false;i.indeterminate=false}else{i.selected=false;i.indeterminate=true}(t=i.notifyMultiselect)===null||t===void 0?void 0:t.call(i);e=e.parentElement}}toggleExpansion(){this.isExpanded=!this.isExpanded}hasAnySelectedChildren(){const t=Array.from(this.el.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION"));return t.some((t=>{const e=t.hasAttribute("selected");const i=this.checkForSelectedDescendants(t);return e||i}))}checkForSelectedDescendants(t){const e=Array.from(t.children).filter((t=>t.tagName==="IFX-MULTISELECT-OPTION"));return e.some((t=>{const e=t.hasAttribute("selected");const i=this.checkForSelectedDescendants(t);return e||i}))}render(){let t=false;const e=this.el.closest("ifx-multiselect");if(e){const i=Array.from(e.querySelectorAll("ifx-multiselect-option"));t=i.every((t=>t.children.length===0))}const s=this.depth*28+16;const n=this.hasChildren?0:28;let l=s+n;const r=t?undefined:{paddingLeft:`${l}px`};return i(o,{key:"53ab714e5bc86c83569b2c1cf6f479405f528880"},i("div",{key:"b5597349b4d3ef268b5826047f414dd7ce0c7854",class:{option:true,"option--has-children":this.hasChildren,"option--expanded":this.isExpanded,"option--disabled":this.disabled,"option--selected":this.selected},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},i("div",{key:"3052a22b111e61ac0e48ecd64460c35aa2b06fea",class:"option-item",style:r},i("div",{key:"a392db43dbb81f06a4cfd4e5faad7672108bc4bb",class:"chevron-wrapper",tabIndex:this.hasChildren?0:-1,role:this.hasChildren?"button":undefined,"aria-label":this.hasChildren?this.isExpanded?"Collapse":"Expand":undefined,onClick:t=>{t.stopPropagation();this.toggleExpansion()},onKeyDown:t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();t.stopPropagation();this.toggleExpansion()}}},this.hasChildren&&i("ifx-icon",{key:"033471dbc46d73d82f0ab44a07a1dfa5fd9625fb",class:`chevron ${this.isExpanded?"chevron--expanded":"chevron--collapsed"}`,icon:"chevron-right-16"})),i("div",{key:"d6fc07097a390e9e29f8c4dcc55c90f755b10fc9",class:"checkbox-wrapper",onClick:t=>t.stopPropagation()},i("ifx-checkbox",{key:"7d39f30d45c2f917edd924b3b8ce6c22f4146c19",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:t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();t.stopPropagation();this.handleCheckboxClick(t)}}})),i("div",{key:"e09de6a2559a8334553abb9d45b901c1459a2da7",class:"option-label",onClick:this.handleHeaderClick,tabIndex:-1},i("slot",{key:"941edb6987ef6add787211833e0e1aad0d5b9066"}))),this.isExpanded&&i("div",{key:"b5248d64937e418587f1c807e434874be4952f48",class:"option-children"},i("slot",{key:"8e6e69e5000661632c114279a5afc5c80f361b8e",name:"children"}))))}get el(){return s(this)}};p.style=d;export{h as ifx_multiselect,p as ifx_multiselect_option};
|
2
|
+
//# sourceMappingURL=p-d660ebea.entry.js.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as t,c as e,h as s,g as i}from"./p-b7a462e5.js";import{t as r}from"./p-6ecb6a6f.js";import{i as p}from"./p-1ecafb97.js";const
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as t,c as e,h as s,g as i}from"./p-b7a462e5.js";import{t as r}from"./p-6ecb6a6f.js";import{i as p}from"./p-1ecafb97.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.stepper{display:flex;align-items:center}.stepper.compact{align-items:center;gap:8px}.stepper.compact.compact-right{flex-direction:row-reverse;text-align:left}.stepper.compact .stepper-wrapper{width:unset;flex-direction:column}.stepper.vertical{height:100%}.stepper.vertical .stepper-wrapper{flex-direction:column;width:unset;height:100%}.stepper-wrapper{display:flex;flex-direction:row;width:100%}.stepper-wrapper ::slotted(*){display:flex;flex:1;justify-content:flex-start}.stepper-progress{display:flex;justify-content:center;align-items:center;font:600 0.875rem/1.25rem "Source Sans 3";min-width:56px;height:56px;border-radius:9999px;background:conic-gradient(#0A8276 var(--pb, 0%), #8D8786 0)}.stepper-progress .progress-detail{display:flex;justify-content:center;align-items:center;text-align:center;width:48px;height:48px;border-radius:9999px;background:white}';const c=a;const h=class{constructor(s){t(this,s);this.ifxChange=e(this,"ifxChange",7);this.activeStep=1;this.indicatorPosition="left";this.showStepNumber=false;this.variant="default";this.shouldEmitEvent=true;this.emittedByClick=false}onStepChange(t){const e=this.getSteps();const s=e[t.detail.previousActiveStep-1];if(s&&!s.complete){s.setAttribute("error","true")}}handleActiveStep(t,e){const s=this.getSteps();if(!this.shouldEmitEvent){this.shouldEmitEvent=true;return}if(s[t-1]){if(!s[t-1].disabled){this.emitIfxChange(t,e)}else{if(t<e){let i=t;this.shouldEmitEvent=false;while(i>=1&&s[i-1].disabled)i--;if(i<1){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}else{let i=t;this.shouldEmitEvent=false;while(i<=this.stepsCount&&s[i-1].disabled)i++;if(i>this.stepsCount){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}}}}emitIfxChange(t,e){this.ifxChange.emit({activeStep:t,previousActiveStep:e,totalSteps:this.stepsCount,emittedByClick:this.emittedByClick});this.emittedByClick=false}getSteps(){const t=this.el.querySelectorAll("ifx-step");return t}addStepIdsToStepsAndCountSteps(){const t=this.getSteps();t[t.length-1].lastStep=true;for(let e=0;e<t.length;e++){t[e].stepId=e+1}this.stepsCount=t.length}setActiveStep(t,e=false){this.emittedByClick=e;this.activeStep=t}setStepsBeforeActiveToComplete(){const t=this.getSteps();t.forEach(((t,e)=>{if(e+1<this.activeStep)t.complete=true}))}syncIfxSteps(){const t=this.getSteps();for(let e=0;e<t.length;e++){const s={activeStep:this.activeStep,indicatorPosition:this.indicatorPosition!=="right"?"left":"right",showStepNumber:this.showStepNumber,variant:this.variant!=="compact"&&this.variant!=="vertical"?"default":this.variant,setActiveStep:this.setActiveStep.bind(this)};t[e].stepperState=s}}setInitialActiveStep(){this.activeStep=Math.max(1,Math.min(this.stepsCount+(this.variant!=="compact"?1:0),this.activeStep))}componentWillLoad(){if(!p(this.el)){r("ifx-stepper")}this.addStepIdsToStepsAndCountSteps();this.setInitialActiveStep();this.setStepsBeforeActiveToComplete()}componentDidLoad(){this.syncIfxSteps()}componentWillUpdate(){this.syncIfxSteps()}render(){return s("div",{key:"b317152f68397708683ff53247764974e50c17e0","aria-label":"a stepper",role:"navigation",class:`stepper ${this.variant!=="compact"&&this.variant!=="vertical"?"default":this.variant} ${this.variant==="compact"?"compact-"+this.indicatorPosition:""}`},this.variant==="compact"&&s("div",{key:"fe39a480499c0a8e502b9fa24e9cf4c6140a1813",class:"stepper-progress"},s("div",{key:"6ce5d591e482a9263ab3f978c3b09e361e1b33e5",class:"progress-detail"},`${Math.min(this.activeStep,this.stepsCount)} of ${this.stepsCount}`)),s("div",{key:"74f54583708732b3d4f8fa2e778e91ec2bc715bd",class:`stepper-wrapper`},s("slot",{key:"82db68aa7f92ff38152e607ca5a5fc0d09c546a3"})))}componentDidRender(){if(this.variant=="compact"){const t=this.el.shadowRoot.querySelector(".stepper-progress");t.style.setProperty("--pb",`${this.activeStep/this.stepsCount*100}%`)}}get el(){return i(this)}static get watchers(){return{activeStep:["handleActiveStep"]}}};h.style=c;export{h as ifx_stepper};
|
2
|
+
//# sourceMappingURL=p-d8a57524.entry.js.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as t,c as i,h as s,g as e}from"./p-b7a462e5.js";import{t as a}from"./p-6ecb6a6f.js";import{i as o}from"./p-1ecafb97.js";const n=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex}.tabs{display:flex;font-family:var(--ifx-font-family);width:100%}.tabs.horizontal{flex-direction:column}.tabs.vertical{flex-direction:row}.tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list:focus-within .active-border{display:none}.active-border{content:"";position:absolute;transition:left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0A8276}.tabs.vertical .tabs-list{flex-direction:column;border-bottom:none}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px}.tabs:not(.vertical) .tab-item.full-width{flex:1}.tab-item{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;cursor:pointer;position:relative}.tab-item.icon__right{flex-direction:row-reverse;justify-content:flex-end}.tab-item:hover{color:#0A8276}.tab-item:active,.tab-item.active{color:#0A8276}.tab-item:focus,.tab-item.focus{outline:none;border-radius:1px;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item.disabled{color:#BFBBBB;pointer-events:none}.tabs.vertical .tab-item{border-right:2px solid transparent;min-width:7em}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0A8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}';const r=n;const h=class{constructor(s){t(this,s);this.ifxChange=i(this,"ifxChange",7);this.orientation="horizontal";this.activeTabIndex=0;this.fullWidth=false;this.internalActiveTabIndex=0;this.internalFocusedTabIndex=0;this.tabRefs=[];this.tabHeaderRefs=[];this.disabledTabs=[];this.tabObjects=[]}updateBorderOnWindowResize(){this.updateBorderAndFocus()}setActiveAndFocusedTab(t){var i;if(t>=this.tabObjects.length){t=this.tabObjects.length-1}if(t<0){t=0}if(!((i=this.tabObjects[t])===null||i===void 0?void 0:i.disabled)){this.internalActiveTabIndex=t;this.internalFocusedTabIndex=t}}handleTabHeaderChange(t){const i=t.target.getAttribute("slot").replace("tab-","");this.tabObjects[i].header=t.detail;this.tabObjects=[...this.tabObjects]}activeTabIndexChanged(t,i){if(t!==i){this.setActiveAndFocusedTab(t)}}componentWillLoad(){if(!o(this.el)){a("ifx-tabs")}this.internalOrientation=this.orientation.toLowerCase()==="vertical"?"vertical":"horizontal";if(this.internalActiveTabIndex!==this.activeTabIndex){this.ifxChange.emit({previousTab:this.internalActiveTabIndex,currentTab:this.activeTabIndex})}this.onSlotChange();this.setActiveAndFocusedTab(this.activeTabIndex);this.updateTabStyles()}updateTabStyles(){this.tabHeaderRefs.forEach(((t,i)=>{t.classList.toggle("active",i===this.internalActiveTabIndex);t.setAttribute("aria-selected",i===this.internalActiveTabIndex?"true":"false")}))}reRenderBorder(){const t=this.el.shadowRoot.querySelector(".active-border");if(t&&this.tabHeaderRefs[this.internalActiveTabIndex]){if(this.orientation==="horizontal"){t.style.left=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;t.style.width=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;t.style.top="";t.style.height=""}else{t.style.top=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;t.style.height=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;t.style.left="";t.style.width=""}}}onSlotChange(){const t=this.el.querySelectorAll("ifx-tab");this.tabObjects=Array.from(t).map((t=>({header:t===null||t===void 0?void 0:t.header,disabled:(t===null||t===void 0?void 0:t.disabled)===true,icon:t===null||t===void 0?void 0:t.icon,iconPosition:t===null||t===void 0?void 0:t.iconPosition})));this.tabRefs=Array.from(t);this.tabRefs.forEach(((t,i)=>{t.setAttribute("slot",`tab-${i}`)}))}setDefaultOrientation(){const t=["horizontal","vertical"];const i=this.orientation.toLowerCase();if(!t.includes(i)){this.internalOrientation="horizontal"}else this.internalOrientation=this.orientation}componentDidLoad(){this.updateBorderAndFocus();this.tabHeaderRefs.forEach(((t,i)=>{t.addEventListener("focus",this.onTabFocus(i))}))}onTabFocus(t){return()=>{this.internalFocusedTabIndex=t}}disconnectedCallback(){this.tabHeaderRefs.forEach(((t,i)=>{t.removeEventListener("focus",this.onTabFocus(i))}))}componentDidUpdate(){this.updateBorderAndFocus()}updateBorderAndFocus(){this.reRenderBorder();this.updateTabFocusability()}updateTabFocusability(){this.tabHeaderRefs.forEach(((t,i)=>{t.tabIndex=i===this.internalActiveTabIndex?0:-1}))}focusNextTab(){let t=this.internalFocusedTabIndex+1;while(t<this.tabHeaderRefs.length&&this.tabObjects[t].disabled){t++}if(t>=0&&t<this.tabHeaderRefs.length){this.internalFocusedTabIndex=t;this.tabHeaderRefs[t].focus()}}focusPreviousTab(){let t=this.internalFocusedTabIndex-1;while(t>=0&&this.tabObjects[t].disabled){t--}if(t>=0&&t<this.tabHeaderRefs.length){this.internalFocusedTabIndex=t;this.tabHeaderRefs[t].focus()}}getTabItemClass(t){const i=t===this.internalActiveTabIndex&&!this.tabObjects[t].disabled;const s=this.tabObjects[t].disabled;const e=this.tabObjects[t].iconPosition;return`tab-item ${this.fullWidth?"full-width":""} ${i?"active":""} ${s?"disabled":""} ${"icon__"+e}`}handleClick(t,i){this.ifxChange.emit({previousTab:this.internalActiveTabIndex,currentTab:i});if(!t.disabled)this.internalActiveTabIndex=i}handleKeyDown(t){if(t.key==="Tab"){if(t.shiftKey){if(this.internalFocusedTabIndex===0){return}else{t.preventDefault();this.focusPreviousTab()}}else{if(this.internalFocusedTabIndex===this.tabHeaderRefs.length-1){return}else{t.preventDefault();this.focusNextTab()}}}else if(t.key==="Enter"){const i=t.composedPath();const s=i.some((t=>this.tabHeaderRefs.includes(t)));if(!s){return}if(this.internalFocusedTabIndex!==-1&&!this.tabObjects[this.internalFocusedTabIndex].disabled){const t=this.internalActiveTabIndex;this.internalActiveTabIndex=this.internalFocusedTabIndex;this.ifxChange.emit({previousTab:t,currentTab:this.internalFocusedTabIndex})}}}render(){var t;return s("div",{key:"
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as t,c as i,h as s,g as e}from"./p-b7a462e5.js";import{t as a}from"./p-6ecb6a6f.js";import{i as o}from"./p-1ecafb97.js";const n=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex}.tabs{display:flex;font-family:var(--ifx-font-family);width:100%}.tabs.horizontal{flex-direction:column}.tabs.vertical{flex-direction:row}.tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list:focus-within .active-border{display:none}.active-border{content:"";position:absolute;transition:left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0A8276}.tabs.vertical .tabs-list{flex-direction:column;border-bottom:none}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px}.tabs:not(.vertical) .tab-item.full-width{flex:1}.tab-item{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;cursor:pointer;position:relative}.tab-item.icon__right{flex-direction:row-reverse;justify-content:flex-end}.tab-item:hover{color:#0A8276}.tab-item:active,.tab-item.active{color:#0A8276}.tab-item:focus,.tab-item.focus{outline:none;border-radius:1px;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item.disabled{color:#BFBBBB;pointer-events:none}.tabs.vertical .tab-item{border-right:2px solid transparent;min-width:7em}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0A8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}';const r=n;const h=class{constructor(s){t(this,s);this.ifxChange=i(this,"ifxChange",7);this.orientation="horizontal";this.activeTabIndex=0;this.fullWidth=false;this.internalActiveTabIndex=0;this.internalFocusedTabIndex=0;this.tabRefs=[];this.tabHeaderRefs=[];this.disabledTabs=[];this.tabObjects=[]}updateBorderOnWindowResize(){this.updateBorderAndFocus()}setActiveAndFocusedTab(t){var i;if(t>=this.tabObjects.length){t=this.tabObjects.length-1}if(t<0){t=0}if(!((i=this.tabObjects[t])===null||i===void 0?void 0:i.disabled)){this.internalActiveTabIndex=t;this.internalFocusedTabIndex=t}}handleTabHeaderChange(t){const i=t.target.getAttribute("slot").replace("tab-","");this.tabObjects[i].header=t.detail;this.tabObjects=[...this.tabObjects]}activeTabIndexChanged(t,i){if(t!==i){this.setActiveAndFocusedTab(t)}}componentWillLoad(){if(!o(this.el)){a("ifx-tabs")}this.internalOrientation=this.orientation.toLowerCase()==="vertical"?"vertical":"horizontal";if(this.internalActiveTabIndex!==this.activeTabIndex){this.ifxChange.emit({previousTab:this.internalActiveTabIndex,currentTab:this.activeTabIndex})}this.onSlotChange();this.setActiveAndFocusedTab(this.activeTabIndex);this.updateTabStyles()}updateTabStyles(){this.tabHeaderRefs.forEach(((t,i)=>{t.classList.toggle("active",i===this.internalActiveTabIndex);t.setAttribute("aria-selected",i===this.internalActiveTabIndex?"true":"false")}))}reRenderBorder(){const t=this.el.shadowRoot.querySelector(".active-border");if(t&&this.tabHeaderRefs[this.internalActiveTabIndex]){if(this.orientation==="horizontal"){t.style.left=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;t.style.width=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;t.style.top="";t.style.height=""}else{t.style.top=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;t.style.height=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;t.style.left="";t.style.width=""}}}onSlotChange(){const t=this.el.querySelectorAll("ifx-tab");this.tabObjects=Array.from(t).map((t=>({header:t===null||t===void 0?void 0:t.header,disabled:(t===null||t===void 0?void 0:t.disabled)===true,icon:t===null||t===void 0?void 0:t.icon,iconPosition:t===null||t===void 0?void 0:t.iconPosition})));this.tabRefs=Array.from(t);this.tabRefs.forEach(((t,i)=>{t.setAttribute("slot",`tab-${i}`)}))}setDefaultOrientation(){const t=["horizontal","vertical"];const i=this.orientation.toLowerCase();if(!t.includes(i)){this.internalOrientation="horizontal"}else this.internalOrientation=this.orientation}componentDidLoad(){this.updateBorderAndFocus();this.tabHeaderRefs.forEach(((t,i)=>{t.addEventListener("focus",this.onTabFocus(i))}))}onTabFocus(t){return()=>{this.internalFocusedTabIndex=t}}disconnectedCallback(){this.tabHeaderRefs.forEach(((t,i)=>{t.removeEventListener("focus",this.onTabFocus(i))}))}componentDidUpdate(){this.updateBorderAndFocus()}updateBorderAndFocus(){this.reRenderBorder();this.updateTabFocusability()}updateTabFocusability(){this.tabHeaderRefs.forEach(((t,i)=>{t.tabIndex=i===this.internalActiveTabIndex?0:-1}))}focusNextTab(){let t=this.internalFocusedTabIndex+1;while(t<this.tabHeaderRefs.length&&this.tabObjects[t].disabled){t++}if(t>=0&&t<this.tabHeaderRefs.length){this.internalFocusedTabIndex=t;this.tabHeaderRefs[t].focus()}}focusPreviousTab(){let t=this.internalFocusedTabIndex-1;while(t>=0&&this.tabObjects[t].disabled){t--}if(t>=0&&t<this.tabHeaderRefs.length){this.internalFocusedTabIndex=t;this.tabHeaderRefs[t].focus()}}getTabItemClass(t){const i=t===this.internalActiveTabIndex&&!this.tabObjects[t].disabled;const s=this.tabObjects[t].disabled;const e=this.tabObjects[t].iconPosition;return`tab-item ${this.fullWidth?"full-width":""} ${i?"active":""} ${s?"disabled":""} ${"icon__"+e}`}handleClick(t,i){this.ifxChange.emit({previousTab:this.internalActiveTabIndex,currentTab:i});if(!t.disabled)this.internalActiveTabIndex=i}handleKeyDown(t){if(t.key==="Tab"){if(t.shiftKey){if(this.internalFocusedTabIndex===0){return}else{t.preventDefault();this.focusPreviousTab()}}else{if(this.internalFocusedTabIndex===this.tabHeaderRefs.length-1){return}else{t.preventDefault();this.focusNextTab()}}}else if(t.key==="Enter"){const i=t.composedPath();const s=i.some((t=>this.tabHeaderRefs.includes(t)));if(!s){return}if(this.internalFocusedTabIndex!==-1&&!this.tabObjects[this.internalFocusedTabIndex].disabled){const t=this.internalActiveTabIndex;this.internalActiveTabIndex=this.internalFocusedTabIndex;this.ifxChange.emit({previousTab:t,currentTab:this.internalFocusedTabIndex})}}}render(){var t;return s("div",{key:"80bbdad814aecf0d831424acf50452a5ae115c60","aria-label":"navigation tabs",class:`tabs ${this.internalOrientation}`},s("ul",{key:"1f91010563022d6057b9701a5a086c10c7a36aa9",role:"tablist",class:"tabs-list"},(t=this.tabObjects)===null||t===void 0?void 0:t.map(((t,i)=>s("li",{class:this.getTabItemClass(i),ref:t=>this.tabHeaderRefs[i]=t,onMouseDown:t=>t.preventDefault(),onClick:()=>this.handleClick(t,i),"aria-selected":i===this.internalActiveTabIndex?"true":"false","aria-disabled":t.disabled?"true":"false",role:"tab"},(t===null||t===void 0?void 0:t.icon)?s("ifx-icon",{icon:t.icon}):"",t===null||t===void 0?void 0:t.header))),s("div",{key:"559e7a8442bf8b7a14b44bd60261aa320554a7ee",class:"active-border"})),s("div",{key:"644afac658af70ebeedc346b2e5155194aad2383",class:"tab-content"},Array.from(this.tabObjects).map(((t,i)=>s("div",{style:{display:i===this.internalActiveTabIndex?"block":"none"}},s("slot",{name:`tab-${i}`}))))))}get el(){return e(this)}static get watchers(){return{activeTabIndex:["activeTabIndexChanged"]}}};h.style=r;export{h as ifx_tabs};
|
2
|
+
//# sourceMappingURL=p-e196740d.entry.js.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as e,c as t,h as r,g as i}from"./p-b7a462e5.js";import{t as a}from"./p-6ecb6a6f.js";import{i as o}from"./p-1ecafb97.js";const s=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}';const l=s;const n=class{constructor(r){e(this,r);this.ifxClose=t(this,"ifxClose",7);this.variant="primary";this.closable=true;this.AriaLive="assertive";this.alertTypeDescription={primary:"Neutral alert",success:"Success Alert",danger:"Error Alert",warning:"Warning Alert",info:"Neutral alert"}}handleClose(){this.ifxClose.emit()}renderCloseButton(){return r("div",{class:"close-icon-wrapper"},r("button",{onClick:this.handleClose.bind(this),"aria-label":"Dismiss alert"},r("ifx-icon",{icon:"cross-16"})))}generateUniqueId(e="id"){return`${e}-${Math.random().toString(36).substring(2,9)}`}componentWillLoad(){if(!this.uniqueId){this.uniqueId=this.generateUniqueId("alert")}if(!o(this.el)){a("ifx-alert")}}render(){return this.variant==="info"?r("div",{class:"alert__info-wrapper",role:"alert","aria-live":this.AriaLive,"aria-describedby":this.alertTypeDescription[this.variant],"aria-labelledby":"alert-text alert-description"},r("div",{class:"info__text-wrapper"},r("div",{class:"info__headline-wrapper"},r("slot",{name:"headline"})),r("div",{id:`alert-description-${this.uniqueId}`,class:"info__description-wrapper"},r("slot",{name:"desc"}))),this.closable?this.renderCloseButton():null):r("div",{class:`alert ${this.variant}`,role:"alert"},this.icon&&r("div",{class:"icon-wrapper"},r("ifx-icon",{icon:this.icon})),r("div",{class:"alert-text",id:`alert-text-${this.uniqueId}`},r("slot",null)),this.closable?this.renderCloseButton():null)}get el(){return i(this)}};n.style=l;const p=".react__template-wrapper{display:flex;width:300px;height:200px;border-radius:3px;border:1px solid #ccc}.react__template-wrapper.hide{display:none}.react__template-wrapper:hover{cursor:pointer}.template__page-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.template__page-wrapper .repository__url{text-decoration:none}.input__fields-wrapper{display:flex;flex-direction:column;gap:10px}.details__wrapper{display:flex;flex-direction:column;gap:10px}.selection__buttons-wrapper{display:flex;gap:10px;padding-top:10px;align-items:center}.selection__buttons-wrapper .vue__label{color:#ccc}.selection__buttons-wrapper label:not(.vue__label):hover{cursor:pointer}.selection__buttons-wrapper .selection__input{display:flex;align-items:center;gap:5px}.selection__buttons-wrapper .selection__input input{margin:0;height:20px;width:20px}.selection__buttons-wrapper .selection__input input:hover:not(.vue__input){cursor:pointer}.image__wrapper img{position:relative;width:300px;height:100%;border-radius:3px;object-fit:contain;transition:transform 0.2s}.image__wrapper img:hover{transform:scale(2);top:50px;z-index:100}";const c=p;const d=class{constructor(r){e(this,r);this.toggleTemplates=t(this,"toggleTemplates",7);this.fieldError=t(this,"fieldError",7);this.repoDetails={name:"",desc:"",framework:""};this.showDetails=false;this.isTemplatePage=false;this.isLoading=true;this.clientId="Ov23lixmXiNTTNb6V5W6";this.redirectUri="https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development";this.scope="repo workflow";this.state="template123"}authUser(){const e=`https://github.com/login/oauth/authorize?`+`client_id=${this.clientId}&`+`redirect_uri=${this.redirectUri}&`+`scope=${this.scope}&`+`state=${this.state}`;window.open(e,"_blank")}componentDidLoad(){const e=new URL(window.location.href);const t=e.searchParams.get("code");const{templateName:r}=this.getLocalStorageValues();if(t&&this.name===r){this.isTemplatePage=true;this.toggleTemplates.emit("details");this.getUserToken(t)}}getLocalStorageValues(){const e=localStorage.getItem("repo_name");const t=localStorage.getItem("repo_desc");const r=localStorage.getItem("repo_framework");const i=localStorage.getItem("selectedTemplate");return{repoName:e,repoDesc:t,repoFramework:r,templateName:i}}async getUserToken(e){const{repoName:t,repoDesc:r,repoFramework:i,templateName:a}=this.getLocalStorageValues();fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${e}/${t}/${r}/${i}/${a}`).then((e=>{if(e.ok){return e.text()}else{return e.text().then((e=>{throw new Error(e)}))}})).then((e=>{if(e){this.isLoading=false;this.repoUrl=e;localStorage.clear()}})).catch((e=>{this.repoError=e.message;console.error("Error:",e.message)}))}handleUserInput(e,t){if(t==="name"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{name:e.target.value})}else if(t==="desc"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{desc:e.target.value})}else if(t==="framework"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{framework:e.target.value})}}submitUserData(){if(this.repoDetails.name&&this.repoDetails.desc&&this.repoDetails.framework){localStorage.setItem("repo_name",this.repoDetails.name);localStorage.setItem("repo_desc",this.repoDetails.desc);localStorage.setItem("repo_framework",this.repoDetails.framework);localStorage.setItem("selectedTemplate",this.name);this.fieldError.emit(false);this.authUser()}else{this.fieldError.emit("All fields are mandatory")}}togglePadding(e){let t=this.el.parentElement;if(t){const r=t.getRootNode();if(r instanceof ShadowRoot){t=r.host.parentElement}else{t=t.parentElement}if(e==="remove"){t.parentElement.style.padding="0px"}else if(e==="add"){t.parentElement.style.padding="4rem 20px"}}}handleCurrentTemplate(e){if(e&&!this.showDetails){this.togglePadding("remove");const t=e.currentTarget;this.toggleTemplates.emit(t);this.showDetails=true}}async toggleTemplate(e){const t=this.el.shadowRoot.querySelector(".react__template-wrapper");if(t){if(!t.classList.contains("hide")&&e){if(t!==e){t.classList.add("hide")}}else{if(this.showDetails){this.showDetails=false}this.togglePadding("add");t.classList.remove("hide")}}}render(){return r("div",{key:"a6433871f9175e0616c40389d0a39a94797d67b3"},this.isTemplatePage?r("div",{class:"template__page-wrapper"},!this.repoUrl&&!this.repoError&&r("div",null,r("h3",null,"Your repository is getting ready.."),r("p",null,"This will only take a minute.")),this.isLoading&&!this.repoError&&r("div",null,r("ifx-spinner",{variant:"default",size:"s"})),this.repoUrl&&r("ifx-link",{href:this.repoUrl,target:"_parent",size:"m",variant:"underlined"},"Your repository"),this.repoError&&r("div",null,this.repoError)):r("div",{class:"react__template-container"},r("div",{class:"react__template-wrapper",onClick:e=>this.handleCurrentTemplate(e)},r("div",{class:"image__wrapper"},r("img",{src:this.thumbnail}))),this.showDetails&&r("div",{class:"details__wrapper"},r("div",{class:"selection__buttons-wrapper"},r("div",{class:"selection__input"},r("input",{type:"radio",id:"react",name:"chosen_framework",value:"react",onInput:e=>this.handleUserInput(e,"framework")}),r("label",{htmlFor:"react"},"React")),r("div",{class:"selection__input vue"},r("input",{class:"vue__input",disabled:true,type:"radio",id:"vue",name:"chosen_framework",value:"vue",onInput:e=>this.handleUserInput(e,"framework")}),r("label",{class:"vue__label",htmlFor:"vue"},"Vue")," (Soon)")),r("div",{class:"input__fields-wrapper"},r("ifx-text-field",{required:true,onInput:e=>this.handleUserInput(e,"name"),size:"m",icon:"c-info-16",placeholder:"Your repository name"},"Repository Name"),r("ifx-text-field",{required:true,size:"m",icon:"c-info-16",onInput:e=>this.handleUserInput(e,"desc"),placeholder:"Your repository description"},"Repository Description"),r("ifx-button",{fullWidth:true,onClick:()=>this.submitUserData(),variant:"primary"},"Generate template")))))}get el(){return i(this)}};d.style=c;export{n as ifx_alert,d as ifx_template};
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as e,c as t,h as r,g as i}from"./p-b7a462e5.js";import{t as a}from"./p-6ecb6a6f.js";import{i as o}from"./p-1ecafb97.js";const s=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}';const l=s;const n=class{constructor(r){e(this,r);this.ifxClose=t(this,"ifxClose",7);this.variant="primary";this.closable=true;this.AriaLive="assertive";this.alertTypeDescription={primary:"Neutral alert",success:"Success Alert",danger:"Error Alert",warning:"Warning Alert",info:"Neutral alert"}}handleClose(){this.ifxClose.emit()}renderCloseButton(){return r("div",{class:"close-icon-wrapper"},r("button",{onClick:this.handleClose.bind(this),"aria-label":"Dismiss alert"},r("ifx-icon",{icon:"cross-16"})))}generateUniqueId(e="id"){return`${e}-${Math.random().toString(36).substring(2,9)}`}componentWillLoad(){if(!this.uniqueId){this.uniqueId=this.generateUniqueId("alert")}if(!o(this.el)){a("ifx-alert")}}render(){return this.variant==="info"?r("div",{class:"alert__info-wrapper",role:"alert","aria-live":this.AriaLive,"aria-describedby":this.alertTypeDescription[this.variant],"aria-labelledby":"alert-text alert-description"},r("div",{class:"info__text-wrapper"},r("div",{class:"info__headline-wrapper"},r("slot",{name:"headline"})),r("div",{id:`alert-description-${this.uniqueId}`,class:"info__description-wrapper"},r("slot",{name:"desc"}))),this.closable?this.renderCloseButton():null):r("div",{class:`alert ${this.variant}`,role:"alert"},this.icon&&r("div",{class:"icon-wrapper"},r("ifx-icon",{icon:this.icon})),r("div",{class:"alert-text",id:`alert-text-${this.uniqueId}`},r("slot",null)),this.closable?this.renderCloseButton():null)}get el(){return i(this)}};n.style=l;const p=".react__template-wrapper{display:flex;width:300px;height:200px;border-radius:3px;border:1px solid #ccc}.react__template-wrapper.hide{display:none}.react__template-wrapper:hover{cursor:pointer}.template__page-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.template__page-wrapper .repository__url{text-decoration:none}.input__fields-wrapper{display:flex;flex-direction:column;gap:10px}.details__wrapper{display:flex;flex-direction:column;gap:10px}.selection__buttons-wrapper{display:flex;gap:10px;padding-top:10px;align-items:center}.selection__buttons-wrapper .vue__label{color:#ccc}.selection__buttons-wrapper label:not(.vue__label):hover{cursor:pointer}.selection__buttons-wrapper .selection__input{display:flex;align-items:center;gap:5px}.selection__buttons-wrapper .selection__input input{margin:0;height:20px;width:20px}.selection__buttons-wrapper .selection__input input:hover:not(.vue__input){cursor:pointer}.image__wrapper img{position:relative;width:300px;height:100%;border-radius:3px;object-fit:contain;transition:transform 0.2s}.image__wrapper img:hover{transform:scale(2);top:50px;z-index:100}";const c=p;const d=class{constructor(r){e(this,r);this.toggleTemplates=t(this,"toggleTemplates",7);this.fieldError=t(this,"fieldError",7);this.repoDetails={name:"",desc:"",framework:""};this.showDetails=false;this.isTemplatePage=false;this.isLoading=true;this.clientId="Ov23lixmXiNTTNb6V5W6";this.redirectUri="https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development";this.scope="repo workflow";this.state="template123"}authUser(){const e=`https://github.com/login/oauth/authorize?`+`client_id=${this.clientId}&`+`redirect_uri=${this.redirectUri}&`+`scope=${this.scope}&`+`state=${this.state}`;window.open(e,"_blank")}componentDidLoad(){const e=new URL(window.location.href);const t=e.searchParams.get("code");const{templateName:r}=this.getLocalStorageValues();if(t&&this.name===r){this.isTemplatePage=true;this.toggleTemplates.emit("details");this.getUserToken(t)}}getLocalStorageValues(){const e=localStorage.getItem("repo_name");const t=localStorage.getItem("repo_desc");const r=localStorage.getItem("repo_framework");const i=localStorage.getItem("selectedTemplate");return{repoName:e,repoDesc:t,repoFramework:r,templateName:i}}async getUserToken(e){const{repoName:t,repoDesc:r,repoFramework:i,templateName:a}=this.getLocalStorageValues();fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${e}/${t}/${r}/${i}/${a}`).then((e=>{if(e.ok){return e.text()}else{return e.text().then((e=>{throw new Error(e)}))}})).then((e=>{if(e){this.isLoading=false;this.repoUrl=e;localStorage.clear()}})).catch((e=>{this.repoError=e.message;console.error("Error:",e.message)}))}handleUserInput(e,t){if(t==="name"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{name:e.target.value})}else if(t==="desc"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{desc:e.target.value})}else if(t==="framework"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{framework:e.target.value})}}submitUserData(){if(this.repoDetails.name&&this.repoDetails.desc&&this.repoDetails.framework){localStorage.setItem("repo_name",this.repoDetails.name);localStorage.setItem("repo_desc",this.repoDetails.desc);localStorage.setItem("repo_framework",this.repoDetails.framework);localStorage.setItem("selectedTemplate",this.name);this.fieldError.emit(false);this.authUser()}else{this.fieldError.emit("All fields are mandatory")}}togglePadding(e){let t=this.el.parentElement;if(t){const r=t.getRootNode();if(r instanceof ShadowRoot){t=r.host.parentElement}else{t=t.parentElement}if(e==="remove"){t.parentElement.style.padding="0px"}else if(e==="add"){t.parentElement.style.padding="4rem 20px"}}}handleCurrentTemplate(e){if(e&&!this.showDetails){this.togglePadding("remove");const t=e.currentTarget;this.toggleTemplates.emit(t);this.showDetails=true}}async toggleTemplate(e){const t=this.el.shadowRoot.querySelector(".react__template-wrapper");if(t){if(!t.classList.contains("hide")&&e){if(t!==e){t.classList.add("hide")}}else{if(this.showDetails){this.showDetails=false}this.togglePadding("add");t.classList.remove("hide")}}}render(){return r("div",{key:"1de8086432131979b1290ea28de6027cf52aa043"},this.isTemplatePage?r("div",{class:"template__page-wrapper"},!this.repoUrl&&!this.repoError&&r("div",null,r("h3",null,"Your repository is getting ready.."),r("p",null,"This will only take a minute.")),this.isLoading&&!this.repoError&&r("div",null,r("ifx-spinner",{variant:"default",size:"s"})),this.repoUrl&&r("ifx-link",{href:this.repoUrl,target:"_parent",size:"m",variant:"underlined"},"Your repository"),this.repoError&&r("div",null,this.repoError)):r("div",{class:"react__template-container"},r("div",{class:"react__template-wrapper",onClick:e=>this.handleCurrentTemplate(e)},r("div",{class:"image__wrapper"},r("img",{src:this.thumbnail}))),this.showDetails&&r("div",{class:"details__wrapper"},r("div",{class:"selection__buttons-wrapper"},r("div",{class:"selection__input"},r("input",{type:"radio",id:"react",name:"chosen_framework",value:"react",onInput:e=>this.handleUserInput(e,"framework")}),r("label",{htmlFor:"react"},"React")),r("div",{class:"selection__input vue"},r("input",{class:"vue__input",disabled:true,type:"radio",id:"vue",name:"chosen_framework",value:"vue",onInput:e=>this.handleUserInput(e,"framework")}),r("label",{class:"vue__label",htmlFor:"vue"},"Vue")," (Soon)")),r("div",{class:"input__fields-wrapper"},r("ifx-text-field",{required:true,onInput:e=>this.handleUserInput(e,"name"),size:"m",icon:"c-info-16",placeholder:"Your repository name"},"Repository Name"),r("ifx-text-field",{required:true,size:"m",icon:"c-info-16",onInput:e=>this.handleUserInput(e,"desc"),placeholder:"Your repository description"},"Repository Description"),r("ifx-button",{fullWidth:true,onClick:()=>this.submitUserData(),variant:"primary"},"Generate template")))))}get el(){return i(this)}};d.style=c;export{n as ifx_alert,d as ifx_template};
|
2
|
+
//# sourceMappingURL=p-e45d85fc.entry.js.map
|