@infineon/infineon-design-system-stencil 19.0.0 → 19.1.0

package/dist/cjs/ifx-link.cjs.entry.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d4b8c59d.js');
+const index$1 = require('./index-8a69a4d5.js');
+
+const linkCss = "*{font-family:\"Source Sans Pro\"}.link{display:inline-flex;align-items:center;font-weight:400;font-size:16px;text-decoration:none;color:#1d1d1d;gap:8px;line-height:1.6}.link.bold{font-weight:600}.link.primary{color:#378375}.link.secondary{color:#ab377a}.link.warning{color:#f07f3c}.link.danger{color:#cd002f}.link.success{color:#aec067}.link.underline{text-decoration:underline}";
+
+const Link = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.href = undefined;
+    this.target = '_self';
+    this.color = undefined;
+    this.bold = true;
+    this.underline = true;
+  }
+  render() {
+    return (index.h("a", { href: this.href, target: this.target, class: this.linkClassNames() }, index.h("slot", null)));
+  }
+  linkClassNames() {
+    return index$1.classnames('link', this.color, this.bold && 'bold', this.underline && 'underline');
+  }
+};
+Link.style = linkCss;
+
+exports.ifx_link = Link;
+
+//# sourceMappingURL=ifx-link.cjs.entry.js.map

package/dist/cjs/ifx-link.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-link.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,OAAO,GAAG,6XAA6X;;MCUhY,IAAI;;;;kBAEU,OAAO;iBACJ,SAAS;gBACb,IAAI;qBACC,IAAI;;EAEjC,MAAM;IACJ,QACEA,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IACnEA,qBAAa,CACX,EACL;GACF;EAED,cAAc;IACZ,OAAOC,kBAAU,CACf,MAAM,EACN,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,IAAI,IAAI,MAAM,EACnB,IAAI,CAAC,SAAS,IAAI,WAAW,CAC9B,CAAC;GACH;;;;;;","names":["h","classNames"],"sources":["./src/components/link/link.scss?tag=ifx-link&encapsulation=shadow","./src/components/link/link.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.link {\n  display: inline-flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: 16px;\n  text-decoration: none;\n  color: tokens.$color-text-black;\n  gap: 8px;\n\n  line-height: 1.6;\n\n  &.bold {\n    font-weight: 600;\n  }\n\n  &.primary {\n    color: tokens.$color-default-500;\n  }\n\n  &.secondary {\n    color: tokens.$color-highlight-500;\n  }\n\n  &.warning {\n    color: tokens.$color-warning-500;\n  }\n\n  &.danger {\n    color: tokens.$color-danger-500;\n  }\n\n  &.success {\n    color: tokens.$color-success-500;\n  }\n\n  &.underline {\n    text-decoration: underline;\n  }\n}","import { Component, Prop, h } from \"@stencil/core\";\nimport { mainColors } from '../../global/colorNames';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-link',\n  styleUrl: 'link.scss',\n  shadow: true\n})\n\nexport class Link {\n  @Prop() href: string\n  @Prop() target: string = '_self';\n  @Prop() color: mainColors = undefined;\n  @Prop() bold: boolean = true;\n  @Prop() underline: boolean = true\n\n  render() {\n    return (\n      <a href={this.href} target={this.target} class={this.linkClassNames()}>\n        <slot></slot>\n      </a>\n    )\n  }\n\n  linkClassNames() {\n    return classNames(\n      'link',\n      this.color,\n      this.bold && 'bold',\n      this.underline && 'underline',\n    );\n  }\n}"],"version":3}

package/dist/cjs/ifx-search-bar.cjs.entry.js

@@ -4,29 +4,48 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d4b8c59d.js');
 
-const searchBarCss = ".search-bar{box-sizing:border-box;height:40px;background-color:#ffffff;display:flex;flex-direction:row;align-items:center;width:100%}.search-bar.large{width:362px}.search-bar.closed{display:inline-flex;width:auto}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper ifx-search-input{width:100%}.search-bar .search-bar-wrapper ifx-link:hover{cursor:pointer}.search-bar .search-bar__icon-wrapper{display:inline-flex;flex-direction:row;align-items:center;justify-content:center}.search-bar .search-bar__icon-wrapper a{font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#1d1d1d;text-decoration:none;display:flex;align-items:center;flex:none;order:1;flex-grow:0;padding-left:11px}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}";
+const searchBarCss = "*{font-family:\"Source Sans Pro\"}.search-bar{box-sizing:border-box;height:40px;background-color:#ffffff;display:flex;flex-direction:row;align-items:center;width:100%}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:16px;font-style:normal;font-weight:600;line-height:24px;color:#378375;cursor:pointer}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}";
 
 const SearchBar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ifxInput = index.createEvent(this, "ifxInput", 7);
