@infineon/infineon-design-system-stencil 37.2.0 → 38.0.0--canary.1954.f29b2d8edb0fe3ea64fff93b4a103a880db2a074.0

package/dist/infineon-design-system-stencil/{p-437973f5.entry.js → p-e61d3fc6.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as o,g as i}from"./p-b7a462e5.js";import{t as e}from"./p-6ecb6a6f.js";import{i as s}from"./p-1ecafb97.js";import{c as a}from"./p-e459974a.js";const l=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:absolute;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF;width:max-content;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:start}.tooltip-dismissible .close-button{all:unset;cursor:pointer;position:relative;order:2;margin-top:12px;margin-right:12px;line-height:0px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}.tooltip-compact{min-width:28px !important;max-width:145px !important}.tooltip-dismissible{min-width:145px !important;max-width:310px !important}.tooltip-extended{min-width:145px !important;max-width:310px !important}';const d=l;const p=class{constructor(o){t(this,o);this.tooltipVisible=false;this.header="";this.text="";this.position="auto";this.internalPosition="auto";this.variant="compact";this.popperInstance=null;this.onMouseEnter=()=>{var t,o;(t=this.popperInstance)===null||t===void 0?void 0:t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:true}]})));this.initializePopper();this.tooltipVisible=true;this.tooltipEl.style.display="block";(o=this.popperInstance)===null||o===void 0?void 0:o.update()};this.onMouseLeave=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"};this.onClick=()=>{var t;if(this.variant.toLowerCase()==="dismissible"){this.initializePopper();this.tooltipVisible=!this.tooltipVisible;this.tooltipEl.style.display=this.tooltipVisible?"block":"none";(t=this.popperInstance)===null||t===void 0?void 0:t.update()}};this.onDismissClick=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"}}componentWillLoad(){if(!s(this.el)){e("ifx-tooltip")}if(this.variant.toLowerCase().trim()===""){this.variant="compact"}}componentDidLoad(){const t=this.el.shadowRoot.querySelector(".tooltip__container").firstChild;if(this.variant.toLowerCase()==="compact"||this.variant.toLowerCase()==="extended"){t.addEventListener("mouseenter",this.onMouseEnter);t.addEventListener("mouseleave",this.onMouseLeave)}else{t.addEventListener("click",this.onClick)}}initializePopper(){if(this.popperInstance)return;this.referenceEl=this.el;if(this.variant.toLowerCase()==="compact"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-compact")}else if(this.variant.toLowerCase()==="dismissible"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-dismissible")}else{this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-extended")}const t=this.position==="auto"?this.determineBestPosition():this.position;this.internalPosition=t;if(this.tooltipEl&&this.referenceEl){this.popperInstance=a(this.referenceEl,this.tooltipEl,{placement:this.internalPosition,modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"arrow",options:{element:".tooltip-arrow-svg"}}]})}this.tooltipEl.setAttribute("data-placement",t)}determineBestPosition(){const t=this.referenceEl.getBoundingClientRect();const o=window.scrollY;const i=window.scrollX;const e=t.top+o+t.height/2;const s=t.left+i+t.width/2;if(this.position==="auto"){if(e>window.innerHeight/2){if(s>window.innerWidth/2){return"top-end"}else{return"top-start"}}else{if(s>window.innerWidth/2){return"bottom-end"}else{return"bottom-start"}}}else{return this.position}}positionChanged(t){var o;this.internalPosition=t;(o=this.popperInstance)===null||o===void 0?void 0:o.destroy();this.popperInstance=null}disconnectedCallback(){var t;(t=this.popperInstance)===null||t===void 0?void 0:t.destroy()}render(){const t={"tooltip-dismissible":true,visible:this.tooltipVisible};const i={"tooltip-compact":true,visible:this.tooltipVisible};const e={"tooltip-extended":true,visible:this.tooltipVisible};return o("div",{key:"df959afc95f1b2b75bc3de79398d587da41d25cc","aria-label":"a tooltip showing important information","aria-value":this.header,class:"tooltip__container"},o("slot",{key:"5895e82d3b4a7b007dfb05244b7cc542cbcddbc1"}),this.variant.toLowerCase()==="dismissible"&&o("div",{key:"e3868c8086f527391cb273f45aa43a0c1274e602",class:t},o("button",{key:"f28587b741f9aa95472a697a35cecc4119135f9d","aria-label":"Close Tooltip",class:"close-button",onClick:this.onDismissClick},o("ifx-icon",{key:"0936939f06125fe5e78f88d4e709d295f8d44e78",icon:"cross16"})),o("div",{key:"bf384a9be25de24f90e7c3a8f3d8ba70f84ae880",class:"tooltip-dismissible-content"},this.header&&o("div",{key:"6d8ced2b903622b33144f9c26d55bbf355d18492",class:"tooltip-dismissible-header"},this.header),o("div",{key:"5233b918b47b30181839839f826197a0d0cbf8e9",class:"tooltip-dismissible-body"},this.text)),o("svg",{key:"9ba522c81473b13fdd0a0c0b73595206b9732fbf",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"63b574b7e641f17b3133be55cd4d994c076a49a7",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="compact"&&o("div",{key:"e01d616e13876b48a5a27cf085411998258c839f",class:i},this.text,o("svg",{key:"179534f0db424afbe6c57df9642a2ad105d206d0",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"2c820685f49f9bd5270080553bf936c287cc9785",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="extended"&&o("div",{key:"e57f816e9f7cf0a395d06598d026cebc905fc677",class:e},o("slot",{key:"d0ea174ac38e1441be400421b2007e5a8c7e8adf",name:"icon"},this.icon?o("div",{class:"extended_icon"},o("ifx-icon",{icon:this.icon})):o("svg",{class:"extended_icon",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none",viewBox:"0 0 24 24"},o("path",{stroke:"#fff","stroke-linecap":"round","stroke-linejoin":"round",d:"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z"}),o("path",{stroke:"#fff",d:"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z"}),o("path",{fill:"#fff",d:"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"}))),o("div",{key:"7cb363c87a18683ac203935a36b1c24189d9fc86",class:"tooltip-extended-content"},this.header&&o("div",{key:"4ea7357038e44b6f881b235a3824ba668e4c3b70",class:"tooltip-extended-header"},this.header),o("div",{key:"3e91b8d0426655aa4c03b6cf1ec329d131922ace",class:"tooltip-extended-body"},this.text)),o("svg",{key:"1c9d7d7fa9703c3af870934356097e09f596f39c",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"2f1c19e4edb0eb93b4f651a86519341967b271ba",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))))}get el(){return i(this)}static get watchers(){return{position:["positionChanged"]}}};p.style=d;export{p as ifx_tooltip};
-//# sourceMappingURL=p-437973f5.entry.js.map
+import{r as t,h as o,g as i}from"./p-b7a462e5.js";import{t as e}from"./p-6ecb6a6f.js";import{i as s}from"./p-1ecafb97.js";import{c as a}from"./p-e459974a.js";const l=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:absolute;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF;width:max-content;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:start}.tooltip-dismissible .close-button{all:unset;cursor:pointer;position:relative;order:2;margin-top:12px;margin-right:12px;line-height:0px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}.tooltip-compact{min-width:28px !important;max-width:145px !important}.tooltip-dismissible{min-width:145px !important;max-width:310px !important}.tooltip-extended{min-width:145px !important;max-width:310px !important}';const d=l;const p=class{constructor(o){t(this,o);this.tooltipVisible=false;this.header="";this.text="";this.position="auto";this.internalPosition="auto";this.variant="compact";this.popperInstance=null;this.onMouseEnter=()=>{var t,o;(t=this.popperInstance)===null||t===void 0?void 0:t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:true}]})));this.initializePopper();this.tooltipVisible=true;this.tooltipEl.style.display="block";(o=this.popperInstance)===null||o===void 0?void 0:o.update()};this.onMouseLeave=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"};this.onClick=()=>{var t;if(this.variant.toLowerCase()==="dismissible"){this.initializePopper();this.tooltipVisible=!this.tooltipVisible;this.tooltipEl.style.display=this.tooltipVisible?"block":"none";(t=this.popperInstance)===null||t===void 0?void 0:t.update()}};this.onDismissClick=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"}}componentWillLoad(){if(!s(this.el)){e("ifx-tooltip")}if(this.variant.toLowerCase().trim()===""){this.variant="compact"}}componentDidLoad(){const t=this.el.shadowRoot.querySelector(".tooltip__container").firstChild;if(this.variant.toLowerCase()==="compact"||this.variant.toLowerCase()==="extended"){t.addEventListener("mouseenter",this.onMouseEnter);t.addEventListener("mouseleave",this.onMouseLeave)}else{t.addEventListener("click",this.onClick)}}initializePopper(){if(this.popperInstance)return;this.referenceEl=this.el;if(this.variant.toLowerCase()==="compact"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-compact")}else if(this.variant.toLowerCase()==="dismissible"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-dismissible")}else{this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-extended")}const t=this.position==="auto"?this.determineBestPosition():this.position;this.internalPosition=t;if(this.tooltipEl&&this.referenceEl){this.popperInstance=a(this.referenceEl,this.tooltipEl,{placement:this.internalPosition,modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"arrow",options:{element:".tooltip-arrow-svg"}}]})}this.tooltipEl.setAttribute("data-placement",t)}determineBestPosition(){const t=this.referenceEl.getBoundingClientRect();const o=window.scrollY;const i=window.scrollX;const e=t.top+o+t.height/2;const s=t.left+i+t.width/2;if(this.position==="auto"){if(e>window.innerHeight/2){if(s>window.innerWidth/2){return"top-end"}else{return"top-start"}}else{if(s>window.innerWidth/2){return"bottom-end"}else{return"bottom-start"}}}else{return this.position}}positionChanged(t){var o;this.internalPosition=t;(o=this.popperInstance)===null||o===void 0?void 0:o.destroy();this.popperInstance=null}disconnectedCallback(){var t;(t=this.popperInstance)===null||t===void 0?void 0:t.destroy()}render(){const t={"tooltip-dismissible":true,visible:this.tooltipVisible};const i={"tooltip-compact":true,visible:this.tooltipVisible};const e={"tooltip-extended":true,visible:this.tooltipVisible};return o("div",{key:"8a6f4216fbbf73d254377ed7d828400c508a73b4","aria-label":"a tooltip showing important information","aria-value":this.header,class:"tooltip__container"},o("slot",{key:"2244e1dd84e4e7ed753e317d776c78510295cc88"}),this.variant.toLowerCase()==="dismissible"&&o("div",{key:"e904b564221cc7a42aed3a1a8530acc71e7987dd",class:t},o("button",{key:"0965653dae6d37745d9d136e6b5be1c3e1feecbb","aria-label":"Close Tooltip",class:"close-button",onClick:this.onDismissClick},o("ifx-icon",{key:"f418e3966e6ce8fd2c0c20a3120a012cc6ca676d",icon:"cross16"})),o("div",{key:"7450ec1021b6f3ea89c6cf35f22e0e91dedbacdf",class:"tooltip-dismissible-content"},this.header&&o("div",{key:"3611215ae7b24c31d001853a1aeffd5d419be2cc",class:"tooltip-dismissible-header"},this.header),o("div",{key:"926dc3842d88189ec19451fa8ffd7d35d9b595e8",class:"tooltip-dismissible-body"},this.text)),o("svg",{key:"c441ff7875f1a457728e076b3fa915bcffc61285",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"f108cb0255f2b5b2cc41aa72643c613e6fbef223",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="compact"&&o("div",{key:"2269418d97807a3cb38d79b14de2002788621987",class:i},this.text,o("svg",{key:"50ec12aaee875237c9c9fccc93ba9823525cf4d7",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"4b1a57f77f98365f3ef09005298484f28177c968",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="extended"&&o("div",{key:"e401ca7983303922d9922a5617fa73357c720581",class:e},o("slot",{key:"88bc6ed13f4f98e8ebec4c134effd90018491f57",name:"icon"},this.icon?o("div",{class:"extended_icon"},o("ifx-icon",{icon:this.icon})):o("svg",{class:"extended_icon",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none",viewBox:"0 0 24 24"},o("path",{stroke:"#fff","stroke-linecap":"round","stroke-linejoin":"round",d:"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z"}),o("path",{stroke:"#fff",d:"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z"}),o("path",{fill:"#fff",d:"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"}))),o("div",{key:"1d4075957461729790060900046e8225dc805b4d",class:"tooltip-extended-content"},this.header&&o("div",{key:"9caaf7b85ce4a395cde6eea18372db641b6eea64",class:"tooltip-extended-header"},this.header),o("div",{key:"cb20517120bd405f3cfa6b3c2009319a7d5af35b",class:"tooltip-extended-body"},this.text)),o("svg",{key:"74248970374cde8ef5760ac1ddb8919c375b76f1",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"eb67b1f9c179c974b16481475da9e5460dd3eddf",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))))}get el(){return i(this)}static get watchers(){return{position:["positionChanged"]}}};p.style=d;export{p as ifx_tooltip};
+//# sourceMappingURL=p-e61d3fc6.entry.js.map

