@infineon/infineon-design-system-stencil 30.9.3--canary.1677.79bde5cb960ca0ee87364cb0899d078b69a61f7b.0 → 30.9.3--canary.1640.c246fbcdce3247ffada7a2fffa49d05593d4088f.0

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

@@ -0,0 +1,2 @@
+import{r as s,h as e}from"./p-f619bff3.js";const t=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex;width:100%}.progress-bar{height:16px;bottom:0;right:0;top:0;left:0;display:flex;height:20px;border-radius:1px;width:100%;overflow:hidden;background-color:#EEEDED;font-family:var(--ifx-font-family, sans-serif)}.progress-bar.s{height:4px}.progress-bar .label{font-style:normal;font-size:0.875rem;font-weight:400;line-height:1.25rem;color:#FFFFFF}.progress-bar .progress{display:flex;align-items:center;justify-content:center;min-width:fit-content;height:100%;background-color:#0A8276;transition:width 0.2s ease}';const r=t;const i=class{constructor(e){s(this,e);this.value=0;this.showLabel=false}valueChanged(s,e){if(s!==e){this.internalValue=s}}componentWillLoad(){this.internalValue=this.value}render(){return e("div",{key:"9357496a783f4b3e1b044ab4d706ee83e443dd58","aria-label":"a progress bar","aria-value":this.value,class:`progress-bar ${this.size}`},e("div",{key:"29fd4c791396b927456b4fc514fdbada0d03bc7f",class:"progress",style:{width:`${this.internalValue}%`}},this.showLabel&&this.size!=="s"&&this.internalValue!==0&&e("span",{key:"945e380d7991c53930f1b3ebc396cfec1bc06d31",class:"label"},`${this.internalValue}%`)))}static get watchers(){return{value:["valueChanged"]}}};i.style=r;export{i as ifx_progress_bar};
+//# sourceMappingURL=p-feef3db3.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["progressBarCss","IfxProgressBarStyle0","ProgressBar","constructor","hostRef","this","value","showLabel","valueChanged","newValue","oldValue","internalValue","componentWillLoad","render","h","key","class","size","style","width"],"sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n  width: 100%;\n}\n\n.progress-bar {\n  height: tokens.$ifxSize200;\n  bottom: 0;\n  right: 0;\n  top: 0;\n  left: 0;\n  display: flex;\n  height: tokens.$ifxSize250;\n  border-radius: tokens.$ifxBorderRadius12;\n  width: 100%; // Ensure the bar itself can grow up to 100% width\n  overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n  background-color: tokens.$ifxColorEngineering200;\n  font-family: var(--ifx-font-family, sans-serif);\n  \n  &.s {\n    height: 4px;\n  }\n\n  .label {\n    font-style: normal;\n    font-size: tokens.$ifxFontSizeS;\n    font-weight: 400;\n    line-height: tokens.$ifxLineHeightS;\n    color: tokens.$ifxColorBaseWhite;\n  }\n  \n  .progress {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: fit-content;\n    height: 100%;\n    background-color: #0A8276;\n    transition: width 0.2s ease;\n  }\n}","import { Component, Prop, h, State, Watch } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true\n})\nexport class ProgressBar {\n  @Prop() value: number = 0;\n  @Prop() size: string;\n  @Prop() showLabel: boolean = false;\n\n  @State() internalValue: number;\n\n  @Watch('value')\n  valueChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      this.internalValue = newValue;\n    }\n  }\n\n  \n  componentWillLoad() {\n    this.internalValue = this.value;\n  }\n\n\n\n  render() {\n    return (\n      <div aria-label='a progress bar' aria-value={this.value}  class={`progress-bar ${this.size}`}>\n        <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n          {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAiB,0mBACvB,MAAAC,EAAeD,E,MCOFE,EAAW,MALxB,WAAAC,CAAAC,G,UAMUC,KAAAC,MAAgB,EAEhBD,KAAAE,UAAqB,K,CAK7B,YAAAC,CAAaC,EAAkBC,GAC7B,GAAID,IAAaC,EAAU,CACzBL,KAAKM,cAAgBF,C,EAKzB,iBAAAG,GACEP,KAAKM,cAAgBN,KAAKC,K,CAK5B,MAAAO,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,iBAAgB,aAAaV,KAAKC,MAAQU,MAAO,gBAAgBX,KAAKY,QACpFH,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WAAWE,MAAO,CAAEC,MAAO,GAAGd,KAAKM,mBAC3CN,KAAKE,WAAaF,KAAKY,OAAS,KAAOZ,KAAKM,gBAAkB,GAAKG,EAAA,QAAAC,IAAA,2CAAMC,MAAM,SAAS,GAAGX,KAAKM,mB","ignoreList":[]}

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

@@ -2,18 +2,84 @@ declare const _default: {
     title: string;
     component: string;
     args: {
-        autoCollapse: boolean;
+        amountOfItems: number;
         AriaLevel: number;
+        autoCollapse: boolean;
     };
     argTypes: {
         amountOfItems: {
             control: string;
+            name: string;
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
         };
         AriaLevel: {
             control: string;
             min: number;
             max: number;
             description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        mutable: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        autoCollapse: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        ifxOpen: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+            };
+        };
+        ifxClose: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+            };
         };
     };
 };

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

