npm - @infineon/infineon-design-system-stencil - Versions diffs - 37.4.1--canary.1962.c00a2d4858f461c2fcd54b47fafdce0348329889.0 → 37.4.1--canary.1962.b7d8ef9ebfd6ebfa169ce05a1ae77ed7feccc9c3.0 - Mend

@infineon/infineon-design-system-stencil 37.4.1--canary.1962.c00a2d4858f461c2fcd54b47fafdce0348329889.0 → 37.4.1--canary.1962.b7d8ef9ebfd6ebfa169ce05a1ae77ed7feccc9c3.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 (295) hide show

package/dist/components/{p-01eb3f5a.js.map → p-06bcab30.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-01eb3f5a.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n display: var(--_ifx-fallback-display);\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0,0,0,0) !important;\n border: 0 !important;\n }\n\n.radioButton__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n cursor: pointer;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.m .radioButton__wrapper {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n\n .radioButton__wrapper {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n position: relative;\n display: block;\n border-radius: 50%;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n\n &:focus {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n }\n\n .radioButton__wrapper-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #0A8276;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: tokens.$ifxColorBaseTransparent;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n\n &.error {\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n &.checked {\n border-color: #0A8276;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: #0A8276;\n border-radius: 50%;\n }\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n\n &:hover {\n border-color: tokens.$ifxColorOcean600;\n\n & .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorOcean600;\n }\n }\n\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border-color: #BFBBBB;\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n & .radioButton__wrapper-mark {\n background-color: #BFBBBB;\n }\n }\n &.error::after {\n border-color: #CD002F;\n background-color: #CD002F;\n }\n }\n\n &.error:not(.disabled) {\n border-color: #CD002F;\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n .label {\n display: flex;\n align-items: center;\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n\n\n\n &:hover {\n cursor: pointer;\n }\n }\n}\n\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: true,\n formAssociated: true\n})\nexport class RadioButton {\n @Element() el: HTMLElement;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop({ reflect: true }) size: \"s\" \| \"m\" = \"s\";\n @Prop({ reflect: true }) name: string;\n @Prop({ mutable: true }) checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = false;\n\n private inputElement: HTMLInputElement;\n private internals: ElementInternals;\n private fallbackInput: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n componentWillLoad() {\n // Fallback for form association\n this.fallbackInput = document.createElement('input');\n this.fallbackInput.type = 'radio';\n this.fallbackInput.hidden = true;\n this.fallbackInput.className = '_ifx-radiobutton-fallback';\n this.fallbackInput.style.cssText = `\n display: none !important;\n position: absolute !important;\n opacity: 0 !important;\n pointer-events: none !important;\n width: 0 !important;\n height: 0 !important;\n `;\n this.fallbackInput.setAttribute('aria-hidden', 'true');\n this.fallbackInput.tabIndex = -1;\n this.el.appendChild(this.fallbackInput);\n\n // Initialize ElementInternals if supported\n if ('attachInternals' in HTMLElement.prototype) {\n try {\n this.internals = this.el.attachInternals();\n } catch (e) {\n console.warn('ElementInternals not supported');\n }\n }\n\n // Initial state\n this.internalChecked = this.checked \|\| false;\n this.hasSlot = !!this.el.querySelector('[slot]') \|\| this.el.innerHTML.trim() !== '';\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-radio-button', await framework)\n }\n }\n\n @Watch('checked')\n handleCheckedChange(newValue: boolean) {\n this.internalChecked = newValue;\n }\n\n @Watch('internalChecked')\n updateFormValue() {\n // Update both ElementInternals and fallback input\n if (this.internals?.setFormValue) {\n this.internals.setFormValue(this.internalChecked ? this.value : null);\n }\n this.fallbackInput.checked = this.internalChecked;\n this.fallbackInput.name = this.name;\n this.fallbackInput.value = this.value;\n this.fallbackInput.disabled = this.disabled;\n }\n\n @Watch('error')\n errorChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.ifxError.emit(newValue);\n }\n }\n\n handleRadioButtonClick(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.checked = this.internalChecked;\n this.ifxChange.emit(this.internalChecked);\n\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.internalChecked }\n });\n this.el.dispatchEvent(changeEvent);\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ([' ', 'Enter'].includes(ev.key)) {\n ev.preventDefault();\n this.handleRadioButtonClick(new PointerEvent('click'));\n }\n }\n\n @Listen('change', { target: 'document' })\n handleExternalChange(event: Event) {\n const target = event.target as HTMLElement;\n if (target === this.el \|\| target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n \n if (target.getAttribute('name') === this.name) {\n this.internalChecked = false;\n }\n }\n\n render() {\n return (\n <div\n role=\"radio\"\n aria-checked={String(this.internalChecked)}\n aria-disabled={String(this.disabled)}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={(e) => this.handleRadioButtonClick(e)}\n tabindex={this.disabled ? -1 : 0}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.disabled ? 'disabled' : ''} \n ${this.error ? 'error' : ''}`}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n\n <input\n type=\"radio\"\n hidden\n ref={el => this.inputElement = el}\n name={this.name}\n value={this.value}\n checked={this.internalChecked}\n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n );\n }\n}"],"version":3}
1	+ {"file":"p-06bcab30.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n display: var(--_ifx-fallback-display);\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0,0,0,0) !important;\n border: 0 !important;\n }\n\n.radioButton__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n cursor: pointer;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.m .radioButton__wrapper {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n\n .radioButton__wrapper {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n position: relative;\n display: block;\n border-radius: 50%;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n\n &:focus {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n }\n\n .radioButton__wrapper-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #0A8276;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: tokens.$ifxColorBaseTransparent;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n\n &.error {\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n &.checked {\n border-color: #0A8276;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: #0A8276;\n border-radius: 50%;\n }\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n\n &:hover {\n border-color: tokens.$ifxColorOcean600;\n\n & .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorOcean600;\n }\n }\n\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border-color: #BFBBBB;\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n & .radioButton__wrapper-mark {\n background-color: #BFBBBB;\n }\n }\n &.error::after {\n border-color: #CD002F;\n background-color: #CD002F;\n }\n }\n\n &.error:not(.disabled) {\n border-color: #CD002F;\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n .label {\n display: flex;\n align-items: center;\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n\n\n\n &:hover {\n cursor: pointer;\n }\n }\n}\n\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: true,\n formAssociated: true\n})\nexport class RadioButton {\n @Element() el: HTMLElement;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop({ reflect: true }) size: \"s\" \| \"m\" = \"s\";\n @Prop({ reflect: true }) name: string;\n @Prop({ mutable: true }) checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = false;\n\n private inputElement: HTMLInputElement;\n private internals: ElementInternals;\n private fallbackInput: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n componentWillLoad() {\n // Fallback for form association\n this.fallbackInput = document.createElement('input');\n this.fallbackInput.type = 'radio';\n this.fallbackInput.hidden = true;\n this.fallbackInput.className = '_ifx-radiobutton-fallback';\n this.fallbackInput.style.cssText = `\n display: none !important;\n position: absolute !important;\n opacity: 0 !important;\n pointer-events: none !important;\n width: 0 !important;\n height: 0 !important;\n `;\n this.fallbackInput.setAttribute('aria-hidden', 'true');\n this.fallbackInput.tabIndex = -1;\n this.el.appendChild(this.fallbackInput);\n\n // Initialize ElementInternals if supported\n if ('attachInternals' in HTMLElement.prototype) {\n try {\n this.internals = this.el.attachInternals();\n } catch (e) {\n console.warn('ElementInternals not supported');\n }\n }\n\n // Initial state\n this.internalChecked = this.checked \|\| false;\n this.hasSlot = !!this.el.querySelector('[slot]') \|\| this.el.innerHTML.trim() !== '';\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-radio-button', await framework)\n }\n }\n\n @Watch('checked')\n handleCheckedChange(newValue: boolean) {\n this.internalChecked = newValue;\n }\n\n @Watch('internalChecked')\n updateFormValue() {\n // Update both ElementInternals and fallback input\n if (this.internals?.setFormValue) {\n this.internals.setFormValue(this.internalChecked ? this.value : null);\n }\n this.fallbackInput.checked = this.internalChecked;\n this.fallbackInput.name = this.name;\n this.fallbackInput.value = this.value;\n this.fallbackInput.disabled = this.disabled;\n }\n\n @Watch('error')\n errorChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.ifxError.emit(newValue);\n }\n }\n\n handleRadioButtonClick(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.checked = this.internalChecked;\n this.ifxChange.emit(this.internalChecked);\n\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.internalChecked }\n });\n this.el.dispatchEvent(changeEvent);\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ([' ', 'Enter'].includes(ev.key)) {\n ev.preventDefault();\n this.handleRadioButtonClick(new PointerEvent('click'));\n }\n }\n\n @Listen('change', { target: 'document' })\n handleExternalChange(event: Event) {\n const target = event.target as HTMLElement;\n if (target === this.el \|\| target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n \n if (target.getAttribute('name') === this.name) {\n this.internalChecked = false;\n }\n }\n\n render() {\n return (\n <div\n role=\"radio\"\n aria-checked={String(this.internalChecked)}\n aria-disabled={String(this.disabled)}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={(e) => this.handleRadioButtonClick(e)}\n tabindex={this.disabled ? -1 : 0}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.disabled ? 'disabled' : ''} \n ${this.error ? 'error' : ''}`}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n\n <input\n type=\"radio\"\n hidden\n ref={el => this.inputElement = el}\n name={this.name}\n value={this.value}\n checked={this.internalChecked}\n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n );\n }\n}"],"version":3}

package/dist/components/{p-acbfa625.js → p-1f6a8baa.js} RENAMED Viewed

@@ -93,11 +93,11 @@ const detectFramework = async () => {
         frameworkCache = 'Storybook';
         return frameworkCache;
     }
-    const isLocalhost = ['localhost', '127.0.0.1'].includes(win.location.hostname);
-    if (isLocalhost) {
-        frameworkCache = 'localhost';
-        return frameworkCache;
-    }
+    // const isLocalhost = ['localhost', '127.0.0.1'].includes(win.location.hostname);
+    // if (isLocalhost) {
+    //   frameworkCache = 'localhost';
+    //   return frameworkCache;
+    // }
     try {
         // 1. First check sync-safe framework indicators
         if (win.React || win.ReactDOM) {
@@ -152,4 +152,4 @@ const detectFramework = async () => {
 export { detectFramework as d, trackComponent as t };
-//# sourceMappingURL=p-acbfa625.js.map
+//# sourceMappingURL=p-1f6a8baa.js.map

package/dist/components/p-1f6a8baa.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-1f6a8baa.js","mappings":"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","names":[],"sources":["src/global/utils/tracking.ts","src/global/utils/dom-ready.ts","src/global/utils/framework-detection.ts"],"sourcesContent":["declare global {\n interface Window {\n btntConfig?: any;\n btntQueue?: any[];\n btnt?: (data: object) => void;\n }\n}\n\nconst isTestEnvironment = typeof process !== 'undefined' &&\n process.env &&\n process.env.NODE_ENV === 'test';\n\nfunction initializeTracking() {\n if (isTestEnvironment) {\n if (!window.btnt) { \n window.btnt = () => { };\n }\n return;\n }\n\n (function (t, r, _kk, n, pp) {\n if (typeof window.btntConfig !== \"object\") {\n window.btntConfig = {\n domain: \"https://ssgtm.infineon.com\",\n withCookies: true,\n maxBatchSize: 10\n };\n }\n\n if (window[\"btnt\"]) return;\n\n window[\"btnt\"] = function (z) {\n if (typeof z !== \"object\") {\n z = {};\n }\n if (typeof window.btntQueue !== \"object\") {\n window.btntQueue = [];\n }\n window.btntQueue.push(z);\n };\n\n n = t.createElement(r);\n\n // Add safety check for test environments\n pp = t.getElementsByTagName(r)[0];\n if (pp && pp.parentNode) {\n n.async = 1;\n n.src = window.btntConfig.domain + \"/btnt.js\";\n pp.parentNode.insertBefore(n, pp);\n }\n })(document, \"script\");\n}\n\nexport function trackComponent(componentName: string, environment: string) {\n const skipEnvironments = ['jest', 'error'];\n if (skipEnvironments.includes(environment)) {\n return;\n }\n\n if (!window.btnt) initializeTracking();\n\n window.btnt({\n event_name: \"component_initialized\",\n component_name: componentName,\n environment: environment\n });\n}\n\nexport default trackComponent;","export const waitForDOMReady = (): Promise<void> => {\n return new Promise((resolve) => {\n if (document.readyState === 'complete' || document.readyState === 'interactive') {\n resolve();\n } else {\n const onReady = () => {\n resolve();\n document.removeEventListener('DOMContentLoaded', onReady);\n };\n document.addEventListener('DOMContentLoaded', onReady);\n }\n });\n};","// framework-detection.ts\nlet frameworkCache: string | null = null;\nimport { waitForDOMReady } from './dom-ready';\n\nexport const detectFramework = async (): Promise<string> => {\n if (frameworkCache) return frameworkCache;\n \n // Check for non-browser environments\n if (typeof window === 'undefined' || typeof document === 'undefined') {\n frameworkCache = 'non-browser';\n return frameworkCache;\n }\n\n const win = window as any;\n const doc = document;\n\n // Detect environments that don't need DOM\n const isJest = typeof process !== 'undefined' && \n process.env && \n process.env.NODE_ENV === 'test';\n if (isJest) {\n frameworkCache = 'jest';\n return frameworkCache;\n }\n\n const isStorybook = win.location.search.includes('viewMode') || \n win.location.href.includes('viewMode') ||\n win.__STORYBOOK_ENV__;\n \n if (isStorybook) {\n frameworkCache = 'Storybook';\n return frameworkCache;\n }\n\n // const isLocalhost = ['localhost', '127.0.0.1'].includes(win.location.hostname);\n // if (isLocalhost) {\n // frameworkCache = 'localhost';\n // return frameworkCache;\n // }\n\n try {\n // 1. First check sync-safe framework indicators\n if (win.React || win.ReactDOM) {\n frameworkCache = 'React';\n return frameworkCache;\n }\n \n if (win.ng || win.getAllAngularRootElements) {\n frameworkCache = 'Angular';\n return frameworkCache;\n }\n \n if (win.Vue || win.__VUE__) {\n frameworkCache = 'Vue';\n return frameworkCache;\n }\n\n // 2. Wait for DOM to be ready for DOM-based detection\n await waitForDOMReady();\n\n // 3. Now perform DOM-based framework detection\n // React DOM checks\n const reactRoot = doc.querySelector('[data-reactroot], [data-reactid]');\n if (reactRoot) {\n frameworkCache = 'React';\n return frameworkCache;\n }\n \n const rootContainers = Array.from(doc.querySelectorAll('body > div'));\n const hasReactRoot = rootContainers.some(container => {\n const keys = Object.keys(container);\n return keys.some(key => key.startsWith('__reactContainer'));\n });\n \n if (hasReactRoot) {\n frameworkCache = 'React';\n return frameworkCache;\n }\n \n // Angular DOM checks\n if (doc.querySelector('[ng-version], [ng-app]')) {\n frameworkCache = 'Angular';\n return frameworkCache;\n }\n \n // Vue DOM check\n if (doc.querySelector('[data-v-app]')) {\n frameworkCache = 'Vue';\n return frameworkCache;\n }\n\n // Default to Vanilla\n frameworkCache = 'Vanilla';\n return frameworkCache;\n } catch (e) {\n frameworkCache = 'error';\n return frameworkCache;\n }\n};"],"version":3}

package/dist/components/{p-212b675c.js → p-3ba01839.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$1 } from './p-cd30bb7d.js';
+import { d as defineCustomElement$1 } from './p-fe2152fc.js';
 const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
 const IfxAccordionItemStyle0 = accordionItemCss;
@@ -116,4 +116,4 @@ function defineCustomElement() {
 export { IfxAccordionItem as I, defineCustomElement as d };
-//# sourceMappingURL=p-212b675c.js.map
+//# sourceMappingURL=p-3ba01839.js.map

package/dist/components/{p-212b675c.js.map → p-3ba01839.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~212b675c~~.js","mappings":"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","names":[],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// 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":"p-3ba01839.js","mappings":"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","names":[],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// 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/components/{p-02917273.js → p-41818b03.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$5 } from './p-646c0aee.js';
-import { d as defineCustomElement$4 } from './p-cd30bb7d.js';
-import { d as defineCustomElement$3 } from './p-cb975b94.js';
-import { d as defineCustomElement$2 } from './p-a8af9b7b.js';
-import { d as defineCustomElement$1 } from './p-f611e5d5.js';
+import { d as defineCustomElement$5 } from './p-ef6801dd.js';
+import { d as defineCustomElement$4 } from './p-fe2152fc.js';
+import { d as defineCustomElement$3 } from './p-6ef9eb10.js';
+import { d as defineCustomElement$2 } from './p-45b4df2f.js';
+import { d as defineCustomElement$1 } from './p-805d4bab.js';
 const templateCss = ".react__template-wrapper{display:flex;width:300px;height:200px;border-radius:3px;border:1px solid #ccc}.react__template-wrapper.hide{display:none}.react__template-wrapper:hover{cursor:pointer}.template__page-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.template__page-wrapper .repository__url{text-decoration:none}.input__fields-wrapper{display:flex;flex-direction:column;gap:10px}.details__wrapper{display:flex;flex-direction:column;gap:10px}.selection__buttons-wrapper{display:flex;gap:10px;padding-top:10px;align-items:center}.selection__buttons-wrapper .vue__label{color:#ccc}.selection__buttons-wrapper label:not(.vue__label):hover{cursor:pointer}.selection__buttons-wrapper .selection__input{display:flex;align-items:center;gap:5px}.selection__buttons-wrapper .selection__input input{margin:0;height:20px;width:20px}.selection__buttons-wrapper .selection__input input:hover:not(.vue__input){cursor:pointer}.image__wrapper img{position:relative;width:300px;height:100%;border-radius:3px;object-fit:contain;transition:transform 0.2s}.image__wrapper img:hover{transform:scale(2);top:50px;z-index:100}";
 const IfxTemplateStyle0 = templateCss;
@@ -204,4 +204,4 @@ function defineCustomElement() {
 export { Template as T, defineCustomElement as d };
-//# sourceMappingURL=p-02917273.js.map
+//# sourceMappingURL=p-41818b03.js.map

package/dist/components/{p-02917273.js.map → p-41818b03.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-02917273.js","mappings":"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","names":[],"sources":["src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["\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":"p-41818b03.js","mappings":"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","names":[],"sources":["src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["\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/components/{p-a8af9b7b.js → p-45b4df2f.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
-import { d as detectFramework, t as trackComponent } from './p-acbfa625.js';
+import { d as detectFramework, t as trackComponent } from './p-1f6a8baa.js';
 import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
 import { c as classNames } from './p-5cdc6210.js';
@@ -54,4 +54,4 @@ function defineCustomElement() {
 export { Spinner as S, defineCustomElement as d };
-//# sourceMappingURL=p-a8af9b7b.js.map
+//# sourceMappingURL=p-45b4df2f.js.map

package/dist/components/{p-a8af9b7b.js.map → p-45b4df2f.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~a8af9b7b~~.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,mvBAAmvB,CAAC;AACvwB,yBAAe,UAAU;;MCUZ,OAAO;IALpB;;;;QASU,aAAQ,GAAY,KAAK,CAAC;KAqCnC;IAnCC,MAAM,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,aAAa,EAAE,MAAM,SAAS,CAAC,CAAA;SAC/C;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,sCAAsC,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAChF,4DAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,GAAQ,EACnG,IAAI,CAAC,OAAO,KAAK,OAAO;eACpB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE,IACtF,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,0DAAG,EAAE,EAAC,mBAAmB,IACvB,6DAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,GAAG,CAC3wC,CACA,CACF,CACJ,EACN;KACH;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;cACzB,GAAG;cACH,EAAE,CAAC;KACR;IAED,aAAa;QACX,OAAO,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n\n}\n\n.spinner {\n position: relative;\n width: tokens.$ifxSize500;\n height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n}\n\n.border {\n box-sizing: border-box;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 4px solid transparent;\n border-top-color: tokens.$ifxColorOcean500;\n border-left-color: tokens.$ifxColorOcean500;\n border-right-color: tokens.$ifxColorOcean500;\n border-top-left-radius: 1px;\n border-top-right-radius: 1px;\n border-radius: 50%;\n animation: spin 2s linear infinite;\n\n &.inverted {\n border-top-color: tokens.$ifxColorBaseWhite;\n border-left-color: tokens.$ifxColorBaseWhite;\n border-right-color: tokens.$ifxColorBaseWhite;\n }\n}\n\n.semiconductor {\n width: 100%;\n height: 100%;\n animation: spin 2s linear infinite;\n\n & svg {\n fill: tokens.$ifxColorOcean500;\n }\n\n &.inverted {\n & svg {\n fill: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.s {\n & svg {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n }\n}\n\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n tag: 'ifx-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() el;\n @Prop() size: string;\n @Prop() variant: string;\n @Prop() inverted: boolean = false;\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-spinner', await framework)\n }\n }\n\n render() {\n return (\n <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n {this.variant === 'brand'\n && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"spinner/conductor\">\n <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n </g>\n </svg>\n </div>}\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"s\"\n : \"\";\n }\n\n getClassNames() {\n return classNames(\n 'spinner',\n this.size && `spinner ${this.getSizeClass()}`\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-45b4df2f.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,mvBAAmvB,CAAC;AACvwB,yBAAe,UAAU;;MCUZ,OAAO;IALpB;;;;QASU,aAAQ,GAAY,KAAK,CAAC;KAqCnC;IAnCC,MAAM,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,aAAa,EAAE,MAAM,SAAS,CAAC,CAAA;SAC/C;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,sCAAsC,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAChF,4DAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,GAAQ,EACnG,IAAI,CAAC,OAAO,KAAK,OAAO;eACpB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE,IACtF,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,0DAAG,EAAE,EAAC,mBAAmB,IACvB,6DAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,GAAG,CAC3wC,CACA,CACF,CACJ,EACN;KACH;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;cACzB,GAAG;cACH,EAAE,CAAC;KACR;IAED,aAAa;QACX,OAAO,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n\n}\n\n.spinner {\n position: relative;\n width: tokens.$ifxSize500;\n height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n}\n\n.border {\n box-sizing: border-box;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 4px solid transparent;\n border-top-color: tokens.$ifxColorOcean500;\n border-left-color: tokens.$ifxColorOcean500;\n border-right-color: tokens.$ifxColorOcean500;\n border-top-left-radius: 1px;\n border-top-right-radius: 1px;\n border-radius: 50%;\n animation: spin 2s linear infinite;\n\n &.inverted {\n border-top-color: tokens.$ifxColorBaseWhite;\n border-left-color: tokens.$ifxColorBaseWhite;\n border-right-color: tokens.$ifxColorBaseWhite;\n }\n}\n\n.semiconductor {\n width: 100%;\n height: 100%;\n animation: spin 2s linear infinite;\n\n & svg {\n fill: tokens.$ifxColorOcean500;\n }\n\n &.inverted {\n & svg {\n fill: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.s {\n & svg {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n }\n}\n\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n tag: 'ifx-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() el;\n @Prop() size: string;\n @Prop() variant: string;\n @Prop() inverted: boolean = false;\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-spinner', await framework)\n }\n }\n\n render() {\n return (\n <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n {this.variant === 'brand'\n && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"spinner/conductor\">\n <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n </g>\n </svg>\n </div>}\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"s\"\n : \"\";\n }\n\n getClassNames() {\n return classNames(\n 'spinner',\n this.size && `spinner ${this.getSizeClass()}`\n );\n }\n}\n"],"version":3}

package/dist/components/{p-6342e893.js → p-4b6e1516.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
-import { d as detectFramework, t as trackComponent } from './p-acbfa625.js';
+import { d as detectFramework, t as trackComponent } from './p-1f6a8baa.js';
 import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
 const progressBarCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex;width:100%}.progress-bar{height:16px;bottom:0;right:0;top:0;left:0;display:flex;height:20px;border-radius:1px;width:100%;overflow:hidden;background-color:#EEEDED;font-family:var(--ifx-font-family)}.progress-bar.s{height:4px}.progress-bar .label{font-style:normal;font-size:0.875rem;font-weight:400;line-height:1.25rem;color:#FFFFFF}.progress-bar .progress{display:flex;align-items:center;justify-content:center;min-width:fit-content;height:100%;background-color:#0A8276;transition:width 0.2s ease}";
@@ -59,4 +59,4 @@ function defineCustomElement() {
 export { ProgressBar as P, defineCustomElement as d };
-//# sourceMappingURL=p-6342e893.js.map
+//# sourceMappingURL=p-4b6e1516.js.map

package/dist/components/{p-6342e893.js.map → p-4b6e1516.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~6342e893~~.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,ukBAAukB,CAAC;AAC/lB,6BAAe,cAAc;;MCShB,WAAW;IALxB;;;;QAOU,UAAK,GAAW,CAAC,CAAC;QAElB,cAAS,GAAY,KAAK,CAAC;KA+BpC;IA1BC,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;SAC/B;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;KACjC;IAED,MAAM,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,kBAAkB,EAAE,MAAM,SAAS,CAAC,CAAA;SACpD;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,gBAAgB,gBAAa,IAAI,CAAC,KAAK,EAAG,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,EAAE,IAC1F,4DAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,EAAE,IAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,6DAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,aAAa,GAAG,CAAQ,CACrH,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n width: 100%;\n}\n\n.progress-bar {\n height: tokens.$ifxSize200;\n bottom: 0;\n right: 0;\n top: 0;\n left: 0;\n display: flex;\n height: tokens.$ifxSize250;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%; // Ensure the bar itself can grow up to 100% width\n overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n background-color: tokens.$ifxColorEngineering200;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n \n \n &.s {\n height: 4px;\n }\n\n .label {\n font-style: normal;\n font-size: tokens.$ifxFontSizeS;\n font-weight: 400;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseWhite;\n }\n \n .progress {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: fit-content;\n height: 100%;\n background-color: #0A8276;\n transition: width 0.2s ease;\n }\n}","import { Component, Prop, h, State, Watch, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true\n})\nexport class ProgressBar {\n @Element() el: HTMLElement;\n @Prop() value: number = 0;\n @Prop() size: string;\n @Prop() showLabel: boolean = false;\n\n @State() internalValue: number;\n\n @Watch('value')\n valueChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-progress-bar', await framework)\n }\n }\n\n render() {\n return (\n <div aria-label='a progress bar' aria-value={this.value} class={`progress-bar ${this.size}`}>\n <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-4b6e1516.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,ukBAAukB,CAAC;AAC/lB,6BAAe,cAAc;;MCShB,WAAW;IALxB;;;;QAOU,UAAK,GAAW,CAAC,CAAC;QAElB,cAAS,GAAY,KAAK,CAAC;KA+BpC;IA1BC,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;SAC/B;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;KACjC;IAED,MAAM,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,kBAAkB,EAAE,MAAM,SAAS,CAAC,CAAA;SACpD;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,gBAAgB,gBAAa,IAAI,CAAC,KAAK,EAAG,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,EAAE,IAC1F,4DAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,EAAE,IAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,6DAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,aAAa,GAAG,CAAQ,CACrH,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n width: 100%;\n}\n\n.progress-bar {\n height: tokens.$ifxSize200;\n bottom: 0;\n right: 0;\n top: 0;\n left: 0;\n display: flex;\n height: tokens.$ifxSize250;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%; // Ensure the bar itself can grow up to 100% width\n overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n background-color: tokens.$ifxColorEngineering200;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n \n \n &.s {\n height: 4px;\n }\n\n .label {\n font-style: normal;\n font-size: tokens.$ifxFontSizeS;\n font-weight: 400;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseWhite;\n }\n \n .progress {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: fit-content;\n height: 100%;\n background-color: #0A8276;\n transition: width 0.2s ease;\n }\n}","import { Component, Prop, h, State, Watch, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true\n})\nexport class ProgressBar {\n @Element() el: HTMLElement;\n @Prop() value: number = 0;\n @Prop() size: string;\n @Prop() showLabel: boolean = false;\n\n @State() internalValue: number;\n\n @Watch('value')\n valueChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-progress-bar', await framework)\n }\n }\n\n render() {\n return (\n <div aria-label='a progress bar' aria-value={this.value} class={`progress-bar ${this.size}`}>\n <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-4cbea59b.js → p-5e2d6dee.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as detectFramework, t as trackComponent } from './p-acbfa625.js';
+import { d as detectFramework, t as trackComponent } from './p-1f6a8baa.js';
 import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
-import { d as defineCustomElement$3 } from './p-e8357008.js';
-import { d as defineCustomElement$2 } from './p-cd30bb7d.js';
-import { d as defineCustomElement$1 } from './p-f347c4e9.js';
+import { d as defineCustomElement$3 } from './p-8d091a5d.js';
+import { d as defineCustomElement$2 } from './p-fe2152fc.js';
+import { d as defineCustomElement$1 } from './p-7fc63460.js';
 const multiselectCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.ifx-multiselect-container{position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{background-color:#FFFFFF;box-sizing:border-box;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;width:100%;font-weight:400;font-style:normal;height:40px;line-height:24px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-multiselect-container .ifx-multiselect-wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;display:flex;align-items:center;gap:8px}.ifx-multiselect-container .ifx-multiselect-icon-container .ifx-multiselect-icon-container{display:flex}.ifx-multiselect-container .ifx-multiselect-icon-container .icon-wrapper{display:flex;align-items:center;transition:transform 0.2s ease-in-out}.ifx-multiselect-container .ifx-multiselect-icon-container .icon-wrapper--open{transform:rotate(180deg)}.ifx-multiselect-container .ifx-clear-button{display:flex;align-items:center}.ifx-multiselect-container .ifx-clear-button.hide{display:none}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{box-sizing:border-box;position:absolute;top:100%;left:0;width:100%;margin-top:4px;border:1px solid #EEEDED;background-color:#fff;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);max-height:300px;z-index:1000;display:flex;flex-direction:column}.ifx-multiselect-dropdown-functions{padding:12px 16px;border-bottom:1px solid #EEEDED;flex-shrink:0}.ifx-multiselect-dropdown-search{margin-bottom:12px}.ifx-multiselect-dropdown-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}.ifx-multiselect-dropdown-controls .select-all-wrapper{display:flex}.ifx-multiselect-dropdown-controls .expand-collapse-controls{display:flex;gap:12px}.ifx-multiselect-dropdown-controls .control-item{font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-dropdown-controls .control-item:hover{color:#0A8276}.ifx-multiselect-dropdown-controls .control-item:active{color:#08665C}.ifx-multiselect-dropdown-controls .control-item:focus{outline:none}.ifx-multiselect-dropdown-controls .control-item:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.ifx-multiselect-options{flex:1;overflow-y:auto;padding-top:12px;padding-bottom:12px}.ifx-multiselect-options.show-no-results .ifx-multiselect-no-results{display:block}.ifx-multiselect-no-results{padding-left:16px;padding-right:16px;display:none}";
 const IfxMultiselectStyle0 = multiselectCss;
@@ -602,4 +602,4 @@ function defineCustomElement() {
 export { Multiselect as M, defineCustomElement as d };
-//# sourceMappingURL=p-4cbea59b.js.map
+//# sourceMappingURL=p-5e2d6dee.js.map