package/dist/infineon-design-system-stencil/{p-c7e86c7c.entry.js → p-ed30fb98.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as o}from"./p-b7a462e5.js";const n=".container{padding-top:10px}";const t=n;const i=class{constructor(o){e(this,o)}render(){return o("div",{key:"fa2142cca68e60417092d614cb11367974b407f3",class:"container"},o("ifx-accordion",{key:"3abf4ca4138b9b177c6c21dbcdf5b84452d8de34"},o("ifx-accordion-item",{key:"fe98e253e30e79d0adb3dc2a1aad25d0aeb64250",caption:"What is the Infineon DDS?"},"The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application’s structure should be."),o("ifx-accordion-item",{key:"6397a595ea17aeb437fabec2cc15bb56faade295",caption:"How do I get access to the DDS?"},"You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."),o("ifx-accordion-item",{key:"2429a303ad7938271651286232f8a1489d0df958",caption:"Can I integrate the Infineon DDS into my project?"},"Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"),o("ifx-accordion-item",{key:"2fc8ae1d8a7bb66bb99c09f25b7f25a329817a94",caption:"Are Infineon DDS components accessable?"},"We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."),o("ifx-accordion-item",{key:"23c340c8cf0c8356a1dfd180050c1e92c7aadcec",caption:"How to request a new component?"},"Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you.")))}};i.style=t;export{i as ifx_faq};
-//# sourceMappingURL=p-c7e86c7c.entry.js.map
+import{r as e,h as o}from"./p-b7a462e5.js";const n=".container{padding-top:10px}";const t=n;const i=class{constructor(o){e(this,o)}render(){return o("div",{key:"d65665af11d77f22eba694be830c0d2cbd1c2aed",class:"container"},o("ifx-accordion",{key:"21a6945e8e2989152d4ae3b525d0b03100289a53"},o("ifx-accordion-item",{key:"6a17004a92a541a569d0a0fcfc99ab3b036e0321",caption:"What is the Infineon DDS?"},"The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application’s structure should be."),o("ifx-accordion-item",{key:"173ea57ea7fb62173945b1c8c804e2472f174f34",caption:"How do I get access to the DDS?"},"You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."),o("ifx-accordion-item",{key:"7344d949d820868fee6ab85b8197fdde1b4574c7",caption:"Can I integrate the Infineon DDS into my project?"},"Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"),o("ifx-accordion-item",{key:"6f242e7e3a4116bdf122905becd07fc8f8f4cd22",caption:"Are Infineon DDS components accessable?"},"We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."),o("ifx-accordion-item",{key:"1dd2fe2389021540de4d1ded1f66003592644a1d",caption:"How to request a new component?"},"Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you.")))}};i.style=t;export{i as ifx_faq};
+//# sourceMappingURL=p-ed30fb98.entry.js.map

