@infineon/infineon-design-system-stencil 37.4.0 → 37.4.1--canary.1962.baa360da219f37054f79b2e93a00d1e1821bfba2.0

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

@@ -3,7 +3,7 @@ export declare class Spinner {
     size: string;
     variant: string;
     inverted: boolean;
-    componentWillLoad(): void;
+    componentDidLoad(): Promise<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;
-    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
     render(): any;
 }

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

@@ -19,7 +19,7 @@ export declare class Stepper {
     syncIfxSteps(): void;
     setInitialActiveStep(): void;
     componentWillLoad(): void;
-    componentDidLoad(): void;
+    componentDidLoad(): Promise<void>;
     componentWillUpdate(): void;
     render(): any;
     componentDidRender(): void;

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

@@ -11,7 +11,7 @@ export declare class Switch {
     isChecked(): Promise<boolean>;
     componentWillLoad(): void;
     toggleLabelGap(): void;
-    componentDidLoad(): void;
+    componentDidLoad(): Promise<void>;
     valueChanged(newValue: boolean, oldValue: boolean): void;
     toggleSwitch(): void;
     handleKeyDown(event: KeyboardEvent): void;

package/dist/types/components/table-advanced-version/table.d.ts

@@ -44,7 +44,7 @@ export declare class Table {
     onBtShowLoading(): Promise<void>;
     componentWillLoad(): void;
     componentDidRender(): void;
-    componentDidLoad(): void;
+    componentDidLoad(): Promise<void>;
     componentWillUnmount(): void;
     handlePageChange(event: any): void;
     isJSONParseable(str: any): boolean;

package/dist/types/components/table-basic-version/table.d.ts

@@ -20,7 +20,7 @@ export declare class Table {
     getColData(): any[];
     onFirstDataRendered(params: FirstDataRenderedEvent): void;
     componentWillUpdate(): void;
-    componentDidLoad(): void;
+    componentDidLoad(): Promise<void>;
     getClassNames(): string;
     getTableStyle(): {
         height: string;

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

@@ -21,7 +21,7 @@ export declare class IfxTabs {
     reRenderBorder(): void;
     onSlotChange(): void;
     setDefaultOrientation(): void;
-    componentDidLoad(): void;
+    componentDidLoad(): Promise<void>;
     onTabFocus(index: any): () => void;
     disconnectedCallback(): void;
     componentDidUpdate(): void;

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

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

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

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

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

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

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

@@ -11,7 +11,7 @@ export declare class Tooltip {
     referenceEl: HTMLElement;
     popperInstance: any;
     componentWillLoad(): void;
-    componentDidLoad(): void;
+    componentDidLoad(): Promise<void>;
     initializePopper(): void;
     determineBestPosition(): "top" | "left" | "right" | "bottom" | "bottom-start" | "top-start" | "top-end" | "bottom-end";
     positionChanged(newVal: any): void;

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;
-    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
     render(): any;
 }

package/dist/types/global/utils/dom-ready.d.ts

@@ -0,0 +1 @@
+export declare const waitForDOMReady: () => Promise<void>;

package/dist/types/global/utils/framework-detection.d.ts

@@ -1 +1 @@
-export declare const detectFramework: () => string;
+export declare const detectFramework: () => Promise<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "37.4.0",
+  "version": "37.4.1--canary.1962.baa360da219f37054f79b2e93a00d1e1821bfba2.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

package/dist/cjs/framework-detection-78986016.js

@@ -1,93 +0,0 @@
-'use strict';
-
-function initializeTracking() {
-    (function (t, r, _kk, n, pp) {
-        if (typeof window.btntConfig !== "object") {
-            window.btntConfig = {
-                domain: "https://ssgtm.infineon.com",
-                withCookies: true,
-                maxBatchSize: 10
-            };
-        }
-        if (window["btnt"])
-            return;
-        window["btnt"] = function (z) {
-            if (typeof z !== "object") {
-                z = {};
-            }
-            if (typeof window.btntQueue !== "object") {
-                window.btntQueue = [];
-            }
-            window.btntQueue.push(z);
-        };
-        n = t.createElement(r);
-        pp = t.getElementsByTagName(r)[0];
-        n.async = 1;
-        n.src = window.btntConfig.domain + "/btnt.js";
-        pp.parentNode.insertBefore(n, pp);
-    })(document, "script");
-}
-function trackComponent(componentName, environment) {
-    if (!window.btnt)
-        initializeTracking();
-    window.btnt({
-        event_name: "component_initialized",
-        component_name: componentName,
-        environment: environment
-    });
-}
-
-let frameworkCache = null;
-const detectFramework = () => {
-    if (frameworkCache)
-        return frameworkCache;
-    const win = window;
-    const doc = document;
-    // Check for React
-    if (win.React) {
-        frameworkCache = 'React';
-        return frameworkCache;
-    }
-    // Check for React 16+ roots
-    const reactRoots = doc.querySelector('[data-reactroot], [data-reactid]');
-    if (reactRoots) {
-        frameworkCache = 'React';
-        return frameworkCache;
-    }
-    // Check for React 18+ root containers
-    const rootContainers = Array.from(doc.querySelectorAll('body > div'));
-    const hasReactRoot = rootContainers.some(container => {
-        const keys = Object.keys(container);
-        return keys.some(key => key.startsWith('__reactContainer'));
-    });
-    if (hasReactRoot) {
-        frameworkCache = 'React';
-        return frameworkCache;
-    }
-    // Check for Angular
-    if (win.ng || win.getAllAngularRootElements) {
-        frameworkCache = 'Angular';
-        return frameworkCache;
-    }
-    if (doc.querySelector('[ng-version], [ng-app]')) {
-        frameworkCache = 'Angular';
-        return frameworkCache;
-    }
-    // Check for Vue
-    if (win.Vue || win.__VUE__) {
-        frameworkCache = 'Vue';
-        return frameworkCache;
-    }
-    if (doc.querySelector('[data-v-app]')) {
-        frameworkCache = 'Vue';
-        return frameworkCache;
-    }
-    // Default to Vanilla
-    frameworkCache = 'Vanilla';
-    return frameworkCache;
-};
-
-exports.detectFramework = detectFramework;
-exports.trackComponent = trackComponent;
-
-//# sourceMappingURL=framework-detection-78986016.js.map

package/dist/cjs/framework-detection-78986016.js.map

@@ -1 +0,0 @@
-{"file":"framework-detection-78986016.js","mappings":"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","names":[],"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};"],"version":3}

package/dist/components/p-29a39b8c.js.map

@@ -1 +0,0 @@
-{"file":"p-29a39b8c.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,wLAAwL,CAAC;AAC9M,2BAAe,YAAY;;MCSd,SAAS;IALtB;;;;QAOU,iBAAY,GAAY,KAAK,CAAC;KA6BvC;IA3BC,iBAAiB;QACf,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,eAAe,EAAE,SAAS,CAAC,CAAA;SAC3C;KACF;IAGD,MAAM,UAAU,CAAC,KAAkB;QACjC,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;YACzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;gBACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;oBAC5D,WAAW,CAAC,IAAI,GAAG,KAAK,CAAC;iBAC1B;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace100;\n  font-family:  var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","import { Component, h, Listen, Element, Prop } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-accordion', framework)\n    }\n  }\n\n  @Listen('ifxOpen')\n  async onItemOpen(event: CustomEvent) {\n    if (this.autoCollapse) {\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.open)) {\n          itemElement.open = false;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-2ddcc02e.js.map

@@ -1 +0,0 @@
-{"file":"p-2ddcc02e.js","mappings":"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","names":[],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n  position: relative;\n  box-sizing: border-box;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  .ifx-label-wrapper {\n    font-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    max-width: 100%;\n  }\n\n  .ifx-error-message-wrapper {\n    color: #CD002F;\n    font-size: tokens.$ifxFontSizeXs;\n    line-height: tokens.$ifxLineHeightXs;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    max-width: 100%;\n  }\n\n  .ifx-multiselect-wrapper {\n    background-color: tokens.$ifxColorBaseWhite;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxBorderRadius12;\n    width: 100%;\n    font-weight: 400;\n    font-style: normal;\n    height: 40px;\n    line-height: 24px;\n    padding: 8px 16px;\n    font-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n\n    &:focus-visible {\n      outline: none;\n    }\n\n    &:focus-visible:not(.active):not(:active) {\n      outline: none;\n\n      &::before {\n        content: '';\n        position: absolute;\n        width: calc(100% + 4px);\n        height: calc(100% + 4px);\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        border: 2px solid tokens.$ifxColorOcean500;\n        border-radius: 2px;\n\n      }\n    }\n\n    &.disabled {\n      background: tokens.$ifxColorEngineering200;\n      color: #575352;\n      border-color: #575352;\n      cursor: default;\n      -webkit-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n\n    &.error {\n      border-color: #CD002F;\n    }\n\n    &:hover:not(.focus, :focus) {\n      border-color: tokens.$ifxColorEngineering500;\n    }\n\n    &.active {\n      border-color: tokens.$ifxColorOcean500 !important; // Active border color\n\n      & .icon-wrapper-up {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding-left: tokens.$ifxSpace100;\n      }\n\n      & .icon-wrapper-down {\n        display: none\n      }\n    }\n\n\n    & .icon-wrapper-up {\n      display: none;\n    }\n\n    & .icon-wrapper-down {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding-left: tokens.$ifxSpace100;\n    }\n\n    &.is-flipped {\n      .ifx-multiselect-dropdown-menu {\n        top: auto;\n        bottom: 100%;\n      }\n    }\n  }\n\n  .ifx-multiselect-input {\n    flex-grow: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    &.placeholder {\n      opacity: 0.5;\n    }\n\n  }\n\n\n  .ifx-multiselect-icon-container {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n\n    .ifx-multiselect-icon-container {\n      display: flex;\n    }\n\n    .icon-wrapper {\n      display: flex;\n      align-items: center;\n      transition: transform 0.2s ease-in-out;\n    }\n\n    .icon-wrapper--open {\n      transform: rotate(180deg);\n    }\n  }\n\n  .ifx-clear-button {\n    display: flex;\n    align-items: center;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  .ifx-multiselect-dropdown-menu {\n    box-sizing: border-box;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    margin-top: tokens.$ifxSpace50;\n    border: 1px solid tokens.$ifxColorEngineering200;\n    background-color: #fff;\n    box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n    max-height: 300px;\n    z-index: 1000;\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n.ifx-multiselect-dropdown-functions {\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n  flex-shrink: 0;\n}\n\n.ifx-multiselect-dropdown-search {\n  margin-bottom: tokens.$ifxSpace150;\n}\n\n.ifx-multiselect-dropdown-controls {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: tokens.$ifxSpace100;\n\n  .select-all-wrapper {\n    display: flex;\n  }\n\n  .expand-collapse-controls {\n    display: flex;\n    gap: tokens.$ifxSpace150;\n  }\n\n  .control-item {\n    font-size: tokens.$ifxFontSizeS;\n    line-height: tokens.$ifxLineHeightS;\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:focus-visible {\n      outline: 2px solid tokens.$ifxColorOcean500;\n      outline-offset: 2px;\n      border-radius: tokens.$ifxBorderRadius12;\n    }\n  }\n}\n\n.ifx-multiselect-options {\n  flex: 1;\n  overflow-y: auto;\n  padding-top: tokens.$ifxSpace150;\n  padding-bottom: tokens.$ifxSpace150;\n\n  &.show-no-results {\n    .ifx-multiselect-no-results {\n      display: block;\n    }\n  }\n}\n\n.ifx-multiselect-no-results {\n  padding-left: tokens.$ifxSpace200;\n  padding-right: tokens.$ifxSpace200;\n  display: none;\n}\n\n","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch, AttachInternals, Method } from '@stencil/core';\nimport { trackComponent } from '../../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../../global/utils/dom-utils';\nimport { detectFramework } from '../../../global/utils/framework-detection';\nimport { Option } from './interfaces';\n\nfunction debounce(func, wait) {\n  let timeout;\n  return function executedFunction(...args) {\n    const later = () => {\n      clearTimeout(timeout);\n      func(...args);\n    };\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n}\n\n@Component({\n  tag: 'ifx-multiselect',\n  styleUrl: 'multiselect.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class Multiselect {\n  @Prop() name: string;\n  @Prop() disabled: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorMessage: string = \"Error\";\n  @Prop() label: string = \"\";\n  @Prop() placeholder: string = \"\";\n  @Prop() showSearch: boolean = true;\n  @Prop() showSelectAll: boolean = true;\n  @Prop() showClearButton: boolean = true;\n  @Prop() showExpandCollapse: boolean = true;\n  @Prop() noResultsMessage: string = \"No results found.\";\n  @Prop() showNoResultsMessage: boolean = true;\n  @Prop() searchPlaceholder: string = \"Search\";\n  @Prop() selectAllLabel: string = \"Select all\";\n  @Prop() expandLabel: string = \"Expand\";\n  @Prop() collapseLabel: string = \"Collapse\";\n  @Prop() ariaMultiSelectLabel: string = \"Multi-select dropdown\";\n  @Prop() ariaMultiSelectLabelledBy: string = \"\";\n  @Prop() ariaMultiSelectDescribedBy: string = \"\";\n  @Prop() ariaSearchLabel: string = \"Search options\";\n  @Prop() ariaClearLabel: string = \"Clear all selections\";\n  @Prop() ariaToggleLabel: string = \"Toggle dropdown\";\n  @Prop() ariaSelectAllLabel: string = \"Select all options\";\n  @Prop() ariaExpandAllLabel: string = \"Expand all categories\";\n  @Prop() ariaCollapseAllLabel: string = \"Collapse all categories\";\n\n  @State() internalError: boolean = false;\n  @State() internalErrorMessage: string;\n  @State() persistentSelectedOptions: Option[] = [];\n  @State() dropdownOpen = false;\n  @State() dropdownFlipped: boolean;\n  @State() searchTerm: string = '';\n\n  @Event() ifxSelect: EventEmitter;\n  @Event() ifxOpen: EventEmitter;\n\n  @Element() el: HTMLElement;\n  dropdownElement!: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n  private parseChildOptions(): Option[] {\n    const options: Option[] = [];\n    const childElements = Array.from(this.el.children);\n\n    childElements.forEach((child, index) => {\n      if (child.tagName === 'IFX-MULTISELECT-OPTION') {\n        const option = this.parseOptionElement(child as HTMLElement, index);\n        if (option) {\n          options.push(option);\n        }\n      }\n    });\n\n    return options;\n  }\n\n  private parseOptionElement(element: HTMLElement, index: number): Option | null {\n    const value = element.getAttribute('value') || `option-${index}`;\n    const selected = element.hasAttribute('selected');\n    const disabled = element.hasAttribute('disabled');\n    const indeterminate = element.hasAttribute('indeterminate');\n\n    const option: Option = {\n      value,\n      selected,\n      disabled,\n      indeterminate\n    };\n\n    const nestedOptions = Array.from(element.children)\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION')\n      .map((child, childIndex) => this.parseOptionElement(child as HTMLElement, childIndex))\n      .filter(opt => opt !== null) as Option[];\n\n    if (nestedOptions.length > 0) {\n      option.children = nestedOptions;\n    }\n\n    return option;\n  }\n\n  loadInitialOptions() {\n    this.internalError = this.error;\n    this.internalErrorMessage = this.errorMessage;\n\n    const allOptions = this.parseChildOptions();\n    const initiallySelected = this.collectSelectedOptions(allOptions);\n    const initiallySelectedNotInState = initiallySelected.filter(init =>\n      !this.persistentSelectedOptions.some(opt => opt.value == init.value)\n    );\n    this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelectedNotInState];\n  }\n\n  private collectSelectedOptions(options: Option[]): Option[] {\n    let selectedOptions: Option[] = [];\n\n    for (const option of options) {\n      if (option.selected) {\n        if (option.children && option.children.length > 0) {\n          selectedOptions = selectedOptions.concat(this.collectLeafOptions(option.children));\n        } else {\n          if (!selectedOptions.some(existingOption => existingOption.value === option.value)) {\n            selectedOptions.push(option);\n          }\n        }\n      } else {\n        if (option.children && option.children.length > 0) {\n          selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));\n        }\n      }\n    }\n\n    return selectedOptions;\n  }\n\n  private collectLeafOptions(children: Option[]): Option[] {\n    let leafOptions = [];\n\n    for (const child of children) {\n      if (child.children && child.children.length > 0) {\n        leafOptions = leafOptions.concat(this.collectLeafOptions(child.children));\n      } else {\n        leafOptions.push(child);\n      }\n    }\n    return leafOptions;\n  }\n\n  handleSearch = debounce((targetElement: HTMLInputElement) => {\n    const searchTerm = targetElement.value.toLowerCase();\n    const isSearchActive = searchTerm !== '';\n\n    this.searchTerm = searchTerm;\n\n    const wrapper = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper');\n    if (wrapper) {\n      if (isSearchActive) {\n        wrapper.classList.remove('active');\n      } else {\n        const searchField = this.el.shadowRoot.querySelector('ifx-search-field');\n        const searchFieldHasFocus = searchField && searchField.matches(':focus-within');\n        if (!searchFieldHasFocus) {\n          wrapper.classList.add('active');\n        }\n      }\n    }\n\n    const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n    if (optionsContainer) {\n      if (isSearchActive) {\n        optionsContainer.classList.add('has-search-filter');\n      } else {\n        optionsContainer.classList.remove('has-search-filter');\n      }\n    }\n\n    requestAnimationFrame(() => {\n      const allOptions = this.el.querySelectorAll('ifx-multiselect-option');\n      allOptions.forEach(option => {\n        const searchEvent = new CustomEvent('ifx-search-filter', {\n          detail: { searchTerm, isActive: isSearchActive }\n        });\n        option.dispatchEvent(searchEvent);\n      });\n\n      if (isSearchActive) {\n        setTimeout(() => {\n          const allOptions = this.el.querySelectorAll('ifx-multiselect-option');\n          let visibleCount = 0;\n\n          allOptions.forEach(option => {\n            const style = window.getComputedStyle(option);\n            const rect = option.getBoundingClientRect();\n\n            if (style.display !== 'none' &&\n                style.visibility !== 'hidden' &&\n                style.opacity !== '0' &&\n                rect.height > 0) {\n              visibleCount++;\n            }\n          });\n\n          const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n          if (optionsContainer) {\n            if (visibleCount === 0) {\n              optionsContainer.classList.add('show-no-results');\n            } else {\n              optionsContainer.classList.remove('show-no-results');\n            }\n          }\n        }, 200);\n      } else {\n        const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n        if (optionsContainer) {\n          optionsContainer.classList.remove('show-no-results');\n        }\n      }\n    });\n  }, 150);\n\n  private handleSearchFocus(hasFocus: boolean) {\n    const wrapper = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper');\n    if (wrapper) {\n      if (hasFocus || this.searchTerm !== '') {\n        wrapper.classList.remove('active');\n      } else {\n        wrapper.classList.add('active');\n      }\n    }\n  }\n\n  positionDropdown() {\n    const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - wrapperRect.bottom;\n    const spaceAbove = wrapperRect.top;\n\n    if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || (wrapperRect.bottom > window.innerHeight)) {\n      this.dropdownFlipped = true;\n    } else {\n      this.dropdownFlipped = false;\n    }\n  }\n\n  private pendingSelectionUpdate = false;\n  public updateSlotBasedSelections(emitEvent: boolean = false) {\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n    const selectedLeafOptions: Option[] = [];\n\n    allOptionElements.forEach((optionEl: any) => {\n      const instance = optionEl['__stencil_instance'];\n      if (instance && instance.selected && !instance.hasChildren) {\n        selectedLeafOptions.push({\n          value: instance.value,\n          selected: true,\n          disabled: instance.disabled\n        });\n      }\n    });\n\n    this.persistentSelectedOptions = selectedLeafOptions;\n\n    if (emitEvent) {\n      this.ifxSelect.emit(this.persistentSelectedOptions);\n    }\n  }\n\n  private updateInitialParentStates() {\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n    const optionsByDepth = Array.from(allOptionElements)\n      .map(el => ({\n        element: el,\n        instance: (el as any)['__stencil_instance'],\n        depth: parseInt(el.getAttribute('data-level') || '0')\n      }))\n      .filter(item => item.instance)\n      .sort((a, b) => b.depth - a.depth);\n\n    optionsByDepth.forEach(({ instance }) => {\n      if (instance.hasChildren) {\n        this.updateParentState(instance);\n      }\n    });\n  }\n\n  private updateParentState(parentInstance: any) {\n    const directChildren = Array.from(parentInstance.el.children as HTMLCollection)\n      .filter((child: Element) => child.tagName === 'IFX-MULTISELECT-OPTION')\n      .map(child => (child as any)['__stencil_instance'])\n      .filter(instance => instance !== null);\n\n    const selectedCount = directChildren.filter(child => child.selected).length;\n    const indeterminateCount = directChildren.filter(child => child.indeterminate).length;\n    const totalCount = directChildren.length;\n\n    if (selectedCount === totalCount && indeterminateCount === 0) {\n      parentInstance.selected = true;\n      parentInstance.indeterminate = false;\n    } else if (selectedCount === 0 && indeterminateCount === 0) {\n      parentInstance.selected = false;\n      parentInstance.indeterminate = false;\n    } else {\n      parentInstance.selected = false;\n      parentInstance.indeterminate = true;\n    }\n  }\n\n  componentDidLoad() {\n    setTimeout(() => {\n      this.positionDropdown();\n    }, 500);\n\n    this.el.addEventListener('ifx-option-changed', () => {\n      if (!this.pendingSelectionUpdate) {\n        this.pendingSelectionUpdate = true;\n        requestAnimationFrame(() => {\n          this.updateSlotBasedSelections(true);\n          setTimeout(() => {\n            this.pendingSelectionUpdate = false;\n          }, 0);\n        });\n      }\n    });\n\n    setTimeout(() => {\n      this.updateSlotBasedSelections(false);\n      this.updateInitialParentStates();\n    }, 100);\n  }\n\n  componentWillLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-multiselect', framework)\n    }\n    this.loadInitialOptions();\n  }\n\n  @Watch('error')\n  updateInternalError() {\n    this.internalError = this.error;\n  }\n\n  @Watch('errorMessage')\n  updateInternalErrorMessage() {\n    this.internalErrorMessage = this.errorMessage;\n  }\n\n  @Watch('persistentSelectedOptions')\n  onSelectionChange(newValue: Option[], _: Option[]) {\n    const formData = new FormData();\n    newValue.forEach(option => formData.append(this.name, option.value));\n    this.internals.setFormValue(formData);\n  }\n  collapseAll() {\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n    allOptionElements.forEach((optionEl: any) => {\n      const instance = optionEl['__stencil_instance'];\n      if (instance && instance.hasChildren) {\n        instance.isExpanded = false;\n      }\n    });\n  }\n\n  expandAll() {\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n    allOptionElements.forEach((optionEl: any) => {\n      const instance = optionEl['__stencil_instance'];\n      if (instance && instance.hasChildren) {\n        instance.isExpanded = true;\n      }\n    });\n  }\n\n  selectAll() {\n    this.resetSearch();\n\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n\n    allOptionElements.forEach((optionEl: any) => {\n      const instance = optionEl['__stencil_instance'];\n      if (instance) {\n        if (instance.hasChildren) {\n          instance.isExpanded = true;\n        } else {\n          instance.selected = true;\n        }\n      }\n    });\n\n    setTimeout(() => {\n      this.updateInitialParentStates();\n      this.updateSlotBasedSelections(false);\n      this.ifxSelect.emit(this.persistentSelectedOptions);\n    }, 0);\n  }\n\n  @Method()\n  async clearSelection() {\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n    allOptionElements.forEach((optionEl: any) => {\n      const instance = optionEl['__stencil_instance'];\n      if (instance) {\n        instance.selected = false;\n        instance.indeterminate = false;\n        if (instance.hasChildren) {\n          instance.isExpanded = false;\n        }\n      }\n    });\n\n    this.persistentSelectedOptions = [];\n\n    setTimeout(() => {\n      this.updateSlotBasedSelections(false);\n      this.ifxSelect.emit(this.persistentSelectedOptions);\n    }, 0);\n  }\n\n  handleDocumentClick = (event: Event) => {\n    const path = event.composedPath();\n    if (!path.includes(this.dropdownElement)) {\n      this.dropdownOpen = false;\n      document.removeEventListener('click', this.handleDocumentClick);\n      this.resetSearch();\n      this.ifxOpen.emit(this.dropdownOpen);\n    }\n  }\n\n  toggleDropdown() {\n    this.dropdownOpen = !this.dropdownOpen;\n    setTimeout(() => {\n      if (this.dropdownOpen) {\n        document.addEventListener('click', this.handleDocumentClick);\n      } else {\n        this.resetSearch();\n      }\n      this.ifxOpen.emit(this.dropdownOpen);\n    }, 0);\n  }\n\n  private resetSearch() {\n    this.searchTerm = '';\n\n    const searchField = this.el.shadowRoot.querySelector('ifx-search-field') as any;\n    if (searchField) {\n      searchField.value = '';\n    }\n\n    const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\n    if (optionsContainer) {\n      optionsContainer.classList.remove('has-search-filter');\n    }\n\n    const allOptions = this.el.querySelectorAll('ifx-multiselect-option');\n    allOptions.forEach(option => {\n      const searchEvent = new CustomEvent('ifx-search-filter', {\n        detail: { searchTerm: '', isActive: false }\n      });\n      option.dispatchEvent(searchEvent);\n    });\n  }\n\n  handleWrapperClick(event: MouseEvent) {\n    this.positionDropdown();\n\n    if (event.currentTarget === event.target) {\n      this.toggleDropdown();\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n\n    // If dropdown is closed, only allow opening\n    if (!this.dropdownOpen) {\n      switch (event.code) {\n        case 'Enter':\n        case 'Space':\n        case 'ArrowDown':\n          event.preventDefault();\n          this.toggleDropdown();\n          break;\n      }\n      return;\n    }\n\n    // Dropdown is open - handle navigation and controls\n    switch (event.code) {\n      case 'Escape':\n        event.preventDefault();\n        this.toggleDropdown();\n        break;\n      case 'Enter':\n      case 'Space':\n        // Don't close dropdown when pressing space/enter in controls area\n        const target = event.target as HTMLElement;\n        if (!target.closest('.ifx-multiselect-dropdown-functions')) {\n          event.preventDefault();\n          this.toggleDropdown();\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        // Focus first/last option for navigation\n        event.preventDefault();\n        this.focusFirstOption();\n        break;\n    }\n  }\n\n  private focusFirstOption() {\n    const firstOption = this.el.querySelector('ifx-multiselect-option:not(.search-hidden)');\n    if (firstOption) {\n      const labelElement = firstOption.shadowRoot?.querySelector('.option-label') as HTMLElement;\n      labelElement?.focus();\n    }\n  }\n\n  private renderSelectAll() {\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n    const leafOptions = Array.from(allOptionElements).filter((el: any) => !el.hasChildren);\n    const selectedLeafOptions = Array.from(allOptionElements).filter((el: any) => !el.hasChildren && el.selected);\n\n    const allSelected = leafOptions.length > 0 && selectedLeafOptions.length === leafOptions.length;\n\n    const toggleSelectAll = (event?: Event) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      if (allSelected) {\n        this.clearSelection();\n      } else {\n        this.selectAll();\n      }\n    };\n\n    return (\n      <div class=\"select-all-wrapper\">\n        <ifx-checkbox\n          id='selectAll'\n          checked={allSelected}\n          size=\"s\"\n          aria-label={this.ariaSelectAllLabel}\n          onClick={toggleSelectAll}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              e.stopPropagation();\n              toggleSelectAll(e);\n            }\n          }}\n        >\n          {this.selectAllLabel}\n        </ifx-checkbox>\n      </div>\n    );\n  }\n\n  private renderNoResultsMessage() {\n    return (\n      <div class=\"ifx-multiselect-no-results\">\n        <div class=\"no-results-content\">\n          <span class=\"no-results-text\">{this.noResultsMessage}</span>\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const selectedOptionsLabels = this.persistentSelectedOptions\n      .map((option) => {\n        const optionElement = this.el.querySelector(`ifx-multiselect-option[value=\"${option.value}\"]`);\n        return optionElement?.textContent?.trim() || option.value;\n      })\n      .join(', ');\n\n    const hasSelections = this.persistentSelectedOptions.length > 0;\n\n    let isFlatMultiselect = false;\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\n    if (allOptionElements.length > 0) {\n      isFlatMultiselect = Array.from(allOptionElements).every(option => option.children.length === 0);\n    }\n\n    return (\n      <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n        {\n          this.label ?\n            <div class=\"ifx-label-wrapper\">\n              <span>{this.label}</span>\n            </div> : null\n        }\n        <div class={`ifx-multiselect-wrapper\n        ${this.dropdownOpen ? 'active' : ''}\n        ${this.dropdownFlipped ? 'is-flipped' : ''}\n        ${this.internalError ? 'error' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n          role=\"combobox\"\n          aria-label={this.ariaMultiSelectLabel}\n          aria-labelledby={this.ariaMultiSelectLabelledBy || undefined}\n          aria-describedby={this.ariaMultiSelectDescribedBy || undefined}\n          aria-expanded={this.dropdownOpen}\n          aria-haspopup=\"listbox\"\n          aria-disabled={this.disabled}\n          tabindex=\"0\"\n          onClick={this.disabled ? undefined : (event) => this.handleWrapperClick(event)}\n          onKeyDown={this.disabled ? undefined : (event) => this.handleKeyDown(event)} >\n          <div class={`ifx-multiselect-input\n          ${hasSelections ? '' : 'placeholder'}\n          `}\n            onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n          >\n            {hasSelections ? selectedOptionsLabels : this.placeholder}\n          </div>\n          {this.dropdownOpen && (\n            <div class=\"ifx-multiselect-dropdown-menu\">\n\n              {(this.showSearch || this.showSelectAll || (this.showExpandCollapse && !isFlatMultiselect)) && (\n                <div class=\"ifx-multiselect-dropdown-functions\" onClick={(e) => e.stopPropagation()}>\n                  {this.showSearch && (\n                    <div class=\"ifx-multiselect-dropdown-search\">\n                      <ifx-search-field\n                        class=\"search-input\"\n                        placeholder={this.searchPlaceholder}\n                        size=\"s\"\n                        show-delete-icon=\"true\"\n                        aria-label={this.ariaSearchLabel}\n                        onKeyDown={(e) => { e.stopPropagation() }}\n                        onIfxInput={(event) => this.handleSearch(event.target)}\n                        onFocus={() => this.handleSearchFocus(true)}\n                        onBlur={() => this.handleSearchFocus(false)}\n                      ></ifx-search-field>\n                    </div>\n                  )}\n\n                  <div class=\"ifx-multiselect-dropdown-controls\">\n                    {this.showSelectAll && this.renderSelectAll()}\n                    {this.showExpandCollapse && !isFlatMultiselect && (\n                      <div class=\"expand-collapse-controls\">\n                        <span\n                          class=\"control-item\"\n                          role=\"button\"\n                          tabIndex={0}\n                          aria-label={this.ariaExpandAllLabel}\n                          onClick={(e) => { e.stopPropagation(); this.expandAll(); }}\n                          onKeyDown={(e) => {\n                            if (e.key === 'Enter' || e.key === ' ') {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              this.expandAll();\n                            }\n                          }}\n                        >\n                          {this.expandLabel}\n                        </span>\n                        <span\n                          class=\"control-item\"\n                          role=\"button\"\n                          tabIndex={0}\n                          aria-label={this.ariaCollapseAllLabel}\n                          onClick={(e) => { e.stopPropagation(); this.collapseAll(); }}\n                          onKeyDown={(e) => {\n                            if (e.key === 'Enter' || e.key === ' ') {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              this.collapseAll();\n                            }\n                          }}\n                        >\n                          {this.collapseLabel}\n                        </span>\n                      </div>\n                    )}\n                  </div>\n                </div>\n              )}\n\n              <div class=\"ifx-multiselect-options\" role=\"listbox\" aria-multiselectable=\"true\">\n                <slot />\n                {this.searchTerm && this.showNoResultsMessage && this.renderNoResultsMessage()}\n              </div>\n            </div>\n          )}\n          <div class='ifx-multiselect-icon-container'>\n\n            {/* Clear Button - will show only if there's a selection */}\n            {this.persistentSelectedOptions.length > 0 && (\n              <div class={`ifx-clear-button ${!this.showClearButton ? 'hide' : ''}`} onClick={this.disabled ? undefined : () => this.clearSelection()}>\n                <ifx-icon icon=\"cRemove16\"></ifx-icon>\n              </div>\n            )}\n            <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n              <ifx-icon\n                key='icon-up'\n                icon='chevron-up-16'></ifx-icon>\n            </div>\n            <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n              <ifx-icon\n                key='icon-down'\n                icon='chevron-down-16'></ifx-icon>\n            </div>\n          </div>\n\n        </div>\n        {\n          this.internalError ?\n            <div class=\"ifx-error-message-wrapper\">\n              <span>{this.internalErrorMessage}</span>\n            </div> : null\n        }\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-353138d9.js.map

@@ -1 +0,0 @@
-{"file":"p-353138d9.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 32px;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n  & .items__per-page-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    & .items__per-page-label {\n      color: #1D1D1D;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 20px;\n    }\n\n    & .items__per-page-field {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n\n      & ifx-select {\n        width: 92px;\n      }\n    }\n  }\n\n  & .items__total-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n\n    & .items__total-button {\n      display: flex;\n      width: 40px;\n      height: 40px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100px;\n      border: 1px solid #BFBBBB;\n      background: #FFF;\n    }\n\n    & .page__numbers-wrapper {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 12px;\n\n      & .page__number-item {\n        display: flex;\n        padding: 6px;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        gap: 10px;\n        border-radius: 100px;\n\n        &.active {\n          background-color: #0A8276;\n\n          & span {\n            color: #fff;\n          }\n        }\n\n        &:hover {\n          cursor: pointer;\n        }\n\n        &:hover:not(.active) {\n          background-color: #ddd;\n\n        }\n\n        &:active:not(.active) {\n          background-color: #575352;\n        }\n\n        & span {\n          display: flex;\n          width: 16px;\n          height: 16px;\n          flex-direction: column;\n          justify-content: center;\n          color: #1D1D1D;\n          text-align: center;\n          font-size: 13px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 20px;\n        }\n      }\n    }\n  }\n}\n\n\n.pagination {\n  display: flex;\n\n  & ifx-icon-button:first-of-type {\n    margin-right: 12px;\n  }\n\n  & ifx-icon-button:last-of-type {\n    margin-left: 12px;\n  }\n}\n\na {\n  padding: 8px;\n  border-radius: 100px;\n}\n\nol {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n}\n\nli {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n\n  &:hover:not(.active) {\n    & a {\n      background-color: #EEEDED;\n    }\n  }\n\n  &:active:not(.active) {\n    & a {\n      background-color: #575352;\n      color: #fff;\n    }\n  }\n\n  &.active {\n    background-color: #0A8276;\n\n    & a {\n      color: #fff;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & a {\n    text-decoration: none;\n    display: flex;\n    width: 16px;\n    height: 16px;\n    flex-direction: column;\n    justify-content: center;\n    color: #1D1D1D;\n    text-align: center;\n    font-size: 13px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    align-items: center;\n  }\n}\n\n.prev,\n.next {\n  &.disabled {\n    cursor: default;\n\n    &:hover {\n      cursor: default;\n      text-decoration: none;\n    }\n  }\n}\n\n.prev {\n  margin-right: 2.5px;\n}\n\n.next {\n  margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n  content: \"\\2026\";\n  font-size: 13px;\n  display: inline-block;\n\n  @if($before) {\n    margin-right: 6px;\n  }\n\n  @else {\n    margin-left: 6px;\n  }\n}\n\n\n// @media(max-width:460px) {\n//   li {\n\n//     &:first-child,\n//     &.active,\n//     &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n//     &:last-child {\n//       //display: inline-block !important;\n//       display: inline-flex !important;\n//       flex-direction: row;\n//     }\n\n//     $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n//     // There are >= 5 pages\n//     &:first-child:nth-last-child(n+6) {\n\n//       &~li {\n//         // Start out with all siblings hidden\n//         display: none;\n\n//         // Show the last children in the list by default\n//         &:nth-last-child(-n+#{$how-many-on-ends}) {\n//           //display: inline-block;\n//           display: inline-flex;\n//           flex-direction: row;\n\n//         }\n\n//         // The child at the beginning of the last group shows ellipsis for the group\n//         &:nth-last-child(#{$how-many-on-ends}) {\n//           &:before {\n//             @include ellipsis(true);\n//           }\n//         }\n\n//         // The very beginning elements do not need to show ellipsis\n//         // The very end elements do not need to show ellipsis\n//       }\n\n\n//       &.active,\n//        &~li.active {\n\n//          // Show ellipsis before and after the active element\n//          &:before {\n//            @include ellipsis(true);\n//          }\n//          &:after {\n//            @include ellipsis(false);\n//          }\n\n\n//          // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n//          &:nth-child(-n+#{$how-many-on-ends - 1}),\n//          &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n//            &:before, &:after {\n//              display: none;\n//            }\n//          }\n\n//          // Hide the last group if \"active\" comes before them\n//          &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n//            display: none;\n//          }\n\n//          // Show the first group together if \"active\" comes before them\n//          &~li:nth-child(-n+#{$how-many-on-ends}) {\n//            //display: inline-block;\n//            display: inline-flex;\n//            flex-direction: row;\n//          }\n\n//          // If \"active\" is before the last member in the group, don't show ellipsis\n//          &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n//             &:after {\n//               display: none;\n//             }\n//          }\n\n\n//         // The child at the end of the first group shows ellipsis for the group\n//         &~li:nth-child(#{$how-many-on-ends}) {\n//           &:after {\n//             @include ellipsis(false);\n//           }\n//         }\n//       }\n//     }\n//   }\n// }\n\n@media (min-width: 400px) {\n  li {\n\n    &:first-child,\n    &.active-sibling,\n    &.active,\n    &.active+li,\n    &:last-child {\n      //display: inline-block!important;\n      display: inline-flex !important;\n      flex-direction: row;\n    }\n\n    // There are >= 7 pages\n    &:first-child:nth-last-child(n+8) {\n      $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n\n      &~li {\n        // Start out with all siblings hidden\n        display: none;\n\n        // Show ellipsis before the previous one\n        &.active-sibling:before {\n          @include ellipsis(true);\n        }\n\n        // Show ellipsis after the next one\n        &.active+li:after {\n          @include ellipsis(false);\n        }\n\n        // Show the last children in the list by default\n        &:nth-last-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex;\n          flex-direction: row;\n        }\n\n        // The child at the beginning of the last group shows ellipsis for the group\n        &:nth-last-child(#{$how-many-on-ends}) {\n          &:before {\n            @include ellipsis(true);\n          }\n        }\n\n        // The very beginning elements do not need to show ellipsis\n        &:nth-child(-n+#{$how-many-on-ends - 3}),\n        // The very end elements do not need to show ellipsis\n        &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n        // Even if it's a sibling to \"active\"\n        &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n          &:before,\n          &:after {\n            display: none !important;\n          }\n        }\n      }\n\n      &.active,\n      &~li.active {\n\n        // Hide the last group if \"active\" comes before them\n        &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n          display: none;\n\n          // If there is overlap, the element will show, but hide it's ellipsis\n          &:before {\n            display: none;\n          }\n        }\n\n        // Show the first group together if \"active\" comes before them\n        &~li:nth-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex !important;\n          flex-direction: row;\n        }\n\n        // If \"active\" is before the last member in the group, don't show ellipsis\n        &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n          &:after {\n            display: none;\n          }\n        }\n\n\n        // The child at the end of the first group shows ellipsis for the group\n        &~li:nth-child(#{$how-many-on-ends}) {\n          &:after {\n            @include ellipsis(false);\n          }\n        }\n\n        // \"active\" should never show ellipsis\n        &:before,\n        &:after {\n          display: none;\n        }\n      }\n    }\n  }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true\n})\nexport class Pagination {\n  @Element() el: HTMLElement;\n  @Event() ifxPageChange: EventEmitter;\n  @Prop() currentPage: number = 1;\n  @State() internalPage: number = 1;\n  @State() internalItemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n  @Prop() itemsPerPage: any[] | string;\n  @State() filteredItemsPerPage: any[] = [];\n  @State() visiblePages: (number | string)[] = [];\n\n  private CLASS_DISABLED = \"disabled\";\n  private CLASS_ACTIVE = \"active\";\n  private prevInternalPage: number;\n\n    @Listen('ifxSelect')\n    setItemsPerPage(e: CustomEvent) {\n      const selectedValue = e.detail?.value || e.detail?.label; \n      const newItemsPerPage = parseInt(selectedValue) || 10;\n\n      if (newItemsPerPage === this.internalItemsPerPage) {\n        return;\n      }\n\n      this.internalItemsPerPage = newItemsPerPage;\n      this.internalPage = 1; \n      this.calculateNumberOfPages();\n      this.updateVisiblePages();\n      this.handleEventEmission();\n    }\n\n  componentDidLoad() {\n    this.initPagination();\n  }\n\n  updateVisiblePages() {\n    const buffer = 2;\n    const totalPages = this.numberOfPages.length;\n    const current = this.internalPage;\n    let pages: (number | string)[] = [];\n  \n    if (totalPages <= 5) {\n      pages = [...this.numberOfPages];\n    } else {\n      pages.push(1);\n  \n      if (current > buffer + 1) pages.push('...');\n  \n      let start = Math.max(2, current - buffer);\n      let end = Math.min(totalPages - 1, current + buffer);\n  \n      if (current <= buffer + 1) end = buffer * 2 + 1;\n      if (current >= totalPages - buffer) start = totalPages - buffer * 2;\n  \n      for (let i = start; i <= end; i++) pages.push(i);\n  \n      if (current < totalPages - buffer) pages.push('...');\n      pages.push(totalPages);\n    }\n  \n    this.visiblePages = [...new Set(pages)];\n  }\n\n  calculateNumberOfPages() {\n    const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\n    this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\n    this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\n  }\n\n  filterOptionsArray() { \n    const items = typeof this.itemsPerPage === 'string' ? \n      JSON.parse(this.itemsPerPage) : this.itemsPerPage;\n    this.filteredItemsPerPage = items.map(item => ({\n      ...item,\n      label: item.label || item.value\n    }));\n  }\n\n  componentWillLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-pagination', framework)\n    }\n    this.calculateNumberOfPages();\n    this.filterOptionsArray();\n    this.updateVisiblePages();\n  }\n\n  componentWillUpdate() { \n     if (this.prevInternalPage !== this.internalPage) {\n      this.updateVisiblePages();\n      this.prevInternalPage = this.internalPage;\n    }\n  }\n\n  componentDidUpdate() {\n    this.initPagination();\n  }\n\n  handleEventEmission() {\n    this.ifxPageChange.emit({\n      currentPage: this.internalPage,\n      totalPages: this.numberOfPages.length,\n      itemsPerPage: this.internalItemsPerPage\n    });\n  }\n\n  initPagination() {\n    const pagination = this.el.shadowRoot.querySelector('.pagination');\n    if (!pagination) return;\n\n    const updateButtons = () => {\n      const prev = pagination.querySelector<HTMLButtonElement>('.prev');\n      const next = pagination.querySelector<HTMLButtonElement>('.next');\n      if (prev) {\n        prev.disabled = this.internalPage === 1;\n        prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);\n      }\n      if (next) {\n        next.disabled = this.internalPage === this.numberOfPages.length;\n        next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);\n      }\n    };\n\n    pagination.querySelectorAll('li').forEach(li => {\n      li.removeEventListener('click', this.handlePageClick);\n      li.addEventListener('click', this.handlePageClick);\n    });\n\n    updateButtons();\n  }\n\n  private handlePageClick = (e: Event) => {\n    const li = e.currentTarget as HTMLLIElement;\n    const page = parseInt(li.dataset.page);\n    if (!isNaN(page)) this.changePage(page);\n  };\n\n  changePage(newPage: number) {\n    newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\n    if (newPage === this.internalPage) return;\n    \n    this.internalPage = newPage;\n    this.handleEventEmission();\n    this.initPagination();\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <div class=\"items__per-page-wrapper\">\n          <div class=\"items__per-page-label\">Results per Page</div>\n          <div class=\"items__per-page-field\">\n            <ifx-select\n              placeholder='false'\n              show-search='false'\n              value={undefined}\n              disabled={false}\n              error={false}\n              size=\"s\"\n              options={this.filteredItemsPerPage}\n              placeholder-value=\"Select\"\n            ></ifx-select>\n          </div>\n        </div>\n        \n        <div class=\"items__total-wrapper\">\n          <div class=\"pagination\">\n            <ifx-icon-button\n              class=\"prev\"\n              icon=\"arrow-left-16\"\n              onClick={() => this.changePage(this.internalPage - 1)}\n            ></ifx-icon-button>\n            \n            <ol>\n            {this.visiblePages.map((page, i) => typeof page === 'number' ? (\n              <li \n                key={`page-${page}`}\n                class={{ [this.CLASS_ACTIVE]: page === this.internalPage }}\n                data-page={page}\n              >\n                <a href=\"javascript:void(0)\">{page}</a>\n              </li>\n            ) : (\n              <li class=\"ellipsis\" key={`ellipsis-${i}`}>\n                <span>...</span>\n              </li>\n            ))}\n            </ol>\n            \n            <ifx-icon-button\n              class=\"next\"\n              icon=\"arrow-right-16\"\n              onClick={() => this.changePage(this.internalPage + 1)}\n            ></ifx-icon-button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-39116717.js","mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,8mFAA8mF,CAAC;AAChoF,uBAAe,QAAQ;;MCSV,KAAK;IALlB;;;;;QAOU,YAAO,GAA0D,SAAS,CAAC;QAG3E,aAAQ,GAAY,IAAI,CAAC;QACzB,aAAQ,GAAG,WAAW,CAAC;QAG/B,yBAAoB,GAAG;YACrB,SAAS,EAAE,eAAe;YAC1B,SAAS,EAAE,eAAe;YAC1B,QAAQ,EAAE,aAAa;YACvB,SAAS,EAAE,eAAe;YAC1B,MAAM,EAAE,eAAe;SACxB,CAAC;KA0DH;IAxDC,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,iBAAiB;QACf,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,cAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAa,eAAe,IACtE,gBAAU,IAAI,EAAC,UAAU,GAAG,CACrB,CACL,EACN;KACH;IAED,gBAAgB,CAAC,MAAM,GAAG,IAAI;QAC5B,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;KAClE;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;SAChD;QAED,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;SACxC;KACF;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAC5B,WAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,eAAY,IAAI,CAAC,QAAQ,sBAAoB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAkB,8BAA8B,IAC/K,WAAK,KAAK,EAAC,oBAAoB,IAC7B,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB,EACN,WAAK,EAAE,EAAE,qBAAqB,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,2BAA2B,IAC9E,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,KAEN,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9C,IAAI,CAAC,IAAI,KACR,WAAK,KAAK,EAAC,cAAc,IACvB,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP,EACD,WAAK,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,cAAc,IAAI,CAAC,QAAQ,EAAE,IACvD,eAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,CACP,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.alert__info-wrapper {\n  display: flex;\n  padding: 16px 24px;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n  & .info__text-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace100;\n    width: 100%;\n\n    & .info__headline-wrapper {\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    & .info__headline-wrapper,\n    .info__description-wrapper {\n      color: #1D1D1D;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n\n      ::slotted(p) {\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    & .info__description-wrapper {\n      font-weight: 400;\n    }\n  }\n\n  & .close-icon-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-start;\n    //min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n}\n\n.alert {\n  display: flex;\n  border: 1px solid tokens.$ifxColorOcean500;\n  border-radius: tokens.$ifxBorderRadius12;\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .close-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n\n  & .icon-wrapper {\n    position: relative;\n    min-width: tokens.$ifxSize600;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .alert-text {\n    font-size: 16px;\n    width: 100%;\n    padding: 12px 0px 12px 12px;\n    color: tokens.$ifxColorBaseBlack;\n\n    white-space: pre-wrap;\n    /* wraps text at spaces and within words */\n    word-wrap: break-word;\n    /* breaks text within a word if necessary */\n    overflow-wrap: anywhere;\n    /* breaks text at arbitrary points when needed */\n  }\n\n  &.primary {\n    border: 1px solid tokens.$ifxColorOcean500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOcean500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.success {\n    border: 1px solid tokens.$ifxColorGreen500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorGreen500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.danger {\n    border: 1px solid tokens.$ifxColorRed500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorRed500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.warning {\n    border: 1px solid tokens.$ifxColorOrange500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOrange500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n}\n\n.close-icon-wrapper {\n  & ifx-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, Prop, h, Event, EventEmitter, State, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Element() el: HTMLElement;\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n  @Prop() icon: string;\n  @Event() ifxClose: EventEmitter;\n  @Prop() closable: boolean = true;\n  @Prop() AriaLive = 'assertive';\n  @State() uniqueId: string;\n\n  alertTypeDescription = {\n    \"primary\": 'Neutral alert',\n    \"success\": 'Success Alert',\n    \"danger\": 'Error Alert',\n    \"warning\": 'Warning Alert',\n    \"info\": 'Neutral alert',\n  };\n\n  handleClose() {\n    this.ifxClose.emit();\n  }\n\n  renderCloseButton() {\n    return (\n      <div class=\"close-icon-wrapper\">\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n          <ifx-icon icon=\"cross-16\" />\n        </button>\n      </div>\n    );\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('alert');\n    }\n\n    if(!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework();\n      trackComponent('ifx-alert', framework);\n    }\n  }\n\n  render() {\n    return this.variant === 'info' ? (\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n        <div class=\"info__text-wrapper\">\n          <div class=\"info__headline-wrapper\">\n            <slot name=\"headline\" />\n          </div>\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n            <slot name=\"desc\" />\n          </div>\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    ) : (\n      <div class={`alert ${this.variant}`} role=\"alert\">\n        {this.icon && (\n          <div class=\"icon-wrapper\">\n            <ifx-icon icon={this.icon} />\n          </div>\n        )}\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n          <slot />\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-45c73d0e.js.map

@@ -1 +0,0 @@
-{"file":"p-45c73d0e.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,uoDAAuoD,CAAC;AAChqD,8BAAe,eAAe;;MCUjB,YAAY;IALzB;;;;QAQU,YAAO,GAAwB,SAAS,CAAC;QAGzC,eAAU,GAAW,QAAQ,CAAC;KAgDvC;IA9CC,iBAAiB;QACf,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAA;SAC9C;KACF;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,QAAQ;gBACX,OAAO,mCAAmC,CAAC;YAC7C,KAAK,OAAO;gBACV,OAAO,kCAAkC,CAAC;YAC5C,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C;gBACE,OAAO,oCAAoC,CAAC;SAC/C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,IAC5D,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,QAAQ,EAAC,iEAAU,IAAI,EAAC,gBAAgB,GACrC,CACA,CACP,CAEF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  color: tokens.$ifxColorBaseBlack;\n\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n  &.ifx-notification__wrapper--success {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorGreen500;\n    }\n  }\n\n  &.ifx-notification__wrapper--locked {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOrange500;\n    }\n  }\n\n  &.ifx-notification__wrapper--error {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.ifx-notification__wrapper--neutral{\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  & .ifx-notification__icon {\n    margin-right: tokens.$ifxSpace100;\n    display: flex;\n    align-self: center;\n  }\n\n  & .ifx-notification__body {\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n    font-size: tokens.$ifxFontSizeS;\n\n    & .ifx-notification__slot {\n      flex-grow: 1;\n      display: inline-flex;\n      align-items: center;\n    }\n  }\n\n  & .ifx-notification__link {\n    font-size: tokens.$ifxFontSizeS;\n  }\n\n  @media (max-width: tokens.$ifxBreakpointXs) {\n    & .ifx-notification__icon {\n      align-self: flex-start;\n    }\n\n    & .ifx-notification__body {\n      flex-direction: column;\n    }\n\n    & .ifx-notification__link {\n      margin-top: tokens.$ifxSpace100;\n    }\n  }\n}","import { Component, h, Host, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nexport type NotificationVariant = 'success' | 'locked' | 'error' | 'neutral';\n\n@Component({\n  tag: 'ifx-notification',\n  styleUrl: 'notification.scss',\n  shadow: true\n})\nexport class Notification {\n  @Element() el;\n  @Prop() icon: string;\n  @Prop() variant: NotificationVariant = 'success';\n  @Prop() linkText: string; \n  @Prop() linkHref: string;\n  @Prop() linkTarget: string = '_blank';\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-notification', framework)\n    }\n  }\n\n  private getClassName(): string {\n    switch (this.variant) {\n      case 'success':\n        return 'ifx-notification__wrapper--success';\n      case 'locked':\n        return 'ifx-notification__wrapper--locked';\n      case 'error':\n        return 'ifx-notification__wrapper--error';\n      case 'neutral':\n        return 'ifx-notification__wrapper--neutral';\n      default:\n        return 'ifx-notification__wrapper--success';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n          <div class=\"ifx-notification__icon\">\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </div>\n          <div class=\"ifx-notification__body\">\n            <div class=\"ifx-notification__slot\">\n              <slot/>\n            </div>\n            { this.linkText && this.linkHref && \n            <div class=\"ifx-notification__link\">\n              <ifx-link href={this.linkHref} target={this.linkTarget}>\n                {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n              </ifx-icon>\n              </ifx-link>\n            </div>\n          }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/components/p-4c62f9ef.js.map

@@ -1 +0,0 @@
-{"file":"p-4c62f9ef.js","mappings":"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","names":[],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: tokens.$ifxColorBaseWhite;\n  width: 100%;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n  .search-field__wrapper {\n    box-sizing: border-box;\n    height: tokens.$ifxSize500;\n    display: flex;\n    align-items: center;\n    border: 1px solid #8D8786;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    gap: tokens.$ifxSpace150;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n    position: relative;\n    width: 100%;\n    outline: none;\n    color: tokens.$ifxColorEngineering400;\n\n    &.focused {\n      border: 1px solid tokens.$ifxColorOcean500;\n\n      & ifx-icon {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    &.search-field__wrapper-s {\n      height: 36px;\n    }\n\n\n    &:hover:not(.focused, :focus) {\n      border: 1px solid #3C3A39;\n    }\n\n    &:focus {\n      outline: none;\n      border: 1px solid #0A8276;\n    }\n\n\n    .delete-icon {\n      right: 12px;\n      cursor: pointer;\n    }\n\n    input[type='text'] {\n      font-style: normal;\n      font-weight: 400;\n      font-size: 16px;\n      //line-height: 24px;\n      color: #8D8786;\n      border: none;\n      width: 100%;\n      outline: none;\n      //height: 100%;\n      height: 16px;\n\n      &:focus {\n        outline: none;\n        color: #1d1d1d;\n      }\n\n      &:disabled {\n        background-color: #EEEDED;\n      }\n    }\n\n    &:has(input[disabled]) {\n      background-color: #EEEDED;\n    }\n  }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { 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}"],"version":3}

package/dist/components/p-554fc743.js.map

@@ -1 +0,0 @@
-{"file":"p-554fc743.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,w4EAAw4E,CAAC;AAC/5E,4BAAe,aAAa;;MCWf,UAAU;IANvB;;;;QAYU,WAAM,GAAW,OAAO,CAAC;QACzB,UAAK,GAAW,OAAO,CAAC;KA6FjC;IArFC,WAAW,CAAC,KAAY;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,wBAAwB,EAAE,CAAC;SAClC;KACF;IAGD,UAAU,CAAC,OAAe;QACxB,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;KAC7B;IAGD,MAAM,QAAQ;QACZ,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;KAC/B;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;YACrB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;SACtB;QACD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;QAC9B,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAA;SAC7C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,sEACY,IAAI,CAAC,QAAQ,gBAChB,IAAI,CAAC,SAAS,IACzB,IAAI,CAAC,IAAI,IACR,SACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EACzC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAC3B,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EAC5C,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,IAEjE,gBAAU,IAAI,EAAE,IAAI,CAAC,YAAY,GAAa,CAC5C,KAEJ,cACE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAC3B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,gBAAU,IAAI,EAAE,IAAI,CAAC,YAAY,GAAa,CACvC,CACV,CACI,EACP;KACH;IAED,eAAe;QACb,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,WAAW;cACpC,WAAW;cACX,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,UAAU;kBAC9B,UAAU;kBACV,SAAS,CAAC;KACjB;IAED,YAAY;QACV,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE;YAC3B,OAAO,IAAI,CAAA;SACZ;aACI,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE;YAC/B,OAAO,GAAG,CAAA;SACX;aACI,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE;YAC/B,OAAO,GAAG,CAAA;SACX;;YACI,OAAO,EAAE,CAAC;KAChB;IAED,aAAa;QACX,OAAO,UAAU,CACf,iBAAiB,EACjB,OAAO,IAAI,CAAC,KAAK,EAAE,EACnB,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,YAAY,EAAE,EAAE,EACzC,OAAO,IAAI,CAAC,eAAe,EAAE,EAAE,EAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAChC,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/icon-button/icon-button.scss?tag=ifx-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-flex;\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: tokens.$ifxSize500;\n  padding: 8px;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  flex-direction: row;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  outline: none;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  text-decoration: none;\n  user-select: none;\n  border: 1px solid rgba(0, 0, 0, 0);\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn-primary {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-secondary {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary {\n  background-color: transparent;\n  color: tokens.$ifxColorBaseBlack;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n  }\n}\n\n\n.btn {\n\n  &.icon-button {\n    min-width: initial;\n    min-height: initial;\n    width: tokens.$ifxSize500;\n    height: tokens.$ifxSize500;\n    padding: 0;\n    justify-content: center;\n\n    &.btn-round {\n      border-radius: 100px;\n    }\n\n    &.btn-square {\n      border-radius: tokens.$ifxBorderRadius12;\n    }\n\n    &.btn-s {\n      width: tokens.$ifxSize400;\n      height: tokens.$ifxSize400;\n      padding: 8px;\n    }\n\n\n    &.btn-l {\n      width: tokens.$ifxSize600;\n      height: tokens.$ifxSize600;\n      padding: 8px;\n    }\n  }\n\n  &.btn-primary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n\n  &.btn-secondary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n      color: tokens.$ifxColorBaseWhite;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-tertiary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      color: tokens.$ifxColorBaseBlack;\n      box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean600;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen, Watch, State } 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-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\n\nexport class IconButton {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n  @Prop() size: string;\n  @Prop() disabled: boolean;\n  @Prop() icon: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() shape: string = 'round';\n  @Prop() ariaLabel: string | null;\n  @State() internalIcon: string;\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n  \n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Watch('icon')\n  updateIcon(newIcon: string) { \n    this.internalIcon = newIcon;\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  componentWillLoad() {\n    if (this.shape === '') {\n      this.shape = 'round';\n    }\n    this.internalIcon = this.icon;\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-icon-button', framework)\n    }\n  }\n\n  render() {\n    return (\n      <Host \n        aria-disabled={this.disabled}\n        aria-label={this.ariaLabel}> \n        {this.href ? (\n          <a\n            ref={(el) => (this.focusableElement = el)}\n            class={this.getClassNames()}\n            href={!this.disabled ? this.href : undefined} \n            target={this.target}\n            rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          >\n            <ifx-icon icon={this.internalIcon}></ifx-icon>\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n            disabled={this.disabled}\n          >\n            <ifx-icon icon={this.internalIcon}></ifx-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary`\n        : `primary`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn icon-button',\n      `btn-${this.shape}`,\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"version":3}

package/dist/components/p-63e4dfb7.js.map

@@ -1 +0,0 @@
-{"file":"p-63e4dfb7.js","mappings":"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","names":[],"sources":["src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.textInput__container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n  width: 100%;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n  &.disabled {\n    & .textInput__top-wrapper {\n      & label {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    & .textInput__bottom-wrapper {\n      input {\n        border: 1px solid tokens.$ifxColorEngineering500;\n        background-color: tokens.$ifxColorEngineering200;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          color: tokens.$ifxColorEngineering500;\n        }\n      }\n    }\n  }\n\n  & .textInput__top-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 4px;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & label {\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      display: flex;\n      align-items: center;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      & .optional-required {\n        margin-left: 4px;\n      }\n\n      & .optional {\n        margin-left: 4px;\n      }\n\n      & .required {\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n    }\n  }\n\n  .input-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n  }\n\n\n  & .textInput__bottom-wrapper {\n    flex-grow: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 4px;\n    flex: none;\n    order: 1;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & input {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n      gap: tokens.$ifxSpace100;\n      height: tokens.$ifxSize500;\n      background-color: tokens.$ifxColorBaseWhite;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      border: 1px solid tokens.$ifxColorEngineering400;\n      border-radius: tokens.$ifxBorderRadius12;\n      flex: none;\n      order: 0;\n      align-self: stretch;\n      flex-grow: 0;\n      text-overflow: ellipsis;\n\n      &.input-s {\n        height: tokens.$ifxSize450;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          line-height: tokens.$ifxLineHeightS;\n        }\n\n      }\n\n      &.icon {\n        padding-left: tokens.$ifxSpace500;\n      }\n\n      &.error {\n        border: 1px solid #CD002F;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      &.success {\n        border: 1px solid #4CA460;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n\n      &:focus:not(.error, .success) {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n      }\n\n      &:hover:not(:disabled, :focus, .error, .success) {\n        border: 1px solid tokens.$ifxColorEngineering500;\n      }\n\n      &::placeholder {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeM;\n        line-height: tokens.$ifxLineHeightM;\n        color: #8D8786;\n        flex: none;\n        order: 1;\n        flex-grow: 1;\n      }\n    }\n\n    & .input-icon {\n      // Position the icon within the icon container\n      // Adjust the positioning as needed\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: tokens.$ifxSpace200;\n      /* Adjust this value to control the icon's left offset */\n      transition: .3s;\n      color: tokens.$ifxColorEngineering400;\n    }\n\n    & .textInput__bottom-wrapper-caption {\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeXs;\n      line-height: tokens.$ifxLineHeightXs;\n      letter-spacing: 0.2px;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 1;\n      align-self: stretch;\n      flex-grow: 0;\n\n      &.error {\n        color: #CD002F;\n\n      }\n\n      &.disabled {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    \n  }\n  .delete-icon {\n    position: absolute;\n    right: tokens.$ifxSpace200;\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class TextField {\n  private inputElement: HTMLInputElement;\n  @Element() el;\n  @Prop() placeholder: string = \"Placeholder\"\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() error: boolean = false;\n  @Prop() label: string = \"\";\n  @Prop() icon: string = \"\";\n  @Prop() caption: string = \"\";\n  @Prop() size: string = 'm';\n  @Prop() required: boolean = false;\n  @Prop() optional: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() maxlength?: number;\n  @Prop() showDeleteIcon: boolean = false;\n  @Prop() autocomplete: string = 'on'\n  @Prop() type: 'text' | 'password' = 'text';\n  @Prop() internalId: string = \"text-field\"\n  @State() internalType: string;\n  @Event() ifxInput: EventEmitter<String>;\n  // @Prop({ reflect: true })\n  // resetOnSubmit: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Method()\n  async reset() {\n    this.value = '';\n    this.inputElement.value = '';\n  }\n\n  handleDeleteContent() {\n    this.reset();\n    this.ifxInput.emit(this.value);\n  }\n\n  handleInput() {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.internals.setFormValue(query) // update form value\n    this.ifxInput.emit(this.value);\n  }\n\n  handleTypeProp() { \n   this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text'\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-text-field', framework)\n    }\n    this.handleTypeProp()\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n        <div class=\"textInput__top-wrapper\">\n          <label htmlFor={this.internalId}>\n            <slot></slot>\n            {this.optional && this.required ? (\n              <span class=\"optional-required\">(optional) *</span>\n            ) : this.optional ? (\n              <span class=\"optional\">(optional)</span>\n            ) : this.required ? (\n              <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n            ) : null}\n          </label>\n        </div>\n\n        <div class=\"textInput__bottom-wrapper\">\n          <div class=\"input-container\">\n            {this.icon && (\n              <ifx-icon class='input-icon' icon={this.icon} />\n            )}\n            <input\n              ref={(el) => (this.inputElement = el)}\n              disabled={this.disabled}\n              autocomplete={this.autocomplete}\n              type={this.internalType}\n              id={this.internalId}\n              value={this.value}\n              onInput={() => this.handleInput()}\n              placeholder={this.placeholder}\n              maxlength={this.maxlength}\n              class={\n                `${this.icon ? 'icon' : \"\"}\n                ${this.error ? 'error' : \"\"} \n              ${this.size === \"s\" ? \"input-s\" : \"\"}\n              ${this.success ? \"success\" : \"\"}`} />\n\n              { (this.showDeleteIcon && this.value) && (\n                <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n              )}\n          </div>\n          {this.caption && !this.error &&\n            <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n              {this.caption}\n            </div>}\n          {this.error &&\n            <div class=\"textInput__bottom-wrapper-caption error\">\n              {this.caption}\n            </div>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}