@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b577eb08ea34aa81e7d1054220d0f31ca92579a9.0 → 39.4.4-canary.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["treeViewCss","TreeView","constructor","hostRef","this","disableAllItems","expandAllItems","handleSlotRef","el","setAttribute","removeAttribute","handleExpandAllItemsChange","newValue","ifxTreeViewExpandAllChange","emit","handleDisableAllItemsChange","ifxTreeViewDisableAllChange","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","key","class","role","ariaLabel","label","trim","ref"],"sources":["src/components/tree-view/tree-view.scss?tag=ifx-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.tree-view {\r\n  font-family: var(--ifx-font-family, sans-serif);\r\n  font-size: 14px;\r\n  color: var(--ifx-color-text, #1a1a1a);\r\n\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex-direction: column;\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n\r\n  &__label {\r\n    font: tokens.$ifxHeadingHeading06;\r\n    margin-bottom: tokens.$ifxSpace100;\r\n  }\r\n}\r\n","import { Component, h, Prop, Event, EventEmitter, Watch, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-tree-view',\r\n  styleUrl: 'tree-view.scss',\r\n  shadow: true,\r\n})\r\nexport class TreeView {\r\n  @Element() el: HTMLElement;\r\n  @Prop() label?: string;\r\n  @Prop() disableAllItems: boolean = false;\r\n  @Prop() expandAllItems: boolean = false;\r\n  @Prop() ariaLabel: string | null;\r\n\r\n  @Event() ifxTreeViewExpandAllChange: EventEmitter<boolean>;\r\n  @Event() ifxTreeViewDisableAllChange: EventEmitter<boolean>;\r\n\r\n  @Watch('expandAllItems')\r\n  handleExpandAllItemsChange(newValue: boolean) {\r\n    this.ifxTreeViewExpandAllChange.emit(newValue);\r\n  }\r\n\r\n  @Watch('disableAllItems')\r\n  handleDisableAllItemsChange(newValue: boolean) {\r\n    this.ifxTreeViewDisableAllChange.emit(newValue);\r\n  }\r\n\r\n  private handleSlotRef = (el: HTMLSlotElement | null) => {\r\n    if (el) {\r\n      if (this.disableAllItems) {\r\n        el.setAttribute('data-disable-all-items', 'true');\r\n      } else {\r\n        el.removeAttribute('data-disable-all-items');\r\n      }\r\n      if (this.expandAllItems) {\r\n        el.setAttribute('data-expand-all-items', 'true');\r\n      } else {\r\n        el.removeAttribute('data-expand-all-items');\r\n      }\r\n    }\r\n  };\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-tree-view', await framework)\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        class={`tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`}\r\n        role=\"tree\"\r\n        aria-label={this.ariaLabel}\r\n      >\r\n        {this.label && this.label.trim() !== '' && <div class=\"tree-view__label\">{this.label}</div>}\r\n        <slot ref={this.handleSlotRef}></slot>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"wIAAA,MAAMA,EAAc,wS,MCUPC,EAAQ,MALrB,WAAAC,CAAAC,G,0JAQUC,KAAeC,gBAAY,MAC3BD,KAAcE,eAAY,MAgB1BF,KAAAG,cAAiBC,IACvB,GAAIA,EAAI,CACN,GAAIJ,KAAKC,gBAAiB,CACxBG,EAAGC,aAAa,yBAA0B,O,KACrC,CACLD,EAAGE,gBAAgB,yB,CAErB,GAAIN,KAAKE,eAAgB,CACvBE,EAAGC,aAAa,wBAAyB,O,KACpC,CACLD,EAAGE,gBAAgB,wB,GAwB1B,CA3CC,0BAAAC,CAA2BC,GACzBR,KAAKS,2BAA2BC,KAAKF,E,CAIvC,2BAAAG,CAA4BH,GAC1BR,KAAKY,4BAA4BF,KAAKF,E,CAkBxC,sBAAMK,GACJ,IAAIC,EAAuBd,KAAKI,IAAK,CACnC,MAAMW,EAAYC,IAClBC,EAAe,sBAAuBF,E,EAI1C,MAAAG,GACE,OACEC,EACE,OAAAC,IAAA,2CAAAC,MAAO,aAAarB,KAAKC,gBAAkB,uBAAyB,KACpEqB,KAAK,OAAM,aACCtB,KAAKuB,WAEhBvB,KAAKwB,OAASxB,KAAKwB,MAAMC,SAAW,IAAMN,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAoBrB,KAAKwB,OAC/EL,EAAM,QAAAC,IAAA,2CAAAM,IAAK1B,KAAKG,gB","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-273907cb.entry.js → p-80672b31.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,h as o,d as t,a}from"./p-PqnYwNKt.js";import{d as f,t as n}from"./p-DcmcuUOA.js";import{i as r}from"./p-Bw2fh5LT.js";const e=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.ifx-notification__wrapper{display:flex;flex-direction:row;align-items:center;padding:8px 16px;background-color:#FFFFFF;font-family:var(--ifx-font-family);color:#1D1D1D;border:1px solid #EEEDED}.ifx-notification__wrapper.ifx-notification__wrapper--success{border-left:4px solid #4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--success .ifx-notification__icon{color:#4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--locked{border-left:4px solid #E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--locked .ifx-notification__icon{color:#E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--error{border-left:4px solid #CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--error .ifx-notification__icon{color:#CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--neutral{border-left:4px solid #0A8276}.ifx-notification__wrapper.ifx-notification__wrapper--neutral .ifx-notification__icon{color:#0A8276}.ifx-notification__wrapper .ifx-notification__icon{margin-right:8px;display:flex;align-self:center}.ifx-notification__wrapper .ifx-notification__body{display:flex;flex-direction:row;flex-grow:1;font-size:0.875rem}.ifx-notification__wrapper .ifx-notification__body .ifx-notification__slot{flex-grow:1;display:inline-flex;align-items:center}.ifx-notification__wrapper .ifx-notification__link{font-size:0.875rem}@media (max-width: 576px){.ifx-notification__wrapper .ifx-notification__icon{align-self:flex-start}.ifx-notification__wrapper .ifx-notification__body{flex-direction:column}.ifx-notification__wrapper .ifx-notification__link{margin-top:8px}}';const c=class{constructor(o){i(this,o);this.variant="success";this.linkTarget="_blank"}async componentDidLoad(){if(!r(this.el)){const i=f();n("ifx-notification",await i)}}getClassName(){switch(this.variant){case"success":return"ifx-notification__wrapper--success";case"locked":return"ifx-notification__wrapper--locked";case"error":return"ifx-notification__wrapper--error";case"neutral":return"ifx-notification__wrapper--neutral";default:return"ifx-notification__wrapper--success"}}render(){return o(t,{key:"7bbeaae1a7a9d3717f5aca378041e232d8a60fa3"},o("div",{key:"06cb1830b2d084e3f3908a1a3e507c429bcec8ec",class:"ifx-notification__wrapper "+this.getClassName()},o("div",{key:"93dfa7a2463fd2e689b549d05455d771725eaecf",class:"ifx-notification__icon"},o("ifx-icon",{key:"07d73ca0368cf493cb01d6df1f30374df9663abb",icon:this.icon})),o("div",{key:"9da8c205def2615bb2e3da50c03acce2c3c49712",class:"ifx-notification__body"},o("div",{key:"22cd9dfabc23b685d983f403e3649d247e97b7fc",class:"ifx-notification__slot"},o("slot",{key:"1feecd971094e46f36572c1005dacfa943b005f4"})),this.linkText&&this.linkHref&&o("div",{key:"2779a104d2b7a0d13114a90b7346c4ef5554704c",class:"ifx-notification__link"},o("ifx-link",{key:"293725867cdeb88f4fa16efbcf812e58ddc9ab4b",href:this.linkHref,target:this.linkTarget},this.linkText,o("ifx-icon",{key:"aca1eae60ca7b17536ad673d9dc236f5bdd456a8",icon:"arrow-right-16"}))))))}get el(){return a(this)}};c.style=e;export{c as ifx_notification};
-//# sourceMappingURL=p-273907cb.entry.js.map
+import{r as i,h as o,d as t,a}from"./p-PqnYwNKt.js";import{d as n,t as e}from"./p-DcmcuUOA.js";import{i as f}from"./p-Bw2fh5LT.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.ifx-notification__wrapper{display:flex;flex-direction:row;align-items:center;padding:8px 16px;background-color:#FFFFFF;font-family:var(--ifx-font-family);color:#1D1D1D;border:1px solid #EEEDED}.ifx-notification__wrapper.ifx-notification__wrapper--success{border-left:4px solid #4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--success .ifx-notification__icon{color:#4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--locked{border-left:4px solid #E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--locked .ifx-notification__icon{color:#E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--error{border-left:4px solid #CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--error .ifx-notification__icon{color:#CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--neutral{border-left:4px solid #0A8276}.ifx-notification__wrapper.ifx-notification__wrapper--neutral .ifx-notification__icon{color:#0A8276}.ifx-notification__wrapper .ifx-notification__icon{margin-right:8px;display:flex;align-self:center}.ifx-notification__wrapper .ifx-notification__body{display:flex;flex-direction:row;flex-grow:1;font-size:0.875rem}.ifx-notification__wrapper .ifx-notification__body .ifx-notification__slot{flex-grow:1;display:inline-flex;align-items:center}.ifx-notification__wrapper .ifx-notification__link{font-size:0.875rem}@media (max-width: 576px){.ifx-notification__wrapper .ifx-notification__icon{align-self:flex-start}.ifx-notification__wrapper .ifx-notification__body{flex-direction:column}.ifx-notification__wrapper .ifx-notification__link{margin-top:8px}}';const c=class{constructor(o){i(this,o);this.variant="success";this.linkTarget="_blank"}async componentDidLoad(){if(!f(this.el)){const i=n();e("ifx-notification",await i)}}getClassName(){switch(this.variant){case"success":return"ifx-notification__wrapper--success";case"locked":return"ifx-notification__wrapper--locked";case"error":return"ifx-notification__wrapper--error";case"neutral":return"ifx-notification__wrapper--neutral";default:return"ifx-notification__wrapper--success"}}render(){return o(t,{key:"3b2df02932202f33a0987d9b1e4d178e8225b5ea"},o("div",{key:"f9356375b41149e9898d54130f6a2c2076100cf8",class:"ifx-notification__wrapper "+this.getClassName()},o("div",{key:"795ac9462160f623817c3ae3ba7db35ebaea6040",class:"ifx-notification__icon"},o("ifx-icon",{key:"7b5dd8db9885fa130a544e7b6ae2c256ac36f691",icon:this.icon})),o("div",{key:"e7be73d9d0505dee08dee83422254efd341292c2",class:"ifx-notification__body"},o("div",{key:"61d0aa32e02e05a6106d7eeee71eeaee7048da3d",class:"ifx-notification__slot"},o("slot",{key:"26455970513e9ef8623bc4442be0c7d603bec35d"})),this.linkText&&this.linkHref&&o("div",{key:"0977c45c6f1646a7e49305a6e312679b8bcbb478",class:"ifx-notification__link"},o("ifx-link",{key:"3b7046973abb361a230024a414352b896e8a4f13",href:this.linkHref,target:this.linkTarget},this.linkText,o("ifx-icon",{key:"8063f2dc7cda7b262b5c6273f9a66732a7c5a000",icon:"arrow-right-16"}))))))}get el(){return a(this)}};c.style=r;export{c as ifx_notification};
+//# sourceMappingURL=p-80672b31.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["notificationCss","Notification","constructor","hostRef","this","variant","linkTarget","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","getClassName","render","h","Host","key","class","icon","linkText","linkHref","href","target"],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.ifx-notification__wrapper {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  color: tokens.$ifxColorBaseBlack;\r\n\r\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\r\n\r\n  &.ifx-notification__wrapper--success {\r\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\r\n\r\n    & .ifx-notification__icon {\r\n      color: tokens.$ifxColorGreen500;\r\n    }\r\n  }\r\n\r\n  &.ifx-notification__wrapper--locked {\r\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\r\n\r\n    & .ifx-notification__icon {\r\n      color: tokens.$ifxColorOrange500;\r\n    }\r\n  }\r\n\r\n  &.ifx-notification__wrapper--error {\r\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\r\n\r\n    & .ifx-notification__icon {\r\n      color: tokens.$ifxColorRed500;\r\n    }\r\n  }\r\n\r\n  &.ifx-notification__wrapper--neutral{\r\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\r\n\r\n    & .ifx-notification__icon {\r\n      color: tokens.$ifxColorOcean500;\r\n    }\r\n  }\r\n\r\n  & .ifx-notification__icon {\r\n    margin-right: tokens.$ifxSpace100;\r\n    display: flex;\r\n    align-self: center;\r\n  }\r\n\r\n  & .ifx-notification__body {\r\n    display: flex;\r\n    flex-direction: row;\r\n    flex-grow: 1;\r\n    font-size: tokens.$ifxFontSizeS;\r\n\r\n    & .ifx-notification__slot {\r\n      flex-grow: 1;\r\n      display: inline-flex;\r\n      align-items: center;\r\n    }\r\n  }\r\n\r\n  & .ifx-notification__link {\r\n    font-size: tokens.$ifxFontSizeS;\r\n  }\r\n\r\n  @media (max-width: tokens.$ifxBreakpointXs) {\r\n    & .ifx-notification__icon {\r\n      align-self: flex-start;\r\n    }\r\n\r\n    & .ifx-notification__body {\r\n      flex-direction: column;\r\n    }\r\n\r\n    & .ifx-notification__link {\r\n      margin-top: tokens.$ifxSpace100;\r\n    }\r\n  }\r\n}","import { Component, h, Host, Prop, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nexport type NotificationVariant = 'success' | 'locked' | 'error' | 'neutral';\r\n\r\n@Component({\r\n  tag: 'ifx-notification',\r\n  styleUrl: 'notification.scss',\r\n  shadow: true\r\n})\r\nexport class Notification {\r\n  @Element() el;\r\n  @Prop() icon: string;\r\n  @Prop() variant: NotificationVariant = 'success';\r\n  @Prop() linkText: string; \r\n  @Prop() linkHref: string;\r\n  @Prop() linkTarget: string = '_blank';\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-notification', await framework)\r\n    }\r\n  }\r\n\r\n  private getClassName(): string {\r\n    switch (this.variant) {\r\n      case 'success':\r\n        return 'ifx-notification__wrapper--success';\r\n      case 'locked':\r\n        return 'ifx-notification__wrapper--locked';\r\n      case 'error':\r\n        return 'ifx-notification__wrapper--error';\r\n      case 'neutral':\r\n        return 'ifx-notification__wrapper--neutral';\r\n      default:\r\n        return 'ifx-notification__wrapper--success';\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\r\n          <div class=\"ifx-notification__icon\">\r\n            <ifx-icon icon={this.icon}></ifx-icon>\r\n          </div>\r\n          <div class=\"ifx-notification__body\">\r\n            <div class=\"ifx-notification__slot\">\r\n              <slot/>\r\n            </div>\r\n            { this.linkText && this.linkHref && \r\n            <div class=\"ifx-notification__link\">\r\n              <ifx-link href={this.linkHref} target={this.linkTarget}>\r\n                {this.linkText}<ifx-icon icon=\"arrow-right-16\">\r\n              </ifx-icon>\r\n              </ifx-link>\r\n            </div>\r\n          }\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}"],"mappings":"mIAAA,MAAMA,EAAkB,ooD,MCWXC,EAAY,MALzB,WAAAC,CAAAC,G,UAQUC,KAAOC,QAAwB,UAG/BD,KAAUE,WAAW,QAgD9B,CA9CC,sBAAMC,GACJ,IAAIC,EAAuBJ,KAAKK,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,yBAA0BF,E,EAIrC,YAAAG,GACN,OAAQT,KAAKC,SACX,IAAK,UACH,MAAO,qCACT,IAAK,SACH,MAAO,oCACT,IAAK,QACH,MAAO,mCACT,IAAK,UACH,MAAO,qCACT,QACE,MAAO,qC,CAIb,MAAAS,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,6BAA+Bd,KAAKS,gBAC9CE,EAAK,OAAAE,IAAA,2CAAAC,MAAM,0BACTH,EAAA,YAAAE,IAAA,2CAAUE,KAAMf,KAAKe,QAEvBJ,EAAK,OAAAE,IAAA,2CAAAC,MAAM,0BACTH,EAAK,OAAAE,IAAA,2CAAAC,MAAM,0BACTH,EAAA,QAAAE,IAAA,8CAEAb,KAAKgB,UAAYhB,KAAKiB,UACxBN,EAAK,OAAAE,IAAA,2CAAAC,MAAM,0BACTH,EAAU,YAAAE,IAAA,2CAAAK,KAAMlB,KAAKiB,SAAUE,OAAQnB,KAAKE,YACzCF,KAAKgB,SAASL,EAAU,YAAAE,IAAA,2CAAAE,KAAK,uB","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-97b2ac42.entry.js → p-81289e5f.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,h as t,a as i,c as e}from"./p-PqnYwNKt.js";import{d as n,t as r}from"./p-DcmcuUOA.js";import{i as c}from"./p-Bw2fh5LT.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}';const s=class{constructor(t){o(this,t);this.autoCollapse=false}async componentDidLoad(){if(!c(this.el)){const o=n();r("ifx-accordion",await o)}}async onItemOpen(o){if(this.autoCollapse){const t=Array.from(this.el.querySelectorAll("ifx-accordion-item"));for(const i of t){const t=i;if(t!==o.target&&await t.open){t.open=false}}}}render(){return t("div",{key:"903cc44b4886b77e59e66ab2a5cdf681dafeb9bc",class:"accordion-wrapper"},t("slot",{key:"e0abec42188606e8c80fc3db44fba19a7aa69ed8"}))}static get delegatesFocus(){return true}get el(){return i(this)}};s.style=a;const d=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:"";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px 4px 0px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;overflow:hidden;height:0;transition:height 0.3s ease;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:16px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;margin:0 4px 4px;border:1px solid transparent;border-top:1px solid transparent}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-content{max-height:1000px}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}.accordion-item.open .inner-content{border-color:#EEEDED;border-top-color:transparent;transition:border-color 0s}.accordion-item:not(.open) .inner-content{transition:border-color 0s 0.3s}.inner-content.no-content{border:none;padding:0;margin:0}';const f=class{constructor(t){o(this,t);this.ifxOpen=e(this,"ifxOpen",7);this.ifxClose=e(this,"ifxClose",7);this.open=false;this.AriaLevel=3;this.internalOpen=false}componentWillLoad(){this.internalOpen=this.open}componentDidLoad(){this.checkSlotContent();this.openAccordionItem();this.contentEl=this.el.shadowRoot.querySelector("#accordion-content");if(this.contentEl){this.attachResizeObserver()}}componentDidUpdate(){this.checkSlotContent();this.openAccordionItem()}openChanged(o){this.internalOpen=o}toggleOpen(){this.internalOpen=!this.internalOpen;this.open=this.internalOpen;if(this.internalOpen){this.ifxOpen.emit({isOpen:this.internalOpen})}else{this.ifxClose.emit({isClosed:!this.internalOpen})}}openAccordionItem(){if(this.internalOpen){this.contentEl.style.height=`${this.contentEl.scrollHeight}px`;this.contentEl.style.overflow="hidden"}else{this.contentEl.style.height="0";this.contentEl.style.overflow="hidden"}}getInnerContentWrapper(){const o=this.el.shadowRoot.querySelector(".inner-content");return o}attachResizeObserver(){const o=this.getInnerContentWrapper();if(o){this.resizeObserver=new ResizeObserver((()=>{if(this.internalOpen){this.openAccordionItem()}}));this.resizeObserver.observe(o)}}handleKeydown(o){const t=o.composedPath();if(!t.includes(this.titleEl)){return}switch(o.key){case"Enter":case" ":o.preventDefault();this.toggleOpen();break}}checkSlotContent(){const o=this.el.shadowRoot.querySelector("slot");const t=o.assignedNodes().length>0;const i=this.getInnerContentWrapper();if(!t){i.classList.add("no-content")}else if(i.classList.contains("no-content")){i.classList.remove("no-content")}}render(){return t("div",{key:"1317347110a9c74932695b8ffff8ca31d3c8e6c3",class:`accordion-item ${this.internalOpen?"open":""}`},t("div",{key:"ad5d46e476f76ac121239c15904a4884a6ba4cc5",role:"button","aria-expanded":this.internalOpen,"aria-controls":"accordion-content",class:"accordion-title",onClick:()=>this.toggleOpen(),tabindex:"0",ref:o=>this.titleEl=o},t("span",{key:"924e061fd270701a7c78433a56fcd70a40dfe7f5","aria-hidden":"true",role:"heading","aria-level":String(this.AriaLevel),class:"accordion-icon"},t("ifx-icon",{key:"40cee40a058eb576d0ef5482f6f7f0adb47a5f4e",icon:"chevron-down-16"})),t("span",{key:"37715ae9f3621954f081bec3d4e861d1dd60847b",id:"accordion-caption",class:"accordion-caption"},this.caption)),t("div",{key:"32c1186d1f4dd1a5a09842224cbfe3d648cc7fac",id:"accordion-content",class:"accordion-content",ref:o=>this.contentEl=o,role:"region","aria-labelledby":"accordion-caption"},t("div",{key:"35618fea4d36844fbad5aed1c07dc2e7378a1d4e",class:"inner-content"},t("slot",{key:"eaa5cdaffd9381f8b05b202f6213d8304fbf7cbb"}))))}get el(){return i(this)}static get watchers(){return{open:["openChanged"]}}};f.style=d;export{s as ifx_accordion,f as ifx_accordion_item};
-//# sourceMappingURL=p-97b2ac42.entry.js.map
+import{r as o,h as t,a as i,c as e}from"./p-PqnYwNKt.js";import{d as n,t as r}from"./p-DcmcuUOA.js";import{i as c}from"./p-Bw2fh5LT.js";const s=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}';const a=class{constructor(t){o(this,t);this.autoCollapse=false}async componentDidLoad(){if(!c(this.el)){const o=n();r("ifx-accordion",await o)}}async onItemOpen(o){if(this.autoCollapse){const t=Array.from(this.el.querySelectorAll("ifx-accordion-item"));for(const i of t){const t=i;if(t!==o.target&&await t.open){t.open=false}}}}render(){return t("div",{key:"9e32f92c7a61c58a537e033e48c57770c4fa60d4",class:"accordion-wrapper"},t("slot",{key:"ec234435886b3271ce2f2712f3e3f54fa3dca8ff"}))}static get delegatesFocus(){return true}get el(){return i(this)}};a.style=s;const d=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:"";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px 4px 0px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;overflow:hidden;height:0;transition:height 0.3s ease;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:16px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;margin:0 4px 4px;border:1px solid transparent;border-top:1px solid transparent}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-content{max-height:1000px}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}.accordion-item.open .inner-content{border-color:#EEEDED;border-top-color:transparent;transition:border-color 0s}.accordion-item:not(.open) .inner-content{transition:border-color 0s 0.3s}.inner-content.no-content{border:none;padding:0;margin:0}';const f=class{constructor(t){o(this,t);this.ifxOpen=e(this,"ifxOpen",7);this.ifxClose=e(this,"ifxClose",7);this.open=false;this.AriaLevel=3;this.internalOpen=false}componentWillLoad(){this.internalOpen=this.open}componentDidLoad(){this.checkSlotContent();this.openAccordionItem();this.contentEl=this.el.shadowRoot.querySelector("#accordion-content");if(this.contentEl){this.attachResizeObserver()}}componentDidUpdate(){this.checkSlotContent();this.openAccordionItem()}openChanged(o){this.internalOpen=o}toggleOpen(){this.internalOpen=!this.internalOpen;this.open=this.internalOpen;if(this.internalOpen){this.ifxOpen.emit({isOpen:this.internalOpen})}else{this.ifxClose.emit({isClosed:!this.internalOpen})}}openAccordionItem(){if(this.internalOpen){this.contentEl.style.height=`${this.contentEl.scrollHeight}px`;this.contentEl.style.overflow="hidden"}else{this.contentEl.style.height="0";this.contentEl.style.overflow="hidden"}}getInnerContentWrapper(){const o=this.el.shadowRoot.querySelector(".inner-content");return o}attachResizeObserver(){const o=this.getInnerContentWrapper();if(o){this.resizeObserver=new ResizeObserver((()=>{if(this.internalOpen){this.openAccordionItem()}}));this.resizeObserver.observe(o)}}handleKeydown(o){const t=o.composedPath();if(!t.includes(this.titleEl)){return}switch(o.key){case"Enter":case" ":o.preventDefault();this.toggleOpen();break}}checkSlotContent(){const o=this.el.shadowRoot.querySelector("slot");const t=o.assignedNodes().length>0;const i=this.getInnerContentWrapper();if(!t){i.classList.add("no-content")}else if(i.classList.contains("no-content")){i.classList.remove("no-content")}}render(){return t("div",{key:"8e4ee04a7a8fa3dbea906d43a1be6064e4c208a6",class:`accordion-item ${this.internalOpen?"open":""}`},t("div",{key:"109998fb112b8206eb8a28a6ef479e40e317e92c",role:"button","aria-expanded":this.internalOpen,"aria-controls":"accordion-content",class:"accordion-title",onClick:()=>this.toggleOpen(),tabindex:"0",ref:o=>this.titleEl=o},t("span",{key:"4936b00dd6203f5856e68ffb6c13ac8f588057fa","aria-hidden":"true",role:"heading","aria-level":String(this.AriaLevel),class:"accordion-icon"},t("ifx-icon",{key:"511d52bd160ccbe2e1936152c45517567061f57d",icon:"chevron-down-16"})),t("span",{key:"fd82b2df5cbf8d50cfb00c54e59793348500323b",id:"accordion-caption",class:"accordion-caption"},this.caption)),t("div",{key:"77c229869cdf02d27ff1011cd5e5ad3fa201343e",id:"accordion-content",class:"accordion-content",ref:o=>this.contentEl=o,role:"region","aria-labelledby":"accordion-caption"},t("div",{key:"0c9f7ea889fe60957ad9223426142b9509b3883b",class:"inner-content"},t("slot",{key:"1e4218f5554a774a3cde38749a21a7490f72d18d"}))))}get el(){return i(this)}static get watchers(){return{open:["openChanged"]}}};f.style=d;export{a as ifx_accordion,f as ifx_accordion_item};
+//# sourceMappingURL=p-81289e5f.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["accordionCss","Accordion","constructor","hostRef","this","autoCollapse","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","onItemOpen","event","items","Array","from","querySelectorAll","item","itemElement","target","open","render","h","key","class","accordionItemCss","AccordionItem","AriaLevel","internalOpen","componentWillLoad","checkSlotContent","openAccordionItem","contentEl","shadowRoot","querySelector","attachResizeObserver","componentDidUpdate","openChanged","newValue","toggleOpen","ifxOpen","emit","isOpen","ifxClose","isClosed","style","height","scrollHeight","overflow","getInnerContentWrapper","innerContentEl","resizeObserver","ResizeObserver","observe","handleKeydown","ev","path","composedPath","includes","titleEl","preventDefault","slot","hasContent","assignedNodes","length","innerContent","classList","add","contains","remove","role","onClick","tabindex","ref","String","icon","id","caption"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\r\n@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.accordion-wrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: tokens.$ifxSpace100;\r\n  font-family:  var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\r\n}","import { Component, h, Listen, Element, Prop } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-accordion',\r\n  styleUrl: 'accordion.scss',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Accordion {\r\n  @Element() el: HTMLElement;\r\n  @Prop() autoCollapse: boolean = false;\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-accordion', await framework)\r\n    }\r\n  }\r\n\r\n  @Listen('ifxOpen')\r\n  async onItemOpen(event: CustomEvent) {\r\n    if (this.autoCollapse) {\r\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\r\n      for (const item of items) {\r\n        const itemElement = item as HTMLIfxAccordionItemElement;\r\n        if (itemElement !== event.target && (await itemElement.open)) {\r\n          itemElement.open = false;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"accordion-wrapper\">\r\n        <slot />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n","// ifxAccordionItem.scss\r\n@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n\r\n.accordion-item {\r\n  border-radius: 3px;\r\n  transition: all 0.3s;\r\n  font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\r\n\r\n}\r\n\r\n.accordion-title:focus {\r\n  outline: none;\r\n}\r\n\r\n// workaround to add corner radius to outline\r\n.accordion-title:focus::after {\r\n  content: '';\r\n  display: block;\r\n  position: absolute;\r\n  top: -4px;\r\n  bottom: -4px;\r\n  left: -4px;\r\n  right: -4px;\r\n  border-radius: 5px;\r\n  border: 2px solid tokens.$ifxColorOcean500;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.accordion-title:hover {\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n  color: tokens.$ifxColorOcean600;\r\n}\r\n\r\n.accordion-title {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n  gap: tokens.$ifxSpace150;\r\n  color: tokens.$ifxColorOcean500;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n  cursor: pointer;\r\n  margin: 4px 4px 0px;\r\n}\r\n\r\n.accordion-caption {\r\n  font-weight: tokens.$ifxFontWeightSemibold;\r\n  font-size: tokens.$ifxFontSizeL;\r\n}\r\n\r\n.accordion-content {\r\n  gap: tokens.$ifxSpace100;\r\n  overflow: hidden;\r\n  height: 0;\r\n  transition: height 0.3s ease;\r\n  line-height: 24px;\r\n  font-size: tokens.$ifxFontSizeM;\r\n  font-weight: 400;\r\n}\r\n\r\n.inner-content {\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  padding: tokens.$ifxSpace200;\r\n  word-wrap: break-word;\r\n  overflow-wrap: anywhere;\r\n  align-self: stretch;\r\n  margin: 0 4px 4px;\r\n  border: 1px solid transparent;\r\n  border-top: 1px solid transparent;\r\n}\r\n\r\n.accordion-icon {\r\n  font-weight: bold;\r\n  display: flex;\r\n  transition: transform 0.3s;\r\n\r\n  &:hover {\r\n    color: tokens.$ifxColorOcean600;\r\n\r\n  }\r\n}\r\n\r\n\r\n.accordion-item.open .accordion-content {\r\n  max-height: 1000px; // Arbitrary large value to allow content to expand\r\n}\r\n\r\n.accordion-item.open .accordion-icon {\r\n  transform: rotate(-180deg);\r\n}\r\n\r\n.accordion-item.open .inner-content {\r\n  border-color: tokens.$ifxColorEngineering200;\r\n  border-top-color: transparent;\r\n  transition: border-color 0s; \r\n}\r\n\r\n.accordion-item:not(.open) .inner-content {\r\n  transition: border-color 0s 0.3s; \r\n}\r\n\r\n.inner-content {\r\n  &.no-content { \r\n    border: none;\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n}","//ifxAccordionItem\r\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-accordion-item',\r\n  styleUrl: 'accordionItem.scss',\r\n  shadow: true,\r\n})\r\nexport class AccordionItem {\r\n  @Element() el;\r\n  @Prop() caption: string;\r\n  @Prop({\r\n    mutable: true,\r\n  })\r\n  open: boolean = false;\r\n  @Prop() AriaLevel = 3;\r\n  @State() internalOpen: boolean = false;\r\n  @Event() ifxOpen: EventEmitter;\r\n  @Event() ifxClose: EventEmitter;\r\n  private contentEl!: HTMLElement;\r\n  private titleEl!: HTMLElement;\r\n  private resizeObserver!: ResizeObserver;\r\n\r\n  componentWillLoad() {\r\n    this.internalOpen = this.open;\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.checkSlotContent()\r\n    this.openAccordionItem();\r\n    this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\r\n    if (this.contentEl) {\r\n      this.attachResizeObserver();\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.checkSlotContent()\r\n    this.openAccordionItem();\r\n  }\r\n\r\n  @Watch('open')\r\n  openChanged(newValue: boolean) {\r\n    this.internalOpen = newValue;\r\n  }\r\n\r\n  toggleOpen() {\r\n    this.internalOpen = !this.internalOpen;\r\n    this.open = this.internalOpen;\r\n\r\n    if (this.internalOpen) {\r\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\r\n    } else {\r\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\r\n    }\r\n  }\r\n\r\n  openAccordionItem() {\r\n    if (this.internalOpen) {\r\n      this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\r\n      this.contentEl.style.overflow = 'hidden';\r\n    } else {\r\n      this.contentEl.style.height = '0';\r\n      this.contentEl.style.overflow = 'hidden';\r\n    }\r\n  }\r\n\r\n  getInnerContentWrapper() {\r\n    const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\r\n    return innerContentEl;\r\n  }\r\n\r\n  attachResizeObserver() {\r\n    const innerContentEl = this.getInnerContentWrapper();\r\n\r\n    if (innerContentEl) {\r\n      this.resizeObserver = new ResizeObserver(() => {\r\n        if (this.internalOpen) {\r\n          this.openAccordionItem();\r\n        }\r\n      });\r\n\r\n      this.resizeObserver.observe(innerContentEl);\r\n    }\r\n  }\r\n\r\n  @Listen('keydown')\r\n  handleKeydown(ev: KeyboardEvent) {\r\n    const path = ev.composedPath();\r\n\r\n    if (!path.includes(this.titleEl)) {\r\n      return;\r\n    }\r\n\r\n    switch (ev.key) {\r\n      case 'Enter': // fallthrough\r\n      case ' ': // space\r\n        ev.preventDefault();\r\n        this.toggleOpen();\r\n        break;\r\n    }\r\n  }\r\n\r\n  checkSlotContent() {\r\n    const slot = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\r\n    const hasContent = slot.assignedNodes().length > 0;\r\n    const innerContent = this.getInnerContentWrapper();\r\n    if (!hasContent) {\r\n      innerContent.classList.add('no-content');\r\n    } else if (innerContent.classList.contains('no-content')) {\r\n      innerContent.classList.remove('no-content');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\r\n        <div\r\n          role=\"button\"\r\n          aria-expanded={this.internalOpen}\r\n          aria-controls=\"accordion-content\"\r\n          class=\"accordion-title\"\r\n          onClick={() => this.toggleOpen()}\r\n          tabindex=\"0\"\r\n          ref={el => (this.titleEl = el as HTMLElement)}\r\n        >\r\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\r\n            <ifx-icon icon=\"chevron-down-16\" />\r\n          </span>\r\n          <span id=\"accordion-caption\" class=\"accordion-caption\">\r\n            {this.caption}\r\n          </span>\r\n        </div>\r\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={el => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\r\n          <div class=\"inner-content\">\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,h as i,a as t}from"./p-PqnYwNKt.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{pointer-events:none}.card__headline-wrapper{padding-bottom:16px}.card__headline-wrapper.withDesc{padding-bottom:8px}.card-headline{margin-top:0;padding-top:0;font-family:var(--ifx-font-family);font-weight:600;font-size:1.5rem;line-height:2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.card-headline.horizontal{font-size:1.25rem;line-height:28px}';const o=class{constructor(i){e(this,i)}componentWillLoad(){var e;const i=this.el.closest("ifx-card");if(i){const t=(e=i.shadowRoot.querySelector(".card"))===null||e===void 0?void 0:e.className;if(t&&t.includes("horizontal")){this.direction="horizontal"}const a=i.querySelector("ifx-card-text");if(a){this.hasDesc=true}}}render(){return i("div",{key:"7b846b52f7e7670cddd83065b41b64a2de219474",class:`card__headline-wrapper ${this.hasDesc?"withDesc":""}`},i("div",{key:"048113ed2085a872f6aa31cc22fd721f3978752c",class:`card-headline ${this.direction}`},i("slot",{key:"8c82191f16af04d476a09a50b6208b01c109e41d"})))}get el(){return t(this)}};o.style=a;export{o as ifx_card_headline};
+//# sourceMappingURL=p-8872ee5c.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["cardHeadlineCss","CardHeadline","componentWillLoad","cardElement","this","el","closest","cardClass","_a","shadowRoot","querySelector","className","includes","direction","desc","hasDesc","render","h","key","class"],"sources":["src/components/card/card-headline/card-headline.scss?tag=ifx-card-headline&encapsulation=shadow","src/components/card/card-headline/card-headline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n  pointer-events: none;\r\n}\r\n\r\n.card__headline-wrapper {\r\n  padding-bottom: 16px;\r\n\r\n  &.withDesc {\r\n    padding-bottom: 8px;\r\n  }\r\n}\r\n\r\n.card-headline {\r\n  margin-top: 0;\r\n  padding-top: 0;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  font-weight: tokens.$ifxFontWeightSemibold;\r\n  font-size: tokens.$ifxFontSize3xl;\r\n  line-height: tokens.$ifxLineHeight3xl;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n\r\n  &.horizontal {\r\n    font-size: tokens.$ifxFontSizeXl;\r\n    line-height: 28px;\r\n  }\r\n\r\n}","import { Component, h, Element, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-card-headline',\r\n  styleUrl: 'card-headline.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class CardHeadline {\r\n  @Element() el;\r\n  @State() direction: string;\r\n  @State() hasDesc: boolean;\r\n\r\n  componentWillLoad() {\r\n    const cardElement = this.el.closest('ifx-card');\r\n\r\n    if (cardElement) {\r\n      const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\r\n\r\n      if (cardClass && cardClass.includes('horizontal')) {\r\n        this.direction = 'horizontal'\r\n      }\r\n\r\n      const desc = cardElement.querySelector('ifx-card-text');\r\n      if (desc) {\r\n        this.hasDesc = true;\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  render() {\r\n    return (\r\n      <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\r\n        <div class={`card-headline ${this.direction}`}>\r\n          <slot />\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAkB,ke,MCQXC,EAAY,M,yBAKvB,iBAAAC,G,MACE,MAAMC,EAAcC,KAAKC,GAAGC,QAAQ,YAEpC,GAAIH,EAAa,CACf,MAAMI,GAAYC,EAAAL,EAAYM,WAAWC,cAAc,YAAQ,MAAAF,SAAA,SAAAA,EAAEG,UAEjE,GAAIJ,GAAaA,EAAUK,SAAS,cAAe,CACjDR,KAAKS,UAAY,Y,CAGnB,MAAMC,EAAOX,EAAYO,cAAc,iBACvC,GAAII,EAAM,CACRV,KAAKW,QAAU,I,GAMrB,MAAAC,GACE,OACEC,EAAK,OAAAC,IAAA,2CAAAC,MAAO,0BAA0Bf,KAAKW,QAAU,WAAa,MAChEE,EAAA,OAAAC,IAAA,2CAAKC,MAAO,iBAAiBf,KAAKS,aAChCI,EAAQ,QAAAC,IAAA,8C","ignoreList":[]}