package/dist/infineon-design-system-stencil/{p-05d9aa1f.entry.js → p-f84af2e3.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,h as r,g as e}from"./p-b7a462e5.js";import{t as n}from"./p-6ecb6a6f.js";import{i as d}from"./p-1ecafb97.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-block}.container{display:flex;min-height:1.25em;align-items:center;padding:0 8px;border-radius:9999px;font-family:var(--ifx-font-family)}.container.no-border{padding:0}.container.border-engineering-100{border:1px solid #F7F7F7}.container.border-engineering-200{border:1px solid #EEEDED}.container.border-engineering-300{border:1px solid #BFBBBB}.container.border-engineering-400{border:1px solid #8D8786}.container.border-engineering-500{border:1px solid #575352}.container.border-engineering-600{border:1px solid #3C3A39}.container.border-ocean-100{border:1px solid #DFF4F3}.container.border-ocean-200{border:1px solid #B8DEDA}.container.border-ocean-300{border:1px solid #6CB4AD}.container.border-ocean-400{border:1px solid #3B9B91}.container.border-ocean-500{border:1px solid #0A8276}.container.border-ocean-600{border:1px solid #08665C}.container.border-ocean-700{border:1px solid #06534B}.container.border-red-500{border:1px solid #CD002F}.container.border-red-600{border:1px solid #A2001E}.container.border-red-700{border:1px solid #900021}.container.border-orange-500{border:1px solid #E16B25}.container.border-green-500{border:1px solid #4CA460}.container.border-lawn-400{border:1px solid #B9D257}.container.border-lawn-500{border:1px solid #9BBA43}.container.border-lawn-700{border:1px solid #3C6C0F}.container.border-berry-400{border:1px solid #BE3283}.container.border-berry-500{border:1px solid #9C216E}.container.border-sun-400{border:1px solid #FF9737}.container.border-sun-500{border:1px solid #F97414}.container.border-sand-400{border:1px solid #FBE273}.container.border-sand-500{border:1px solid #FCD442}.text{margin:0;padding-left:4px;font-style:normal;font-weight:600;font-size:1rem;line-height:1.25rem;display:inline;color:#1D1D1D}.dot{display:inline-block;width:8px;height:8px;border-radius:9999px}.dot.engineering-100{background-color:#F7F7F7}.dot.engineering-200{background-color:#EEEDED}.dot.engineering-300{background-color:#BFBBBB}.dot.engineering-400{background-color:#8D8786}.dot.engineering-500{background-color:#575352}.dot.engineering-600{background-color:#3C3A39}.dot.ocean-100{background-color:#DFF4F3}.dot.ocean-200{background-color:#B8DEDA}.dot.ocean-300{background-color:#6CB4AD}.dot.ocean-400{background-color:#3B9B91}.dot.ocean-500{background-color:#0A8276}.dot.ocean-600{background-color:#08665C}.dot.ocean-700{background-color:#06534B}.dot.red-500{background-color:#CD002F}.dot.red-600{background-color:#A2001E}.dot.red-700{background-color:#900021}.dot.orange-500{background-color:#E16B25}.dot.green-500{background-color:#4CA460}.dot.lawn-400{background-color:#B9D257}.dot.lawn-500{background-color:#9BBA43}.dot.lawn-700{background-color:#3C6C0F}.dot.berry-400{background-color:#BE3283}.dot.berry-500{background-color:#9C216E}.dot.sun-400{background-color:#FF9737}.dot.sun-500{background-color:#F97414}.dot.sand-400{background-color:#FBE273}.dot.sand-500{background-color:#FCD442}';const i=a;const c=class{constructor(r){o(this,r);this.border=false;this.color="orange-500"}componentWillLoad(){if(!d(this.el)){n("ifx-status")}}render(){var o;const e=((o=this.color)===null||o===void 0?void 0:o.trim())?this.color:"orange-500";const n=this.border?`container border-${e}`:"container no-border";return r("div",{key:"2499916ea67476d9c2ab1e4296e0af1944e23c1c","aria-label":"a status indicator","aria-value":this.label,class:n},r("span",{key:"c46a309a16c6467014cfa196a4a2ab358af89c77",class:`dot ${e}`}),r("p",{key:"b8ab02ba9eb9a70fa5bd5d84590a4e28da9f00f8",class:"text"},this.label))}get el(){return e(this)}};c.style=i;export{c as ifx_status};
-//# sourceMappingURL=p-05d9aa1f.entry.js.map
+import{r as o,h as r,g as e}from"./p-b7a462e5.js";import{t as n}from"./p-6ecb6a6f.js";import{i as d}from"./p-1ecafb97.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-block}.container{display:flex;min-height:1.25em;align-items:center;padding:0 8px;border-radius:9999px;font-family:var(--ifx-font-family)}.container.no-border{padding:0}.container.border-engineering-100{border:1px solid #F7F7F7}.container.border-engineering-200{border:1px solid #EEEDED}.container.border-engineering-300{border:1px solid #BFBBBB}.container.border-engineering-400{border:1px solid #8D8786}.container.border-engineering-500{border:1px solid #575352}.container.border-engineering-600{border:1px solid #3C3A39}.container.border-ocean-100{border:1px solid #DFF4F3}.container.border-ocean-200{border:1px solid #B8DEDA}.container.border-ocean-300{border:1px solid #6CB4AD}.container.border-ocean-400{border:1px solid #3B9B91}.container.border-ocean-500{border:1px solid #0A8276}.container.border-ocean-600{border:1px solid #08665C}.container.border-ocean-700{border:1px solid #06534B}.container.border-red-500{border:1px solid #CD002F}.container.border-red-600{border:1px solid #A2001E}.container.border-red-700{border:1px solid #900021}.container.border-orange-500{border:1px solid #E16B25}.container.border-green-500{border:1px solid #4CA460}.container.border-lawn-400{border:1px solid #B9D257}.container.border-lawn-500{border:1px solid #9BBA43}.container.border-lawn-700{border:1px solid #3C6C0F}.container.border-berry-400{border:1px solid #BE3283}.container.border-berry-500{border:1px solid #9C216E}.container.border-sun-400{border:1px solid #FF9737}.container.border-sun-500{border:1px solid #F97414}.container.border-sand-400{border:1px solid #FBE273}.container.border-sand-500{border:1px solid #FCD442}.text{margin:0;padding-left:4px;font-style:normal;font-weight:600;font-size:1rem;line-height:1.25rem;display:inline;color:#1D1D1D}.dot{display:inline-block;width:8px;height:8px;border-radius:9999px}.dot.engineering-100{background-color:#F7F7F7}.dot.engineering-200{background-color:#EEEDED}.dot.engineering-300{background-color:#BFBBBB}.dot.engineering-400{background-color:#8D8786}.dot.engineering-500{background-color:#575352}.dot.engineering-600{background-color:#3C3A39}.dot.ocean-100{background-color:#DFF4F3}.dot.ocean-200{background-color:#B8DEDA}.dot.ocean-300{background-color:#6CB4AD}.dot.ocean-400{background-color:#3B9B91}.dot.ocean-500{background-color:#0A8276}.dot.ocean-600{background-color:#08665C}.dot.ocean-700{background-color:#06534B}.dot.red-500{background-color:#CD002F}.dot.red-600{background-color:#A2001E}.dot.red-700{background-color:#900021}.dot.orange-500{background-color:#E16B25}.dot.green-500{background-color:#4CA460}.dot.lawn-400{background-color:#B9D257}.dot.lawn-500{background-color:#9BBA43}.dot.lawn-700{background-color:#3C6C0F}.dot.berry-400{background-color:#BE3283}.dot.berry-500{background-color:#9C216E}.dot.sun-400{background-color:#FF9737}.dot.sun-500{background-color:#F97414}.dot.sand-400{background-color:#FBE273}.dot.sand-500{background-color:#FCD442}';const i=a;const c=class{constructor(r){o(this,r);this.border=false;this.color="orange-500"}componentWillLoad(){if(!d(this.el)){n("ifx-status")}}render(){var o;const e=((o=this.color)===null||o===void 0?void 0:o.trim())?this.color:"orange-500";const n=this.border?`container border-${e}`:"container no-border";return r("div",{key:"1ab0d47a33810d4aa50193bcc34db74a8003597f","aria-label":"a status indicator","aria-value":this.label,class:n},r("span",{key:"627782abd370dfc741401c813a6467ed72219d86",class:`dot ${e}`}),r("p",{key:"9ef443e380f5648ecdcd5a8954932654416085d1",class:"text"},this.label))}get el(){return e(this)}};c.style=i;export{c as ifx_status};
+//# sourceMappingURL=p-f84af2e3.entry.js.map