-    this.handleClick = () => {
-      this.isOpen = !this.isOpen;
+    this.handleCloseButton = () => {
+      this.internalState = !this.internalState;
+    };
+    this.handleFocus = () => {
+      this.internalState = true;
     };
-    this.icon = undefined;
     this.showCloseButton = true;
     this.isOpen = true;
-    this.hideLabel = false;
-    this.size = "";
-    this.value = '';
+    this.disabled = false;
+    this.internalState = undefined;
+    this.value = undefined;
+  }
+  handlePropChange() {
+    this.internalState = this.isOpen;
+  }
+  handleSearchInput(event) {
+    console.log("search field event in search bar", event);
+    this.value = event.detail.detail;
+    this.ifxInput.emit(event.detail);
+  }
+  setInitialState() {
+    this.internalState = this.isOpen;
+  }
+  componentWillLoad() {
+    this.setInitialState();
   }
   handleInput(event) {
     this.value = event.detail;
   }
   render() {
-    return (index.h("div", { class: `search-bar ${!this.isOpen ? 'closed' : ""} ${this.size === 'large' ? 'large' : ""}` }, this.isOpen ? (index.h("div", { class: "search-bar-wrapper" }, index.h("ifx-search-input", { value: this.value, onIfxInput: this.handleInput.bind(this) }, index.h("ifx-icon", { icon: "search-16", slot: "search-icon" })), this.showCloseButton &&
-      index.h("ifx-link", { onClick: this.handleClick }, "Close"))) : (index.h("div", { class: "search-bar__icon-wrapper", onClick: this.handleClick }, index.h("ifx-icon", { icon: "search-16" }), index.h("a", { href: "javascript:void(0)" }, "Search")))));
+    return (index.h("div", { class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (index.h("div", { class: "search-bar-wrapper" }, index.h("ifx-search-field", { disabled: this.disabled, value: this.value, onIfxInput: this.handleInput.bind(this) }, index.h("ifx-icon", { icon: "search-16", slot: "search-icon" })), this.showCloseButton &&
+      index.h("a", { href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (index.h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, index.h("ifx-icon", { icon: "search-16" })))));
   }
+  static get watchers() { return {
+    "isOpen": ["handlePropChange"]
+  }; }
 };
 SearchBar.style = searchBarCss;
 

package/dist/cjs/ifx-search-bar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-search-bar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,6zBAA6zB;;MCOr0B,SAAS;;;;IAUpB,gBAAW,GAAG;MACZ,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAA;;2BATkC,IAAI;kBACI,IAAI;qBAClB,KAAK;gBACX,EAAE;iBACgB,EAAE;;EAO3C,WAAW,CAAC,KAAkB;IAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;GAC3B;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,OAAO,GAAG,EAAE,EAAE,IAC7F,IAAI,CAAC,MAAM,IACVA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,8BAAkB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAC1EA,sBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC,EAClB,IAAI,CAAC,eAAe;MACnBA,sBAAU,OAAO,EAAE,IAAI,CAAC,WAAW,YAAkB,CACnD,KAENA,iBAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAC7DA,sBAAU,IAAI,EAAC,WAAW,GAAY,EACtCA,eAAG,IAAI,EAAC,oBAAoB,aAAW,CACnC,CACP,CACG,EACN;GACH;;;;;;","names":["h"],"sources":["./src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","./src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.search-bar {\n  box-sizing: border-box;\n  height: 40px;\n  background-color: tokens.$color-bg-white;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n\n  //padding: 12px 16px;\n  //border: 2px solid blue;\n\n  &.large {\n    width: 362px;\n  }\n\n  &.closed {\n    display: inline-flex;\n    width: auto;\n  }\n\n  & .search-bar-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    width: 100%;\n    //border: 1px solid; //remove\n    //padding: 0 16px;\n\n    & ifx-search-input {\n      width: 100%;\n    }\n\n    // & input { \n    //   width: 100%;\n    // }\n\n    & ifx-link:hover {\n      cursor: pointer;\n    }\n  }\n\n  // & .search-input__wrapper {\n  //   display: flex;\n  //   flex-direction: row;\n  //   align-items: center;\n  //   padding: 12px 16px;\n  //   gap: 12px;\n  //   //width: 274px;\n  //   height: 40px;\n  //   border-radius: 1px;\n  //   flex: none;\n  //   order: 0;\n  //   flex-grow: 1;\n  // }\n\n  .search-bar__icon-wrapper {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n\n    & a {\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 20px;\n      color: tokens.$color-text-black;\n      text-decoration: none;\n      display: flex;\n      align-items: center;\n      flex: none;\n      order: 1;\n      flex-grow: 0;\n      padding-left: 11px;\n    }\n\n    & ifx-icon:hover {\n      cursor: pointer;\n    }\n\n  }\n\n}\n\n\n// @media screen and (max-width: 720px) { \n//   .search-bar { \n//     padding: 0px 16px;\n//     width: 360px;\n//     height: 64px;\n//   }\n// }\n\n// @media screen and (min-width: 720px) { \n//   .search-bar { \n//     padding: 0px 16px;\n//     width: 360px;\n//     height: 64px;\n//   }\n// }","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-search-bar',\n  styleUrl: 'search-bar.scss',\n  shadow: true,\n})\nexport class SearchBar {\n\n  @Prop() icon: string;\n  @Prop() showCloseButton: boolean = true;\n  @Prop({ mutable: true }) isOpen: boolean = true;\n  @Prop() hideLabel: boolean = false;\n  @Prop() size: string = \"\";\n  @Prop({ mutable: true }) value: string = '';\n  @Event() ifxInput: EventEmitter;\n\n  handleClick = () => {\n    this.isOpen = !this.isOpen;\n  }\n\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n  }\n\n  render() {\n    return (\n      <div class={`search-bar ${!this.isOpen ? 'closed' : \"\"} ${this.size === 'large' ? 'large' : \"\"}`}>\n        {this.isOpen ? (\n          <div class=\"search-bar-wrapper\">\n            <ifx-search-input value={this.value} onIfxInput={this.handleInput.bind(this)}>\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n            </ifx-search-input>\n            {this.showCloseButton &&\n              <ifx-link onClick={this.handleClick}>Close</ifx-link>}\n          </div>\n        ) : (\n          <div class=\"search-bar__icon-wrapper\" onClick={this.handleClick}>\n            <ifx-icon icon=\"search-16\"></ifx-icon>\n            <a href=\"javascript:void(0)\">Search</a>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-search-bar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,gyBAAgyB;;MCOxyB,SAAS;;;;IAapB,sBAAiB,GAAG;MAClB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;KAC1C,CAAA;IAoBD,gBAAW,GAAG;MACZ,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;KAC3B,CAAA;2BApCkC,IAAI;kBACb,IAAI;oBACF,KAAK;;;;EAMjC,gBAAgB;IACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;GAClC;EAMD,iBAAiB,CAAC,KAAkB;IAClC,OAAO,CAAC,GAAG,CAAC,kCAAkC,EAAE,KAAK,CAAC,CAAA;IACtD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;GAClC;EAED,eAAe;IACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;GAClC;EAED,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,WAAW,CAAC,KAAkB;IAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;GAC3B;EAOD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE,cAAc,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,QAAQ,EAAE,IAC/D,IAAI,CAAC,aAAa,IACjBA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,8BAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IACnGA,sBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC,EAClB,IAAI,CAAC,eAAe;MACnBA,eAAG,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAAW,CACrE,KAENA,iBAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACnEA,sBAAU,IAAI,EAAC,WAAW,GAAY,CAClC,CACP,CACG,EACN;GACH;;;;;;;;;","names":["h"],"sources":["./src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","./src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.search-bar {\n  box-sizing: border-box;\n  height: 40px;\n  background-color: tokens.$color-bg-white;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n\n  &.closed {\n    display: flex;\n    width: auto;\n    justify-content: flex-start;\n  }\n\n  & .search-bar-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    width: 100%;\n\n    & a {\n      text-decoration: none;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n      color: tokens.$color-default-500;\n      cursor: pointer;\n    }\n\n    & ifx-search-field {\n      width: 100%;\n    }\n  }\n\n  .search-bar__icon-wrapper {\n    display: none;\n    flex-direction: row;\n    align-items: center;\n\n    & ifx-icon:hover {\n      cursor: pointer;\n    }\n  }\n\n  &.closed {\n    .search-bar__icon-wrapper {\n      display: flex;\n    }\n\n    .search-bar-wrapper {\n      display: none;\n    }\n  }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-search-bar',\n  styleUrl: 'search-bar.scss',\n  shadow: true,\n})\nexport class SearchBar {\n  @Prop() showCloseButton: boolean = true;\n  @Prop() isOpen: boolean = true;\n  @Prop() disabled: boolean = false;\n  @State() internalState: boolean;\n  @Prop({ mutable: true }) value: string;\n  @Event() ifxInput: EventEmitter;\n\n  @Watch('isOpen')\n  handlePropChange() {\n    this.internalState = this.isOpen;\n  }\n\n  handleCloseButton = () => {\n    this.internalState = !this.internalState;\n  }\n\n  handleSearchInput(event: CustomEvent) {\n    console.log(\"search field event in search bar\", event)\n    this.value = event.detail.detail;\n    this.ifxInput.emit(event.detail);\n  }\n\n  setInitialState() {\n    this.internalState = this.isOpen;\n  }\n\n  componentWillLoad() {\n    this.setInitialState();\n  }\n\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n  }\n\n  handleFocus = () => {\n    this.internalState = true;\n  }\n\n\n  render() {\n    return (\n      <div class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n        {this.internalState ? (\n          <div class=\"search-bar-wrapper\">\n            <ifx-search-field disabled={this.disabled} value={this.value} onIfxInput={this.handleInput.bind(this)}>\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n            </ifx-search-field>\n            {this.showCloseButton &&\n              <a href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>}\n          </div>\n        ) : (\n          <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n            <ifx-icon icon=\"search-16\"></ifx-icon>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ifx-search-field.cjs.entry.js

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d4b8c59d.js');
+const index$1 = require('./index-8a69a4d5.js');
+
+const searchFieldCss = ".search-field{background-color:#ffffff;width:100%}.search-field .search-field__wrapper{box-sizing:border-box;height:40px;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;padding:12px 16px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;position:relative;width:100%;outline:none}.search-field .search-field__wrapper.focused{border:1px solid #0A8276}.search-field .search-field__wrapper.search-field__wrapper-s{height:36px}.search-field .search-field__wrapper.search-field__wrapper-m{height:40px}.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-family:\"Source Sans Pro\";font-style:normal;font-weight:400;font-size:16px;color:#8D8786;border:none;width:100%;outline:none;height:100%}.search-field .search-field__wrapper input[type=text]:focus{outline:none}.search-field .search-field__wrapper input[type=text]:disabled{background-color:#EEEDED}.search-field .search-field__wrapper:has(input[disabled]){background-color:#EEEDED}";
+
+const SearchField = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ifxInput = index.createEvent(this, "ifxInput", 7);
+    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.ifxInput.emit(null);
+    };
+    this.value = '';
+    this.insideDropdown = false;
+    this.showDeleteIcon = false;
+    this.disabled = false;
+    this.size = 'l';
+    this.isFocused = false;
+  }
+  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;
+  }
+  render() {
+    return (index.h("div", { class: 'search-field' }, index.h("div", { class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, index.h("ifx-icon", { icon: "search-16", class: "search-icon" }), index.h("input", { ref: (el) => (this.inputElement = el), type: "text", onInput: () => this.handleInput(), placeholder: "Search...", disabled: this.disabled, value: this.value }), this.showDeleteIcon ? (index.h("ifx-icon", { icon: "deletex16", class: "delete-icon", onClick: this.handleDelete })) : null)));
+  }
+  getSizeClass() {
+    return `${this.size}` === "s"
+      ? "search-field__wrapper-s"
+      : `${this.size}` === "m"
+        ? "search-field__wrapper-m"
+        : "";
+  }
+  getWrapperClassNames() {
+    return index$1.classnames(`search-field__wrapper`, `search-field__wrapper ${this.getSizeClass()}`, `${this.isFocused ? 'focused' : ""}`);
+  }
+  static get watchers() { return {
+    "value": ["valueWatcher"]
+  }; }
+};
+SearchField.style = searchFieldCss;
+
+exports.ifx_search_field = SearchField;
+
+//# sourceMappingURL=ifx-search-field.cjs.entry.js.map

package/dist/cjs/ifx-search-field.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-search-field.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,msCAAmsC;;MCW7sC,WAAW;;;;IA4BtB,gBAAW,GAAG;MACZ,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;MACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAEhC,CAAC;IAEF,iBAAY,GAAG;MACb,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE,CAAC;MAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1B,CAAA;iBApCwC,EAAE;0BAGR,KAAK;0BAEN,KAAK;oBACX,KAAK;gBACV,GAAG;qBACI,KAAK;;EAGnC,kBAAkB,CAAC,KAAiB;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;MACrC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB;GACF;EAGD,YAAY,CAAC,QAAgB;IAC3B,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;MACxC,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,QAAQ,CAAC;KACpC;GACF;EAeD,UAAU;IACR,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;IAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACvB;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,cAAc,IACvBA,iBAAK,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,IAEhCA,sBAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,GAAY,EAC1DA,mBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,WAAW,EAAC,WAAW,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACD,IAAI,CAAC,cAAc,IAClBA,sBAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,GAC9D,IACT,IAAI,CACJ,CACF,EACN;GACH;EAED,YAAY;IACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;QACzB,yBAAyB;QACzB,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;UACpB,yBAAyB;UACzB,EAAE,CAAC;GACV;EAGD,oBAAoB;IAClB,OAAOC,kBAAU,CACf,uBAAuB,EACvB,yBAAyB,IAAI,CAAC,YAAY,EAAE,EAAE,EAC9C,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,EAAE,EAAE,CACrC,CAAC;GACH;;;;;;;;;","names":["h","classNames"],"sources":["./src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","./src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.search-field {\n  background-color: tokens.$color-bg-white;\n  width: 100%;\n\n  .search-field__wrapper {\n    box-sizing: border-box;\n    //height: 48px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    border: 1px solid #8D8786;\n    border-radius: 1px;\n    padding: 12px 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\n    &.focused {\n      border: 1px solid #0A8276;\n    }\n\n    &.search-field__wrapper-s {\n      height: 36px;\n    }\n\n    &.search-field__wrapper-m {\n      height: 40px;\n    }\n\n    // &:not(.search-field__wrapper-s):not(.search-field__wrapper-m) {\n    //   height: 48px;\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    // ::slotted(.search-icon) {\n    //   left: 12px;\n    // }\n\n    .delete-icon {\n      right: 12px;\n      cursor: pointer;\n    }\n\n    input[type='text'] {\n      font-family: tokens.$font-family-body;\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: 100%;\n\n      &:focus {\n        outline: none;\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 } from '@stencil/core';\nimport classNames from 'classnames';\n\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\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  @Prop() disabled: boolean = false;\n  @Prop() size: string = 'l';\n  @State() isFocused: boolean = false;\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\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.ifxInput.emit(null);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\n  }\n\n  render() {\n    return (\n      <div 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            onInput={() => this.handleInput()}\n            placeholder=\"Search...\"\n            disabled={this.disabled}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon ? (\n            <ifx-icon icon=\"deletex16\" 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      : `${this.size}` === \"m\"\n        ? \"search-field__wrapper-m\"\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/cjs/ifx-sidebar.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d4b8c59d.js');
 
-const sidebarCss = ".sidebar__container{box-sizing:border-box;display:inline-flex;flex-direction:column;align-items:flex-start;padding:0px;background-color:#ffffff;border-right:1px solid #EEEDED;width:264px;height:100%}.sidebar__container .sidebar__top-container{display:flex;flex-direction:column;align-items:center;padding:0px;flex:none;order:0;flex-grow:0;z-index:0;width:100%}.sidebar__container .sidebar__top-container .sidebar__nav-bar{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;padding:12px 32px;background-color:#ffffff;flex:none;order:0;flex-grow:0;width:100%}.sidebar__container .sidebar__top-container .sidebar__nav-bar .sidebar__nav-bar-logo{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0px;gap:16px;flex:none;order:0;flex-grow:0}.sidebar__container .sidebar__top-container .sidebar__nav-bar .sidebar__nav-bar-logo .sidebar__nav-bar-logo-img{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0px;flex:none;order:0;flex-grow:0}.sidebar__container .sidebar__top-container .sidebar__nav-bar .sidebar__nav-bar-logo .sidebar__nav-bar-logo-img svg{width:91px;height:40px}.sidebar__container .sidebar__top-container .sidebar__nav-bar .sidebar__nav-bar-logo .sidebar__nav-bar-logo-text{font-style:normal;font-weight:600;font-size:16px;line-height:24px;display:flex;align-items:center;color:#1d1d1d;flex:none;order:1;flex-grow:0;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.sidebar__container .sidebar__top-container .sidebar__nav-container{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;padding:12px 32px;flex:none;order:1;flex-grow:0;width:100%;gap:16px;max-height:440px;overflow-y:auto}.sidebar__container .sidebar__top-container .sidebar__nav-container ::slotted(*){width:100%}.sidebar__container .sidebar__footer-container{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0px 32px;flex:none;order:1;align-self:stretch;flex-grow:1;z-index:1}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper{display:flex;flex-direction:column;align-items:flex-start;padding:12px 0px;gap:12px;border-top:1px solid #EEEDED;flex:none;order:0;flex-grow:0}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-top-links{display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-top-links .sidebar__footer-wrapper-top-line a,.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-top-links .sidebar__footer-wrapper-bottom-line a{font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;text-decoration:none;align-items:center;color:#1d1d1d;flex:none;order:0;flex-grow:0}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-top-links .sidebar__footer-wrapper-top-line{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:16px;flex:none;order:0;align-self:stretch;flex-grow:0}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-top-links .sidebar__footer-wrapper-bottom-line{display:flex;flex-direction:row;align-items:flex-start;padding:0px;flex:none;order:1;flex-grow:0}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-bottom-links{display:flex;flex-direction:column;align-items:center}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-bottom-links a{font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-decoration:none;color:#575352;flex:none;order:1;flex-grow:0}";
+const sidebarCss = ":host{height:100%}.sidebar__container{box-sizing:border-box;display:inline-flex;flex-direction:column;align-items:flex-start;padding:0px;background-color:#ffffff;border-right:1px solid #EEEDED;width:264px;height:100%}.sidebar__container .sidebar__top-container{display:flex;flex-direction:column;align-items:center;padding:0px;flex:none;order:0;flex-grow:0;z-index:0;width:100%}.sidebar__container .sidebar__top-container .sidebar__nav-bar{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;padding:12px 32px;background-color:#ffffff;flex:none;order:0;flex-grow:0;width:100%}.sidebar__container .sidebar__top-container .sidebar__nav-bar .sidebar__nav-bar-logo{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0px;gap:16px;flex:none;order:0;flex-grow:0}.sidebar__container .sidebar__top-container .sidebar__nav-bar .sidebar__nav-bar-logo .sidebar__nav-bar-logo-img{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0px;flex:none;order:0;flex-grow:0}.sidebar__container .sidebar__top-container .sidebar__nav-bar .sidebar__nav-bar-logo .sidebar__nav-bar-logo-img svg{width:91px;height:40px}.sidebar__container .sidebar__top-container .sidebar__nav-bar .sidebar__nav-bar-logo .sidebar__nav-bar-logo-text{font-style:normal;font-weight:600;font-size:16px;line-height:24px;display:flex;align-items:center;color:#1d1d1d;flex:none;order:1;flex-grow:0;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.sidebar__container .sidebar__top-container .sidebar__nav-container{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;padding:12px 32px;flex:none;order:1;flex-grow:0;width:100%;gap:16px;max-height:440px;overflow-y:auto}.sidebar__container .sidebar__top-container .sidebar__nav-container ::slotted(*){width:100%}.sidebar__container .sidebar__footer-container{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0px 32px;flex:none;order:1;align-self:stretch;flex-grow:1;z-index:1}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper{display:flex;flex-direction:column;align-items:flex-start;padding:12px 0px;gap:12px;border-top:1px solid #EEEDED;flex:none;order:0;flex-grow:0}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-top-links{display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-top-links .sidebar__footer-wrapper-top-line a,.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-top-links .sidebar__footer-wrapper-bottom-line a{font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;text-decoration:none;align-items:center;color:#1d1d1d;flex:none;order:0;flex-grow:0}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-top-links .sidebar__footer-wrapper-top-line{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:16px;flex:none;order:0;align-self:stretch;flex-grow:0}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-top-links .sidebar__footer-wrapper-bottom-line{display:flex;flex-direction:row;align-items:flex-start;padding:0px;flex:none;order:1;flex-grow:0}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-bottom-links{display:flex;flex-direction:column;align-items:center}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-bottom-links a{font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-decoration:none;color:#575352;flex:none;order:1;flex-grow:0}";
 
 const Sidebar = class {
   constructor(hostRef) {

package/dist/cjs/ifx-sidebar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-sidebar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,6wHAA6wH;;MCOnxH,OAAO;;;2BACgB,kBAAkB;;EAEpD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,iBAAK,KAAK,EAAC,2BAA2B,IACpCA,iBAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5FA,4BAAa,uBAAuB,IAClCA,kBAAM,CAAC,EAAC,4yGAA4yG,EAAC,IAAI,EAAC,SAAS,GAAG,EACt0GA,kBAAM,CAAC,EAAC,+2BAA+2B,EAAC,IAAI,EAAC,SAAS,GAAG,CACv4B,EACJA,sBACEA,sBAAU,EAAE,EAAC,iBAAiB,IAC5BA,kBAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,GAAG,CACnC,CACN,CACH,CACF,EACNA,iBAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,eAAe,CAAO,CAChE,CACF,EACNA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,qBAAQ,CAUJ,CACF,EAENA,iBAAK,KAAK,EAAC,2BAA2B,IACpCA,iBAAK,KAAK,EAAC,yBAAyB,IAClCA,iBAAK,KAAK,EAAC,mCAAmC,IAC5CA,iBAAK,KAAK,EAAC,kCAAkC,IAC3CA,eAAG,IAAI,EAAC,GAAG,mBAAiB,EAC5BA,eAAG,IAAI,EAAC,GAAG,cAAY,CACnB,EACNA,iBAAK,KAAK,EAAC,qCAAqC,IAC9CA,eAAG,IAAI,EAAC,GAAG,qBAAmB,CAC1B,CACF,EACNA,iBAAK,KAAK,EAAC,sCAAsC,IAC/CA,eAAG,IAAI,EAAC,GAAG,kDAA2C,CAClD,CACF,CACF,CACF,EACN;GACH;;;;;;","names":["h"],"sources":["./src/components/sidebar/sidebar.scss?tag=ifx-sidebar&encapsulation=shadow","./src/components/sidebar/sidebar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.sidebar__container {\n  box-sizing: border-box;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n  background-color: tokens.$color-bg-white;\n  border-right: 1px solid #EEEDED;\n  width: 264px;\n  height: 100%;\n\n  & .sidebar__top-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 0px;\n    flex: none;\n    order: 0;\n    flex-grow: 0;\n    z-index: 0;\n    width: 100%;\n\n    & .sidebar__nav-bar {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 12px 32px;\n      background-color: tokens.$color-bg-white;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n      width: 100%;\n\n      & .sidebar__nav-bar-logo {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: flex-start;\n        padding: 0px;\n        gap: 16px;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n\n        & .sidebar__nav-bar-logo-img {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          padding: 0px;\n          flex: none;\n          order: 0;\n          flex-grow: 0;\n\n          & svg {\n            width: 91px;\n            height: 40px;\n          }\n        }\n\n        & .sidebar__nav-bar-logo-text {\n          font-style: normal;\n          font-weight: 600;\n          font-size: 16px;\n          line-height: 24px;\n          display: flex;\n          align-items: center;\n          color: tokens.$color-text-black;\n          flex: none;\n          order: 1;\n          flex-grow: 0;\n          white-space: pre-wrap;\n          word-wrap: break-word;\n          overflow-wrap: anywhere;\n        }\n      }\n    }\n\n    & .sidebar__nav-container {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 12px 32px;\n      flex: none;\n      order: 1;\n      flex-grow: 0;\n      width: 100%;\n      gap: 16px;\n\n      max-height: 440px;\n      overflow-y: auto;\n\n      & ::slotted(*) {\n        width: 100%;\n      }\n\n      // & .sidebar__nav-item { \n      //   border: 1px solid;\n\n      //   box-sizing: border-box;\n      //   display: flex;\n      //   flex-direction: row;\n      //   align-items: center;\n      //   width: 100%;\n      //   //padding: 8px 4px 8px 0px;\n      //   padding: 20px;\n      //   gap: 4px;\n      //   flex: none;\n      //   order: 0;\n      //   flex-grow: 0;\n\n      //   & .sidebar__nav-item-icon-wrapper {\n      //     display: flex;\n      //     flex-direction: row;\n      //     justify-content: center;\n      //     align-items: center;\n      //     padding: 0px;\n      //     gap: 8px;\n      //     flex: none;\n      //     order: 0;\n      //     flex-grow: 0;\n\n      //     & ifx-icon { \n      //       width: 16px;\n      //       height: 16px;\n      //     }\n      //   }\n\n      //   & .sidebar__nav-item-label {\n      //     font-style: normal;\n      //     font-weight: 400;\n      //     font-size: 16px;\n      //     line-height: 24px;\n      //     display: flex;\n      //     align-items: center;\n      //     color: tokens.$color-text-black;\n      //     flex: none;\n      //     order: 1;\n      //     flex-grow: 1;\n      //   } \n\n      //   & .sidebar__nav-item-number {\n      //     display: flex;\n      //     flex-direction: row;\n      //     justify-content: center;\n      //     align-items: center;\n      //     padding: 0px 4px;\n      //     flex: none;\n      //     order: 2;\n      //     flex-grow: 0;\n      //   }\n      // }\n    }\n  }\n\n  & .sidebar__footer-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    padding: 0px 32px;\n    flex: none;\n    order: 1;\n    align-self: stretch;\n    flex-grow: 1;\n    z-index: 1;\n\n    & .sidebar__footer-wrapper {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 12px 0px;\n      gap: 12px;\n      border-top: 1px solid #EEEDED;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      & .sidebar__footer-wrapper-top-links {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        padding: 0px;\n        gap: 4px;\n        flex: none;\n        order: 0;\n        align-self: stretch;\n        flex-grow: 0;\n\n        & .sidebar__footer-wrapper-top-line,\n        & .sidebar__footer-wrapper-bottom-line {\n          & a {\n            font-style: normal;\n            font-weight: 400;\n            font-size: 14px;\n            line-height: 20px;\n            display: flex;\n            text-decoration: none;\n            align-items: center;\n            color: tokens.$color-text-black;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n          }\n        }\n\n        & .sidebar__footer-wrapper-top-line {\n          display: flex;\n          flex-direction: row;\n          align-items: flex-start;\n          padding: 0px;\n          gap: 16px;\n          flex: none;\n          order: 0;\n          align-self: stretch;\n          flex-grow: 0;\n        }\n\n        & .sidebar__footer-wrapper-bottom-line {\n          display: flex;\n          flex-direction: row;\n          align-items: flex-start;\n          padding: 0px;\n          flex: none;\n          order: 1;\n          flex-grow: 0;\n        }\n      }\n\n      & .sidebar__footer-wrapper-bottom-links {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n\n        & a {\n          font-style: normal;\n          font-weight: 400;\n          font-size: 14px;\n          line-height: 20px;\n          text-decoration: none;\n          color: #575352;\n          flex: none;\n          order: 1;\n          flex-grow: 0;\n        }\n      }\n    }\n  }\n\n}","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-sidebar',\n  styleUrl: 'sidebar.scss',\n  shadow: true\n})\nexport class Sidebar {\n  @Prop() applicationName: string = 'Application name'\n\n  render() {\n    return (\n      <div class='sidebar__container'>\n        <div class='sidebar__top-container'>\n          <div class=\"sidebar__nav-bar\">\n            <div class=\"sidebar__nav-bar-logo\">\n              <div class='sidebar__nav-bar-logo-img'>\n                <svg width=\"91\" height=\"40\" viewBox=\"0 0 91 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <g clip-path=\"url(#clip0_2396_2480)\">\n                    <path d=\"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z\" fill=\"#005DA9\" />\n                    <path d=\"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z\" fill=\"#E30034\" />\n                  </g>\n                  <defs>\n                    <clipPath id=\"clip0_2396_2480\">\n                      <rect width=\"91\" height=\"40\" fill=\"white\" />\n                    </clipPath>\n                  </defs>\n                </svg>\n              </div>\n              <div class='sidebar__nav-bar-logo-text'>{this.applicationName}</div>\n            </div>\n          </div>\n          <div class=\"sidebar__nav-container\">\n            <slot />\n            {/* <div class=\"sidebar__nav-item\">\n                <div class=\"sidebar__nav-item-icon-wrapper\">\n                  <ifx-icon icon='image-16'></ifx-icon>\n                </div>\n                <div class=\"sidebar__nav-item-label\">Menu Item</div>\n                <div class=\"sidebar__nav-item-number\">\n                  <ifx-number-indicator>7</ifx-number-indicator>\n                </div>\n              </div> */}\n          </div>\n        </div>\n\n        <div class='sidebar__footer-container'>\n          <div class=\"sidebar__footer-wrapper\">\n            <div class='sidebar__footer-wrapper-top-links'>\n              <div class=\"sidebar__footer-wrapper-top-line\">\n                <a href=\"#\">Terms of use</a>\n                <a href=\"#\">Imprint</a>\n              </div>\n              <div class=\"sidebar__footer-wrapper-bottom-line\">\n                <a href=\"#\">Privacy policy</a>\n              </div>\n            </div>\n            <div class='sidebar__footer-wrapper-bottom-links'>\n              <a href=\"#\">© 1999 - 2023 Infineon Technologies AG</a>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-sidebar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,+xHAA+xH;;MCOryH,OAAO;;;2BACgB,kBAAkB;;EAEpD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,iBAAK,KAAK,EAAC,2BAA2B,IACpCA,iBAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5FA,4BAAa,uBAAuB,IAClCA,kBAAM,CAAC,EAAC,4yGAA4yG,EAAC,IAAI,EAAC,SAAS,GAAG,EACt0GA,kBAAM,CAAC,EAAC,+2BAA+2B,EAAC,IAAI,EAAC,SAAS,GAAG,CACv4B,EACJA,sBACEA,sBAAU,EAAE,EAAC,iBAAiB,IAC5BA,kBAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,GAAG,CACnC,CACN,CACH,CACF,EACNA,iBAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,eAAe,CAAO,CAChE,CACF,EACNA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,qBAAQ,CAUJ,CACF,EAENA,iBAAK,KAAK,EAAC,2BAA2B,IACpCA,iBAAK,KAAK,EAAC,yBAAyB,IAClCA,iBAAK,KAAK,EAAC,mCAAmC,IAC5CA,iBAAK,KAAK,EAAC,kCAAkC,IAC3CA,eAAG,IAAI,EAAC,GAAG,mBAAiB,EAC5BA,eAAG,IAAI,EAAC,GAAG,cAAY,CACnB,EACNA,iBAAK,KAAK,EAAC,qCAAqC,IAC9CA,eAAG,IAAI,EAAC,GAAG,qBAAmB,CAC1B,CACF,EACNA,iBAAK,KAAK,EAAC,sCAAsC,IAC/CA,eAAG,IAAI,EAAC,GAAG,kDAA2C,CAClD,CACF,CACF,CACF,EACN;GACH;;;;;;","names":["h"],"sources":["./src/components/sidebar/sidebar.scss?tag=ifx-sidebar&encapsulation=shadow","./src/components/sidebar/sidebar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host { \n  height: 100%;\n}\n\n.sidebar__container {\n  box-sizing: border-box;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n  background-color: tokens.$color-bg-white;\n  border-right: 1px solid #EEEDED;\n  width: 264px;\n  height: 100%;\n\n  & .sidebar__top-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 0px;\n    flex: none;\n    order: 0;\n    flex-grow: 0;\n    z-index: 0;\n    width: 100%;\n\n    & .sidebar__nav-bar {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 12px 32px;\n      background-color: tokens.$color-bg-white;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n      width: 100%;\n\n      & .sidebar__nav-bar-logo {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: flex-start;\n        padding: 0px;\n        gap: 16px;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n\n        & .sidebar__nav-bar-logo-img {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          padding: 0px;\n          flex: none;\n          order: 0;\n          flex-grow: 0;\n\n          & svg {\n            width: 91px;\n            height: 40px;\n          }\n        }\n\n        & .sidebar__nav-bar-logo-text {\n          font-style: normal;\n          font-weight: 600;\n          font-size: 16px;\n          line-height: 24px;\n          display: flex;\n          align-items: center;\n          color: tokens.$color-text-black;\n          flex: none;\n          order: 1;\n          flex-grow: 0;\n          white-space: pre-wrap;\n          word-wrap: break-word;\n          overflow-wrap: anywhere;\n        }\n      }\n    }\n\n    & .sidebar__nav-container {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 12px 32px;\n      flex: none;\n      order: 1;\n      flex-grow: 0;\n      width: 100%;\n      gap: 16px;\n\n      max-height: 440px;\n      overflow-y: auto;\n\n      & ::slotted(*) {\n        width: 100%;\n      }\n\n      // & .sidebar__nav-item { \n      //   border: 1px solid;\n\n      //   box-sizing: border-box;\n      //   display: flex;\n      //   flex-direction: row;\n      //   align-items: center;\n      //   width: 100%;\n      //   //padding: 8px 4px 8px 0px;\n      //   padding: 20px;\n      //   gap: 4px;\n      //   flex: none;\n      //   order: 0;\n      //   flex-grow: 0;\n\n      //   & .sidebar__nav-item-icon-wrapper {\n      //     display: flex;\n      //     flex-direction: row;\n      //     justify-content: center;\n      //     align-items: center;\n      //     padding: 0px;\n      //     gap: 8px;\n      //     flex: none;\n      //     order: 0;\n      //     flex-grow: 0;\n\n      //     & ifx-icon { \n      //       width: 16px;\n      //       height: 16px;\n      //     }\n      //   }\n\n      //   & .sidebar__nav-item-label {\n      //     font-style: normal;\n      //     font-weight: 400;\n      //     font-size: 16px;\n      //     line-height: 24px;\n      //     display: flex;\n      //     align-items: center;\n      //     color: tokens.$color-text-black;\n      //     flex: none;\n      //     order: 1;\n      //     flex-grow: 1;\n      //   } \n\n      //   & .sidebar__nav-item-number {\n      //     display: flex;\n      //     flex-direction: row;\n      //     justify-content: center;\n      //     align-items: center;\n      //     padding: 0px 4px;\n      //     flex: none;\n      //     order: 2;\n      //     flex-grow: 0;\n      //   }\n      // }\n    }\n  }\n\n  & .sidebar__footer-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    padding: 0px 32px;\n    flex: none;\n    order: 1;\n    align-self: stretch;\n    flex-grow: 1;\n    z-index: 1;\n\n    & .sidebar__footer-wrapper {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 12px 0px;\n      gap: 12px;\n      border-top: 1px solid #EEEDED;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      & .sidebar__footer-wrapper-top-links {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        padding: 0px;\n        gap: 4px;\n        flex: none;\n        order: 0;\n        align-self: stretch;\n        flex-grow: 0;\n\n        & .sidebar__footer-wrapper-top-line,\n        & .sidebar__footer-wrapper-bottom-line {\n          & a {\n            font-style: normal;\n            font-weight: 400;\n            font-size: 14px;\n            line-height: 20px;\n            display: flex;\n            text-decoration: none;\n            align-items: center;\n            color: tokens.$color-text-black;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n          }\n        }\n\n        & .sidebar__footer-wrapper-top-line {\n          display: flex;\n          flex-direction: row;\n          align-items: flex-start;\n          padding: 0px;\n          gap: 16px;\n          flex: none;\n          order: 0;\n          align-self: stretch;\n          flex-grow: 0;\n        }\n\n        & .sidebar__footer-wrapper-bottom-line {\n          display: flex;\n          flex-direction: row;\n          align-items: flex-start;\n          padding: 0px;\n          flex: none;\n          order: 1;\n          flex-grow: 0;\n        }\n      }\n\n      & .sidebar__footer-wrapper-bottom-links {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n\n        & a {\n          font-style: normal;\n          font-weight: 400;\n          font-size: 14px;\n          line-height: 20px;\n          text-decoration: none;\n          color: #575352;\n          flex: none;\n          order: 1;\n          flex-grow: 0;\n        }\n      }\n    }\n  }\n\n}","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-sidebar',\n  styleUrl: 'sidebar.scss',\n  shadow: true\n})\nexport class Sidebar {\n  @Prop() applicationName: string = 'Application name'\n\n  render() {\n    return (\n      <div class='sidebar__container'>\n        <div class='sidebar__top-container'>\n          <div class=\"sidebar__nav-bar\">\n            <div class=\"sidebar__nav-bar-logo\">\n              <div class='sidebar__nav-bar-logo-img'>\n                <svg width=\"91\" height=\"40\" viewBox=\"0 0 91 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <g clip-path=\"url(#clip0_2396_2480)\">\n                    <path d=\"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z\" fill=\"#005DA9\" />\n                    <path d=\"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z\" fill=\"#E30034\" />\n                  </g>\n                  <defs>\n                    <clipPath id=\"clip0_2396_2480\">\n                      <rect width=\"91\" height=\"40\" fill=\"white\" />\n                    </clipPath>\n                  </defs>\n                </svg>\n              </div>\n              <div class='sidebar__nav-bar-logo-text'>{this.applicationName}</div>\n            </div>\n          </div>\n          <div class=\"sidebar__nav-container\">\n            <slot />\n            {/* <div class=\"sidebar__nav-item\">\n                <div class=\"sidebar__nav-item-icon-wrapper\">\n                  <ifx-icon icon='image-16'></ifx-icon>\n                </div>\n                <div class=\"sidebar__nav-item-label\">Menu Item</div>\n                <div class=\"sidebar__nav-item-number\">\n                  <ifx-number-indicator>7</ifx-number-indicator>\n                </div>\n              </div> */}\n          </div>\n        </div>\n\n        <div class='sidebar__footer-container'>\n          <div class=\"sidebar__footer-wrapper\">\n            <div class='sidebar__footer-wrapper-top-links'>\n              <div class=\"sidebar__footer-wrapper-top-line\">\n                <a href=\"#\">Terms of use</a>\n                <a href=\"#\">Imprint</a>\n              </div>\n              <div class=\"sidebar__footer-wrapper-bottom-line\">\n                <a href=\"#\">Privacy policy</a>\n              </div>\n            </div>\n            <div class='sidebar__footer-wrapper-bottom-links'>\n              <a href=\"#\">© 1999 - 2023 Infineon Technologies AG</a>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/cjs/index-d4b8c59d.js

@@ -2193,6 +2193,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './ifx-icons-preview.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'ifx-link.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './ifx-link.cjs.entry.js')); }).then(processMod, consoleError);
         case 'ifx-list-group.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2289,10 +2293,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './ifx-checkbox.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'ifx-link_2.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './ifx-link_2.cjs.entry.js')); }).then(processMod, consoleError);
         case 'ifx-multi-select-input-item.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2301,6 +2301,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './ifx-number-indicator.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'ifx-search-field.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './ifx-search-field.cjs.entry.js')); }).then(processMod, consoleError);
         case 'ifx-icon.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */

package/dist/cjs/infineon-design-system-stencil.cjs.js

@@ -43,7 +43,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["ifx-faq.cjs",[[1,"ifx-faq"]]],["ifx-search-bar.cjs",[[1,"ifx-search-bar",{"icon":[1],"showCloseButton":[4,"show-close-button"],"isOpen":[1028,"is-open"],"hideLabel":[4,"hide-label"],"size":[1],"value":[1025]}]]],["ifx-dropdown-item.cjs",[[1,"ifx-dropdown-item",{"label":[1],"size":[1],"disabled":[4],"icon":[1],"checkable":[4],"value":[1],"url":[1],"target":[1],"checkboxColor":[32]}]]],["ifx-modal.cjs",[[1,"ifx-modal",{"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"alertColor":[1,"alert-color"],"alertIcon":[1,"alert-icon"],"showModal":[32],"open":[64],"close":[64]}]]],["ifx-multi-select-input.cjs",[[1,"ifx-multi-select-input",{"Placeholder":[1,"placeholder"],"isEmpty":[32],"isOverflowing":[32]},[[5,"mousedown","handleOutsideClick"],[0,"closed","handleButtonClose"]]]]],["ifx-alert.cjs",[[1,"ifx-alert",{"color":[1],"icon":[1]}]]],["ifx-breadcrumb-item-label.cjs",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["ifx-chip.cjs",[[1,"ifx-chip",{"placeholder":[1],"isEmpty":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-example.cjs",[[1,"ifx-example",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-icon-button.cjs",[[1,"ifx-icon-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["ifx-icons-preview.cjs",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["ifx-list-item.cjs",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["ifx-navbar.cjs",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogo":[4,"show-logo"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32]}]]],["ifx-navbar-menu-item.cjs",[[1,"ifx-navbar-menu-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1]}]]],["ifx-sidebar-item.cjs",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"hasIcon":[32],"hasIconWrapper":[32]},[[0,"consoleError","handleConsoleError"]]]]],["ifx-slider.cjs",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]}]]],["ifx-text-field.cjs",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"errorMessage":[1,"error-message"],"success":[4],"disabled":[4],"readonly":[4],"icon":[4]}]]],["ifx-badge.cjs",[[1,"ifx-badge"]]],["ifx-breadcrumb.cjs",[[1,"ifx-breadcrumb"]]],["ifx-breadcrumb-item.cjs",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["ifx-card.cjs",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32]},[[0,"imgPosition","setImgPosition"]]]]],["ifx-card-headline.cjs",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["ifx-card-image.cjs",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["ifx-card-links.cjs",[[1,"ifx-card-links"]]],["ifx-card-overline.cjs",[[1,"ifx-card-overline"]]],["ifx-card-text.cjs",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["ifx-dropdown.cjs",[[1,"ifx-dropdown",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-dropdown-divider.cjs",[[1,"ifx-dropdown-divider"]]],["ifx-dropdown-menu.cjs",[[1,"ifx-dropdown-menu",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"isShown":[32],"isInsideSelect":[32],"isInsideMultiSelect":[32]}]]],["ifx-filter-input.cjs",[[1,"ifx-filter-input",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"options":[32]}]]],["ifx-footer.cjs",[[1,"ifx-footer",{"variant":[1],"large":[32],"default":[32],"showFacebook":[32]}]]],["ifx-footer-column.cjs",[[1,"ifx-footer-column"]]],["ifx-list-group.cjs",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["ifx-list-notification.cjs",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["ifx-progress-bar.cjs",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]}]]],["ifx-radio-button.cjs",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]}]]],["ifx-select-input.cjs",[[1,"ifx-select-input",null,[[5,"mousedown","handleOutsideClick"]]]]],["ifx-sidebar.cjs",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"]}]]],["ifx-spinner.cjs",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["ifx-status.cjs",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["ifx-switch.cjs",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]}]]],["ifx-tab.cjs",[[4,"ifx-tab",{"header":[1]}]]],["ifx-tabs.cjs",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"small":[4],"internalOrientation":[32],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32]},[[0,"slotchange","onSlotChange"]]]]],["ifx-tag.cjs",[[1,"ifx-tag"]]],["ifx-icon.cjs",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["ifx-button.cjs",[[1,"ifx-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-checkbox.cjs",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"internalValue":[32]}]]],["ifx-multi-select-input-item.cjs",[[1,"ifx-multi-select-input-item",{"content":[1]}]]],["ifx-number-indicator.cjs",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["ifx-accordion_2.cjs",[[1,"ifx-accordion-item",{"caption":[1],"open":[32],"close":[64],"isOpen":[64]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["ifx-link_2.cjs",[[1,"ifx-search-input",{"value":[1025],"width":[1],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"borderColor":[1,"border-color"],"size":[1],"insideDropdown":[32]}],[1,"ifx-link",{"href":[1],"target":[1],"color":[1],"bold":[4],"underline":[4]}]]]], options);
+  return index.bootstrapLazy([["ifx-faq.cjs",[[1,"ifx-faq"]]],["ifx-dropdown-item.cjs",[[1,"ifx-dropdown-item",{"label":[1],"size":[1],"disabled":[4],"icon":[1],"checkable":[4],"value":[1],"url":[1],"target":[1],"checkboxColor":[32]}]]],["ifx-modal.cjs",[[1,"ifx-modal",{"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"alertColor":[1,"alert-color"],"alertIcon":[1,"alert-icon"],"showModal":[32],"open":[64],"close":[64]}]]],["ifx-multi-select-input.cjs",[[1,"ifx-multi-select-input",{"Placeholder":[1,"placeholder"],"isEmpty":[32],"isOverflowing":[32]},[[5,"mousedown","handleOutsideClick"],[0,"closed","handleButtonClose"]]]]],["ifx-search-bar.cjs",[[1,"ifx-search-bar",{"showCloseButton":[4,"show-close-button"],"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32]}]]],["ifx-alert.cjs",[[1,"ifx-alert",{"color":[1],"icon":[1]}]]],["ifx-breadcrumb-item-label.cjs",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["ifx-chip.cjs",[[1,"ifx-chip",{"placeholder":[1],"isEmpty":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-example.cjs",[[1,"ifx-example",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-icon-button.cjs",[[1,"ifx-icon-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["ifx-icons-preview.cjs",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["ifx-list-item.cjs",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["ifx-navbar.cjs",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogo":[4,"show-logo"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32]}]]],["ifx-navbar-menu-item.cjs",[[1,"ifx-navbar-menu-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1]}]]],["ifx-sidebar-item.cjs",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"hasIcon":[32],"hasIconWrapper":[32]},[[0,"consoleError","handleConsoleError"]]]]],["ifx-slider.cjs",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]}]]],["ifx-text-field.cjs",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"errorMessage":[1,"error-message"],"success":[4],"disabled":[4],"readonly":[4],"icon":[4]}]]],["ifx-badge.cjs",[[1,"ifx-badge"]]],["ifx-breadcrumb.cjs",[[1,"ifx-breadcrumb"]]],["ifx-breadcrumb-item.cjs",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["ifx-card.cjs",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32]},[[0,"imgPosition","setImgPosition"]]]]],["ifx-card-headline.cjs",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["ifx-card-image.cjs",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["ifx-card-links.cjs",[[1,"ifx-card-links"]]],["ifx-card-overline.cjs",[[1,"ifx-card-overline"]]],["ifx-card-text.cjs",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["ifx-dropdown.cjs",[[1,"ifx-dropdown",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-dropdown-divider.cjs",[[1,"ifx-dropdown-divider"]]],["ifx-dropdown-menu.cjs",[[1,"ifx-dropdown-menu",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"isShown":[32],"isInsideSelect":[32],"isInsideMultiSelect":[32]}]]],["ifx-filter-input.cjs",[[1,"ifx-filter-input",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"options":[32]}]]],["ifx-footer.cjs",[[1,"ifx-footer",{"variant":[1],"large":[32],"default":[32],"showFacebook":[32]}]]],["ifx-footer-column.cjs",[[1,"ifx-footer-column"]]],["ifx-link.cjs",[[1,"ifx-link",{"href":[1],"target":[1],"color":[1],"bold":[4],"underline":[4]}]]],["ifx-list-group.cjs",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["ifx-list-notification.cjs",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["ifx-progress-bar.cjs",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]}]]],["ifx-radio-button.cjs",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]}]]],["ifx-select-input.cjs",[[1,"ifx-select-input",null,[[5,"mousedown","handleOutsideClick"]]]]],["ifx-sidebar.cjs",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"]}]]],["ifx-spinner.cjs",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["ifx-status.cjs",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["ifx-switch.cjs",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]}]]],["ifx-tab.cjs",[[4,"ifx-tab",{"header":[1]}]]],["ifx-tabs.cjs",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"small":[4],"internalOrientation":[32],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32]},[[0,"slotchange","onSlotChange"]]]]],["ifx-tag.cjs",[[1,"ifx-tag"]]],["ifx-icon.cjs",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["ifx-button.cjs",[[1,"ifx-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-checkbox.cjs",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"internalValue":[32]}]]],["ifx-multi-select-input-item.cjs",[[1,"ifx-multi-select-input-item",{"content":[1]}]]],["ifx-search-field.cjs",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"insideDropdown":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-number-indicator.cjs",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["ifx-accordion_2.cjs",[[1,"ifx-accordion-item",{"caption":[1],"open":[32],"close":[64],"isOpen":[64]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["ifx-faq.cjs",[[1,"ifx-faq"]]],["ifx-search-bar.cjs",[[1,"ifx-search-bar",{"icon":[1],"showCloseButton":[4,"show-close-button"],"isOpen":[1028,"is-open"],"hideLabel":[4,"hide-label"],"size":[1],"value":[1025]}]]],["ifx-dropdown-item.cjs",[[1,"ifx-dropdown-item",{"label":[1],"size":[1],"disabled":[4],"icon":[1],"checkable":[4],"value":[1],"url":[1],"target":[1],"checkboxColor":[32]}]]],["ifx-modal.cjs",[[1,"ifx-modal",{"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"alertColor":[1,"alert-color"],"alertIcon":[1,"alert-icon"],"showModal":[32],"open":[64],"close":[64]}]]],["ifx-multi-select-input.cjs",[[1,"ifx-multi-select-input",{"Placeholder":[1,"placeholder"],"isEmpty":[32],"isOverflowing":[32]},[[5,"mousedown","handleOutsideClick"],[0,"closed","handleButtonClose"]]]]],["ifx-alert.cjs",[[1,"ifx-alert",{"color":[1],"icon":[1]}]]],["ifx-breadcrumb-item-label.cjs",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["ifx-chip.cjs",[[1,"ifx-chip",{"placeholder":[1],"isEmpty":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-example.cjs",[[1,"ifx-example",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-icon-button.cjs",[[1,"ifx-icon-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["ifx-icons-preview.cjs",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["ifx-list-item.cjs",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["ifx-navbar.cjs",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogo":[4,"show-logo"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32]}]]],["ifx-navbar-menu-item.cjs",[[1,"ifx-navbar-menu-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1]}]]],["ifx-sidebar-item.cjs",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"hasIcon":[32],"hasIconWrapper":[32]},[[0,"consoleError","handleConsoleError"]]]]],["ifx-slider.cjs",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]}]]],["ifx-text-field.cjs",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"errorMessage":[1,"error-message"],"success":[4],"disabled":[4],"readonly":[4],"icon":[4]}]]],["ifx-badge.cjs",[[1,"ifx-badge"]]],["ifx-breadcrumb.cjs",[[1,"ifx-breadcrumb"]]],["ifx-breadcrumb-item.cjs",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["ifx-card.cjs",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32]},[[0,"imgPosition","setImgPosition"]]]]],["ifx-card-headline.cjs",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["ifx-card-image.cjs",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["ifx-card-links.cjs",[[1,"ifx-card-links"]]],["ifx-card-overline.cjs",[[1,"ifx-card-overline"]]],["ifx-card-text.cjs",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["ifx-dropdown.cjs",[[1,"ifx-dropdown",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-dropdown-divider.cjs",[[1,"ifx-dropdown-divider"]]],["ifx-dropdown-menu.cjs",[[1,"ifx-dropdown-menu",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"isShown":[32],"isInsideSelect":[32],"isInsideMultiSelect":[32]}]]],["ifx-filter-input.cjs",[[1,"ifx-filter-input",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"options":[32]}]]],["ifx-footer.cjs",[[1,"ifx-footer",{"variant":[1],"large":[32],"default":[32],"showFacebook":[32]}]]],["ifx-footer-column.cjs",[[1,"ifx-footer-column"]]],["ifx-list-group.cjs",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["ifx-list-notification.cjs",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["ifx-progress-bar.cjs",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]}]]],["ifx-radio-button.cjs",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]}]]],["ifx-select-input.cjs",[[1,"ifx-select-input",null,[[5,"mousedown","handleOutsideClick"]]]]],["ifx-sidebar.cjs",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"]}]]],["ifx-spinner.cjs",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["ifx-status.cjs",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["ifx-switch.cjs",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]}]]],["ifx-tab.cjs",[[4,"ifx-tab",{"header":[1]}]]],["ifx-tabs.cjs",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"small":[4],"internalOrientation":[32],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32]},[[0,"slotchange","onSlotChange"]]]]],["ifx-tag.cjs",[[1,"ifx-tag"]]],["ifx-icon.cjs",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["ifx-button.cjs",[[1,"ifx-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-checkbox.cjs",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"internalValue":[32]}]]],["ifx-multi-select-input-item.cjs",[[1,"ifx-multi-select-input-item",{"content":[1]}]]],["ifx-number-indicator.cjs",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["ifx-accordion_2.cjs",[[1,"ifx-accordion-item",{"caption":[1],"open":[32],"close":[64],"isOpen":[64]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["ifx-link_2.cjs",[[1,"ifx-search-input",{"value":[1025],"width":[1],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"borderColor":[1,"border-color"],"size":[1],"insideDropdown":[32]}],[1,"ifx-link",{"href":[1],"target":[1],"color":[1],"bold":[4],"underline":[4]}]]]], options);
+  return index.bootstrapLazy([["ifx-faq.cjs",[[1,"ifx-faq"]]],["ifx-dropdown-item.cjs",[[1,"ifx-dropdown-item",{"label":[1],"size":[1],"disabled":[4],"icon":[1],"checkable":[4],"value":[1],"url":[1],"target":[1],"checkboxColor":[32]}]]],["ifx-modal.cjs",[[1,"ifx-modal",{"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"alertColor":[1,"alert-color"],"alertIcon":[1,"alert-icon"],"showModal":[32],"open":[64],"close":[64]}]]],["ifx-multi-select-input.cjs",[[1,"ifx-multi-select-input",{"Placeholder":[1,"placeholder"],"isEmpty":[32],"isOverflowing":[32]},[[5,"mousedown","handleOutsideClick"],[0,"closed","handleButtonClose"]]]]],["ifx-search-bar.cjs",[[1,"ifx-search-bar",{"showCloseButton":[4,"show-close-button"],"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32]}]]],["ifx-alert.cjs",[[1,"ifx-alert",{"color":[1],"icon":[1]}]]],["ifx-breadcrumb-item-label.cjs",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["ifx-chip.cjs",[[1,"ifx-chip",{"placeholder":[1],"isEmpty":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-example.cjs",[[1,"ifx-example",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-icon-button.cjs",[[1,"ifx-icon-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["ifx-icons-preview.cjs",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["ifx-list-item.cjs",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["ifx-navbar.cjs",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogo":[4,"show-logo"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32]}]]],["ifx-navbar-menu-item.cjs",[[1,"ifx-navbar-menu-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1]}]]],["ifx-sidebar-item.cjs",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"hasIcon":[32],"hasIconWrapper":[32]},[[0,"consoleError","handleConsoleError"]]]]],["ifx-slider.cjs",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]}]]],["ifx-text-field.cjs",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"errorMessage":[1,"error-message"],"success":[4],"disabled":[4],"readonly":[4],"icon":[4]}]]],["ifx-badge.cjs",[[1,"ifx-badge"]]],["ifx-breadcrumb.cjs",[[1,"ifx-breadcrumb"]]],["ifx-breadcrumb-item.cjs",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["ifx-card.cjs",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32]},[[0,"imgPosition","setImgPosition"]]]]],["ifx-card-headline.cjs",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["ifx-card-image.cjs",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["ifx-card-links.cjs",[[1,"ifx-card-links"]]],["ifx-card-overline.cjs",[[1,"ifx-card-overline"]]],["ifx-card-text.cjs",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["ifx-dropdown.cjs",[[1,"ifx-dropdown",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-dropdown-divider.cjs",[[1,"ifx-dropdown-divider"]]],["ifx-dropdown-menu.cjs",[[1,"ifx-dropdown-menu",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"isShown":[32],"isInsideSelect":[32],"isInsideMultiSelect":[32]}]]],["ifx-filter-input.cjs",[[1,"ifx-filter-input",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"options":[32]}]]],["ifx-footer.cjs",[[1,"ifx-footer",{"variant":[1],"large":[32],"default":[32],"showFacebook":[32]}]]],["ifx-footer-column.cjs",[[1,"ifx-footer-column"]]],["ifx-link.cjs",[[1,"ifx-link",{"href":[1],"target":[1],"color":[1],"bold":[4],"underline":[4]}]]],["ifx-list-group.cjs",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["ifx-list-notification.cjs",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["ifx-progress-bar.cjs",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]}]]],["ifx-radio-button.cjs",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]}]]],["ifx-select-input.cjs",[[1,"ifx-select-input",null,[[5,"mousedown","handleOutsideClick"]]]]],["ifx-sidebar.cjs",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"]}]]],["ifx-spinner.cjs",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["ifx-status.cjs",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["ifx-switch.cjs",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]}]]],["ifx-tab.cjs",[[4,"ifx-tab",{"header":[1]}]]],["ifx-tabs.cjs",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"small":[4],"internalOrientation":[32],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32]},[[0,"slotchange","onSlotChange"]]]]],["ifx-tag.cjs",[[1,"ifx-tag"]]],["ifx-icon.cjs",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["ifx-button.cjs",[[1,"ifx-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-checkbox.cjs",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"internalValue":[32]}]]],["ifx-multi-select-input-item.cjs",[[1,"ifx-multi-select-input-item",{"content":[1]}]]],["ifx-search-field.cjs",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"insideDropdown":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-number-indicator.cjs",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["ifx-accordion_2.cjs",[[1,"ifx-accordion-item",{"caption":[1],"open":[32],"close":[64],"isOpen":[64]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -39,7 +39,7 @@
     "./components/progress-bar/progress-bar.js",
     "./components/radio-button/radio-button.js",
     "./components/search-bar/search-bar.js",
-    "./components/search-input/search-input.js",
+    "./components/search-field/search-field.js",
     "./components/select-input/select-input.js",
     "./components/sidebar/sidebar-item.js",
     "./components/sidebar/sidebar.js",

package/dist/collection/components/search-bar/search-bar.css

@@ -180,6 +180,10 @@
  * @tokens Spacing
  * @presenter Spacing
  */
+* {
+  font-family: "Source Sans Pro";
+}
+
 .search-bar {
   box-sizing: border-box;
   height: 40px;
@@ -189,12 +193,10 @@
   align-items: center;
   width: 100%;
 }
-.search-bar.large {
-  width: 362px;
-}
 .search-bar.closed {
-  display: inline-flex;
+  display: flex;
   width: auto;
+  justify-content: flex-start;
 }
 .search-bar .search-bar-wrapper {
   display: flex;
@@ -202,32 +204,29 @@
   gap: 16px;
   width: 100%;
 }
-.search-bar .search-bar-wrapper ifx-search-input {
-  width: 100%;
-}
-.search-bar .search-bar-wrapper ifx-link:hover {
+.search-bar .search-bar-wrapper a {
+  text-decoration: none;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+  color: #378375;
   cursor: pointer;
 }
+.search-bar .search-bar-wrapper ifx-search-field {
+  width: 100%;
+}
 .search-bar .search-bar__icon-wrapper {
-  display: inline-flex;
+  display: none;
   flex-direction: row;
   align-items: center;
-  justify-content: center;
-}
-.search-bar .search-bar__icon-wrapper a {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  color: #1d1d1d;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  flex: none;
-  order: 1;
-  flex-grow: 0;
-  padding-left: 11px;
 }
 .search-bar .search-bar__icon-wrapper ifx-icon:hover {
   cursor: pointer;
+}
+.search-bar.closed .search-bar__icon-wrapper {
+  display: flex;
+}
+.search-bar.closed .search-bar-wrapper {
+  display: none;
 }

package/dist/collection/components/search-bar/search-bar.e2e.js

@@ -0,0 +1,26 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('ifx-search-bar', () => {
+  let page;
+  let element;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent('<ifx-search-bar></ifx-search-bar>');
+    element = await page.find('ifx-search-bar');
+  });
+  it('should be rendered', async () => {
+    expect(element).toHaveClass('hydrated');
+  });
+  it('should reflect the isOpen prop in the rendered output', async () => {
+    element.setProperty('isOpen', false);
+    await page.waitForChanges();
+    let searchBarWrapper = await page.find('ifx-search-bar >>> .search-bar-wrapper');
+    expect(searchBarWrapper).toBeNull(); // When isOpen is false, search-bar-wrapper should not be visible
+    const iconWrapper = await page.find('ifx-search-bar >>> .search-bar__icon-wrapper');
+    await iconWrapper.click(); // Click to open the search bar
+    await page.waitForChanges();
+    searchBarWrapper = await page.find('ifx-search-bar >>> .search-bar-wrapper');
+    expect(searchBarWrapper).not.toBeNull(); // After clicking iconWrapper, search-bar-wrapper should be visible
+  });
+  // Other tests remain the same...
+});
+//# sourceMappingURL=search-bar.e2e.js.map

package/dist/collection/components/search-bar/search-bar.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-bar.e2e.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,IAAI,IAAI,CAAC;EACT,IAAI,OAAO,CAAC;EAEZ,UAAU,CAAC,KAAK,IAAI,EAAE;IACpB,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAC1B,MAAM,IAAI,CAAC,UAAU,CAAC,mCAAmC,CAAC,CAAC;IAC3D,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;EAC9C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oBAAoB,EAAE,KAAK,IAAI,EAAE;IAClC,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,uDAAuD,EAAE,KAAK,IAAI,EAAE;IACrE,OAAO,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IACrC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,IAAI,gBAAgB,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,wCAAwC,CAAC,CAAC;IACjF,MAAM,CAAC,gBAAgB,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,iEAAiE;IAEtG,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,8CAA8C,CAAC,CAAC;IACpF,MAAM,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,+BAA+B;IAC1D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,gBAAgB,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,wCAAwC,CAAC,CAAC;IAC7E,MAAM,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,mEAAmE;EAC9G,CAAC,CAAC,CAAC;EAEH,iCAAiC;AACnC,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-search-bar', () => {\n  let page;\n  let element;\n\n  beforeEach(async () => {\n    page = await newE2EPage();\n    await page.setContent('<ifx-search-bar></ifx-search-bar>');\n    element = await page.find('ifx-search-bar');\n  });\n\n  it('should be rendered', async () => {\n    expect(element).toHaveClass('hydrated');\n  });\n\n  it('should reflect the isOpen prop in the rendered output', async () => {\n    element.setProperty('isOpen', false);\n    await page.waitForChanges();\n    let searchBarWrapper = await page.find('ifx-search-bar >>> .search-bar-wrapper');\n    expect(searchBarWrapper).toBeNull(); // When isOpen is false, search-bar-wrapper should not be visible\n\n    const iconWrapper = await page.find('ifx-search-bar >>> .search-bar__icon-wrapper');\n    await iconWrapper.click(); // Click to open the search bar\n    await page.waitForChanges();\n    searchBarWrapper = await page.find('ifx-search-bar >>> .search-bar-wrapper');\n    expect(searchBarWrapper).not.toBeNull(); // After clicking iconWrapper, search-bar-wrapper should be visible\n  });\n\n  // Other tests remain the same...\n});\n"]}