npm - @infineon/infineon-design-system-stencil - Versions diffs - 36.0.1--canary.1935.77c36513858c80d14aa68b5d03acece9da06c973.0 → 36.1.0--canary.1904.271bdcd0dfd5e73c0033e8c6aaf1cf8e19d645b2.0 - Mend

@infineon/infineon-design-system-stencil 36.0.1--canary.1935.77c36513858c80d14aa68b5d03acece9da06c973.0 → 36.1.0--canary.1904.271bdcd0dfd5e73c0033e8c6aaf1cf8e19d645b2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (615) hide show

package/dist/cjs/dom-utils-2c4573c2.js ADDED Viewed

@@ -0,0 +1,20 @@
+'use strict';
+const isNestedInIfxComponent = (el) => {
+    let parent = el.parentNode;
+    while (parent) {
+        if (parent instanceof ShadowRoot) {
+            parent = parent.host;
+            continue;
+        }
+        if (parent instanceof HTMLElement && parent.tagName.toLowerCase().startsWith('ifx')) {
+            return true;
+        }
+        parent = parent.parentNode;
+    }
+    return false;
+};
+exports.isNestedInIfxComponent = isNestedInIfxComponent;
+//# sourceMappingURL=dom-utils-2c4573c2.js.map

package/dist/cjs/dom-utils-2c4573c2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dom-utils-2c4573c2.js","mappings":";;MAAa,sBAAsB,GAAG,CAAC,EAAe;IACpD,IAAI,MAAM,GAA6B,EAAE,CAAC,UAAU,CAAC;IAErD,OAAO,MAAM,EAAE;QACb,IAAI,MAAM,YAAY,UAAU,EAAE;YAChC,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC;YACrB,SAAS;SACV;QAED,IAAI,MAAM,YAAY,WAAW,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;YACnF,OAAO,IAAI,CAAC;SACb;QAED,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC;KAC5B;IAED,OAAO,KAAK,CAAC;AACf;;;;","names":[],"sources":["src/global/utils/dom-utils.ts"],"sourcesContent":["export const isNestedInIfxComponent = (el: HTMLElement): boolean => {\n let parent: Node | ShadowRoot | null = el.parentNode;\n \n while (parent) {\n if (parent instanceof ShadowRoot) {\n parent = parent.host;\n continue;\n }\n \n if (parent instanceof HTMLElement && parent.tagName.toLowerCase().startsWith('ifx')) {\n return true;\n }\n \n parent = parent.parentNode;\n }\n \n return false;\n};"],"version":3}

package/dist/cjs/ifx-accordion_2.cjs.entry.js CHANGED Viewed

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7f4df11a.js');
+const tracking = require('./tracking-f00364dc.js');
+const domUtils = require('./dom-utils-2c4573c2.js');
 const accordionCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}";
 const IfxAccordionStyle0 = accordionCss;
@@ -12,6 +14,11 @@ const Accordion = class {
         index.registerInstance(this, hostRef);
         this.autoCollapse = false;
     }
+    componentWillLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            tracking.trackComponent('ifx-accordion');
+        }
+    }
     async onItemOpen(event) {
         if (this.autoCollapse) {
             const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));
@@ -24,7 +31,7 @@ const Accordion = class {
         }
     }
     render() {
-        return (index.h("div", { key: '663e6aac2f3002d3898856b854dbfd96d9519a68', class: "accordion-wrapper" }, index.h("slot", { key: '0f54044bc1e0d2860ccd3096ee2711eb0a1cb927' })));
+        return (index.h("div", { key: '09e451a9b0b348566d74ad71741d57bd48d3ec3a', class: "accordion-wrapper" }, index.h("slot", { key: '9338154dc8adc933eb6b6b6cbd1396adf839e80a' })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ifx-accordion_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-accordion.ifx-accordion-item.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\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}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\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\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","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n gap: tokens.$ifxSpace100;\n //transition: max-height 0.3s ease-in-out;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace300;\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 align-self: stretch;\n\n / breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n font-weight: bold;\n display: flex;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n private contentEl!: HTMLElement;\n private titleEl!: HTMLElement;\n private resizeObserver!: ResizeObserver;\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n\n this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\n if (this.contentEl) {\n this.attachResizeObserver();\n }\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxClose.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.contentEl) {\n if (this.internalOpen) {\n this.contentEl.style.height = 'auto'; \n const updatedHeight = this.contentEl.scrollHeight; \n this.contentEl.style.height = `${updatedHeight}px`; \n this.contentEl.style.overflow = 'visible';\n } else {\n this.contentEl.style.height = '0';\n this.contentEl.style.overflow = 'hidden';\n }\n }\n }\n\n attachResizeObserver() { \n const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\n\n if (innerContentEl) {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n });\n\n this.resizeObserver.observe(innerContentEl); \n }\n }\n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n const path = ev.composedPath();\n\n if(!path.includes(this.titleEl)) { \n return;\n }\n\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-16\"/>\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-accordion.ifx-accordion-item.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","trackComponent","h"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\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';\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 trackComponent('ifx-accordion')\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","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n gap: tokens.$ifxSpace100;\n //transition: max-height 0.3s ease-in-out;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace300;\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 align-self: stretch;\n\n / breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n font-weight: bold;\n display: flex;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n private contentEl!: HTMLElement;\n private titleEl!: HTMLElement;\n private resizeObserver!: ResizeObserver;\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n\n this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\n if (this.contentEl) {\n this.attachResizeObserver();\n }\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxClose.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.contentEl) {\n if (this.internalOpen) {\n this.contentEl.style.height = 'auto'; \n const updatedHeight = this.contentEl.scrollHeight; \n this.contentEl.style.height = `${updatedHeight}px`; \n this.contentEl.style.overflow = 'visible';\n } else {\n this.contentEl.style.height = '0';\n this.contentEl.style.overflow = 'hidden';\n }\n }\n }\n\n attachResizeObserver() { \n const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\n\n if (innerContentEl) {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n });\n\n this.resizeObserver.observe(innerContentEl); \n }\n }\n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n const path = ev.composedPath();\n\n if(!path.includes(this.titleEl)) { \n return;\n }\n\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-16\"/>\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}

package/dist/cjs/ifx-alert_2.cjs.entry.js CHANGED Viewed

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7f4df11a.js');
+const tracking = require('./tracking-f00364dc.js');
+const domUtils = require('./dom-utils-2c4573c2.js');
 const alertCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}";
 const IfxAlertStyle0 = alertCss;
@@ -35,10 +37,14 @@ const Alert = class {
         if (!this.uniqueId) {
             this.uniqueId = this.generateUniqueId('alert');
         }
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            tracking.trackComponent('ifx-alert');
+        }
     }
     render() {
         return this.variant === 'info' ? (index.h("div", { class: "alert__info-wrapper", role: "alert", "aria-live": this.AriaLive, "aria-describedby": this.alertTypeDescription[this.variant], "aria-labelledby": "alert-text alert-description" }, index.h("div", { class: "info__text-wrapper" }, index.h("div", { class: "info__headline-wrapper" }, index.h("slot", { name: "headline" })), index.h("div", { id: `alert-description-${this.uniqueId}`, class: "info__description-wrapper" }, index.h("slot", { name: "desc" }))), this.closable ? this.renderCloseButton() : null)) : (index.h("div", { class: `alert ${this.variant}`, role: "alert" }, this.icon && (index.h("div", { class: "icon-wrapper" }, index.h("ifx-icon", { icon: this.icon }))), index.h("div", { class: "alert-text", id: `alert-text-${this.uniqueId}` }, index.h("slot", null)), this.closable ? this.renderCloseButton() : null));
     }
+    get el() { return index.getElement(this); }
 };
 Alert.style = IfxAlertStyle0;