package/dist/types/components/search-field/search-field.d.ts

@@ -1,10 +1,41 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+export interface SuggestionItem {
+    id: string;
+    text: string;
+    type?: 'suggestion' | 'history';
+    scope?: string;
+    resultCount?: number;
+    metadata?: any;
+}
 export declare class SearchField {
     el: any;
     private inputElement;
+    private dropdownElement;
     value: string;
-    ifxInput: EventEmitter<String>;
-    insideDropdown: boolean;
+    suggestions: SuggestionItem[];
+    showSuggestions: boolean;
+    maxSuggestions: number;
+    maxHistoryItems: number;
+    enableHistory: boolean;
+    historyKey: string;
+    historyHeaderText: string;
+    ariaLabel: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    deleteIconAriaLabel: string;
+    historyDeleteAriaLabel: string;
+    dropdownAriaLabel: string;
+    suggestionAriaLabel: string;
+    historyItemAriaLabel: string;
+    ifxInput: EventEmitter<string>;
+    ifxSuggestionRequested: EventEmitter<string>;
+    ifxSuggestionSelected: EventEmitter<SuggestionItem>;
+    ifxFocus: EventEmitter<void>;
+    ifxBlur: EventEmitter<void>;
+    showDropdown: boolean;
+    filteredSuggestions: SuggestionItem[];
+    selectedSuggestionIndex: number;
+    searchHistory: string[];
     showDeleteIcon: boolean;
     showDeleteIconInternalState: boolean;
     disabled: boolean;
@@ -13,14 +44,34 @@ export declare class SearchField {
     placeholder: string;
     autocomplete: string;
     maxlength?: number;
+    private focusEmitted;
+    componentDidLoad(): void;
     handleOutsideClick(event: MouseEvent): void;
+    handleKeyDown(event: KeyboardEvent): void;
     valueWatcher(newValue: string): void;
+    suggestionsWatcher(): void;
     handleInput: () => void;
     handleDelete: () => void;
+    handleSearch: () => void;
     focusInput(): void;
+    blurInput(): void;
+    loadSearchHistory(): void;
+    clearSearchHistory(): void;
+    private addToHistory;
+    private removeFromHistory;
+    private handleHistoryDelete;
+    private requestSuggestions;
+    private updateSuggestions;
+    private navigateSuggestions;
+    private selectSuggestion;
+    private hideDropdown;
+    private showHistoryDropdown;
+    private isShowingOnlyHistory;
+    private renderHighlightedText;
     componentWillLoad(): void;
     componentWillUpdate(): void;
     render(): any;
     getSizeClass(): "" | "search-field__wrapper-s";
     getWrapperClassNames(): string;
+    getSuggestionClassNames(index: number): string;
 }

package/dist/types/components/search-field/search-field.stories.d.ts

@@ -7,6 +7,18 @@ declare const _default: {
         value: string;
         placeholder: string;
         autocomplete: string;
+        showSuggestions: boolean;
+        enableHistory: boolean;
+        maxSuggestions: number;
+        maxHistoryItems: number;
+        historyKey: string;
+        historyHeaderText: string;
+        ariaLabel: string;
+        deleteIconAriaLabel: string;
+        historyDeleteAriaLabel: string;
+        dropdownAriaLabel: string;
+        suggestionAriaLabel: string;
+        historyItemAriaLabel: string;
     };
     argTypes: {
         showDeleteIcon: {
@@ -82,7 +94,186 @@ declare const _default: {
                 };
             };
         };
+        showSuggestions: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        enableHistory: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        maxSuggestions: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: number;
+                };
+            };
+        };
+        maxHistoryItems: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: number;
+                };
+            };
+        };
+        historyKey: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        historyHeaderText: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        ariaLabel: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        ariaLabelledBy: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        ariaDescribedBy: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        deleteIconAriaLabel: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        historyDeleteAriaLabel: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        dropdownAriaLabel: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        suggestionAriaLabel: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        historyItemAriaLabel: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        ifxSuggestionRequested: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+            };
+        };
+        ifxSuggestionSelected: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+            };
+        };
+        ifxFocus: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+            };
+        };
+        ifxBlur: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+            };
+        };
     };
 };
 export default _default;
 export declare const Default: any;
