@infineon/infineon-design-system-stencil 37.3.1--canary.1962.93825f44a21b09f42e82979802b0f007013f4769.0 → 37.3.1--canary.1964.530e3486d9a790b1814e2a86ae7faa2f9d7086c8.0

package/dist/infineon-design-system-stencil/p-e8504e6b.js

@@ -0,0 +1,2 @@
+function n(){(function(n,t,o,e,i){if(typeof window.btntConfig!=="object"){window.btntConfig={domain:"https://ssgtm.infineon.com",withCookies:true,maxBatchSize:10}}if(window["btnt"])return;window["btnt"]=function(n){if(typeof n!=="object"){n={}}if(typeof window.btntQueue!=="object"){window.btntQueue=[]}window.btntQueue.push(n)};e=n.createElement(t);i=n.getElementsByTagName(t)[0];e.async=1;e.src=window.btntConfig.domain+"/btnt.js";i.parentNode.insertBefore(e,i)})(document,"script")}function t(t,o){if(!window.btnt)n();window.btnt({event_name:"component_initialized",component_name:t,environment:o})}let o=null;const e=()=>{if(o)return o;const n=window;const t=document;if(n.React){o="React";return o}const e=t.querySelector("[data-reactroot], [data-reactid]");if(e){o="React";return o}const i=Array.from(t.querySelectorAll("body > div"));const r=i.some((n=>{const t=Object.keys(n);return t.some((n=>n.startsWith("__reactContainer")))}));if(r){o="React";return o}if(n.ng||n.getAllAngularRootElements){o="Angular";return o}if(t.querySelector("[ng-version], [ng-app]")){o="Angular";return o}if(n.Vue||n.__VUE__){o="Vue";return o}if(t.querySelector("[data-v-app]")){o="Vue";return o}o="Vanilla";return o};export{e as d,t};
+//# sourceMappingURL=p-e8504e6b.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["initializeTracking","t","r","_kk","n","pp","window","btntConfig","domain","withCookies","maxBatchSize","z","btntQueue","push","createElement","getElementsByTagName","async","src","parentNode","insertBefore","document","trackComponent","componentName","environment","btnt","event_name","component_name","frameworkCache","detectFramework","win","doc","React","reactRoots","querySelector","rootContainers","Array","from","querySelectorAll","hasReactRoot","some","container","keys","Object","key","startsWith","ng","getAllAngularRootElements","Vue","__VUE__"],"sources":["src/global/utils/tracking.ts","src/global/utils/framework-detection.ts"],"sourcesContent":["declare global {\n  interface Window {\n    btntConfig?: any;\n    btntQueue?: any[];\n    btnt?: (data: object) => void; \n  }\n}\n\nfunction initializeTracking() { \n    (function (t, r, _kk, n, pp) {\n      if (typeof window.btntConfig !== \"object\") {\n        window.btntConfig = {\n        domain: \"https://ssgtm.infineon.com\",\n        withCookies: true,\n        maxBatchSize: 10\n        };\n      }\n\n      if (window[\"btnt\"]) return;\n\n      window[\"btnt\"] = function (z) {\n        if (typeof z !== \"object\") {\n          z = {};\n        }\n        if (typeof window.btntQueue !== \"object\") {\n          window.btntQueue = [];\n        }\n        window.btntQueue.push(z);\n      };\n\n      n = t.createElement(r);\n      pp = t.getElementsByTagName(r)[0];\n      n.async = 1;\n      n.src = window.btntConfig.domain + \"/btnt.js\";\n      pp.parentNode.insertBefore(n, pp);\n      \n    })(document, \"script\", );\n  }\n\n  export function trackComponent(componentName: string, environment: string) {\n  if (!window.btnt) initializeTracking();\n  \n  window.btnt({\n    event_name: \"component_initialized\",\n    component_name: componentName,\n    environment: environment\n  });\n } \n\n  export default trackComponent","let frameworkCache: string | null = null;\n\nexport const detectFramework = (): string => {\n  if (frameworkCache) return frameworkCache;\n  \n  const win = window as any;\n  const doc = document;\n\n  // Check for React\n  if (win.React) {\n    frameworkCache = 'React';\n    return frameworkCache;\n  }\n  \n  // Check for React 16+ roots\n  const reactRoots = doc.querySelector('[data-reactroot], [data-reactid]');\n  if (reactRoots) {\n    frameworkCache = 'React';\n    return frameworkCache;\n  }\n  \n  // Check for React 18+ root containers\n  const rootContainers = Array.from(doc.querySelectorAll('body > div'));\n  const hasReactRoot = rootContainers.some(container => {\n    const keys = Object.keys(container);\n    return keys.some(key => key.startsWith('__reactContainer'));\n  });\n  \n  if (hasReactRoot) {\n    frameworkCache = 'React';\n    return frameworkCache;\n  }\n\n  // Check for Angular\n  if (win.ng || win.getAllAngularRootElements) {\n    frameworkCache = 'Angular';\n    return frameworkCache;\n  }\n  \n  if (doc.querySelector('[ng-version], [ng-app]')) {\n    frameworkCache = 'Angular';\n    return frameworkCache;\n  }\n  \n  // Check for Vue\n  if (win.Vue || win.__VUE__) {\n    frameworkCache = 'Vue';\n    return frameworkCache;\n  }\n  \n  if (doc.querySelector('[data-v-app]')) {\n    frameworkCache = 'Vue';\n    return frameworkCache;\n  }\n\n  // Default to Vanilla\n  frameworkCache = 'Vanilla';\n  return frameworkCache;\n};"],"mappings":"AAQA,SAASA,KACL,SAAWC,EAAGC,EAAGC,EAAKC,EAAGC,GACvB,UAAWC,OAAOC,aAAe,SAAU,CACzCD,OAAOC,WAAa,CACpBC,OAAQ,6BACRC,YAAa,KACbC,aAAc,G,CAIhB,GAAIJ,OAAO,QAAS,OAEpBA,OAAO,QAAU,SAAUK,GACzB,UAAWA,IAAM,SAAU,CACzBA,EAAI,E,CAEN,UAAWL,OAAOM,YAAc,SAAU,CACxCN,OAAOM,UAAY,E,CAErBN,OAAOM,UAAUC,KAAKF,E,EAGxBP,EAAIH,EAAEa,cAAcZ,GACpBG,EAAKJ,EAAEc,qBAAqBb,GAAG,GAC/BE,EAAEY,MAAQ,EACVZ,EAAEa,IAAMX,OAAOC,WAAWC,OAAS,WACnCH,EAAGa,WAAWC,aAAaf,EAAGC,EAE/B,EA3BD,CA2BGe,SAAU,SACf,C,SAEgBC,EAAeC,EAAuBC,GACtD,IAAKjB,OAAOkB,KAAMxB,IAElBM,OAAOkB,KAAK,CACVC,WAAY,wBACZC,eAAgBJ,EAChBC,YAAaA,GAEhB,CC/CD,IAAII,EAAgC,K,MAEvBC,EAAkB,KAC7B,GAAID,EAAgB,OAAOA,EAE3B,MAAME,EAAMvB,OACZ,MAAMwB,EAAMV,SAGZ,GAAIS,EAAIE,MAAO,CACbJ,EAAiB,QACjB,OAAOA,C,CAIT,MAAMK,EAAaF,EAAIG,cAAc,oCACrC,GAAID,EAAY,CACdL,EAAiB,QACjB,OAAOA,C,CAIT,MAAMO,EAAiBC,MAAMC,KAAKN,EAAIO,iBAAiB,eACvD,MAAMC,EAAeJ,EAAeK,MAAKC,IACvC,MAAMC,EAAOC,OAAOD,KAAKD,GACzB,OAAOC,EAAKF,MAAKI,GAAOA,EAAIC,WAAW,qBAAoB,IAG7D,GAAIN,EAAc,CAChBX,EAAiB,QACjB,OAAOA,C,CAIT,GAAIE,EAAIgB,IAAMhB,EAAIiB,0BAA2B,CAC3CnB,EAAiB,UACjB,OAAOA,C,CAGT,GAAIG,EAAIG,cAAc,0BAA2B,CAC/CN,EAAiB,UACjB,OAAOA,C,CAIT,GAAIE,EAAIkB,KAAOlB,EAAImB,QAAS,CAC1BrB,EAAiB,MACjB,OAAOA,C,CAGT,GAAIG,EAAIG,cAAc,gBAAiB,CACrCN,EAAiB,MACjB,OAAOA,C,CAITA,EAAiB,UACjB,OAAOA,CAAc,S","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-25b7d4cc.entry.js → p-ef7802f4.entry.js}

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["searchFieldCss","IfxSearchFieldStyle0","SearchField","constructor","hostRef","this","value","insideDropdown","showDeleteIcon","showDeleteIconInternalState","disabled","size","isFocused","placeholder","autocomplete","maxlength","handleInput","query","inputElement","ifxInput","emit","handleDelete","handleOutsideClick","event","path","composedPath","includes","valueWatcher","newValue","focusInput","focus","componentWillLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","componentWillUpdate","render","h","key","class","getWrapperClassNames","tabindex","onFocus","onClick","icon","ref","type","onInput","getSizeClass","classNames"],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: tokens.$ifxColorBaseWhite;\n  width: 100%;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n  .search-field__wrapper {\n    box-sizing: border-box;\n    height: tokens.$ifxSize500;\n    display: flex;\n    align-items: center;\n    border: 1px solid #8D8786;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    gap: tokens.$ifxSpace150;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n    position: relative;\n    width: 100%;\n    outline: none;\n    color: tokens.$ifxColorEngineering400;\n\n    &.focused {\n      border: 1px solid tokens.$ifxColorOcean500;\n\n      & ifx-icon {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    &.search-field__wrapper-s {\n      height: 36px;\n    }\n\n\n    &:hover:not(.focused, :focus) {\n      border: 1px solid #3C3A39;\n    }\n\n    &:focus {\n      outline: none;\n      border: 1px solid #0A8276;\n    }\n\n\n    .delete-icon {\n      right: 12px;\n      cursor: pointer;\n    }\n\n    input[type='text'] {\n      font-style: normal;\n      font-weight: 400;\n      font-size: 16px;\n      //line-height: 24px;\n      color: #8D8786;\n      border: none;\n      width: 100%;\n      outline: none;\n      //height: 100%;\n      height: 16px;\n\n      &:focus {\n        outline: none;\n        color: #1d1d1d;\n      }\n\n      &:disabled {\n        background-color: #EEEDED;\n      }\n    }\n\n    &:has(input[disabled]) {\n      background-color: #EEEDED;\n    }\n  }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\n  @Element() el;\n  private inputElement: HTMLInputElement;\n  @Prop({ mutable: true }) value: string = '';\n\n  @Event() ifxInput: EventEmitter<String>;\n  @State() insideDropdown: boolean = false;\n\n  @Prop() showDeleteIcon: boolean = false;\n  @State() showDeleteIconInternalState: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() size: string = 'l';\n  @State() isFocused: boolean = false;\n  @Prop() placeholder: string = \"Search...\";\n  @Prop() autocomplete: string = \"on\";\n  @Prop() maxlength?: number = null;  \n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement)) {\n      this.isFocused = false;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.ifxInput.emit(this.value);\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\n  }\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-search-field', framework)\n    }\n  }\n  \n  componentWillUpdate() {\n    if (this.value !== \"\") {\n      this.showDeleteIconInternalState = true;\n    } else this.showDeleteIconInternalState = false;\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n        <div class={this.getWrapperClassNames()}\n          tabindex={1}\n          onFocus={() => this.focusInput()}\n          onClick={() => this.focusInput()}\n        >\n          <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n          <input\n            ref={(el) => (this.inputElement = el)}\n            type=\"text\"\n            autocomplete={this.autocomplete}\n            onInput={() => this.handleInput()}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon icon=\"cRemove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n            </ifx-icon>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`\n    );\n  }\n}"],"mappings":"4KAAA,MAAMA,EAAiB,m0CACvB,MAAAC,EAAeD,E,MCYFE,EAAW,MAPxB,WAAAC,CAAAC,G,6CAU2BC,KAAAC,MAAgB,GAGhCD,KAAAE,eAA0B,MAE3BF,KAAAG,eAA0B,MACzBH,KAAAI,4BAAuC,MACxCJ,KAAAK,SAAoB,MACpBL,KAAAM,KAAe,IACdN,KAAAO,UAAqB,MACtBP,KAAAQ,YAAsB,YACtBR,KAAAS,aAAuB,KACvBT,KAAAU,UAAqB,KAkB7BV,KAAAW,YAAc,KACZ,MAAMC,EAAQZ,KAAKa,aAAaZ,MAChCD,KAAKC,MAAQW,EACbZ,KAAKc,SAASC,KAAKf,KAAKC,MAAM,EAGhCD,KAAAgB,aAAe,KACbhB,KAAKa,aAAaZ,MAAQ,GAC1BD,KAAKC,MAAQ,GACbD,KAAKc,SAASC,KAAKf,KAAKC,MAAM,C,CAxBhC,kBAAAgB,CAAmBC,GACjB,MAAMC,EAAOD,EAAME,eACnB,IAAKD,EAAKE,SAASrB,KAAKa,cAAe,CACrCb,KAAKO,UAAY,K,EAKrB,YAAAe,CAAaC,GACX,GAAIA,IAAavB,KAAKa,aAAaZ,MAAO,CACxCD,KAAKa,aAAaZ,MAAQsB,C,EAiB9B,UAAAC,GACExB,KAAKa,aAAaY,QAClBzB,KAAKO,UAAY,I,CAGnB,iBAAAmB,GACE,IAAIC,EAAuB3B,KAAK4B,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,mBAAoBF,E,EAIvC,mBAAAG,GACE,GAAIhC,KAAKC,QAAU,GAAI,CACrBD,KAAKI,4BAA8B,I,MAC9BJ,KAAKI,4BAA8B,K,CAG5C,MAAA6B,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,gCAA+B,gBAAgBnC,KAAKK,SAAQ,aAAcL,KAAKC,MAAOmC,MAAM,gBAC1GF,EAAA,OAAAC,IAAA,2CAAKC,MAAOpC,KAAKqC,uBACfC,SAAU,EACVC,QAAS,IAAMvC,KAAKwB,aACpBgB,QAAS,IAAMxC,KAAKwB,cAEpBU,EAAA,YAAAC,IAAA,2CAAUM,KAAK,YAAYL,MAAM,gBACjCF,EAAA,SAAAC,IAAA,2CACEO,IAAMd,GAAQ5B,KAAKa,aAAee,EAClCe,KAAK,OACLlC,aAAcT,KAAKS,aACnBmC,QAAS,IAAM5C,KAAKW,cACpBH,YAAaR,KAAKQ,YAClBH,SAAUL,KAAKK,SACfK,UAAWV,KAAKU,UAChBT,MAAOD,KAAKC,QAEbD,KAAKG,gBAAkBH,KAAKI,4BAC3B8B,EAAA,YAAUO,KAAK,YAAYL,MAAM,cAAcI,QAASxC,KAAKgB,eAE3D,M,CAMZ,YAAA6B,GACE,MAAO,GAAG7C,KAAKM,SAAW,IACtB,0BACA,E,CAIN,oBAAA+B,GACE,OAAOS,EACL,wBACA,yBAAyB9C,KAAK6C,iBAC9B,GAAG7C,KAAKO,UAAY,UAAY,K","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-98a2d242.entry.js → p-f47071d5.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as o,a as n,g as i}from"./p-b7a462e5.js";import{d as a,t as s}from"./p-fd1c9465.js";import{i as r}from"./p-1ecafb97.js";function d(e,t,o,n=20,i=0){const a=[];if(i>=n){return a}const s=e=>{const a=e.assignedNodes().filter((e=>e.nodeType===1));if(a.length>0){const e=a[0].parentElement;return d(e,t,o,n,i+1)}return[]};const r=Array.from(e.children||[]);for(const e of r){if(t(e)){continue}if(o(e)){a.push(e)}if(e.shadowRoot!=null){a.push(...d(e.shadowRoot,t,o,n,i+1))}else if(e.tagName==="SLOT"){a.push(...s(e))}else{a.push(...d(e,t,o,n,i+1))}}return a}function c(e){return e.hasAttribute("hidden")||e.hasAttribute("aria-hidden")&&e.getAttribute("aria-hidden")!=="false"||e.style.display===`none`||e.style.opacity===`0`||e.style.visibility===`hidden`||e.style.visibility===`collapse`}function l(e){return e.hasAttribute("disabled")||e.hasAttribute("aria-disabled")&&e.getAttribute("aria-disabled")!=="false"}function f(e){if(e.getAttribute("tabindex")==="-1"||c(e)||l(e)){return false}return e.hasAttribute("tabindex")||(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)&&e.hasAttribute("href")||e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement||e instanceof HTMLIFrameElement}function h(e,t,o){const n=e.animate(t,Object.assign(Object.assign({},o),{fill:"both"}));n.addEventListener("finish",(()=>{n.commitStyles();n.cancel()}));return n}const b={easing:"cubic-bezier(0.390, 0.575, 0.565, 1.000)"};const m={fadeIn:[Object.assign(Object.assign({offset:0},b),{opacity:0}),Object.assign(Object.assign({offset:1},b),{opacity:1})],fadeOut:[Object.assign(Object.assign({offset:0},b),{opacity:1}),Object.assign(Object.assign({offset:1},b),{opacity:0})]};const u=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.modal-container{display:none;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1060;overflow-y:auto;font-family:var(--ifx-font-family)}.modal-container.open{display:flex}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1D1D1D;opacity:0.5;z-index:0}.modal-content-container{position:absolute;display:flex;justify-content:center;width:90%;min-height:218px;background-color:#fff;border-radius:0;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);box-sizing:border-box;align-items:stretch}.modal-content-container.no-overflow{overflow:hidden}.modal-content-container.no-overflow .modal-body{overflow-y:auto}@media screen and (min-width: 768px){.modal-content-container{width:540px;min-height:132px}.modal-content-container.m,.modal-content-container.l,.modal-content-container.s{width:90%}}@media screen and (min-width: 1024px){.modal-content-container.s{width:47vw}.modal-content-container.m{width:63vw}.modal-content-container.l{width:80%}}.modal-content{display:flex;flex-direction:column;width:100%;max-height:90vh}.modal-icon-container{display:flex;align-items:center;justify-content:center;width:32px;background-color:#0A8276;align-self:stretch}.modal-icon-container.danger{background-color:#CD002F}.modal-icon-container ifx-icon{color:#FFFFFF}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;min-height:76px;max-height:105px;box-sizing:border-box;border-radius:1px 1px 0px 0px;border-bottom:1px solid #EEEDED}.modal-caption{max-height:56px;display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal-header h2{margin:0;font-weight:600;font-size:1.25rem;line-height:28px}.modal-header button{background:none;border:none;font-size:1.5em;padding:0;cursor:pointer}.modal-close-button{align-self:flex-start;margin-right:-8px}.modal-body{padding:16px 24px;min-height:56px;box-sizing:border-box;flex:1}.modal-footer.buttons-present ::slotted(*){display:flex;justify-content:flex-end;gap:16px;padding:16px 24px 32px 16px}.modal-border{display:flex;align-items:center;justify-content:center;width:100%;font-size:1.5em;flex-grow:1}.modal-border.primary{background-color:#0A8276}.modal-border.secondary{background-color:#575352}.modal-border.danger{background-color:#CD002F}.modal-border.success{background-color:#4CA460}.modal-border.warning{background-color:#E16B25}.modal-border.orange{background-color:#E16B25}.modal-border.ocean{background-color:#0A8276}.modal-border.grey{background-color:#575352}.modal-border.grey-200{background-color:#EEEDED}.modal-border.red{background-color:#CD002F}.modal-border.green{background-color:#4CA460}.modal-border.berry{background-color:#9C216E}';const p=u;const g=class{constructor(o){e(this,o);this.ifxOpen=t(this,"ifxOpen",7);this.ifxClose=t(this,"ifxClose",7);this.opened=false;this.showModal=this.opened||false;this.caption="Modal Title";this.closeOnOverlayClick=true;this.variant="default";this.size="s";this.alertIcon="";this.okButtonLabel="OK";this.cancelButtonLabel="Cancel";this.slotButtonsPresent=false;this.showCloseButton=true;this.focusableElements=[];this.handleTopFocus=()=>{this.attemptFocus(this.getLastFocusableElement())};this.handleBottomFocus=()=>{this.attemptFocus(this.getFirstFocusableElement())};this.handleKeypress=e=>{if(!this.showModal){return}if(e.key==="Escape"){this.doBeforeClose("ESCAPE_KEY")}}}componentDidLoad(){if(!r(this.hostElement)){const e=a();s("ifx-modal",e)}this.focusableElements=d(this.hostElement.shadowRoot,(e=>c(e)||e.matches("[data-focus-trap-edge]")),f)}componentWillRender(){if(this.showModal){this.handleComponentOverflow()}}handleComponentOverflow(){const e=this.hostElement.shadowRoot.querySelector(".modal-content-container");if(this.showModal&&this.isModalContentContainerHeightReachedViewport()){e.classList.add("no-overflow")}else if(e===null||e===void 0?void 0:e.classList.contains("no-overflow")){e===null||e===void 0?void 0:e.classList.remove("no-overflow")}}getFirstFocusableElement(){return this.focusableElements[0]}getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}attemptFocus(e){if(e==null){setTimeout((()=>{this.closeButton.focus()}));return}setTimeout((()=>{e.focus()}),0)}open(){this.showModal=true;try{const e=h(this.modalContainer,m.fadeIn,{duration:200});e.addEventListener("finish",(()=>{setTimeout((()=>{var e,t;(e=this.getLastFocusableElement())===null||e===void 0?void 0:e.focus();(t=this.getLastFocusableElement())===null||t===void 0?void 0:t.blur()}),0);this.ifxOpen.emit()}));this.hostElement.addEventListener("keydown",this.handleKeypress)}catch(e){this.ifxOpen.emit()}}close(){try{const e=h(this.modalContainer,m.fadeOut,{duration:200});e.addEventListener("finish",(()=>{this.showModal=false;this.ifxClose.emit()}));this.hostElement.removeEventListener("keydown",this.handleKeypress)}catch(e){this.showModal=false;this.ifxClose.emit()}}doBeforeClose(e){const t=[];t.push(e);const o=t.some((e=>e.defaultPrevented));if(!o){this.opened=false}}openedChanged(e){if(e===true){this.open()}else{this.close()}}handleOverlayClick(){if(this.closeOnOverlayClick){this.doBeforeClose("BACKDROP")}}handleContentUpdate(e){const t=e.target;const o=t.assignedNodes();if(o.length>0){o.forEach((e=>{if(e.observer){e.observer.disconnect();delete e.observer}const t=new MutationObserver(((e,t)=>{for(let t of e){if(t.type==="childList"){if(this.showModal){this.handleComponentOverflow()}}}}));t.observe(e,{attributes:true,childList:true,subtree:true});e.observer=t}))}}handleButtonsSlotChange(e){var t;if(((t=e.currentTarget.assignedElements()[0])===null||t===void 0?void 0:t.childElementCount)>0){this.slotButtonsPresent=true}else{this.slotButtonsPresent=false}}isModalContentContainerHeightReachedViewport(){return new Promise((e=>{setTimeout((()=>{const t=this.hostElement.shadowRoot.querySelector(".modal-content");const o=t.offsetHeight;const n=window.innerHeight;e(o>=n*.9)}),100)}))}render(){const e=this.variant!=="default";return o(n,{key:"a6abb7c42860fb162bb5c31cb7deb1c18b1ff9dd"},o("div",{key:"7793092dbb3783d4e63f96e88d535ec9e1801787",ref:e=>this.modalContainer=e,class:`modal-container ${this.showModal?"open":""}`},o("div",{key:"78ffab400681f680d8318a17f3d3731a39f29d64",class:"modal-overlay",onClick:()=>this.handleOverlayClick()}),o("div",{key:"d2a6c10e664adf0eba31597501d6de7db50740b4","data-focus-trap-edge":true,onFocus:this.handleTopFocus,tabindex:"0"}),o("div",{key:"7c503f8799ece4c7ad6531c4538f61d4268bf8bf",class:`modal-content-container ${this.size}`,role:"dialog","aria-modal":"true","aria-label":this.caption},e?o("div",{class:`modal-icon-container ${this.variant==="alert-brand"?"":"danger"}`},this.alertIcon?o("ifx-icon",{icon:this.alertIcon}):null):null,o("div",{key:"9f91df2ba1923d1f54abe25ffbdf7f624a5fd4af",class:"modal-content"},o("div",{key:"9ac1e22c6d7b7204817190171d8abe671e79fa12",class:"modal-header"},o("h2",{key:"1946ff802f31ef0963f3bb4baf98a33275b1df9b",class:"modal-caption"},this.caption),this.showCloseButton&&o("ifx-icon-button",{key:"dc85ef0a50f668fc7765e430a07f82a1a519d276",class:"modal-close-button",ref:e=>this.closeButton=e,icon:"cross-16",variant:"tertiary",onClick:()=>this.doBeforeClose("CLOSE_BUTTON")})),o("div",{key:"629463ad78aa4d2163b72aeaff506abf173e441c",class:"modal-body"},o("slot",{key:"83b79b4116cbe87d47de6970526eb3ffc8e5f0ff",name:"content",onSlotchange:e=>this.handleContentUpdate(e)})),o("div",{key:"cb5b4afecb2d2ed2cc3529871fa7a28ed87aefec",class:`modal-footer ${this.slotButtonsPresent?"buttons-present":""}`},o("slot",{key:"44f2c8129ec640584497ed260aacb9e8689a027b",name:"buttons",onSlotchange:e=>this.handleButtonsSlotChange(e)})))),o("div",{key:"eccb9ec511a9ce19c93e19800d78b6b41db364ff","data-focus-trap-edge":true,onFocus:this.handleBottomFocus,tabindex:"0"})))}get hostElement(){return i(this)}static get watchers(){return{opened:["openedChanged"]}}};g.style=p;export{g as ifx_modal};
-//# sourceMappingURL=p-98a2d242.entry.js.map
+import{r as e,c as t,h as o,a as n,g as i}from"./p-b7a462e5.js";import{d as a,t as s}from"./p-e8504e6b.js";import{i as r}from"./p-1ecafb97.js";function d(e,t,o,n=20,i=0){const a=[];if(i>=n){return a}const s=e=>{const a=e.assignedNodes().filter((e=>e.nodeType===1));if(a.length>0){const e=a[0].parentElement;return d(e,t,o,n,i+1)}return[]};const r=Array.from(e.children||[]);for(const e of r){if(t(e)){continue}if(o(e)){a.push(e)}if(e.shadowRoot!=null){a.push(...d(e.shadowRoot,t,o,n,i+1))}else if(e.tagName==="SLOT"){a.push(...s(e))}else{a.push(...d(e,t,o,n,i+1))}}return a}function c(e){return e.hasAttribute("hidden")||e.hasAttribute("aria-hidden")&&e.getAttribute("aria-hidden")!=="false"||e.style.display===`none`||e.style.opacity===`0`||e.style.visibility===`hidden`||e.style.visibility===`collapse`}function l(e){return e.hasAttribute("disabled")||e.hasAttribute("aria-disabled")&&e.getAttribute("aria-disabled")!=="false"}function f(e){if(e.getAttribute("tabindex")==="-1"||c(e)||l(e)){return false}return e.hasAttribute("tabindex")||(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)&&e.hasAttribute("href")||e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement||e instanceof HTMLIFrameElement}function h(e,t,o){const n=e.animate(t,Object.assign(Object.assign({},o),{fill:"both"}));n.addEventListener("finish",(()=>{n.commitStyles();n.cancel()}));return n}const b={easing:"cubic-bezier(0.390, 0.575, 0.565, 1.000)"};const m={fadeIn:[Object.assign(Object.assign({offset:0},b),{opacity:0}),Object.assign(Object.assign({offset:1},b),{opacity:1})],fadeOut:[Object.assign(Object.assign({offset:0},b),{opacity:1}),Object.assign(Object.assign({offset:1},b),{opacity:0})]};const u=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.modal-container{display:none;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1060;overflow-y:auto;font-family:var(--ifx-font-family)}.modal-container.open{display:flex}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1D1D1D;opacity:0.5;z-index:0}.modal-content-container{position:absolute;display:flex;justify-content:center;width:90%;min-height:218px;background-color:#fff;border-radius:0;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);box-sizing:border-box;align-items:stretch}.modal-content-container.no-overflow{overflow:hidden}.modal-content-container.no-overflow .modal-body{overflow-y:auto}@media screen and (min-width: 768px){.modal-content-container{width:540px;min-height:132px}.modal-content-container.m,.modal-content-container.l,.modal-content-container.s{width:90%}}@media screen and (min-width: 1024px){.modal-content-container.s{width:47vw}.modal-content-container.m{width:63vw}.modal-content-container.l{width:80%}}.modal-content{display:flex;flex-direction:column;width:100%;max-height:90vh}.modal-icon-container{display:flex;align-items:center;justify-content:center;width:32px;background-color:#0A8276;align-self:stretch}.modal-icon-container.danger{background-color:#CD002F}.modal-icon-container ifx-icon{color:#FFFFFF}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;min-height:76px;max-height:105px;box-sizing:border-box;border-radius:1px 1px 0px 0px;border-bottom:1px solid #EEEDED}.modal-caption{max-height:56px;display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal-header h2{margin:0;font-weight:600;font-size:1.25rem;line-height:28px}.modal-header button{background:none;border:none;font-size:1.5em;padding:0;cursor:pointer}.modal-close-button{align-self:flex-start;margin-right:-8px}.modal-body{padding:16px 24px;min-height:56px;box-sizing:border-box;flex:1}.modal-footer.buttons-present ::slotted(*){display:flex;justify-content:flex-end;gap:16px;padding:16px 24px 32px 16px}.modal-border{display:flex;align-items:center;justify-content:center;width:100%;font-size:1.5em;flex-grow:1}.modal-border.primary{background-color:#0A8276}.modal-border.secondary{background-color:#575352}.modal-border.danger{background-color:#CD002F}.modal-border.success{background-color:#4CA460}.modal-border.warning{background-color:#E16B25}.modal-border.orange{background-color:#E16B25}.modal-border.ocean{background-color:#0A8276}.modal-border.grey{background-color:#575352}.modal-border.grey-200{background-color:#EEEDED}.modal-border.red{background-color:#CD002F}.modal-border.green{background-color:#4CA460}.modal-border.berry{background-color:#9C216E}';const p=u;const g=class{constructor(o){e(this,o);this.ifxOpen=t(this,"ifxOpen",7);this.ifxClose=t(this,"ifxClose",7);this.opened=false;this.showModal=this.opened||false;this.caption="Modal Title";this.closeOnOverlayClick=true;this.variant="default";this.size="s";this.alertIcon="";this.okButtonLabel="OK";this.cancelButtonLabel="Cancel";this.slotButtonsPresent=false;this.showCloseButton=true;this.focusableElements=[];this.handleTopFocus=()=>{this.attemptFocus(this.getLastFocusableElement())};this.handleBottomFocus=()=>{this.attemptFocus(this.getFirstFocusableElement())};this.handleKeypress=e=>{if(!this.showModal){return}if(e.key==="Escape"){this.doBeforeClose("ESCAPE_KEY")}}}componentWillLoad(){if(!r(this.hostElement)){const e=a();s("ifx-modal",e)}}componentDidLoad(){this.focusableElements=d(this.hostElement.shadowRoot,(e=>c(e)||e.matches("[data-focus-trap-edge]")),f)}componentWillRender(){if(this.showModal){this.handleComponentOverflow()}}handleComponentOverflow(){const e=this.hostElement.shadowRoot.querySelector(".modal-content-container");if(this.showModal&&this.isModalContentContainerHeightReachedViewport()){e.classList.add("no-overflow")}else if(e===null||e===void 0?void 0:e.classList.contains("no-overflow")){e===null||e===void 0?void 0:e.classList.remove("no-overflow")}}getFirstFocusableElement(){return this.focusableElements[0]}getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}attemptFocus(e){if(e==null){setTimeout((()=>{this.closeButton.focus()}));return}setTimeout((()=>{e.focus()}),0)}open(){this.showModal=true;try{const e=h(this.modalContainer,m.fadeIn,{duration:200});e.addEventListener("finish",(()=>{setTimeout((()=>{var e,t;(e=this.getLastFocusableElement())===null||e===void 0?void 0:e.focus();(t=this.getLastFocusableElement())===null||t===void 0?void 0:t.blur()}),0);this.ifxOpen.emit()}));this.hostElement.addEventListener("keydown",this.handleKeypress)}catch(e){this.ifxOpen.emit()}}close(){try{const e=h(this.modalContainer,m.fadeOut,{duration:200});e.addEventListener("finish",(()=>{this.showModal=false;this.ifxClose.emit()}));this.hostElement.removeEventListener("keydown",this.handleKeypress)}catch(e){this.showModal=false;this.ifxClose.emit()}}doBeforeClose(e){const t=[];t.push(e);const o=t.some((e=>e.defaultPrevented));if(!o){this.opened=false}}openedChanged(e){if(e===true){this.open()}else{this.close()}}handleOverlayClick(){if(this.closeOnOverlayClick){this.doBeforeClose("BACKDROP")}}handleContentUpdate(e){const t=e.target;const o=t.assignedNodes();if(o.length>0){o.forEach((e=>{if(e.observer){e.observer.disconnect();delete e.observer}const t=new MutationObserver(((e,t)=>{for(let t of e){if(t.type==="childList"){if(this.showModal){this.handleComponentOverflow()}}}}));t.observe(e,{attributes:true,childList:true,subtree:true});e.observer=t}))}}handleButtonsSlotChange(e){var t;if(((t=e.currentTarget.assignedElements()[0])===null||t===void 0?void 0:t.childElementCount)>0){this.slotButtonsPresent=true}else{this.slotButtonsPresent=false}}isModalContentContainerHeightReachedViewport(){return new Promise((e=>{setTimeout((()=>{const t=this.hostElement.shadowRoot.querySelector(".modal-content");const o=t.offsetHeight;const n=window.innerHeight;e(o>=n*.9)}),100)}))}render(){const e=this.variant!=="default";return o(n,{key:"24c13df6af069b1d93d4e70c0930bd4381b2dcc1"},o("div",{key:"fc6a23f20309e087dac7665bb71df58ea44669aa",ref:e=>this.modalContainer=e,class:`modal-container ${this.showModal?"open":""}`},o("div",{key:"109e80dce5854beda04fc593efae49bdf8a4d4e0",class:"modal-overlay",onClick:()=>this.handleOverlayClick()}),o("div",{key:"eb35fdaf211ceef40b983d378304a4642fa839e8","data-focus-trap-edge":true,onFocus:this.handleTopFocus,tabindex:"0"}),o("div",{key:"0b7b0108c0563ffc5e14fd8f1c39d4bf3c80c03d",class:`modal-content-container ${this.size}`,role:"dialog","aria-modal":"true","aria-label":this.caption},e?o("div",{class:`modal-icon-container ${this.variant==="alert-brand"?"":"danger"}`},this.alertIcon?o("ifx-icon",{icon:this.alertIcon}):null):null,o("div",{key:"23113f6efc3df7ca24976bde7999f29b21c57a56",class:"modal-content"},o("div",{key:"d89ad9950a9d9ea8b64ab9ad41b3e47ee3a3a8c3",class:"modal-header"},o("h2",{key:"ebad8ef7e759f916325a0a5fe7e87a016f9e169a",class:"modal-caption"},this.caption),this.showCloseButton&&o("ifx-icon-button",{key:"8655efa78858838ee8ec697cb9adad04b27e882b",class:"modal-close-button",ref:e=>this.closeButton=e,icon:"cross-16",variant:"tertiary",onClick:()=>this.doBeforeClose("CLOSE_BUTTON")})),o("div",{key:"71fd706680ffecda83c792639cd3781e739fad74",class:"modal-body"},o("slot",{key:"e9607ce7823d9fc0020ae4c0135612c9bb688984",name:"content",onSlotchange:e=>this.handleContentUpdate(e)})),o("div",{key:"3283f090e75460790a0f31708c34aa54efa77548",class:`modal-footer ${this.slotButtonsPresent?"buttons-present":""}`},o("slot",{key:"59f2179f10110195b68a4f1671aa342209d0e51b",name:"buttons",onSlotchange:e=>this.handleButtonsSlotChange(e)})))),o("div",{key:"f3e0591f72a4e3f756fc1e3378e27733d3ee2707","data-focus-trap-edge":true,onFocus:this.handleBottomFocus,tabindex:"0"})))}get hostElement(){return i(this)}static get watchers(){return{opened:["openedChanged"]}}};g.style=p;export{g as ifx_modal};
+//# sourceMappingURL=p-f47071d5.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["queryShadowRoot","root","skipNode","isMatch","maxDepth","depth","matches","traverseSlot","$slot","assignedNodes","filter","node","nodeType","length","$slotParent","parentElement","children","Array","from","$child","push","shadowRoot","tagName","isHidden","$elem","hasAttribute","getAttribute","style","display","opacity","visibility","isDisabled","isFocusable","HTMLAnchorElement","HTMLAreaElement","HTMLButtonElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","HTMLIFrameElement","animationTo","element","keyframes","options","animated","animate","Object","assign","fill","addEventListener","commitStyles","cancel","keyframeDefaults","easing","KEYFRAMES","fadeIn","offset","fadeOut","modalCss","IfxModalStyle0","IfxModal","constructor","hostRef","this","opened","showModal","caption","closeOnOverlayClick","variant","size","alertIcon","okButtonLabel","cancelButtonLabel","slotButtonsPresent","showCloseButton","focusableElements","handleTopFocus","attemptFocus","getLastFocusableElement","handleBottomFocus","getFirstFocusableElement","handleKeypress","event","key","doBeforeClose","componentWillLoad","isNestedInIfxComponent","hostElement","framework","detectFramework","trackComponent","componentDidLoad","el","componentWillRender","handleComponentOverflow","modalContentContainer","querySelector","isModalContentContainerHeightReachedViewport","classList","add","contains","remove","setTimeout","closeButton","focus","open","anim","modalContainer","duration","_a","_b","blur","ifxOpen","emit","err","close","ifxClose","removeEventListener","trigger","triggers","prevented","some","defaultPrevented","openedChanged","newValue","handleOverlayClick","handleContentUpdate","e","slotElement","target","nodes","forEach","observer","disconnect","MutationObserver","mutationsList","_","mutation","type","observe","attributes","childList","subtree","handleButtonsSlotChange","currentTarget","assignedElements","childElementCount","Promise","resolve","modalContent","modalContentHeight","offsetHeight","viewportHeight","window","innerHeight","render","isAlertVariant","h","Host","ref","class","onClick","onFocus","tabindex","role","icon","name","onSlotchange"],"sources":["src/global/utils/focus-trap.ts","src/global/utils/animation.ts","src/components/modal/modal.scss?tag=ifx-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/**\n * Copy/pasted from https://github.com/andreasbm/focus-trap\n */\n\n/**\n * Traverses the slots of the open shadowroots and returns all children matching the query.\n * We need to traverse each child-depth one at a time because if an element should be skipped\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"*\")\n * the information of whether the children is within a hidden parent is lost.\n * @param {ShadowRoot | HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n */\nexport function queryShadowRoot(\n  root: ShadowRoot | HTMLElement,\n  skipNode: ($elem: HTMLElement) => boolean,\n  isMatch: ($elem: HTMLElement) => boolean,\n  maxDepth: number = 20,\n  depth: number = 0\n): HTMLElement[] {\n  const matches: HTMLElement[] = [];\n\n  // If the depth is above the max depth, abort the searching here.\n  if (depth >= maxDepth) {\n    return matches;\n  }\n\n  // Traverses a slot element\n  const traverseSlot = ($slot: HTMLSlotElement) => {\n    // Only check nodes that are of the type Node.ELEMENT_NODE\n    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n    const assignedNodes = $slot\n      .assignedNodes()\n      .filter((node) => node.nodeType === 1);\n    if (assignedNodes.length > 0) {\n      const $slotParent = assignedNodes[0].parentElement!;\n      return queryShadowRoot(\n        $slotParent,\n        skipNode,\n        isMatch,\n        maxDepth,\n        depth + 1\n      );\n    }\n\n    return [];\n  };\n\n  // Go through each child and continue the traversing if necessary\n  // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n  // Therefore we fallback to an empty array if it is undefined.\n  const children = Array.from(root.children || []) as HTMLElement[];\n  for (const $child of children) {\n    // Check if the element and its descendants should be skipped\n    if (skipNode($child)) {\n      // console.log('-- SKIP', $child);\n      continue;\n    }\n\n    // console.log('$child', $child);\n\n    // If the element matches we always add it\n    if (isMatch($child)) {\n      matches.push($child);\n    }\n\n    if ($child.shadowRoot != null) {\n      // If the element has a shadow root we need to traverse it\n      matches.push(\n        ...queryShadowRoot(\n          $child.shadowRoot,\n          skipNode,\n          isMatch,\n          maxDepth,\n          depth + 1\n        )\n      );\n    } else if ($child.tagName === 'SLOT') {\n      // If the child is a slot we need to traverse each assigned node\n      matches.push(...traverseSlot($child as HTMLSlotElement));\n    } else {\n      // Traverse the children of the element\n      matches.push(\n        ...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1)\n      );\n    }\n  }\n\n  return matches;\n}\n\n/**\n * Returns whether the element is hidden.\n * @param $elem\n */\nexport function isHidden($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('hidden') ||\n    ($elem.hasAttribute('aria-hidden') &&\n      $elem.getAttribute('aria-hidden') !== 'false') ||\n    // A quick and dirty way to check whether the element is hidden.\n    // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n    // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n    // we won't be able to catch it here. We accept it due to the huge performance benefits.\n    $elem.style.display === `none` ||\n    $elem.style.opacity === `0` ||\n    $elem.style.visibility === `hidden` ||\n    $elem.style.visibility === `collapse`\n  );\n\n  // If offsetParent is null we can assume that the element is hidden\n  // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n  // || $elem.offsetParent == null;\n}\n\n/**\n * Returns whether the element is disabled.\n * @param $elem\n */\nexport function isDisabled($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('disabled') ||\n    ($elem.hasAttribute('aria-disabled') &&\n      $elem.getAttribute('aria-disabled') !== 'false')\n  );\n}\n\n/**\n * Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n */\nexport function isFocusable($elem: HTMLElement): boolean {\n  // Discard elements that are removed from the tab order.\n  if (\n    $elem.getAttribute('tabindex') === '-1' ||\n    isHidden($elem) ||\n    isDisabled($elem)\n  ) {\n    return false;\n  }\n\n  return (\n    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n    $elem.hasAttribute('tabindex') ||\n    // Anchor tags or area tags with a href set\n    (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&\n      $elem.hasAttribute('href')) ||\n    // Form elements which are not disabled\n    $elem instanceof HTMLButtonElement ||\n    $elem instanceof HTMLInputElement ||\n    $elem instanceof HTMLTextAreaElement ||\n    $elem instanceof HTMLSelectElement ||\n    // IFrames\n    $elem instanceof HTMLIFrameElement\n  );\n}","export function animationTo(\n  element: HTMLElement,\n  keyframes: Keyframe | Keyframe[],\n  options?: KeyframeAnimationOptions\n) {\n  const animated = element.animate(keyframes, { ...options, fill: 'both' });\n  animated.addEventListener('finish', () => {\n    // @ts-ignore\n    animated.commitStyles();\n    animated.cancel();\n  });\n\n  return animated;\n}\n\nconst keyframeDefaults = {\n  easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n};\n\nexport const KEYFRAMES = {\n  fadeIn: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n  ],\n  fadeOut: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n  ],\n};","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.modal-container {\n  display: none;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1060;\n  overflow-y: auto;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.modal-container.open {\n  display: flex;\n}\n\n.modal-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: tokens.$ifxColorBaseBlack;\n  opacity: 0.5;\n  z-index: 0;\n}\n\n.modal-content-container {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  width: 90%;\n  min-height: 218px;\n  background-color: #fff;\n  border-radius: tokens.$ifxBorderRadiusNone;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  \n  //overflow: hidden;\n\n  box-sizing: border-box;\n  align-items: stretch;\n}\n\n.modal-content-container {\n  &.no-overflow { \n    overflow: hidden;\n    & .modal-body { \n      overflow-y: auto;\n    }\n  }\n}\n\n/* Add desktop size here */\n@media screen and (min-width: 768px) {\n  .modal-content-container {\n    width: 540px;\n    min-height: 132px;\n\n    &.m,\n    &.l,\n    &.s {\n      width: 90%;\n    }\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .modal-content-container {\n\n    &.s {\n      width: 47vw;\n    }\n\n    &.m {\n      width: 63vw;\n    }\n\n    &.l {\n      width: 80%;\n    }\n  }\n}\n\n.modal-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-height: 90vh;\n}\n\n.modal-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  background-color: tokens.$ifxColorOcean500;\n  align-self: stretch;\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  & ifx-icon {\n    color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  min-height: 76px;\n  max-height: 105px;\n  box-sizing: border-box;\n  border-radius: 1px 1px 0px 0px;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.modal-caption {\n  max-height: 56px;\n  display: -webkit-box;\n  overflow: hidden;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical; \n}\n\n.modal-header h2 {\n  margin: 0;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeXl;\n  line-height: 28px;\n}\n\n.modal-header button {\n  background: none;\n  border: none;\n  font-size: 1.5em;\n  padding: 0;\n  cursor: pointer;\n}\n\n.modal-close-button {\n  align-self: flex-start;\n  margin-right: -8px;\n}\n\n.modal-body {\n  padding: 16px 24px;\n  min-height: 56px;\n  box-sizing: border-box;\n  flex: 1;\n  \n  //overflow-y: auto;\n}\n\n.modal-footer.buttons-present ::slotted(*){\n  display: flex;\n  justify-content: flex-end;\n  gap: 16px;\n  padding: 16px 24px 32px 16px\n}\n\n.modal-border {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  font-size: 1.5em;\n  flex-grow: 1;\n\n  &.primary {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.secondary {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.success {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.warning {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.orange {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.ocean {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.grey {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.grey-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.red {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.green {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.berry {\n    background-color: tokens.$ifxColorBerry500;\n  }\n}","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\n \ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n  trigger: CloseEventTrigger;\n}\n@Component({\n  tag: 'ifx-modal',\n  styleUrl: 'modal.scss',\n  shadow: true\n})\nexport class IfxModal {\n  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n  @State() showModal: boolean = this.opened || false;\n\n  @Prop() caption: string = 'Modal Title';\n  @Prop() closeOnOverlayClick: boolean = true;\n\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n\n  @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n  \n  @Prop() size: 's' | 'm' | 'l' = 's';\n\n  @Prop() alertIcon: string = '';\n  @Prop() okButtonLabel: string = 'OK';\n  @Prop() cancelButtonLabel: string = 'Cancel';\n  @Element() hostElement: HTMLElement;\n\n  @State() slotButtonsPresent: boolean = false;\n\n  @Prop() showCloseButton: boolean = true;\n\n  private modalContainer: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n  private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.hostElement)) { \n      const framework = detectFramework();\n      trackComponent('ifx-modal', framework)\n    }\n  }\n\n  componentDidLoad() {\n    // Query all focusable elements and store them in `focusableElements`.\n    // Needed for the \"focus trap\" functionality.\n    this.focusableElements = queryShadowRoot(\n      this.hostElement.shadowRoot,\n      (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'),\n      isFocusable\n    );\n  }\n\n  componentWillRender() { \n    if(this.showModal) { \n      this.handleComponentOverflow();\n    }\n  }\n\n  handleComponentOverflow() { \n    const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');\n    if (this.showModal && this.isModalContentContainerHeightReachedViewport()) {\n      modalContentContainer.classList.add('no-overflow')\n    } else if(modalContentContainer?.classList.contains('no-overflow')) { \n      modalContentContainer?.classList.remove('no-overflow')\n    }\n  }\n\n  getFirstFocusableElement(): HTMLElement | null {\n    return this.focusableElements[0];\n  }\n\n  getLastFocusableElement(): HTMLElement | null {\n    return this.focusableElements[this.focusableElements.length - 1];\n  }\n\n  handleTopFocus = () => {\n    this.attemptFocus(this.getLastFocusableElement());\n  };\n\n  handleBottomFocus = () => {\n    this.attemptFocus(this.getFirstFocusableElement());\n  };\n\n  attemptFocus(element: HTMLElement | null) {\n    if (element == null) {\n      setTimeout(() => { //wait until DOM is fully loaded\n        this.closeButton.focus();\n      },);\n      return;\n    }\n\n    setTimeout(() => { //wait until DOM is fully loaded\n      element.focus();\n    }, 0);\n  }\n\n  open() {\n    this.showModal = true;\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        // Setting focus on last item and removing immediately\n        // so, on tab press first element is focused\n        setTimeout(() => {\n          this.getLastFocusableElement()?.focus();\n          this.getLastFocusableElement()?.blur();\n        }, 0);\n\n        this.ifxOpen.emit();\n      });\n\n      this.hostElement.addEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.ifxOpen.emit();\n    }\n  }\n\n  close() {\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        this.showModal = false;\n        this.ifxClose.emit();\n      });\n      this.hostElement.removeEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.showModal = false;\n      this.ifxClose.emit();\n    }\n  }\n\n  handleKeypress = (event: KeyboardEvent) => {\n    if (!this.showModal) {\n      return;\n    }\n    if (event.key === 'Escape') {\n      this.doBeforeClose('ESCAPE_KEY');\n    }\n  };\n\n  doBeforeClose(trigger: CloseEventTrigger) {\n    const triggers = [];\n    triggers.push(trigger);\n    const prevented = triggers.some((event) => event.defaultPrevented);\n    if (!prevented) {\n      this.opened = false;\n    }\n  }\n\n  @Watch('opened')\n  openedChanged(newValue) {\n    if (newValue === true) {\n      this.open();\n    } else {\n      this.close()\n    }\n  }\n\n  handleOverlayClick() {\n    if (this.closeOnOverlayClick) {\n      this.doBeforeClose('BACKDROP')\n    }\n  }\n\n  handleContentUpdate(e) {\n  const slotElement = e.target;\n  const nodes = slotElement.assignedNodes();\n  if(nodes.length > 0) {\n    nodes.forEach(node => {\n      if (node.observer) {\n        node.observer.disconnect();\n        delete node.observer;\n      }\n      const observer = new MutationObserver((mutationsList, _) => {\n        for(let mutation of mutationsList) {\n          if (mutation.type === 'childList') {\n            if(this.showModal) { \n              this.handleComponentOverflow();\n            }\n          }\n        }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n        node.observer = observer;\n      });\n    } \n  }\n\n  handleButtonsSlotChange(e) {\n    if(e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\n      this.slotButtonsPresent = true;\n    }else{\n      this.slotButtonsPresent = false;\n    }\n  }\n\n isModalContentContainerHeightReachedViewport() {\n  //Adding timeout for proper height detection on Edge browser\n  return new Promise(resolve => {\n    setTimeout(() => {\n      const modalContent = this.hostElement.shadowRoot.querySelector('.modal-content') as HTMLElement;\n      const modalContentHeight = modalContent.offsetHeight;\n      const viewportHeight = window.innerHeight;\n      resolve(modalContentHeight >= viewportHeight * 0.9);\n    }, 100);\n  });\n}\n\n\n  render() {\n    const isAlertVariant = this.variant !== 'default';\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.modalContainer = el)}\n          class={`modal-container ${this.showModal ? 'open' : ''}`}\n        >\n          <div\n            class=\"modal-overlay\"\n            onClick={() => this.handleOverlayClick()}\n          ></div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleTopFocus}\n            tabindex=\"0\"\n          ></div>\n          <div\n            class={`modal-content-container ${this.size}`}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={this.caption}>\n            {isAlertVariant ? (\n              <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\n                {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\n              </div>\n            ) : null}\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h2 class=\"modal-caption\">{this.caption}</h2>\n                { \n                  this.showCloseButton && \n                  <ifx-icon-button class = 'modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-16\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n                  </ifx-icon-button>\n                }\n              </div>\n              <div class=\"modal-body\">\n                <slot name=\"content\" onSlotchange={(e) => this.handleContentUpdate(e)} />\n              </div>\n              <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\n                <slot name=\"buttons\" onSlotchange={(e)=>this.handleButtonsSlotChange(e)}>\n                </slot>\n              </div>\n            </div>\n          </div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleBottomFocus}\n            tabindex=\"0\"\n          ></div>\n        </div>\n      </Host>\n\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

package/dist/types/components/accordion/accordion.d.ts

@@ -1,7 +1,7 @@
 export declare class Accordion {
     el: HTMLElement;
     autoCollapse: boolean;
-    componentDidLoad(): void;
+    componentWillLoad(): void;
     onItemOpen(event: CustomEvent): Promise<void>;
     render(): any;
 }

package/dist/types/components/alert/alert.d.ts

@@ -18,6 +18,5 @@ export declare class Alert {
     renderCloseButton(): any;
     generateUniqueId(prefix?: string): string;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/badge/badge.d.ts

@@ -1,5 +1,5 @@
 export declare class Badge {
     el: HTMLElement;
-    componentDidLoad(): void;
+    componentWillLoad(): void;
     render(): any;
 }

package/dist/types/components/breadcrumb/breadcrumb.d.ts

@@ -1,5 +1,6 @@
 export declare class Breadcrumb {
     el: any;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     private validateBreadcrumbItemStructure;
     render(): any;

package/dist/types/components/button/button.d.ts

@@ -18,7 +18,6 @@ export declare class Button {
     handleFormAndInternalHref(): void;
     handleButtonWidth(): void;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     componentWillRender(): void;
     handleClick: (ev: Event) => void;
     resetClickHandler(): void;

package/dist/types/components/card/card.d.ts

@@ -12,7 +12,6 @@ export declare class Card {
     handleComponentAdjustment(): void;
     handleClassList(el: any, type: any, className: any): void;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     componentWillUpdate(): void;
     render(): any;
 }

package/dist/types/components/checkbox/checkbox.d.ts

@@ -21,7 +21,6 @@ export declare class Checkbox {
     indeterminateChanged(newValue: boolean, oldValue: boolean): void;
     handleKeydown(event: any): void;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     componentDidRender(): void;
     /**
      * Callback for form association.

package/dist/types/components/checkbox-group/checkbox-group.d.ts

@@ -12,7 +12,6 @@ export declare class CheckboxGroup {
     handleCheckboxError(event: CustomEvent): void;
     setGroupError(error: boolean): Promise<void>;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     handleSlotChange: () => void;
     private initializeState;
     private updateHasErrors;

package/dist/types/components/chip/chip.d.ts

@@ -36,6 +36,5 @@ export declare class Chip {
     syncChipState(): void;
     syncSelectedOptionsWithProp(newValue: Array<string> | string): void;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/content-switcher/content-switcher.d.ts

@@ -13,7 +13,6 @@ export declare class ContentSwitcher {
     ifxChange: EventEmitter<ChangeEvent>;
     private eventHandlers;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     disconnectedCallback(): void;
     /**
      * Initialize the dividers between items.

package/dist/types/components/date-picker/date-picker.d.ts

@@ -21,6 +21,7 @@ export declare class DatePicker {
     handleInputFocusOnIconClick(): void;
     getBrowser(): "unknown" | "Chrome" | "Opera" | "IE" | "Firefox";
     setFireFoxClasses(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     componentWillUpdate(): void;
     formResetCallback(): void;

package/dist/types/components/dropdown/dropdown.d.ts

@@ -16,7 +16,6 @@ export declare class Dropdown {
     menu: HTMLElement;
     popperInstance: any;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     watchHandlerIsOpen(newValue: boolean, oldValue: boolean): void;
     watchHandlerDisabled(newValue: boolean): void;
     watchHandlerSlot(): void;

package/dist/types/components/file-upload/file-upload.d.ts

@@ -133,6 +133,7 @@ export declare class FileUpload {
     private getFormattedFileTooLargeText;
     private renderStatusMessage;
     private isInputDisabled;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     injectDemoState(): Promise<void>;
     triggerDemoValidation(): Promise<void>;

package/dist/types/components/footer/footer.d.ts

@@ -5,6 +5,5 @@ export declare class Footer {
     private hasColSlot;
     private hasSocialsSlot;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/icon/infineonIconStencil.d.ts

@@ -15,6 +15,5 @@ export declare class InfineonIconStencil {
     isInsideAgGrid(el: HTMLElement): boolean;
     isInsideChoices(el: HTMLElement): boolean;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/icon-button/icon-button.d.ts

@@ -14,7 +14,6 @@ export declare class IconButton {
     updateIcon(newIcon: string): void;
     setFocus(): Promise<void>;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     render(): any;
     getVariantClass(): "primary" | "secondary" | "tertiary";
     getSizeClass(): "" | "l" | "s" | "xs";

package/dist/types/components/indicator/indicator.d.ts

@@ -7,7 +7,6 @@ export declare class Indicator {
     number: number;
     handleNumber(): void;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     componentWillUpdate(): void;
     render(): any;
 }

package/dist/types/components/link/link.d.ts

@@ -13,7 +13,7 @@ export declare class Link {
     setInternalStates(): void;
     componentWillRender(): void;
     handleKeyDown(event: KeyboardEvent): void;
-    componentDidLoad(): void;
+    componentWillLoad(): void;
     render(): any;
     getSizeClass(): "" | "medium" | "large" | "small" | "extraLarge";
     getVariantClass(): "bold" | "title" | "menu" | "underlined";

package/dist/types/components/modal/modal.d.ts

@@ -21,6 +21,7 @@ export declare class IfxModal {
     private modalContainer;
     private focusableElements;
     private closeButton;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     componentWillRender(): void;
     handleComponentOverflow(): void;

package/dist/types/components/notification/notification.d.ts

@@ -6,7 +6,7 @@ export declare class Notification {
     linkText: string;
     linkHref: string;
     linkTarget: string;
-    componentDidLoad(): void;
+    componentWillLoad(): void;
     private getClassName;
     render(): any;
 }

package/dist/types/components/progress-bar/progress-bar.d.ts

@@ -6,6 +6,5 @@ export declare class ProgressBar {
     internalValue: number;
     valueChanged(newValue: number, oldValue: number): void;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/radio-button/radio-button.d.ts

@@ -15,7 +15,6 @@ export declare class RadioButton {
     ifxChange: EventEmitter;
     ifxError: EventEmitter;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     handleCheckedChange(newValue: boolean): void;
     updateFormValue(): void;
     errorChanged(newValue: boolean, oldValue: boolean): void;

package/dist/types/components/radio-button-group/radio-button-group.d.ts

@@ -12,7 +12,6 @@ export declare class RadioButtonGroup {
     handleRadioButtonError(event: CustomEvent): void;
     setGroupError(error: boolean): Promise<void>;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     handleSlotChange: () => void;
     private initializeState;
     private updateHasErrors;

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

@@ -14,7 +14,6 @@ export declare class SearchBar {
     handleCloseButton: () => void;
     setInitialState(): void;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     handleInput(event: CustomEvent): void;
     handleFocus: () => void;
     render(): any;

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

@@ -18,7 +18,7 @@ export declare class SearchField {
     handleInput: () => void;
     handleDelete: () => void;
     focusInput(): void;
-    componentDidLoad(): void;
+    componentWillLoad(): void;
     componentWillUpdate(): void;
     render(): any;
     getSizeClass(): "" | "search-field__wrapper-s";

package/dist/types/components/segmented-control/segmented-control.d.ts

@@ -17,6 +17,7 @@ export declare class SegmentedControl {
     getSegments(): NodeList;
     setActiveSegment(): void;
     setSegmentSize(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     render(): any;
     componentDidRender(): void;

package/dist/types/components/spinner/spinner.d.ts

@@ -3,7 +3,7 @@ export declare class Spinner {
     size: string;
     variant: string;
     inverted: boolean;
-    componentDidLoad(): void;
+    componentWillLoad(): void;
     render(): any;
     getSizeClass(): "" | "s";
     getClassNames(): string;

package/dist/types/components/status/status.d.ts

@@ -3,6 +3,6 @@ export declare class Status {
     label: string;
     border: boolean;
     color: string;
-    componentDidLoad(): void;
+    componentWillLoad(): void;
     render(): any;
 }

package/dist/types/components/tag/tag.d.ts

@@ -1,6 +1,6 @@
 export declare class Tag {
     el: HTMLElement;
     icon: string;
-    componentDidLoad(): void;
+    componentWillLoad(): void;
     render(): any;
 }

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

@@ -28,6 +28,5 @@ export declare class TextField {
     handleTypeProp(): void;
     formResetCallback(): void;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/textarea/textarea.d.ts

@@ -25,6 +25,5 @@ export declare class TextArea {
     handleOnInput(e: InputEvent): void;
     resetTextarea(): void;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/tree-view/tree-view.d.ts

@@ -10,6 +10,6 @@ export declare class TreeView {
     handleExpandAllItemsChange(newValue: boolean): void;
     handleDisableAllItemsChange(newValue: boolean): void;
     private handleSlotRef;
-    componentDidLoad(): void;
+    componentWillLoad(): void;
     render(): any;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "37.3.1--canary.1962.93825f44a21b09f42e82979802b0f007013f4769.0",
+  "version": "37.3.1--canary.1964.530e3486d9a790b1814e2a86ae7faa2f9d7086c8.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",