package/dist/cjs/ifx-alert_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-alert.ifx-template.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx","src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.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 } from '@stencil/core';\n\n@Component({\n tag: 'ifx-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\nexport class Alert {\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\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","\n.react__template-wrapper { \n display: flex;\n width: 300px;\n height: 200px;\n border-radius: 3px;\n border: 1px solid #ccc;\n\n &.hide { \n display: none;\n }\n \n &:hover { \n cursor: pointer;\n }\n}\n\n.template__page-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n\n & .repository__url { \n text-decoration: none;\n }\n}\n\n.input__fields-wrapper { \n display: flex;\n flex-direction: column;\n gap: 10px;\n\n}\n\n.details__wrapper { \n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.selection__buttons-wrapper { \n display: flex;\n gap: 10px;\n padding-top: 10px;\n align-items: center;\n & .vue__label { \n color: #ccc;\n }\n\n & label:not(.vue__label) { \n &:hover { \n cursor: pointer;\n }\n }\n\n & .selection__input { \n display: flex;\n align-items: center;\n gap: 5px;\n & input { \n margin: 0;\n height: 20px;\n width: 20px;\n &:hover:not(.vue__input) { \n cursor: pointer;\n }\n }\n }\n}\n\n.image__wrapper { \n img { \n position: relative;\n width: 300px;\n height: 100%;\n border-radius: 3px;\n object-fit: contain;\n transition: transform .2s;\n &:hover { \n transform: scale(2);\n top: 50px;\n z-index: 100;\n }\n }\n}","import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-template',\n styleUrl: 'template.scss',\n shadow: true,\n})\nexport class Template {\n @Element() el: HTMLElement;\n @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\n @State() repoUrl: string;\n @State() showDetails: boolean = false;\n @State() isTemplatePage: boolean = false;\n @State() isLoading: boolean = true;\n @State() repoError: string;\n @Prop() name: string;\n @Event() toggleTemplates: EventEmitter;\n @Event() fieldError: EventEmitter;\n @Prop() thumbnail: string;\n \n private clientId = 'Ov23lixmXiNTTNb6V5W6'\n private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\n private scope = 'repo workflow'\n private state = 'template123'\n\n authUser() { \n const authorizationUrl = `https://github.com/login/oauth/authorize?` +\n `client_id=${this.clientId}&` +\n `redirect_uri=${this.redirectUri}&` +\n `scope=${this.scope}&` +\n `state=${this.state}`;\n \n window.open(authorizationUrl, '_blank'); \n }\n\n componentDidLoad() { \n const url = new URL(window.location.href);\n const code = url.searchParams.get('code');\n const { templateName } = this.getLocalStorageValues()\n if(code && this.name === templateName) { \n this.isTemplatePage = true;\n this.toggleTemplates.emit('details')\n this.getUserToken(code)\n } \n }\n\n getLocalStorageValues() { \n const repoName = localStorage.getItem('repo_name');\n const repoDesc = localStorage.getItem('repo_desc');\n const repoFramework = localStorage.getItem('repo_framework');\n const templateName = localStorage.getItem('selectedTemplate');\n return { repoName, repoDesc, repoFramework, templateName }\n }\n\n async getUserToken(authCode) {\n const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\n\n fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\n .then(response => {\n if (response.ok) {\n return response.text();\n } else {\n return response.text().then(errorMessage => {\n throw new Error(errorMessage);\n });\n }\n })\n .then(data => { \n if(data) { \n this.isLoading = false;\n this.repoUrl = data;\n localStorage.clear();\n } \n })\n .catch(error => {\n this.repoError = error.message;\n console.error('Error:', error.message)\n });\n }\n\n handleUserInput(e, type) { \n if (type === 'name') {\n this.repoDetails = { ...this.repoDetails, name: e.target.value };\n } else if (type === 'desc') {\n this.repoDetails = { ...this.repoDetails, desc: e.target.value };\n } else if(type === 'framework') { \n this.repoDetails = { ...this.repoDetails, framework: e.target.value };\n }\n }\n\n submitUserData() { \n if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \n localStorage.setItem('repo_name', this.repoDetails.name);\n localStorage.setItem('repo_desc', this.repoDetails.desc);\n localStorage.setItem('repo_framework', this.repoDetails.framework);\n localStorage.setItem('selectedTemplate', this.name);\n this.fieldError.emit(false)\n this.authUser()\n } else { \n this.fieldError.emit('All fields are mandatory')\n }\n }\n\n togglePadding(action) { \n let parent = this.el.parentElement;\n if (parent) {\n const rootNode = parent.getRootNode();\n if (rootNode instanceof ShadowRoot) {\n parent = rootNode.host.parentElement;\n } else {\n parent = parent.parentElement;\n }\n if(action === 'remove') { \n parent.parentElement.style.padding = '0px';\n } else if(action === 'add') { \n parent.parentElement.style.padding = '4rem 20px';\n }\n }\n }\n\n handleCurrentTemplate(e) { \n if(e && !this.showDetails) { \n this.togglePadding('remove')\n const targetTemplate = e.currentTarget;\n this.toggleTemplates.emit(targetTemplate)\n this.showDetails = true;\n } \n }\n\n @Method()\n async toggleTemplate(currTemp) { \n const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\n if(templateWrapper) { \n if(!templateWrapper.classList.contains('hide') && currTemp ) { \n if(templateWrapper !== currTemp) {\n templateWrapper.classList.add('hide')\n }\n } else { \n if(this.showDetails) { \n this.showDetails = false;\n }\n this.togglePadding('add')\n templateWrapper.classList.remove('hide')\n }\n }\n }\n\n \n render() {\n return (\n <div>\n {this.isTemplatePage \n ? \n <div class=\"template__page-wrapper\">\n {!this.repoUrl && !this.repoError && \n <div>\n <h3>Your repository is getting ready..</h3>\n <p>This will only take a minute.</p>\n </div>}\n {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\n {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\n {this.repoError && <div>{this.repoError}</div>}\n </div> \n : \n <div class=\"react__template-container\">\n <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\n <div class=\"image__wrapper\">\n <img src={this.thumbnail} />\n </div>\n </div>\n {this.showDetails && \n <div class=\"details__wrapper\">\n <div class=\"selection__buttons-wrapper\">\n <div class=\"selection__input\">\n <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')} />\n <label htmlFor=\"react\">React</label>\n </div>\n <div class=\"selection__input vue\">\n <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\n <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\n </div>\n </div>\n \n\n <div class=\"input__fields-wrapper\">\n <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\n\n <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\n\n <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\n </div>\n \n </div>}\n </div>}\n </div>\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-alert.ifx-template.entry.cjs.js","mappings":"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","names":["h","isNestedInIfxComponent","trackComponent"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx","src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.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';\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 trackComponent('ifx-alert')\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","\n.react__template-wrapper { \n display: flex;\n width: 300px;\n height: 200px;\n border-radius: 3px;\n border: 1px solid #ccc;\n\n &.hide { \n display: none;\n }\n \n &:hover { \n cursor: pointer;\n }\n}\n\n.template__page-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n\n & .repository__url { \n text-decoration: none;\n }\n}\n\n.input__fields-wrapper { \n display: flex;\n flex-direction: column;\n gap: 10px;\n\n}\n\n.details__wrapper { \n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.selection__buttons-wrapper { \n display: flex;\n gap: 10px;\n padding-top: 10px;\n align-items: center;\n & .vue__label { \n color: #ccc;\n }\n\n & label:not(.vue__label) { \n &:hover { \n cursor: pointer;\n }\n }\n\n & .selection__input { \n display: flex;\n align-items: center;\n gap: 5px;\n & input { \n margin: 0;\n height: 20px;\n width: 20px;\n &:hover:not(.vue__input) { \n cursor: pointer;\n }\n }\n }\n}\n\n.image__wrapper { \n img { \n position: relative;\n width: 300px;\n height: 100%;\n border-radius: 3px;\n object-fit: contain;\n transition: transform .2s;\n &:hover { \n transform: scale(2);\n top: 50px;\n z-index: 100;\n }\n }\n}","import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-template',\n styleUrl: 'template.scss',\n shadow: true,\n})\nexport class Template {\n @Element() el: HTMLElement;\n @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\n @State() repoUrl: string;\n @State() showDetails: boolean = false;\n @State() isTemplatePage: boolean = false;\n @State() isLoading: boolean = true;\n @State() repoError: string;\n @Prop() name: string;\n @Event() toggleTemplates: EventEmitter;\n @Event() fieldError: EventEmitter;\n @Prop() thumbnail: string;\n \n private clientId = 'Ov23lixmXiNTTNb6V5W6'\n private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\n private scope = 'repo workflow'\n private state = 'template123'\n\n authUser() { \n const authorizationUrl = `https://github.com/login/oauth/authorize?` +\n `client_id=${this.clientId}&` +\n `redirect_uri=${this.redirectUri}&` +\n `scope=${this.scope}&` +\n `state=${this.state}`;\n \n window.open(authorizationUrl, '_blank'); \n }\n\n componentDidLoad() { \n const url = new URL(window.location.href);\n const code = url.searchParams.get('code');\n const { templateName } = this.getLocalStorageValues()\n if(code && this.name === templateName) { \n this.isTemplatePage = true;\n this.toggleTemplates.emit('details')\n this.getUserToken(code)\n } \n }\n\n getLocalStorageValues() { \n const repoName = localStorage.getItem('repo_name');\n const repoDesc = localStorage.getItem('repo_desc');\n const repoFramework = localStorage.getItem('repo_framework');\n const templateName = localStorage.getItem('selectedTemplate');\n return { repoName, repoDesc, repoFramework, templateName }\n }\n\n async getUserToken(authCode) {\n const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\n\n fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\n .then(response => {\n if (response.ok) {\n return response.text();\n } else {\n return response.text().then(errorMessage => {\n throw new Error(errorMessage);\n });\n }\n })\n .then(data => { \n if(data) { \n this.isLoading = false;\n this.repoUrl = data;\n localStorage.clear();\n } \n })\n .catch(error => {\n this.repoError = error.message;\n console.error('Error:', error.message)\n });\n }\n\n handleUserInput(e, type) { \n if (type === 'name') {\n this.repoDetails = { ...this.repoDetails, name: e.target.value };\n } else if (type === 'desc') {\n this.repoDetails = { ...this.repoDetails, desc: e.target.value };\n } else if(type === 'framework') { \n this.repoDetails = { ...this.repoDetails, framework: e.target.value };\n }\n }\n\n submitUserData() { \n if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \n localStorage.setItem('repo_name', this.repoDetails.name);\n localStorage.setItem('repo_desc', this.repoDetails.desc);\n localStorage.setItem('repo_framework', this.repoDetails.framework);\n localStorage.setItem('selectedTemplate', this.name);\n this.fieldError.emit(false)\n this.authUser()\n } else { \n this.fieldError.emit('All fields are mandatory')\n }\n }\n\n togglePadding(action) { \n let parent = this.el.parentElement;\n if (parent) {\n const rootNode = parent.getRootNode();\n if (rootNode instanceof ShadowRoot) {\n parent = rootNode.host.parentElement;\n } else {\n parent = parent.parentElement;\n }\n if(action === 'remove') { \n parent.parentElement.style.padding = '0px';\n } else if(action === 'add') { \n parent.parentElement.style.padding = '4rem 20px';\n }\n }\n }\n\n handleCurrentTemplate(e) { \n if(e && !this.showDetails) { \n this.togglePadding('remove')\n const targetTemplate = e.currentTarget;\n this.toggleTemplates.emit(targetTemplate)\n this.showDetails = true;\n } \n }\n\n @Method()\n async toggleTemplate(currTemp) { \n const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\n if(templateWrapper) { \n if(!templateWrapper.classList.contains('hide') && currTemp ) { \n if(templateWrapper !== currTemp) {\n templateWrapper.classList.add('hide')\n }\n } else { \n if(this.showDetails) { \n this.showDetails = false;\n }\n this.togglePadding('add')\n templateWrapper.classList.remove('hide')\n }\n }\n }\n\n \n render() {\n return (\n <div>\n {this.isTemplatePage \n ? \n <div class=\"template__page-wrapper\">\n {!this.repoUrl && !this.repoError && \n <div>\n <h3>Your repository is getting ready..</h3>\n <p>This will only take a minute.</p>\n </div>}\n {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\n {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\n {this.repoError && <div>{this.repoError}</div>}\n </div> \n : \n <div class=\"react__template-container\">\n <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\n <div class=\"image__wrapper\">\n <img src={this.thumbnail} />\n </div>\n </div>\n {this.showDetails && \n <div class=\"details__wrapper\">\n <div class=\"selection__buttons-wrapper\">\n <div class=\"selection__input\">\n <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')} />\n <label htmlFor=\"react\">React</label>\n </div>\n <div class=\"selection__input vue\">\n <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\n <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\n </div>\n </div>\n \n\n <div class=\"input__fields-wrapper\">\n <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\n\n <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\n\n <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\n </div>\n \n </div>}\n </div>}\n </div>\n );\n }\n}"],"version":3}

package/dist/cjs/ifx-badge.cjs.entry.js CHANGED Viewed

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7f4df11a.js');
+const tracking = require('./tracking-f00364dc.js');
+const domUtils = require('./dom-utils-2c4573c2.js');
 const badgeCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.badge__container{display:inline-flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;border:1px solid #EEEDED;background-color:#EEEDED;border-radius:100px;font-family:var(--ifx-font-family);font-size:0.875rem;line-height:1.25rem;font-weight:400;color:#1D1D1D}";
 const IfxBadgeStyle0 = badgeCss;
@@ -11,9 +13,15 @@ const Badge = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    componentWillLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            tracking.trackComponent('ifx-badge');
+        }
+    }
     render() {
-        return (index.h("div", { key: 'eaa5be7836515fc284e17ed7fb6acfdcc6ce11f1', class: "badge__container" }, index.h("slot", { key: 'f00f0415cb6cdfa25ce8e7b0df798f8a98eb2373' })));
+        return (index.h("div", { key: 'e9ec98076bf306a0db597f50bb7e811caadb10fd', class: "badge__container" }, index.h("slot", { key: '968c7674c219d173c9b5d41d3a70596da7887962' })));
     }
+    get el() { return index.getElement(this); }
 };
 Badge.style = IfxBadgeStyle0;

package/dist/cjs/ifx-badge.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-badge.entry.cjs.js","mappings":"~~;;;;;;~~AAAA,MAAM,QAAQ,GAAG,mXAAmX,CAAC;AACrY,uBAAe,QAAQ;;~~MCMV~~,KAAK;;;;~~IAIhB~~,MAAM;QACJ,~~QACEA~~,kEAAK,KAAK,EAAC,kBAAkB,IAC3BA,oEAAQ,CACJ,EACN;KACH~~;;;;;;~~","names":["h"],"sources":["src/components/badge/badge.scss?tag=ifx-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.badge__container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 4px 8px;\n gap: tokens.$ifxSpace100;\n border: 1px solid tokens.$ifxColorEngineering200;\n background-color: tokens.$ifxColorEngineering200;\n border-radius: 100px;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n font-weight: 400;\n color: tokens.$ifxColorBaseBlack;\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'ifx-badge',\n styleUrl: 'badge.scss',\n shadow: true\n})\nexport class Badge {\n\n\n\n render() {\n return (\n <div class=\"badge__container\">\n <slot />\n </div>\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-badge.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,mXAAmX,CAAC;AACrY,uBAAe,QAAQ;;MCQV,KAAK;;;;IAGf,iBAAiB;QAChB,IAAG,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnCC,uBAAc,CAAC,WAAW,CAAC,CAAA;SAC5B;KACF;IAED,MAAM;QACJ,QACEC,kEAAK,KAAK,EAAC,kBAAkB,IAC3BA,oEAAQ,CACJ,EACN;KACH;;;;;;;","names":["isNestedInIfxComponent","trackComponent","h"],"sources":["src/components/badge/badge.scss?tag=ifx-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.badge__container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 4px 8px;\n gap: tokens.$ifxSpace100;\n border: 1px solid tokens.$ifxColorEngineering200;\n background-color: tokens.$ifxColorEngineering200;\n border-radius: 100px;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n font-weight: 400;\n color: tokens.$ifxColorBaseBlack;\n}","import { Component, h, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n tag: 'ifx-badge',\n styleUrl: 'badge.scss',\n shadow: true\n})\nexport class Badge {\n @Element() el: HTMLElement;\n\n componentWillLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n trackComponent('ifx-badge')\n }\n }\n\n render() {\n return (\n <div class=\"badge__container\">\n <slot />\n </div>\n );\n }\n}"],"version":3}

package/dist/cjs/ifx-basic-table.cjs.entry.js CHANGED Viewed

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7f4df11a.js');
+const tracking = require('./tracking-f00364dc.js');
+const domUtils = require('./dom-utils-2c4573c2.js');
 const main_esm = require('./main.esm-89f6d971.js');
 const index$1 = require('./index-5b0b9d4c.js');
@@ -52,6 +54,9 @@ const Table = class {
         this.gridInitialized = false;
     }
     componentWillLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.host)) {
+            tracking.trackComponent('ifx-basic-table');
+        }
         this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;
         this.setColsAndRows(); //needed?
         this.setGridOptions();