+export declare const SearchSuggestions: any;

package/dist/types/components.d.ts

@@ -10,6 +10,7 @@ import { ChangeEvent } from "./components/content-switcher/content-switcher";
 import { Placement } from "./components/dropdown/dropdown";
 import { IOpenable } from "./components/dropdown/IOpenable";
 import { NotificationVariant } from "./components/notification/notification";
+import { SuggestionItem } from "./components/search-field/search-field";
 import { AddItemTextFn, AjaxFn, ClassNames, CustomAddItemText, FuseOptions, ItemFilterFn, MaxItemTextFn, NoChoicesTextFn, NoResultsTextFn, OnCreateTemplates, OnInit, SortFn, UniqueItemText, ValueCompareFunction } from "./components/select/single-select/interfaces";
 import { StepperState } from "./components/stepper/interfaces";
 import { TreeViewCheckChangeEvent, TreeViewDisableChangeEvent, TreeViewExpandChangeEvent } from "./components/tree-view/tree-view-item";
@@ -18,6 +19,7 @@ export { ChangeEvent } from "./components/content-switcher/content-switcher";
 export { Placement } from "./components/dropdown/dropdown";
 export { IOpenable } from "./components/dropdown/IOpenable";
 export { NotificationVariant } from "./components/notification/notification";
+export { SuggestionItem } from "./components/search-field/search-field";
 export { AddItemTextFn, AjaxFn, ClassNames, CustomAddItemText, FuseOptions, ItemFilterFn, MaxItemTextFn, NoChoicesTextFn, NoResultsTextFn, OnCreateTemplates, OnInit, SortFn, UniqueItemText, ValueCompareFunction } from "./components/select/single-select/interfaces";
 export { StepperState } from "./components/stepper/interfaces";
 export { TreeViewCheckChangeEvent, TreeViewDisableChangeEvent, TreeViewExpandChangeEvent } from "./components/tree-view/tree-view-item";