@@ -2,10 +2,10 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export declare class IfxAccordionItem {
     caption: string;
     open: boolean;
-    AriaLive: number;
+    AriaLevel: number;
     internalOpen: boolean;
-    ifxItemOpen: EventEmitter;
-    ifxItemClose: EventEmitter;
+    ifxOpen: EventEmitter;
+    ifxClose: EventEmitter;
     private contentEl;
     componentWillLoad(): void;
     componentDidLoad(): void;

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

@@ -4,32 +4,55 @@ declare const _default: {
     args: {
         label: string;
         variant: string;
-        showIcon: boolean;
         closable: boolean;
-        iconName: string;
+        icon: string;
         AriaLive: string;
     };
     argTypes: {
+        label: {
+            name: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
         variant: {
+            description: string;
             options: string[];
-            control: {
-                type: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
-        iconName: {
+        icon: {
+            description: string;
             options: any[];
-            control: {
-                type: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         closable: {
+            description: string;
             control: string;
-            default: boolean;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
         };
         ifxClose: {
             action: string;
             description: string;
             table: {
+                category: string;
                 type: {
                     summary: string;
                     detail: string;
@@ -38,10 +61,14 @@ declare const _default: {
         };
         AriaLive: {
             options: string[];
-            control: {
-                type: string;
-            };
+            control: string;
             description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
         };
     };
 };

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

@@ -3,14 +3,34 @@ declare const _default: {
     tags: string[];
     args: {
         label: string;
-        icon: boolean;
+        icon: string;
     };
     argTypes: {
-        iconName: {
-            options: any[];
+        label: {
+            description: string;
+            name: string;
+            control: {
+                type: string;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        icon: {
             control: {
                 type: string;
             };
+            options: any[];
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
         };
     };
 };

package/dist/types/components/breadcrumb/breadcrumb-item-label.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class BreadcrumbItemLabel {
     icon: string;
-    url: string;
+    href: string;
     target: string;
     el: any;
     breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;

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

@@ -2,13 +2,95 @@ declare const _default: {
     title: string;
     tags: string[];
     args: {
-        icon: boolean;
+        icon: string;
+        iconArialLabel: string;
+        href: string;
+        hrefOfDropdownItem: string;
+        target: string;
     };
     argTypes: {
+        icon: {
+            control: {
+                type: string;
+            };
+            options: any[];
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        target: {
+            control: {
+                type: string;
+            };
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        iconArialLabel: {
+            control: {
+                type: string;
+            };
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        href: {
+            control: {
+                type: string;
+            };
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hrefOfDropdownItem: {
+            name: string;
+            control: {
+                type: string;
+            };
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+        };
         ifxDropdownMenuItem: {
             action: string;
             description: string;
             table: {
+                category: string;
                 type: {
                     summary: string;
                     detail: string;

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

@@ -9,58 +9,134 @@ declare const _default: {
         size: string;
         fullWidth: boolean;
         disabled: boolean;
+        icon: string;
         iconPosition: string;
         href: boolean;
         url: string;
         target: string;
     };
     argTypes: {
+        label: {
+            name: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
         icon: {
+            description: string;
+            control: string;
             options: any[];
-            control: {
-                type: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
             };
         };
         variant: {
+            description: string;
+            control: string;
             options: string[];
-            control: {
-                type: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         theme: {
+            description: string;
+            control: string;
             options: string[];
-            control: {
-                type: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         type: {
+            description: string;
+            control: string;
             options: string[];
-            control: {
-                type: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         size: {
             description: string;
+            control: string;
             options: string[];
-            control: {
-                type: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         fullWidth: {
-            control: {
-                type: string;
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         iconPosition: {
+            description: string;
+            control: string;
             options: string[];
-            control: {
-                type: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        href: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        url: {
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
             };
         };
         target: {
+            description: string;
+            control: string;
             options: string[];
-            control: {
-                type: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
     };

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

@@ -2,30 +2,90 @@ declare const _default: {
     title: string;
     tags: string[];
     args: {
-        direction: string;
         overline: string;
         headline: string;
         description: string;
+        direction: string;
         button: string;
         href: string;
         target: string;
         position: string;
         src: string;
+        AriaLabel: string;
     };
     argTypes: {
+        overline: {
+            name: string;
+            description: string;
+            type: {
+                name: string;
+            };
+            table: {
+                category: string;
+            };
+        };
+        headline: {
+            name: string;
+            description: string;
+            type: {
+                name: string;
+            };
+            table: {
+                category: string;
+            };
+        };
+        description: {
+            name: string;
+            description: string;
+            type: {
+                name: string;
+            };
+            table: {
+                category: string;
+            };
+        };
         button: {
+            name: string;
             options: string[];
+            description: string;
             control: {
                 type: string;
             };
+            table: {
+                category: string;
+            };
         };
         direction: {
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                    disable: boolean;
+                };
+            };
             options: string[];
             control: {
                 type: string;
             };
         };
+        AriaLabel: {
+            control: {
+                type: string;
+            };
+            description: string;
+            table: {
+                category: string;
+            };
+        };
         position: {
+            description: string;
+            table: {
+                category: string;
+            };
             options: string[];
             control: {
                 type: string;
@@ -35,12 +95,46 @@ declare const _default: {
                 eq: string;
             };
         };
+        href: {
+            description: string;
+            type: {
+                name: string;
+            };
+            table: {
+                category: string;
+            };
+        };
         target: {
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
             options: string[];
             control: {
                 type: string;
             };
         };
+        src: {
+            description: string;
+            type: {
+                name: string;
+            };
+            table: {
+                category: string;
+            };
+        };
+        alt: {
+            description: string;
+            type: {
+                name: string;
+            };
+            table: {
+                category: string;
+            };
+        };
     };
 };
 export default _default;