@@ -183,7 +188,7 @@ const Table = class {
         return {};
     }
     render() {
-        return (index.h(index.Host, { key: '1c588ebb0b5b18b2c9af2304d0eb8a8533151452' }, index.h("div", { key: '03c83108d58720f38cbde8fcfc60acecabfecc19', id: "table-wrapper", class: this.getClassNames() }, index.h("div", { key: 'c7c11e0e8ff2a2c74d58a290f0abc7d7a1a3e22a', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (index.h(index.Host, { key: 'e8e34a5c352c91435a20969f4053fa90e54be1d4' }, index.h("div", { key: '59b92b80350832f0e3d17a44e955e67120c880f3', id: "table-wrapper", class: this.getClassNames() }, index.h("div", { key: 'd15ecabd4a0b6b3dc4d63fc879476fe09bf08860', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/ifx-basic-table.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-basic-table.entry.cjs.js","mappings":"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","names":["createGrid","classNames","h","Host"],"sources":["src/components/table-basic-version/customNoRowsOverlay.ts","src/components/table-basic-version/customLoadingOverlay.ts","src/components/table-basic-version/table.scss?tag=ifx-basic-table","src/components/table-basic-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomNoRowsOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `\n <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\n ${params.noRowsMessageFunc()}\n </div>\n `;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomLoadingOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(_params: ICellRendererParams & { loadingMessage: string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\n<ifx-spinner></ifx-spinner>\n </div>`;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n@import \"~ag-grid-community/styles/ag-grid.css\";\n// @import \"~ag-grid-community/styles/ag-theme-alpine.css\";\n\n// :host {\n// --table-height: '200px';\n// /* Default value /\n// } ag-ltr .ag-header-cell-resize\n\n.zebra { \n & .ag-row-odd { \n background-color: tokens.$ifxColorEngineering100!important;\n }\n\n & .ag-row { \n border-bottom: none!important;\n }\n}\n\n.ag-header-viewport { \n background-color: tokens.$ifxColorEngineering200!important;\n}\n\n.table-wrapper .ag-root-wrapper-body {\n height: auto !important;\n min-height: 100px !important;\n min-width: 100px;\n}\n\n.ifx-ag-grid {\n display: grid;\n height: 100%;\n width: 100%;\n min-width: 100px;\n padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n outline: none !important;\n}\n\n.ifx-ag-grid :not(.ag-header-cell):focus {\n outline: none;\n}\n\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n content: '';\n position: absolute;\n right: 0;\n top: calc(50% - 12px);\n height: 24px; \n width: 1px;\n background-color: tokens.$ifxColorEngineering300; \n}\n\n.ag-overlay-loading-center {\n border: none;\n background: none;\n border-radius: none;\n box-shadow: none;\n}\n\n\n.ag-root-wrapper {\n border: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.ag-header {\n background-color: tokens.$ifxColorEngineering100;\n border-bottom: none;\n\n &.ag-header-active {\n outline: none !important;\n border-color: #0A8276 !important;\n }\n}\n\n.ag-header-cell {\n padding-left: 16px;\n padding-right: 16px;\n gap: 4px;\n}\n\n\n.ag-header-cell-focus {\n border: none !important;\n outline: none !important;\n}\n\n.ag-header-cell-text {\n font-size: 13px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.ag-row-focus {\n background-color: inherit !important;\n /* Reset the hover color to the row's original color /\n}\n\n.ag-row-hover {\n background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\n / Reset the hover color to the row's original color /\n}\n\n\n.ag-cell-focus {\n border: none !important;\n outline: none !important;\n background-color: inherit !important;\n}\n\n\n\n.ag-row {\n background-color: tokens.$ifxColorBaseWhite;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n z-index: 1; //ensure the stacking order when used inside js frameworks\n}\n\n.ag-row-odd {\n background-color: tokens.$ifxColorBaseWhite;\n}\n\n.ag-cell {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n padding-left: 0px;\n vertical-align: bottom;\n line-height: 12px;\n}\n\n.unsort-icon-custom-color {\n color: tokens.$ifxColorEngineering400;\n}","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-basic-table',\n styleUrl: 'table.scss',\n shadow: false // only works with shadowdom off because we are using an external library\n})\nexport class Table {\n @State() gridOptions: GridOptions;\n @Prop() cols: any[] \| string;\n @Prop() rows: any[] \| string;\n @State() columnDefs: any[] = [];\n @State() rowData: any[] = [];\n @Prop() rowHeight: string = 'default';\n @Prop() tableHeight: string = 'auto';\n @Prop() variant: string = 'default'\n @State() uniqueKey: string;\n @Element() host: HTMLElement;\n \n private container: HTMLDivElement;\n private gridApi: GridApi; \n private gridInitialized = false;\n\n componentWillLoad() {\n this.uniqueKey = `unique-${Math.floor(Math.random() 1000000)}`;\n this.setColsAndRows(); //needed?\n this.setGridOptions();\n }\n\n setGridOptions() {\n this.gridOptions = {\n rowHeight: this.rowHeight === 'default' ? 40 : 32,\n headerHeight: 40,\n defaultColDef: {\n resizable: true,\n },\n suppressCellFocus: true,\n enableCellTextSelection: true,\n suppressDragLeaveHidesColumns: true,\n suppressRowHoverHighlight: true,\n onFirstDataRendered: this.onFirstDataRendered,\n columnDefs: this.columnDefs,\n rowData: this.rowData,\n loadingOverlayComponent: CustomLoadingOverlay,\n noRowsOverlayComponent: CustomNoRowsOverlay,\n noRowsOverlayComponentParams: {\n noRowsMessageFunc: () =>\n 'No rows found at: ' + new Date().toLocaleTimeString(),\n },\n icons: {\n sortAscending: '<ifx-icon icon=\"arrow-triangle-up-16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></ifx-icon></a>',\n },\n rowDragManaged: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n animateRows: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n };\n }\n\n setColsAndRows() {\n if (typeof this.rows === 'string' && typeof this.cols === 'string') {\n try {\n if(this.cols) {\n this.columnDefs = JSON.parse(this.cols);\n }\n if(this.rows) {\n this.rowData = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if ((Array.isArray(this.rows) \|\| typeof this.rows === 'object') && (Array.isArray(this.cols) \|\| typeof this.cols === 'object')) {\n this.columnDefs = this.cols;\n this.rowData = this.rows;\n } else {\n console.error('Unexpected value for cols and rows:', this.rows, this.cols);\n }\n }\n\n getRowData() {\n let rows: any[] = [];\n if (typeof this.rows === 'string') {\n try {\n if(this.rows) {\n rows = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.rows) \|\| typeof this.rows === 'object') {\n rows = this.rows;\n } else {\n console.error('Unexpected value for rows: ', this.rows);\n }\n\n return rows;\n }\n\n getColData() {\n let cols: any[] = [];\n\n if (typeof this.cols === 'string') {\n try {\n if(this.cols) { \n cols = JSON.parse(this.cols);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.cols) \|\| typeof this.cols === 'object') {\n cols = this.cols;\n } else {\n console.error('Unexpected value for cols: ', this.cols);\n }\n return cols;\n }\n\n onFirstDataRendered(params: FirstDataRenderedEvent) {\n params.api.sizeColumnsToFit();\n }\n\n componentWillUpdate() {\n this.setColsAndRows();\n this.gridOptions.columnDefs = this.columnDefs;\n this.gridOptions.rowData = this.rowData;\n if (this.gridApi) {\n this.gridApi.setGridOption('rowData', this.rowData);\n this.gridApi.setGridOption('columnDefs', this.columnDefs);\n }\n }\n\n componentDidLoad() {\n if (this.container && !this.gridInitialized) {\n this.gridApi = createGrid(this.container, this.gridOptions);\n if (this.gridApi) {\n this.gridApi.sizeColumnsToFit({\n defaultMinWidth: 100,\n });\n this.gridApi.setGridOption('columnDefs', this.getColData());\n this.gridApi.setGridOption('rowData', this.getRowData());\n this.gridInitialized = true; \n }\n }\n }\n\n getClassNames() {\n return classNames(\n this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n 'table-wrapper',\n );\n }\n\n getTableStyle() {\n if (this.tableHeight !== 'auto') {\n return {\n height: this.tableHeight,\n };\n }\n return {};\n }\n\n render() {\n return (\n <Host>\n <div id=\"table-wrapper\" class={this.getClassNames()}>\n <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-basic-table.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","trackComponent","createGrid","classNames","h","Host"],"sources":["src/components/table-basic-version/customNoRowsOverlay.ts","src/components/table-basic-version/customLoadingOverlay.ts","src/components/table-basic-version/table.scss?tag=ifx-basic-table","src/components/table-basic-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomNoRowsOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `\n <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\n ${params.noRowsMessageFunc()}\n </div>\n `;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomLoadingOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(_params: ICellRendererParams & { loadingMessage: string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\n<ifx-spinner></ifx-spinner>\n </div>`;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n@import \"~ag-grid-community/styles/ag-grid.css\";\n// @import \"~ag-grid-community/styles/ag-theme-alpine.css\";\n\n// :host {\n// --table-height: '200px';\n// /* Default value /\n// } ag-ltr .ag-header-cell-resize\n\n.zebra { \n & .ag-row-odd { \n background-color: tokens.$ifxColorEngineering100!important;\n }\n\n & .ag-row { \n border-bottom: none!important;\n }\n}\n\n.ag-header-viewport { \n background-color: tokens.$ifxColorEngineering200!important;\n}\n\n.table-wrapper .ag-root-wrapper-body {\n height: auto !important;\n min-height: 100px !important;\n min-width: 100px;\n}\n\n.ifx-ag-grid {\n display: grid;\n height: 100%;\n width: 100%;\n min-width: 100px;\n padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n outline: none !important;\n}\n\n.ifx-ag-grid :not(.ag-header-cell):focus {\n outline: none;\n}\n\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n content: '';\n position: absolute;\n right: 0;\n top: calc(50% - 12px);\n height: 24px; \n width: 1px;\n background-color: tokens.$ifxColorEngineering300; \n}\n\n.ag-overlay-loading-center {\n border: none;\n background: none;\n border-radius: none;\n box-shadow: none;\n}\n\n\n.ag-root-wrapper {\n border: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.ag-header {\n background-color: tokens.$ifxColorEngineering100;\n border-bottom: none;\n\n &.ag-header-active {\n outline: none !important;\n border-color: #0A8276 !important;\n }\n}\n\n.ag-header-cell {\n padding-left: 16px;\n padding-right: 16px;\n gap: 4px;\n}\n\n\n.ag-header-cell-focus {\n border: none !important;\n outline: none !important;\n}\n\n.ag-header-cell-text {\n font-size: 13px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.ag-row-focus {\n background-color: inherit !important;\n /* Reset the hover color to the row's original color /\n}\n\n.ag-row-hover {\n background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\n / Reset the hover color to the row's original color /\n}\n\n\n.ag-cell-focus {\n border: none !important;\n outline: none !important;\n background-color: inherit !important;\n}\n\n\n\n.ag-row {\n background-color: tokens.$ifxColorBaseWhite;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n z-index: 1; //ensure the stacking order when used inside js frameworks\n}\n\n.ag-row-odd {\n background-color: tokens.$ifxColorBaseWhite;\n}\n\n.ag-cell {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n padding-left: 0px;\n vertical-align: bottom;\n line-height: 12px;\n}\n\n.unsort-icon-custom-color {\n color: tokens.$ifxColorEngineering400;\n}","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-basic-table',\n styleUrl: 'table.scss',\n shadow: false // only works with shadowdom off because we are using an external library\n})\nexport class Table {\n @State() gridOptions: GridOptions;\n @Prop() cols: any[] \| string;\n @Prop() rows: any[] \| string;\n @State() columnDefs: any[] = [];\n @State() rowData: any[] = [];\n @Prop() rowHeight: string = 'default';\n @Prop() tableHeight: string = 'auto';\n @Prop() variant: string = 'default'\n @State() uniqueKey: string;\n @Element() host: HTMLElement;\n \n private container: HTMLDivElement;\n private gridApi: GridApi; \n private gridInitialized = false;\n\n componentWillLoad() {\n if(!isNestedInIfxComponent(this.host)) { \n trackComponent('ifx-basic-table')\n }\n this.uniqueKey = `unique-${Math.floor(Math.random() 1000000)}`;\n this.setColsAndRows(); //needed?\n this.setGridOptions();\n }\n\n setGridOptions() {\n this.gridOptions = {\n rowHeight: this.rowHeight === 'default' ? 40 : 32,\n headerHeight: 40,\n defaultColDef: {\n resizable: true,\n },\n suppressCellFocus: true,\n enableCellTextSelection: true,\n suppressDragLeaveHidesColumns: true,\n suppressRowHoverHighlight: true,\n onFirstDataRendered: this.onFirstDataRendered,\n columnDefs: this.columnDefs,\n rowData: this.rowData,\n loadingOverlayComponent: CustomLoadingOverlay,\n noRowsOverlayComponent: CustomNoRowsOverlay,\n noRowsOverlayComponentParams: {\n noRowsMessageFunc: () =>\n 'No rows found at: ' + new Date().toLocaleTimeString(),\n },\n icons: {\n sortAscending: '<ifx-icon icon=\"arrow-triangle-up-16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></ifx-icon></a>',\n },\n rowDragManaged: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n animateRows: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n };\n }\n\n setColsAndRows() {\n if (typeof this.rows === 'string' && typeof this.cols === 'string') {\n try {\n if(this.cols) {\n this.columnDefs = JSON.parse(this.cols);\n }\n if(this.rows) {\n this.rowData = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if ((Array.isArray(this.rows) \|\| typeof this.rows === 'object') && (Array.isArray(this.cols) \|\| typeof this.cols === 'object')) {\n this.columnDefs = this.cols;\n this.rowData = this.rows;\n } else {\n console.error('Unexpected value for cols and rows:', this.rows, this.cols);\n }\n }\n\n getRowData() {\n let rows: any[] = [];\n if (typeof this.rows === 'string') {\n try {\n if(this.rows) {\n rows = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.rows) \|\| typeof this.rows === 'object') {\n rows = this.rows;\n } else {\n console.error('Unexpected value for rows: ', this.rows);\n }\n\n return rows;\n }\n\n getColData() {\n let cols: any[] = [];\n\n if (typeof this.cols === 'string') {\n try {\n if(this.cols) { \n cols = JSON.parse(this.cols);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.cols) \|\| typeof this.cols === 'object') {\n cols = this.cols;\n } else {\n console.error('Unexpected value for cols: ', this.cols);\n }\n return cols;\n }\n\n onFirstDataRendered(params: FirstDataRenderedEvent) {\n params.api.sizeColumnsToFit();\n }\n\n componentWillUpdate() {\n this.setColsAndRows();\n this.gridOptions.columnDefs = this.columnDefs;\n this.gridOptions.rowData = this.rowData;\n if (this.gridApi) {\n this.gridApi.setGridOption('rowData', this.rowData);\n this.gridApi.setGridOption('columnDefs', this.columnDefs);\n }\n }\n\n componentDidLoad() {\n if (this.container && !this.gridInitialized) {\n this.gridApi = createGrid(this.container, this.gridOptions);\n if (this.gridApi) {\n this.gridApi.sizeColumnsToFit({\n defaultMinWidth: 100,\n });\n this.gridApi.setGridOption('columnDefs', this.getColData());\n this.gridApi.setGridOption('rowData', this.getRowData());\n this.gridInitialized = true; \n }\n }\n }\n\n getClassNames() {\n return classNames(\n this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n 'table-wrapper',\n );\n }\n\n getTableStyle() {\n if (this.tableHeight !== 'auto') {\n return {\n height: this.tableHeight,\n };\n }\n return {};\n }\n\n render() {\n return (\n <Host>\n <div id=\"table-wrapper\" class={this.getClassNames()}>\n <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ifx-breadcrumb.cjs.entry.js CHANGED Viewed

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7f4df11a.js');
+const tracking = require('./tracking-f00364dc.js');
+const domUtils = require('./dom-utils-2c4573c2.js');
 const breadcrumbCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.breadcrumb{list-style:none;padding:0px;margin:0px;display:flex;flex-direction:row;font-family:var(--ifx-font-family);font-size:0.875rem;align-items:flex-start}";
 const IfxBreadcrumbStyle0 = breadcrumbCss;
@@ -11,6 +13,11 @@ const Breadcrumb = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    componentWillLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            tracking.trackComponent('ifx-breadcrumb');
+        }
+    }
     componentDidLoad() {
         const element = this.el.shadowRoot.firstChild;
         this.validateBreadcrumbItemStructure(element);
@@ -37,7 +44,7 @@ const Breadcrumb = class {
         }
     }
     render() {
-        return (index.h("nav", { key: '3d01af951d4a6a396545eb9cf26454cbe2b31ed0', "aria-label": "Page navigation breadcrumb" }, index.h("ol", { key: '95ae08a0de7099ecd7c3aa963c1bf9952918ecda', class: "breadcrumb" }, index.h("slot", { key: 'e9fed255fa08b28c8974498d329df69b1e92edf5' }))));
+        return (index.h("nav", { key: '1e5111c6a97987cf26f17a4ef391e805595d5f48', "aria-label": "Page navigation breadcrumb" }, index.h("ol", { key: '241741cbdacd345373a5f35ee8300e19cd1291de', class: "breadcrumb" }, index.h("slot", { key: '2a14681b1293570bf9f6ba5e78cf77bc51390695' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-breadcrumb.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-breadcrumb.entry.cjs.js","mappings":"~~;;;;;;~~AAAA,MAAM,aAAa,GAAG,sPAAsP,CAAC;AAC7Q,4BAAe,aAAa;;~~MCMf~~,UAAU;;;;IAGrB,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;KAC/C;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;SACR;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE;YACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC7C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC,CAAC;oBAC5D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;oBACtF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;oBAC7E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE;wBAClE,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAC;qBACrF;iBACF;aACF;SACF;KACF;IAED,MAAM;QACJ,~~QACEA~~,gFAAgB,4BAA4B,IAC1CA,iEAAI,KAAK,EAAC,YAAY,IACpBA,oEAAQ,CACL,CACD,EACN;KACH;;;;;;;","names":["h"],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.breadcrumb {\n list-style: none;\n padding: 0px;\n margin: 0px;\n display: flex;\n flex-direction: row;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-size: tokens.$ifxFontSizeS;\n align-items: flex-start;\n //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n// color: tokens.$ifxColorEngineering300;\n// margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true\n})\nexport class Breadcrumb {\n @Element() el;\n\n componentDidLoad() {\n const element = this.el.shadowRoot.firstChild;\n this.validateBreadcrumbItemStructure(element);\n }\n\n private validateBreadcrumbItemStructure(element: HTMLElement) {\n if (!element) {\n console.error('element not found');\n return;\n }\n \n const slot = element.querySelector('slot');\n if(slot) { \n const assignedNodes = slot.assignedNodes();\n \n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i];\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\n throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\n }\n }\n }\n }\n }\n\n render() {\n return (\n <nav aria-label=\"Page navigation breadcrumb\">\n <ol class=\"breadcrumb\">\n <slot />\n </ol>\n </nav>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-breadcrumb.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,sPAAsP,CAAC;AAC7Q,4BAAe,aAAa;;MCQf,UAAU;;;;IAGrB,iBAAiB;QACf,IAAG,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnCC,uBAAc,CAAC,gBAAgB,CAAC,CAAA;SACjC;KACF;IAED,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;KAC/C;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;SACR;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE;YACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC7C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC,CAAC;oBAC5D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;oBACtF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;oBAC7E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE;wBAClE,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAC;qBACrF;iBACF;aACF;SACF;KACF;IAED,MAAM;QACJ,QACEC,gFAAgB,4BAA4B,IAC1CA,iEAAI,KAAK,EAAC,YAAY,IACpBA,oEAAQ,CACL,CACD,EACN;KACH;;;;;;;","names":["isNestedInIfxComponent","trackComponent","h"],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.breadcrumb {\n list-style: none;\n padding: 0px;\n margin: 0px;\n display: flex;\n flex-direction: row;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-size: tokens.$ifxFontSizeS;\n align-items: flex-start;\n //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n// color: tokens.$ifxColorEngineering300;\n// margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n tag: 'ifx-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true\n})\nexport class Breadcrumb {\n @Element() el;\n\n componentWillLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n trackComponent('ifx-breadcrumb')\n }\n }\n\n componentDidLoad() {\n const element = this.el.shadowRoot.firstChild;\n this.validateBreadcrumbItemStructure(element);\n }\n\n private validateBreadcrumbItemStructure(element: HTMLElement) {\n if (!element) {\n console.error('element not found');\n return;\n }\n \n const slot = element.querySelector('slot');\n if(slot) { \n const assignedNodes = slot.assignedNodes();\n \n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i];\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\n throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\n }\n }\n }\n }\n }\n\n render() {\n return (\n <nav aria-label=\"Page navigation breadcrumb\">\n <ol class=\"breadcrumb\">\n <slot />\n </ol>\n </nav>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ifx-button.cjs.entry.js CHANGED Viewed

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7f4df11a.js');
+const tracking = require('./tracking-f00364dc.js');
+const domUtils = require('./dom-utils-2c4573c2.js');
 const index$1 = require('./index-5b0b9d4c.js');
 const buttonCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{vertical-align:bottom;display:inline-flex;width:var(--bw, fit-content)}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0px 16px;gap:8px;color:#FFFFFF;font-weight:600;border-radius:1px;line-height:1.5rem;font-family:var(--ifx-font-family);font-style:normal;text-decoration:none;user-select:none;font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;width:var(--bw, fit-content)}.btn:not(.disabled){cursor:pointer}.btn.disabled{pointer-events:none}.btn-default{color:#FFFFFF;background-color:#0A8276}.btn-default:disabled,.btn-default.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-default{background-color:#FFFFFF;color:#0A8276;border:1px solid #0A8276}.btn-secondary-default:disabled,.btn-secondary-default.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-default{background-color:transparent;color:#0A8276}.btn-tertiary-default:disabled,.btn-tertiary-default.disabled{color:#BFBBBB;pointer-events:none}.btn-danger{color:#FFFFFF;background-color:#CD002F;border-color:#CD002F}.btn-danger:disabled,.btn-danger.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-danger{background-color:#FFFFFF;color:#CD002F;border:1px solid #CD002F}.btn-secondary-danger:disabled,.btn-secondary-danger.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-danger{background-color:transparent;color:#CD002F}.btn-tertiary-danger:disabled,.btn-tertiary-danger.disabled{background-color:#FFFFFF;color:#BFBBBB;pointer-events:none}.btn-inverse{color:#0A8276;background-color:#FFFFFF}.btn-inverse:disabled,.btn-inverse.disabled{opacity:1;background-color:#FFFFFF;color:#0A8276;pointer-events:none}.btn-secondary-inverse{color:#FFFFFF;border:1px solid #FFFFFF}.btn-secondary-inverse:disabled,.btn-secondary-inverse.disabled{border:1px solid #FFFFFF;color:#FFFFFF;pointer-events:none}.btn-tertiary-inverse{color:#FFFFFF}.btn-tertiary-inverse:disabled,.btn-tertiary-inverse.disabled{color:#FFFFFF;opacity:1;pointer-events:none}.btn ifx-icon:empty{display:none}.btn.btn-xs{font-size:0.875rem;height:32px;line-height:1rem}.btn.btn-s{font-size:0.875rem;height:36px;line-height:1.25rem}.btn.btn-l{font-size:1.25rem;height:48px;line-height:1.75rem}.btn.btn-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-default:not(:disabled,.disabled):hover{background-color:#08665C}.btn.btn-default:not(:disabled,.disabled):active,.btn.btn-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-default:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#08665C}.btn.btn-secondary-default:not(:disabled,.disabled):active,.btn.btn-secondary-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#9C216E}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#9C216E}.btn.btn-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-danger:not(:disabled,.disabled):hover{background-color:#A2001E}.btn.btn-danger:not(:disabled,.disabled):active,.btn.btn-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-secondary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-danger:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#A2001E}.btn.btn-secondary-danger:not(:disabled,.disabled):active,.btn.btn-secondary-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-inverse:not(:disabled,.disabled):hover{background-color:#EEEDED}.btn.btn-inverse:not(:disabled,.disabled):active,.btn.btn-inverse:not(:disabled,.disabled).active{background-color:#BFBBBB}.btn.btn-secondary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-secondary-inverse:not(:disabled,.disabled):hover{color:#0A8276;background-color:#EEEDED}.btn.btn-secondary-inverse:not(:disabled,.disabled):active,.btn.btn-secondary-inverse:not(:disabled,.disabled).active{color:#0A8276;background-color:#BFBBBB}.btn.btn-tertiary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):hover{color:#08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):active,.btn.btn-tertiary-default:not(:disabled,.disabled).active{color:#06534B}.btn.btn-tertiary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):hover{color:#A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):active,.btn.btn-tertiary-danger:not(:disabled,.disabled).active{color:#900021}.btn.btn-tertiary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-tertiary-inverse:not(:disabled,.disabled):hover{color:#EEEDED}.btn.btn-tertiary-inverse:not(:disabled,.disabled):active,.btn.btn-tertiary-inverse:not(:disabled,.disabled).active{color:#BFBBBB}";
@@ -74,6 +76,9 @@ const Button = class {
     }
     componentWillLoad() {
         this.handleFormAndInternalHref();
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            tracking.trackComponent('ifx-button');
+        }
     }
     componentWillRender() {
         this.handleButtonWidth();
@@ -102,7 +107,7 @@ const Button = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'a220864c79a3eee88b277dd2277487581c7de8b0' }, index.h("a", { key: '4fd4cbd07205a0f538cf4d977a1b88d23d64be36', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, index.h("slot", { key: 'f64f20c4b3d1af19c6276713aef4e230d7aaf0e3' }))));
+        return (index.h(index.Host, { key: '1df56b0975f8eade4fa85ba6d4c4294ccc13ff35' }, index.h("a", { key: 'b8379031e1158ea37886c390c61ae3d42088b959', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, index.h("slot", { key: 'e290100da580522f6a66084ec7280c5ec79c6565' }))));
     }
     getVariantClass() {
         return `${this.variant}` === "secondary"

package/dist/cjs/ifx-button.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-button.entry.cjs.js","mappings":"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","names":["h","Host","classNames"],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n vertical-align: bottom;\n display: inline-flex;\n width: var(--bw, fit-content);\n}\n\n.btn {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: tokens.$ifxSize500;\n padding: 0px tokens.$ifxSpace200;\n gap: tokens.$ifxSpace100;\n color: tokens.$ifxColorBaseWhite;\n font-weight: tokens.$ifxFontWeightSemibold;\n border-radius: tokens.$ifxBorderRadius12;\n line-height: tokens.$ifxLineHeightM;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-style: normal;\n text-decoration: none;\n user-select: none;\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 width: var(--bw, fit-content);\n}\n\n.btn:not(.disabled) {\n cursor: pointer;\n}\n\n.btn.disabled {\n pointer-events: none;\n}\n\n.btn-default {\n //default variant=primary; default color=default\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.btn-secondary-default {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorOcean500;\n border: 1px solid 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-default {\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n\n.btn-danger {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed500;\n border-color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n.btn-secondary-danger {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorRed500;\n border: 1px solid tokens.$ifxColorRed500;\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-danger {\n //combination tertiary + danger not in design\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-inverse {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n opacity: tokens.$ifxOpacity100;\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorOcean500;\n pointer-events: none;\n }\n}\n\n.btn-secondary-inverse {\n color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n border: 1px solid tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n\n.btn-tertiary-inverse {\n color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorBaseWhite;\n opacity: tokens.$ifxOpacity100;\n pointer-events: none;\n\n }\n}\n\n.btn {\n & ifx-icon:empty {\n display: none;\n }\n\n &.btn-xs {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize400;\n line-height: tokens.$ifxLineHeightXs;\n }\n\n &.btn-s {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize450;\n line-height: tokens.$ifxLineHeightS;\n }\n\n // &.btn-m { //default\n // font-size: tokens.$ifxFontSizeM;\n // height: tokens.$ifxSize400;\n // line-height: tokens.$ifxLineHeightM;\n // }\n\n\n &.btn-l {\n font-size: tokens.$ifxFontSizeXl;\n height: tokens.$ifxSize600;\n line-height: tokens.$ifxLineHeightXl;\n }\n\n\n\n &.btn-default: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 }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary-default: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 color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary:not(:disabled, .disabled) {\n\n &:hover {\n background-color: tokens.$ifxColorBerry500;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorBerry500;\n }\n }\n\n\n\n &.btn-danger: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.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n &.btn-secondary-danger:not(:disabled, .disabled) {\n\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 color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n\n &.btn-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.btn-secondary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n\n\n &.btn-tertiary-default: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.$ifxColorOcean600;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean700;\n }\n\n\n }\n\n\n\n\n\n &.btn-tertiary-danger: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.$ifxColorRed600;\n }\n\n &:hover {\n color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorRed700;\n }\n\n }\n\n\n &.btn-tertiary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorEngineering200;\n\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorEngineering300;\n }\n }\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n tag: 'ifx-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class Button {\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\n @Prop() size: string = 'm';\n @Prop() disabled: boolean = false;\n @State() internalHref: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n @Prop() fullWidth: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Element() el;\n\n private focusableElement: HTMLElement;\n private nativeButton: HTMLButtonElement \| HTMLInputElement;\n\n @Watch('href')\n setInternalHref(newValue: string) {\n this.internalHref = newValue;\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n insertNativeButton() {\n this.nativeButton = document.createElement('button');\n this.nativeButton.type = this.type;\n this.nativeButton.style.display = 'none';\n this.el.closest('form').appendChild(this.nativeButton);\n }\n\n handleFormAndInternalHref() {\n if (this.el.closest('form')) {\n if (this.el.href) {\n this.el.internalHref = undefined;\n }\n this.insertNativeButton()\n } else {\n this.internalHref = this.href;\n }\n }\n\n handleButtonWidth() {\n if (this.fullWidth) {\n this.el.style.setProperty('--bw', '100%');\n } else {\n this.el.style.setProperty('--bw', 'fit-content');\n }\n }\n\n componentWillLoad() {\n this.handleFormAndInternalHref()\n }\n\n componentWillRender() {\n this.handleButtonWidth()\n }\n\n\n\n handleClick = (ev: Event) => {\n if (this.el.shadowRoot) {\n const parentForm = this.el.closest('form');\n if (parentForm) {\n ev.preventDefault();\n\n if (this.type === 'reset') {\n // If the button type is 'reset', manually reset all custom form fields\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n } else {\n const fakeButton = document.createElement('button');\n if (this.type) {\n fakeButton.type = this.type;\n }\n fakeButton.style.display = 'none';\n parentForm.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n }\n\n resetClickHandler() {\n const formElement = this.el.closest('form');\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n customElements.forEach(element => {\n element.reset();\n });\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ( ev.key === \" \" \|\| ev.key === 'Enter' && !this.disabled) {\n this.focusableElement.click();\n }\n }\n\n @Listen('click', { capture: true })\n handleHostClick(event: Event) {\n if (this.disabled === true) {\n event.stopImmediatePropagation();\n }\n }\n\n handleFocus(event: FocusEvent) {\n if (this.disabled) {\n event.preventDefault();\n this.focusableElement.blur();\n }\n }\n\n render() {\n return (\n <Host>\n <a\n role={this.href ? 'link' : 'button'}\n tabIndex={this.disabled ? -1 : 0}\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.internalHref : undefined}\n target={this.target}\n onClick={this.handleClick}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n onFocus={(event) => this.handleFocus(event)}\n aria-disabled={this.disabled ? 'true' : null}\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n aria-label={this.ariaLabel \|\| undefined}\n >\n <slot></slot>\n </a>\n </Host>\n );\n }\n\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary-${this.theme}`\n : `${this.variant}` === 'tertiary'\n ? `tertiary-${this.theme}`\n : `${this.theme}`;\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',\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-button.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","trackComponent","h","Host","classNames"],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n vertical-align: bottom;\n display: inline-flex;\n width: var(--bw, fit-content);\n}\n\n.btn {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: tokens.$ifxSize500;\n padding: 0px tokens.$ifxSpace200;\n gap: tokens.$ifxSpace100;\n color: tokens.$ifxColorBaseWhite;\n font-weight: tokens.$ifxFontWeightSemibold;\n border-radius: tokens.$ifxBorderRadius12;\n line-height: tokens.$ifxLineHeightM;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-style: normal;\n text-decoration: none;\n user-select: none;\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 width: var(--bw, fit-content);\n}\n\n.btn:not(.disabled) {\n cursor: pointer;\n}\n\n.btn.disabled {\n pointer-events: none;\n}\n\n.btn-default {\n //default variant=primary; default color=default\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.btn-secondary-default {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorOcean500;\n border: 1px solid 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-default {\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n\n.btn-danger {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed500;\n border-color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n.btn-secondary-danger {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorRed500;\n border: 1px solid tokens.$ifxColorRed500;\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-danger {\n //combination tertiary + danger not in design\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-inverse {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n opacity: tokens.$ifxOpacity100;\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorOcean500;\n pointer-events: none;\n }\n}\n\n.btn-secondary-inverse {\n color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n border: 1px solid tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n\n.btn-tertiary-inverse {\n color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorBaseWhite;\n opacity: tokens.$ifxOpacity100;\n pointer-events: none;\n\n }\n}\n\n.btn {\n & ifx-icon:empty {\n display: none;\n }\n\n &.btn-xs {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize400;\n line-height: tokens.$ifxLineHeightXs;\n }\n\n &.btn-s {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize450;\n line-height: tokens.$ifxLineHeightS;\n }\n\n // &.btn-m { //default\n // font-size: tokens.$ifxFontSizeM;\n // height: tokens.$ifxSize400;\n // line-height: tokens.$ifxLineHeightM;\n // }\n\n\n &.btn-l {\n font-size: tokens.$ifxFontSizeXl;\n height: tokens.$ifxSize600;\n line-height: tokens.$ifxLineHeightXl;\n }\n\n\n\n &.btn-default: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 }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary-default: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 color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary:not(:disabled, .disabled) {\n\n &:hover {\n background-color: tokens.$ifxColorBerry500;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorBerry500;\n }\n }\n\n\n\n &.btn-danger: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.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n &.btn-secondary-danger:not(:disabled, .disabled) {\n\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 color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n\n &.btn-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.btn-secondary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n\n\n &.btn-tertiary-default: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.$ifxColorOcean600;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean700;\n }\n\n\n }\n\n\n\n\n\n &.btn-tertiary-danger: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.$ifxColorRed600;\n }\n\n &:hover {\n color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorRed700;\n }\n\n }\n\n\n &.btn-tertiary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorEngineering200;\n\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorEngineering300;\n }\n }\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport classNames from 'classnames';\n \n@Component({\n tag: 'ifx-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class Button {\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\n @Prop() size: string = 'm';\n @Prop() disabled: boolean = false;\n @State() internalHref: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n @Prop() fullWidth: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Element() el;\n\n private focusableElement: HTMLElement;\n private nativeButton: HTMLButtonElement \| HTMLInputElement;\n\n @Watch('href')\n setInternalHref(newValue: string) {\n this.internalHref = newValue;\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n insertNativeButton() {\n this.nativeButton = document.createElement('button');\n this.nativeButton.type = this.type;\n this.nativeButton.style.display = 'none';\n this.el.closest('form').appendChild(this.nativeButton);\n }\n\n handleFormAndInternalHref() {\n if (this.el.closest('form')) {\n if (this.el.href) {\n this.el.internalHref = undefined;\n }\n this.insertNativeButton()\n } else {\n this.internalHref = this.href;\n }\n }\n\n handleButtonWidth() {\n if (this.fullWidth) {\n this.el.style.setProperty('--bw', '100%');\n } else {\n this.el.style.setProperty('--bw', 'fit-content');\n }\n }\n\n componentWillLoad() {\n this.handleFormAndInternalHref()\n if(!isNestedInIfxComponent(this.el)) { \n trackComponent('ifx-button')\n }\n }\n\n componentWillRender() {\n this.handleButtonWidth()\n }\n\n\n\n handleClick = (ev: Event) => {\n if (this.el.shadowRoot) {\n const parentForm = this.el.closest('form');\n if (parentForm) {\n ev.preventDefault();\n\n if (this.type === 'reset') {\n // If the button type is 'reset', manually reset all custom form fields\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n } else {\n const fakeButton = document.createElement('button');\n if (this.type) {\n fakeButton.type = this.type;\n }\n fakeButton.style.display = 'none';\n parentForm.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n }\n\n resetClickHandler() {\n const formElement = this.el.closest('form');\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n customElements.forEach(element => {\n element.reset();\n });\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ( ev.key === \" \" \|\| ev.key === 'Enter' && !this.disabled) {\n this.focusableElement.click();\n }\n }\n\n @Listen('click', { capture: true })\n handleHostClick(event: Event) {\n if (this.disabled === true) {\n event.stopImmediatePropagation();\n }\n }\n\n handleFocus(event: FocusEvent) {\n if (this.disabled) {\n event.preventDefault();\n this.focusableElement.blur();\n }\n }\n\n render() {\n return (\n <Host>\n <a\n role={this.href ? 'link' : 'button'}\n tabIndex={this.disabled ? -1 : 0}\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.internalHref : undefined}\n target={this.target}\n onClick={this.handleClick}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n onFocus={(event) => this.handleFocus(event)}\n aria-disabled={this.disabled ? 'true' : null}\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n aria-label={this.ariaLabel \|\| undefined}\n >\n <slot></slot>\n </a>\n </Host>\n );\n }\n\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary-${this.theme}`\n : `${this.variant}` === 'tertiary'\n ? `tertiary-${this.theme}`\n : `${this.theme}`;\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',\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"],"version":3}