@@ -411,12 +413,27 @@ export namespace Components {
         "value": string;
     }
     interface IfxSearchField {
+        "ariaDescribedBy"?: string;
+        "ariaLabel": string;
+        "ariaLabelledBy"?: string;
         "autocomplete": string;
+        "deleteIconAriaLabel": string;
         "disabled": boolean;
+        "dropdownAriaLabel": string;
+        "enableHistory": boolean;
+        "historyDeleteAriaLabel": string;
+        "historyHeaderText": string;
+        "historyItemAriaLabel": string;
+        "historyKey": string;
+        "maxHistoryItems": number;
+        "maxSuggestions": number;
         "maxlength"?: number;
         "placeholder": string;
         "showDeleteIcon": boolean;
+        "showSuggestions": boolean;
         "size": string;
+        "suggestionAriaLabel": string;
+        "suggestions": SuggestionItem[];
         "value": string;
     }
     interface IfxSegment {
@@ -1513,7 +1530,11 @@ declare global {
         new (): HTMLIfxSearchBarElement;
     };
     interface HTMLIfxSearchFieldElementEventMap {
-        "ifxInput": String;
+        "ifxInput": string;
+        "ifxSuggestionRequested": string;
+        "ifxSuggestionSelected": SuggestionItem;
+        "ifxFocus": void;
+        "ifxBlur": void;
     }
     interface HTMLIfxSearchFieldElement extends Components.IfxSearchField, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIfxSearchFieldElementEventMap>(type: K, listener: (this: HTMLIfxSearchFieldElement, ev: IfxSearchFieldCustomEvent<HTMLIfxSearchFieldElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2345,13 +2366,32 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface IfxSearchField {
+        "ariaDescribedBy"?: string;
+        "ariaLabel"?: string;
+        "ariaLabelledBy"?: string;
         "autocomplete"?: string;
+        "deleteIconAriaLabel"?: string;
         "disabled"?: boolean;
+        "dropdownAriaLabel"?: string;
+        "enableHistory"?: boolean;
+        "historyDeleteAriaLabel"?: string;
+        "historyHeaderText"?: string;
+        "historyItemAriaLabel"?: string;
+        "historyKey"?: string;
+        "maxHistoryItems"?: number;
+        "maxSuggestions"?: number;
         "maxlength"?: number;
-        "onIfxInput"?: (event: IfxSearchFieldCustomEvent<String>) => void;
+        "onIfxBlur"?: (event: IfxSearchFieldCustomEvent<void>) => void;
+        "onIfxFocus"?: (event: IfxSearchFieldCustomEvent<void>) => void;
+        "onIfxInput"?: (event: IfxSearchFieldCustomEvent<string>) => void;
+        "onIfxSuggestionRequested"?: (event: IfxSearchFieldCustomEvent<string>) => void;
+        "onIfxSuggestionSelected"?: (event: IfxSearchFieldCustomEvent<SuggestionItem>) => void;
         "placeholder"?: string;
         "showDeleteIcon"?: boolean;
+        "showSuggestions"?: boolean;
         "size"?: string;
+        "suggestionAriaLabel"?: string;
+        "suggestions"?: SuggestionItem[];
         "value"?: string;
     }
     interface IfxSegment {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "37.2.0",
+  "version": "38.0.0--canary.1954.f29b2d8edb0fe3ea64fff93b4a103a880db2a074.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

package/dist/components/p-c6e5f94d.js

@@ -1,115 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-6ecb6a6f.js';
-import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
-import { c as classNames } from './p-5cdc6210.js';
-import { d as defineCustomElement$1 } from './p-0e4632d4.js';
-
-const searchFieldCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.search-field{box-sizing:border-box;background-color:#FFFFFF;width:100%;font-family:var(--ifx-font-family)}.search-field .search-field__wrapper{box-sizing:border-box;height:40px;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;padding:8px 16px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;position:relative;width:100%;outline:none;color:#8D8786}.search-field .search-field__wrapper.focused{border:1px solid #0A8276}.search-field .search-field__wrapper.focused ifx-icon{color:#575352}.search-field .search-field__wrapper.search-field__wrapper-s{height:36px}.search-field .search-field__wrapper:hover:not(.focused,:focus){border:1px solid #3C3A39}.search-field .search-field__wrapper:focus{outline:none;border:1px solid #0A8276}.search-field .search-field__wrapper .delete-icon{right:12px;cursor:pointer}.search-field .search-field__wrapper input[type=text]{font-style:normal;font-weight:400;font-size:16px;color:#8D8786;border:none;width:100%;outline:none;height:16px}.search-field .search-field__wrapper input[type=text]:focus{outline:none;color:#1d1d1d}.search-field .search-field__wrapper input[type=text]:disabled{background-color:#EEEDED}.search-field .search-field__wrapper:has(input[disabled]){background-color:#EEEDED}";
-const IfxSearchFieldStyle0 = searchFieldCss;
-
-const SearchField = /*@__PURE__*/ proxyCustomElement(class SearchField extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.ifxInput = createEvent(this, "ifxInput", 7);
-        this.value = '';
-        this.insideDropdown = false;
-        this.showDeleteIcon = false;
-        this.showDeleteIconInternalState = false;
-        this.disabled = false;
-        this.size = 'l';
-        this.isFocused = false;
-        this.placeholder = "Search...";
-        this.autocomplete = "on";
-        this.maxlength = null;
-        this.handleInput = () => {
-            const query = this.inputElement.value;
-            this.value = query; // update the value property when input changes
-            this.ifxInput.emit(this.value);
-        };
-        this.handleDelete = () => {
-            this.inputElement.value = '';
-            this.value = "";
-            this.ifxInput.emit(this.value);
-        };
-    }
-    handleOutsideClick(event) {
-        const path = event.composedPath();
-        if (!path.includes(this.inputElement)) {
-            this.isFocused = false;
-        }
-    }
-    valueWatcher(newValue) {
-        if (newValue !== this.inputElement.value) {
-            this.inputElement.value = newValue;
-        }
-    }
-    focusInput() {
-        this.inputElement.focus();
-        this.isFocused = true;
-    }
-    componentWillLoad() {
-        if (!isNestedInIfxComponent(this.el)) {
-            trackComponent('ifx-search-field');
-        }
-    }
-    componentWillUpdate() {
-        if (this.value !== "") {
-            this.showDeleteIconInternalState = true;
-        }
-        else
-            this.showDeleteIconInternalState = false;
-    }
-    render() {
-        return (h("div", { key: '751f042d0ec4d4a532d77de87b022c9eb1c47e7c', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '48e4b6518cdd4fd66fc6d4f24459fd729bd6d3a7', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '71353ae1d54505b0e50d248695f20059c0d0a44d', icon: "search-16", class: "search-icon" }), h("input", { key: 'c8d3c24435218e4219be7cb2bc7ee14ab314a728', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
-    }
-    getSizeClass() {
-        return `${this.size}` === "s"
-            ? "search-field__wrapper-s"
-            : "";
-    }
-    getWrapperClassNames() {
-        return classNames(`search-field__wrapper`, `search-field__wrapper ${this.getSizeClass()}`, `${this.isFocused ? 'focused' : ""}`);
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "value": ["valueWatcher"]
-    }; }
-    static get style() { return IfxSearchFieldStyle0; }
-}, [1, "ifx-search-field", {
-        "value": [1025],
-        "showDeleteIcon": [4, "show-delete-icon"],
-        "disabled": [4],
-        "size": [1],
-        "placeholder": [1],
-        "autocomplete": [1],
-        "maxlength": [2],
-        "insideDropdown": [32],
-        "showDeleteIconInternalState": [32],
-        "isFocused": [32]
-    }, [[5, "mousedown", "handleOutsideClick"]], {
-        "value": ["valueWatcher"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ifx-search-field", "ifx-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ifx-search-field":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SearchField);
-            }
-            break;
-        case "ifx-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SearchField as S, defineCustomElement as d };
-
-//# sourceMappingURL=p-c6e5f94d.js.map

package/dist/components/p-c6e5f94d.js.map

@@ -1 +0,0 @@
-{"file":"p-c6e5f94d.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,s0CAAs0C,CAAC;AAC91C,6BAAe,cAAc;;MCWhB,WAAW;IAPxB;;;;;QAU2B,UAAK,GAAW,EAAE,CAAC;QAGnC,mBAAc,GAAY,KAAK,CAAC;QAEjC,mBAAc,GAAY,KAAK,CAAC;QAC/B,gCAA2B,GAAY,KAAK,CAAC;QAC9C,aAAQ,GAAY,KAAK,CAAC;QAC1B,SAAI,GAAW,GAAG,CAAC;QAClB,cAAS,GAAY,KAAK,CAAC;QAC5B,gBAAW,GAAW,WAAW,CAAC;QAClC,iBAAY,GAAW,IAAI,CAAC;QAC5B,cAAS,GAAY,IAAI,CAAC;QAkBlC,gBAAW,GAAG;YACZ,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YACtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAChC,CAAC;QAEF,iBAAY,GAAG;YACb,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAChC,CAAA;KA6DF;IAtFC,kBAAkB,CAAC,KAAiB;QAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;YACrC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SACxB;KACF;IAGD,YAAY,CAAC,QAAgB;QAC3B,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;YACxC,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,QAAQ,CAAC;SACpC;KACF;IAeD,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB;IAED,iBAAiB;QACf,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,cAAc,CAAC,kBAAkB,CAAC,CAAA;SACnC;KACF;IAED,mBAAmB;QACjB,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;YACrB,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;SACzC;;YAAM,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;KACjD;IAED,MAAM;QACJ,QACE,0EAAgB,+BAA+B,mBAAgB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,IACxH,4DAAK,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAChC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAEhC,iEAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,GAAY,EAC1D,8DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACD,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,2BAA2B,IACtD,gBAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,GAC9D,IACT,IAAI,CACJ,CACF,EACN;KACH;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;cACzB,yBAAyB;cACzB,EAAE,CAAC;KACR;IAGD,oBAAoB;QAClB,OAAO,UAAU,CACf,uBAAuB,EACvB,yBAAyB,IAAI,CAAC,YAAY,EAAE,EAAE,EAC9C,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,EAAE,EAAE,CACrC,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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); // tokens.$ifxFontFamilyBody;\n\n\n\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}","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\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\n  @Element() el;\n  private inputElement: HTMLInputElement;\n  @Prop({ mutable: true }) value: string = '';\n\n  @Event() ifxInput: EventEmitter<String>;\n  @State() insideDropdown: boolean = false;\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 = \"on\";\n  @Prop() maxlength?: number = null;  \n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement)) {\n      this.isFocused = false;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.ifxInput.emit(this.value);\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\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 aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n        <div class={this.getWrapperClassNames()}\n          tabindex={1}\n          onFocus={() => this.focusInput()}\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            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon icon=\"cRemove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n            </ifx-icon>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`\n    );\n  }\n}"],"version":3}

package/dist/infineon-design-system-stencil/p-c164c83b.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as s,g as r}from"./p-b7a462e5.js";import{t}from"./p-6ecb6a6f.js";import{i as a}from"./p-1ecafb97.js";import{c as o}from"./p-5cdc6210.js";const l=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex}.search-field{box-sizing:border-box;background-color:#FFFFFF;width:100%;font-family:var(--ifx-font-family)}.search-field .search-field__wrapper{box-sizing:border-box;height:40px;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;padding:8px 16px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;position:relative;width:100%;outline:none;color:#8D8786}.search-field .search-field__wrapper.focused{border:1px solid #0A8276}.search-field .search-field__wrapper.focused ifx-icon{color:#575352}.search-field .search-field__wrapper.search-field__wrapper-s{height:36px}.search-field .search-field__wrapper:hover:not(.focused,:focus){border:1px solid #3C3A39}.search-field .search-field__wrapper:focus{outline:none;border:1px solid #0A8276}.search-field .search-field__wrapper .delete-icon{right:12px;cursor:pointer}.search-field .search-field__wrapper input[type=text]{font-style:normal;font-weight:400;font-size:16px;color:#8D8786;border:none;width:100%;outline:none;height:16px}.search-field .search-field__wrapper input[type=text]:focus{outline:none;color:#1d1d1d}.search-field .search-field__wrapper input[type=text]:disabled{background-color:#EEEDED}.search-field .search-field__wrapper:has(input[disabled]){background-color:#EEEDED}';const h=l;const c=class{constructor(s){e(this,s);this.ifxInput=i(this,"ifxInput",7);this.value="";this.insideDropdown=false;this.showDeleteIcon=false;this.showDeleteIconInternalState=false;this.disabled=false;this.size="l";this.isFocused=false;this.placeholder="Search...";this.autocomplete="on";this.maxlength=null;this.handleInput=()=>{const e=this.inputElement.value;this.value=e;this.ifxInput.emit(this.value)};this.handleDelete=()=>{this.inputElement.value="";this.value="";this.ifxInput.emit(this.value)}}handleOutsideClick(e){const i=e.composedPath();if(!i.includes(this.inputElement)){this.isFocused=false}}valueWatcher(e){if(e!==this.inputElement.value){this.inputElement.value=e}}focusInput(){this.inputElement.focus();this.isFocused=true}componentWillLoad(){if(!a(this.el)){t("ifx-search-field")}}componentWillUpdate(){if(this.value!==""){this.showDeleteIconInternalState=true}else this.showDeleteIconInternalState=false}render(){return s("div",{key:"751f042d0ec4d4a532d77de87b022c9eb1c47e7c","aria-label":"a search field for user input","aria-disabled":this.disabled,"aria-value":this.value,class:"search-field"},s("div",{key:"48e4b6518cdd4fd66fc6d4f24459fd729bd6d3a7",class:this.getWrapperClassNames(),tabindex:1,onFocus:()=>this.focusInput(),onClick:()=>this.focusInput()},s("ifx-icon",{key:"71353ae1d54505b0e50d248695f20059c0d0a44d",icon:"search-16",class:"search-icon"}),s("input",{key:"c8d3c24435218e4219be7cb2bc7ee14ab314a728",ref:e=>this.inputElement=e,type:"text",autocomplete:this.autocomplete,onInput:()=>this.handleInput(),placeholder:this.placeholder,disabled:this.disabled,maxlength:this.maxlength,value:this.value}),this.showDeleteIcon&&this.showDeleteIconInternalState?s("ifx-icon",{icon:"cRemove16",class:"delete-icon",onClick:this.handleDelete}):null))}getSizeClass(){return`${this.size}`==="s"?"search-field__wrapper-s":""}getWrapperClassNames(){return o(`search-field__wrapper`,`search-field__wrapper ${this.getSizeClass()}`,`${this.isFocused?"focused":""}`)}get el(){return r(this)}static get watchers(){return{value:["valueWatcher"]}}};c.style=h;export{c as ifx_search_field};
-//# sourceMappingURL=p-c164c83b.entry.js.map

package/dist/infineon-design-system-stencil/p-c164c83b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["searchFieldCss","IfxSearchFieldStyle0","SearchField","constructor","hostRef","this","value","insideDropdown","showDeleteIcon","showDeleteIconInternalState","disabled","size","isFocused","placeholder","autocomplete","maxlength","handleInput","query","inputElement","ifxInput","emit","handleDelete","handleOutsideClick","event","path","composedPath","includes","valueWatcher","newValue","focusInput","focus","componentWillLoad","isNestedInIfxComponent","el","trackComponent","componentWillUpdate","render","h","key","class","getWrapperClassNames","tabindex","onFocus","onClick","icon","ref","type","onInput","getSizeClass","classNames"],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: tokens.$ifxColorBaseWhite;\n  width: 100%;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\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}","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\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\n  @Element() el;\n  private inputElement: HTMLInputElement;\n  @Prop({ mutable: true }) value: string = '';\n\n  @Event() ifxInput: EventEmitter<String>;\n  @State() insideDropdown: boolean = false;\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 = \"on\";\n  @Prop() maxlength?: number = null;  \n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement)) {\n      this.isFocused = false;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.ifxInput.emit(this.value);\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\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 aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n        <div class={this.getWrapperClassNames()}\n          tabindex={1}\n          onFocus={() => this.focusInput()}\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            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon icon=\"cRemove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n            </ifx-icon>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`\n    );\n  }\n}"],"mappings":"gKAAA,MAAMA,EAAiB,m0CACvB,MAAAC,EAAeD,E,MCWFE,EAAW,MAPxB,WAAAC,CAAAC,G,6CAU2BC,KAAAC,MAAgB,GAGhCD,KAAAE,eAA0B,MAE3BF,KAAAG,eAA0B,MACzBH,KAAAI,4BAAuC,MACxCJ,KAAAK,SAAoB,MACpBL,KAAAM,KAAe,IACdN,KAAAO,UAAqB,MACtBP,KAAAQ,YAAsB,YACtBR,KAAAS,aAAuB,KACvBT,KAAAU,UAAqB,KAkB7BV,KAAAW,YAAc,KACZ,MAAMC,EAAQZ,KAAKa,aAAaZ,MAChCD,KAAKC,MAAQW,EACbZ,KAAKc,SAASC,KAAKf,KAAKC,MAAM,EAGhCD,KAAAgB,aAAe,KACbhB,KAAKa,aAAaZ,MAAQ,GAC1BD,KAAKC,MAAQ,GACbD,KAAKc,SAASC,KAAKf,KAAKC,MAAM,C,CAxBhC,kBAAAgB,CAAmBC,GACjB,MAAMC,EAAOD,EAAME,eACnB,IAAKD,EAAKE,SAASrB,KAAKa,cAAe,CACrCb,KAAKO,UAAY,K,EAKrB,YAAAe,CAAaC,GACX,GAAIA,IAAavB,KAAKa,aAAaZ,MAAO,CACxCD,KAAKa,aAAaZ,MAAQsB,C,EAiB9B,UAAAC,GACExB,KAAKa,aAAaY,QAClBzB,KAAKO,UAAY,I,CAGnB,iBAAAmB,GACE,IAAIC,EAAuB3B,KAAK4B,IAAK,CACnCC,EAAe,mB,EAInB,mBAAAC,GACE,GAAI9B,KAAKC,QAAU,GAAI,CACrBD,KAAKI,4BAA8B,I,MAC9BJ,KAAKI,4BAA8B,K,CAG5C,MAAA2B,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,gCAA+B,gBAAgBjC,KAAKK,SAAQ,aAAcL,KAAKC,MAAOiC,MAAM,gBAC1GF,EAAA,OAAAC,IAAA,2CAAKC,MAAOlC,KAAKmC,uBACfC,SAAU,EACVC,QAAS,IAAMrC,KAAKwB,aACpBc,QAAS,IAAMtC,KAAKwB,cAEpBQ,EAAA,YAAAC,IAAA,2CAAUM,KAAK,YAAYL,MAAM,gBACjCF,EAAA,SAAAC,IAAA,2CACEO,IAAMZ,GAAQ5B,KAAKa,aAAee,EAClCa,KAAK,OACLhC,aAAcT,KAAKS,aACnBiC,QAAS,IAAM1C,KAAKW,cACpBH,YAAaR,KAAKQ,YAClBH,SAAUL,KAAKK,SACfK,UAAWV,KAAKU,UAChBT,MAAOD,KAAKC,QAEbD,KAAKG,gBAAkBH,KAAKI,4BAC3B4B,EAAA,YAAUO,KAAK,YAAYL,MAAM,cAAcI,QAAStC,KAAKgB,eAE3D,M,CAMZ,YAAA2B,GACE,MAAO,GAAG3C,KAAKM,SAAW,IACtB,0BACA,E,CAIN,oBAAA6B,GACE,OAAOS,EACL,wBACA,yBAAyB5C,KAAK2C,iBAC9B,GAAG3C,KAAKO,UAAY,UAAY,K","ignoreList":[]}