npm - @infineon/infineon-design-system-stencil - Versions diffs - 37.13.1--canary.1992.854aaf1c0bff5fdb0752d9b89b6e9e1a8f43bab6.0 → 37.13.1--canary.2001.c3b06ba3cc438de9e271efa72087b305440874f3.0 - Mend

@infineon/infineon-design-system-stencil 37.13.1--canary.1992.854aaf1c0bff5fdb0752d9b89b6e9e1a8f43bab6.0 → 37.13.1--canary.2001.c3b06ba3cc438de9e271efa72087b305440874f3.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 (514) hide show

package/dist/components/{p-DzKYXXbM.js.map → p-FczSL6gb.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-DzKYXXbM.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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-FczSL6gb.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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/esm/ifx-accordion_2.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement, c as createEvent } from './index-DS8meZSd.js';
+import { r as registerInstance, h, a as getElement, c as createEvent } from './index-PqnYwNKt.js';
 import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-PqnYwNKt.js';
 import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';
@@ -180,7 +180,7 @@ const Template = class {
         }
     }
     render() {
-        return (h("div", { key: 'ec20919e6bf9ccea999a652e81835b670a1d9886' }, this.isTemplatePage
+        return (h("div", { key: '1de8086432131979b1290ea28de6027cf52aa043' }, this.isTemplatePage
             ?
                 h("div", { class: "template__page-wrapper" }, !this.repoUrl && !this.repoError &&
                     h("div", null, h("h3", null, "Your repository is getting ready.."), h("p", null, "This will only take a minute.")), this.isLoading && !this.repoError && h("div", null, h("ifx-spinner", { variant: 'default', size: 's' })), this.repoUrl && h("ifx-link", { href: this.repoUrl, target: "_parent", size: "m", variant: "underlined" }, "Your repository"), this.repoError && h("div", null, this.repoError))

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, h, a as getElement } from './index-PqnYwNKt.js';
 import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, d as Host, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, h, d as Host, a as getElement } from './index-PqnYwNKt.js';
 import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';
 import { c as createGrid } from './main.esm-9UDg_bQZ.js';
@@ -185,7 +185,7 @@ const Table = class {
         return {};
     }
     render() {
-        return (h(Host, { key: '34400efe5c1c880342374899c3e635063c5723b6' }, h("div", { key: 'fb21c3c82ab81fa323decfcd3322b051e8c45f0d', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '757eb92f81dc40908e81c9f428e0ee29a08b438d', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: '5968712e3cbe5605b5128dc19997941d18d21ffc' }, h("div", { key: '8a39d36f4006095de577777bb8c31f2ba3b9a2ee', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '8dd8dfaa472da2cd56ade80f5105cdbebeb8013b', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/ifx-breadcrumb-item-label.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-PqnYwNKt.js';
 const breadcrumbItemLabelCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.breadcrumb-item-label-container{display:flex;align-items:center;gap:8px;text-decoration:none;color:#1D1D1D}.breadcrumb-item-label-container.margin{margin-left:16px}.breadcrumb-item-label-container ifx-icon:empty{display:none}.breadcrumb-item-label-container .label-icon-wrapper{display:inline-flex}.breadcrumb-item-label-container .menu-icon-wrapper{display:flex;justify-content:center;align-items:center;width:16px;height:16px}.breadcrumb-item-label-container .menu-icon-wrapper.hide{display:none}.breadcrumb-item-label-container .menu-icon-wrapper ifx-icon{transition:0.3s}.breadcrumb-item-label-container .menu-icon-wrapper.show ifx-icon{transition:0.3s;transform:rotate(180deg)}";

package/dist/esm/ifx-breadcrumb-item.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, h, a as getElement } from './index-PqnYwNKt.js';
 const breadcrumbItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.breadcrumb-parent{display:flex;flex-direction:row;align-items:center;padding:0px;gap:12px;min-height:24px;justify-content:center}.breadcrumb-parent:hover{cursor:pointer}.breadcrumb-parent .breadcrumb-wrapper{display:flex;flex-direction:row;align-items:center;padding:0px;gap:8px;position:relative}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu{display:none;position:absolute;top:20px}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu.open{display:block}.breadcrumb-parent .breadcrumb-wrapper a{text-decoration:none;color:#1D1D1D;font-family:var(--ifx-font-family);font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;display:flex;align-items:center;color:#1D1D1D;flex-direction:column;justify-content:center;padding:0px;border-bottom:1px solid #1D1D1D}.breadcrumb-parent .breadcrumb-divider{width:10px;height:16px;color:#EEEDED;line-height:13px;font-size:1.25rem;margin-right:12px}";

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, h, a as getElement } from './index-PqnYwNKt.js';
 import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, d as Host, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, h, d as Host, a as getElement } from './index-PqnYwNKt.js';
 import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';
 import { c as classNames } from './index-Bt32KzDW.js';

package/dist/esm/ifx-card-headline.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, h, a as getElement } from './index-PqnYwNKt.js';
 const cardHeadlineCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{pointer-events:none}.card__headline-wrapper{padding-bottom:16px}.card__headline-wrapper.withDesc{padding-bottom:8px}.card-headline{margin-top:0;padding-top:0;font-family:var(--ifx-font-family);font-weight:600;font-size:1.5rem;line-height:2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.card-headline.horizontal{font-size:1.25rem;line-height:28px}";

package/dist/esm/ifx-card-image.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DS8meZSd.js';
+import { r as registerInstance, c as createEvent, h } from './index-PqnYwNKt.js';
 const cardImageCss = ".card-image{width:100%;height:100%;vertical-align:bottom;object-fit:cover}";

package/dist/esm/ifx-card-links.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, h, a as getElement } from './index-PqnYwNKt.js';
 const cardLinksCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.container{display:flex;align-items:center;gap:20px;flex-wrap:wrap;text-decoration:none;color:#1D1D1D;padding:0px 24px 24px 24px;word-wrap:break-word;overflow-wrap:anywhere;}.container:hover{cursor:initial}";

package/dist/esm/ifx-card-overline.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DS8meZSd.js';
+import { r as registerInstance, h } from './index-PqnYwNKt.js';
 const cardOverlineCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{pointer-events:none}.card-overline{font-size:1rem;font-weight:400;color:#575352;padding-bottom:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all}";

package/dist/esm/ifx-card-text.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, h, a as getElement } from './index-PqnYwNKt.js';
 const cardTextCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{pointer-events:none}.card__text-wrapper{padding-bottom:0px}.card__text-wrapper.hasBtn{padding-bottom:16px}.card-text{line-height:1.5rem;font-size:1rem;font-weight:400;white-space:wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}";

package/dist/esm/ifx-card.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, d as Host, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, h, d as Host, a as getElement } from './index-PqnYwNKt.js';
 import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';

package/dist/esm/ifx-checkbox-group.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, h, a as getElement } from './index-PqnYwNKt.js';
 import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';
@@ -52,9 +52,8 @@ const CheckboxGroup = class {
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (h("div", { key: '77bd90dcf5a408a2191657ef2c681a0c8a679121', class: 'checkbox-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: '44ab6cd77004041bd792398258db2c322dfe8253', class: `checkbox-group ${this.alignment} ${this.size}` }, h("slot", { key: '0bf6ef77d1f7d2fa6213f47e7aa4b9e11787b33e', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
+        return (h("div", { key: 'f1c957d705b04f680397343a4004ada8ed5a96e5', class: 'checkbox-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: 'ba635baf256c0639bdd69c505e9ce9090751e9d7', class: `checkbox-group ${this.alignment} ${this.size}` }, h("slot", { key: '2816a84975bf51e49bc02da860438399b486065f', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
     }
-    static get formAssociated() { return true; }
     get el() { return getElement(this); }
 };
 CheckboxGroup.style = checkboxGroupCss;

package/dist/esm/ifx-checkbox-group.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-checkbox-group.entry.js","sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n display: flex;\n flex-direction: column;\n}\n\n.checkbox-group {\n display: flex;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n gap: tokens.$ifxSpace100;\n\n &.horizontal {\n flex-direction: row;\n column-gap: tokens.$ifxSpace150;\n }\n\n &.vertical {\n flex-direction: column;\n row-gap: tokens.$ifxSpace150;\n }\n}\n\n.group-label {\n font: tokens.$ifxBodyBody05;\n margin-bottom: tokens.$ifxSpace100;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption {\n margin-top: tokens.$ifxSpace100;\n align-self: flex-start;\n display: flex;\n width: 100%;\n column-gap: tokens.$ifxSpace100;\n justify-content: space-between;\n align-items: center;\n\n &.default {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n}\n\n.caption-text {\n font: tokens.$ifxBodyBody05;\n flex: 1;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n flex:0;\n display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } 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-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class CheckboxGroup {\n private errorStates: Map<HTMLElement, boolean> = new Map();\n\n @Element() el: HTMLElement;\n @Prop() alignment: 'horizontal' \| 'vertical' = 'vertical';\n @Prop() size: string;\n @Prop() showGroupLabel: boolean;\n @Prop() groupLabelText: string = 'Group Label Text';\n @Prop() showCaption: boolean;\n @Prop() captionText: string;\n @Prop() showCaptionIcon: boolean;\n @State() hasErrors: boolean = false;\n\n @Listen('ifxError')\n handleCheckboxError(event: CustomEvent) {\n const checkbox = event.target as HTMLElement;\n if (checkbox.tagName === 'ifx-checkbox') {\n this.errorStates.set(checkbox, event.detail);\n this.updateHasErrors();\n }\n }\n\n // Method to set the error state of all checkboxes in the group\n @Method()\n async setGroupError(error: boolean) {\n const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n checkboxes.forEach((checkbox) => {\n (checkbox as any).error = error;\n });\n }\n\n componentWillLoad() {\n this.initializeState();\n\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-checkbox-group', await framework)\n }\n }\n\n handleSlotChange = () => {\n this.initializeState();\n };\n\n private initializeState() {\n this.errorStates.clear();\n const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n checkboxes.forEach((checkbox) => {\n if (!this.errorStates.has(checkbox)) {\n this.errorStates.set(checkbox, (checkbox as any).error \|\| false);\n }\n });\n this.updateHasErrors();\n }\n\n private updateHasErrors() {\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n }\n\n render() {\n return (\n <div class='checkbox-group-container'>\n {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n {this.showCaption ? (\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n </ifx-icon></div> : ''}\n <div class='caption-text'>{this.captionText}</div>\n </div>) : ''}\n </div>\n );\n }\n}"],"names":[],"mappings":"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~~;;;;;;;;;~~"}
1	+ {"version":3,"file":"ifx-checkbox-group.entry.js","sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n display: flex;\n flex-direction: column;\n}\n\n.checkbox-group {\n display: flex;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n gap: tokens.$ifxSpace100;\n\n &.horizontal {\n flex-direction: row;\n column-gap: tokens.$ifxSpace150;\n }\n\n &.vertical {\n flex-direction: column;\n row-gap: tokens.$ifxSpace150;\n }\n}\n\n.group-label {\n font: tokens.$ifxBodyBody05;\n margin-bottom: tokens.$ifxSpace100;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption {\n margin-top: tokens.$ifxSpace100;\n align-self: flex-start;\n display: flex;\n width: 100%;\n column-gap: tokens.$ifxSpace100;\n justify-content: space-between;\n align-items: center;\n\n &.default {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n}\n\n.caption-text {\n font: tokens.$ifxBodyBody05;\n flex: 1;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n flex:0;\n display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } 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-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n shadow: true,\n // formAssociated: true\n})\n\nexport class CheckboxGroup {\n private errorStates: Map<HTMLElement, boolean> = new Map();\n\n @Element() el: HTMLElement;\n @Prop() alignment: 'horizontal' \| 'vertical' = 'vertical';\n @Prop() size: string;\n @Prop() showGroupLabel: boolean;\n @Prop() groupLabelText: string = 'Group Label Text';\n @Prop() showCaption: boolean;\n @Prop() captionText: string;\n @Prop() showCaptionIcon: boolean;\n @State() hasErrors: boolean = false;\n\n @Listen('ifxError')\n handleCheckboxError(event: CustomEvent) {\n const checkbox = event.target as HTMLElement;\n if (checkbox.tagName === 'ifx-checkbox') {\n this.errorStates.set(checkbox, event.detail);\n this.updateHasErrors();\n }\n }\n\n // Method to set the error state of all checkboxes in the group\n @Method()\n async setGroupError(error: boolean) {\n const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n checkboxes.forEach((checkbox) => {\n (checkbox as any).error = error;\n });\n }\n\n componentWillLoad() {\n this.initializeState();\n\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-checkbox-group', await framework)\n }\n }\n\n handleSlotChange = () => {\n this.initializeState();\n };\n\n private initializeState() {\n this.errorStates.clear();\n const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n checkboxes.forEach((checkbox) => {\n if (!this.errorStates.has(checkbox)) {\n this.errorStates.set(checkbox, (checkbox as any).error \|\| false);\n }\n });\n this.updateHasErrors();\n }\n\n private updateHasErrors() {\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n }\n\n render() {\n return (\n <div class='checkbox-group-container'>\n {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n {this.showCaption ? (\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n </ifx-icon></div> : ''}\n <div class='caption-text'>{this.captionText}</div>\n </div>) : ''}\n </div>\n );\n }\n}"],"names":[],"mappings":"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"}

package/dist/esm/ifx-checkbox.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-PqnYwNKt.js';
 import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';
@@ -112,14 +112,13 @@ const Checkbox = class {
         if (slot) {
             hasSlot = true;
         }
-        return (h("div", { key: 'ad3f5b5236edec26d95ded95bff1598add784e1d', class: "checkbox__container" }, h("input", { key: 'a770120fc2d4875f83ebc69591a08b81d597b974', type: "checkbox", hidden: true, ref: (el) => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), id: 'checkbox', value: `${this.value}`, disabled: this.disabled ? true : undefined }), h("div", { key: '23ebbab8d28a1c580d59bb26f36e9e1fce74ba71', tabindex: "0", onClick: this.handleCheckbox.bind(this), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.internalChecked.toString(), "aria-disabled": this.disabled, "aria-labelledby": "label", class: `checkbox__wrapper
+        return (h("div", { key: 'a67da39d9304270a9d48f20d35a31d976110b887', class: "checkbox__container" }, h("input", { key: 'aa679a25b2743d3db3570482473398f882ac93ee', type: "checkbox", hidden: true, ref: (el) => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), id: 'checkbox', value: `${this.value}`, disabled: this.disabled ? true : undefined }), h("div", { key: '8d12109dc5bd547a8a7ed21b3c95c72f4594b53b', tabindex: "0", onClick: this.handleCheckbox.bind(this), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.internalChecked.toString(), "aria-disabled": this.disabled, "aria-labelledby": "label", class: `checkbox__wrapper
           ${this.getCheckedClassName()}
         ${this.size === "m" ? "checkbox-m" : ""}
         ${this.indeterminate ? 'indeterminate' : ""}
-        ${this.disabled ? 'disabled' : ""}` }, this.internalChecked && !this.internalIndeterminate && h("ifx-icon", { key: '9d0c09e3bb628d56fd3db343b586978a1a013cba', icon: "check-16", "aria-hidden": "true" })), hasSlot &&
-            h("div", { key: '16bc14feec06817e7863496c35551435bc0a866f', id: "label", class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ""} `, onClick: this.handleCheckbox.bind(this) }, h("slot", { key: '195f6d076a4d573ec64e7234c4f0618330af416d' }))));
+        ${this.disabled ? 'disabled' : ""}` }, this.internalChecked && !this.internalIndeterminate && h("ifx-icon", { key: 'ec86c0a37faaa003c3aad1944b33dbc49406939f', icon: "check-16", "aria-hidden": "true" })), hasSlot &&
+            h("div", { key: 'c8c8a727aeb2f3ef9990f9f6327ff0c875323100', id: "label", class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ""} `, onClick: this.handleCheckbox.bind(this) }, h("slot", { key: 'b4afc8d4286b055d90c9c6624d2f47e59ed324ae' }))));
     }
-    static get formAssociated() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
         "checked": ["valueChanged"],

package/dist/esm/ifx-checkbox.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-checkbox.entry.js","sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-flex;\n vertical-align: top;\n}\n\n.checkbox__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: top;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n font-family: tokens.$ifxFontFamilyBody;\n vertical-align: bottom;\n\n & .checkbox__wrapper {\n box-sizing: border-box;\n display: flex;\n position: relative; //needs to be added for the indeterminate state of the checkbox\n justify-content: center;\n align-items: center;\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n align-self: flex-start;\n\n &.checkbox-m {\n height: tokens.$ifxSize300;\n width: tokens.$ifxSize300;\n }\n\n &.error {\n border-color: #CD002F;\n }\n\n &:focus-visible {\n border: 1px solid #575352;\n outline: 2px solid #0A8276;\n outline-offset: 2px;\n }\n\n &:hover {\n background-color: #EEEDED;\n border: 1px solid #575352;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.checked:not(.indeterminate) {\n background-color: #0A8276;\n border-radius: tokens.$ifxBorderRadius12;\n border-color: tokens.$ifxColorBaseTransparent;\n flex: none;\n order: 0;\n flex-grow: 0;\n color: tokens.$ifxColorBaseWhite;\n\n &.error {\n background-color: #CD002F;\n }\n\n &:focus-visible {\n border: 1px solid transparent;\n outline: 2px solid #0A8276;\n outline-offset: 2px;\n }\n\n &:hover {\n background-color: #08665C;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.disabled {\n background: #BFBBBB;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n }\n\n &.indeterminate {\n &:before {\n content: \"\";\n display: block;\n width: 70%; // Adjust as needed for the width of the minus sign\n height: 2px; // Adjust for thickness of the minus sign\n background-color: #08665C; // Color of the minus sign\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n\n }\n\n & .label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-all;\n max-width: 100%;\n\n &.label-m {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n }\n\n & .checkbox__wrapper,\n & .label {\n &:hover {\n cursor: pointer;\n }\n }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } 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-checkbox',\n styleUrl: 'checkbox.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class Checkbox {\n private inputElement: HTMLInputElement;\n\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() checked: boolean = false;\n @Prop() error: boolean = false;\n @Prop() size: string = 'm';\n @Prop() indeterminate: boolean = false;\n @Prop() value: string;\n @State() internalChecked: boolean;\n @State() internalIndeterminate: boolean;\n\n @AttachInternals() internals: ElementInternals;\n\n @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxError: EventEmitter;\n\n handleCheckbox() {\n if (!this.disabled) {\n if (!this.inputElement.indeterminate) {\n this.internalChecked = !this.internalChecked;\n } \n if (this.internalChecked && !this.internalIndeterminate) {\n if (this.value !== undefined) {\n this.internals.setFormValue(this.value);\n } else {\n this.internals.setFormValue(\"on\")\n }\n } else {\n this.internals.setFormValue(null)\n }\n this.ifxChange.emit(this.internalChecked);\n }\n }\n\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n\n @Method()\n async toggleCheckedState(newVal: boolean) {\n this.internalChecked = newVal;\n }\n\n @Watch('checked')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalChecked = newValue;\n this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n }\n }\n\n @Watch('error')\n errorChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.ifxError.emit(newValue);\n }\n }\n\n @Watch('indeterminate')\n indeterminateChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalIndeterminate = newValue;\n this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n }\n }\n\n handleKeydown(event) {\n // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n if (event.keyCode === 32 \|\| event.keyCode === 13) {\n this.handleCheckbox();\n event.preventDefault(); // prevent the default action when space or enter is pressed\n }\n }\n\n componentWillLoad() {\n this.internalChecked = this.checked;\n this.internalIndeterminate = this.indeterminate;\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-checkbox', await framework)\n }\n }\n\n componentDidRender() {\n this.inputElement.indeterminate = this.internalIndeterminate;\n }\n\n /*\n Callback for form association.\n * Called whenever the form is reset.\n */\n formResetCallback() {\n this.internals.setFormValue(null);\n }\n\n getCheckedClassName() {\n if (this.error) {\n if (this.internalChecked) {\n return \"checked error\"\n } else {\n return \"error\"\n }\n } else if (this.internalChecked) {\n return \"checked\";\n } else return \"\"\n }\n\n render() {\n const slot = this.el.innerHTML;\n let hasSlot = false;\n if (slot) {\n hasSlot = true;\n }\n return (\n <div class=\"checkbox__container\">\n <input\n type=\"checkbox\"\n hidden\n ref={(el) => (this.inputElement = el)}\n checked={this.internalChecked}\n onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n id='checkbox'\n value={`${this.value}`}\n disabled={this.disabled ? true : undefined}\n />\n <div\n tabindex=\"0\"\n onClick={this.handleCheckbox.bind(this)}\n onKeyDown={this.handleKeydown.bind(this)}\n role=\"checkbox\"\n aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n aria-disabled={this.disabled}\n aria-labelledby=\"label\"\n class={`checkbox__wrapper \n ${this.getCheckedClassName()}\n ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n ${this.indeterminate ? 'indeterminate' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n >\n {this.internalChecked && !this.internalIndeterminate && <ifx-icon icon=\"check-16\" aria-hidden=\"true\"></ifx-icon>}\n </div>\n {hasSlot &&\n <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n <slot />\n </div>}\n </div>\n );\n }\n}"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ifx-checkbox.entry.js","sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-flex;\n vertical-align: top;\n}\n\n.checkbox__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: top;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n font-family: tokens.$ifxFontFamilyBody;\n vertical-align: bottom;\n\n & .checkbox__wrapper {\n box-sizing: border-box;\n display: flex;\n position: relative; //needs to be added for the indeterminate state of the checkbox\n justify-content: center;\n align-items: center;\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n align-self: flex-start;\n\n &.checkbox-m {\n height: tokens.$ifxSize300;\n width: tokens.$ifxSize300;\n }\n\n &.error {\n border-color: #CD002F;\n }\n\n &:focus-visible {\n border: 1px solid #575352;\n outline: 2px solid #0A8276;\n outline-offset: 2px;\n }\n\n &:hover {\n background-color: #EEEDED;\n border: 1px solid #575352;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.checked:not(.indeterminate) {\n background-color: #0A8276;\n border-radius: tokens.$ifxBorderRadius12;\n border-color: tokens.$ifxColorBaseTransparent;\n flex: none;\n order: 0;\n flex-grow: 0;\n color: tokens.$ifxColorBaseWhite;\n\n &.error {\n background-color: #CD002F;\n }\n\n &:focus-visible {\n border: 1px solid transparent;\n outline: 2px solid #0A8276;\n outline-offset: 2px;\n }\n\n &:hover {\n background-color: #08665C;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.disabled {\n background: #BFBBBB;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n }\n\n &.indeterminate {\n &:before {\n content: \"\";\n display: block;\n width: 70%; // Adjust as needed for the width of the minus sign\n height: 2px; // Adjust for thickness of the minus sign\n background-color: #08665C; // Color of the minus sign\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n\n }\n\n & .label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-all;\n max-width: 100%;\n\n &.label-m {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n }\n\n & .checkbox__wrapper,\n & .label {\n &:hover {\n cursor: pointer;\n }\n }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } 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-checkbox',\n styleUrl: 'checkbox.scss',\n shadow: true,\n // formAssociated: true\n})\n\nexport class Checkbox {\n private inputElement: HTMLInputElement;\n\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() checked: boolean = false;\n @Prop() error: boolean = false;\n @Prop() size: string = 'm';\n @Prop() indeterminate: boolean = false;\n @Prop() value: string;\n @State() internalChecked: boolean;\n @State() internalIndeterminate: boolean;\n\n @AttachInternals() internals: ElementInternals;\n\n @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxError: EventEmitter;\n\n handleCheckbox() {\n if (!this.disabled) {\n if (!this.inputElement.indeterminate) {\n this.internalChecked = !this.internalChecked;\n } \n if (this.internalChecked && !this.internalIndeterminate) {\n if (this.value !== undefined) {\n this.internals.setFormValue(this.value);\n } else {\n this.internals.setFormValue(\"on\")\n }\n } else {\n this.internals.setFormValue(null)\n }\n this.ifxChange.emit(this.internalChecked);\n }\n }\n\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n\n @Method()\n async toggleCheckedState(newVal: boolean) {\n this.internalChecked = newVal;\n }\n\n @Watch('checked')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalChecked = newValue;\n this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n }\n }\n\n @Watch('error')\n errorChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.ifxError.emit(newValue);\n }\n }\n\n @Watch('indeterminate')\n indeterminateChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalIndeterminate = newValue;\n this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n }\n }\n\n handleKeydown(event) {\n // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n if (event.keyCode === 32 \|\| event.keyCode === 13) {\n this.handleCheckbox();\n event.preventDefault(); // prevent the default action when space or enter is pressed\n }\n }\n\n componentWillLoad() {\n this.internalChecked = this.checked;\n this.internalIndeterminate = this.indeterminate;\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-checkbox', await framework)\n }\n }\n\n componentDidRender() {\n this.inputElement.indeterminate = this.internalIndeterminate;\n }\n\n /*\n Callback for form association.\n * Called whenever the form is reset.\n */\n formResetCallback() {\n this.internals.setFormValue(null);\n }\n\n getCheckedClassName() {\n if (this.error) {\n if (this.internalChecked) {\n return \"checked error\"\n } else {\n return \"error\"\n }\n } else if (this.internalChecked) {\n return \"checked\";\n } else return \"\"\n }\n\n render() {\n const slot = this.el.innerHTML;\n let hasSlot = false;\n if (slot) {\n hasSlot = true;\n }\n return (\n <div class=\"checkbox__container\">\n <input\n type=\"checkbox\"\n hidden\n ref={(el) => (this.inputElement = el)}\n checked={this.internalChecked}\n onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n id='checkbox'\n value={`${this.value}`}\n disabled={this.disabled ? true : undefined}\n />\n <div\n tabindex=\"0\"\n onClick={this.handleCheckbox.bind(this)}\n onKeyDown={this.handleKeydown.bind(this)}\n role=\"checkbox\"\n aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n aria-disabled={this.disabled}\n aria-labelledby=\"label\"\n class={`checkbox__wrapper \n ${this.getCheckedClassName()}\n ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n ${this.indeterminate ? 'indeterminate' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n >\n {this.internalChecked && !this.internalIndeterminate && <ifx-icon icon=\"check-16\" aria-hidden=\"true\"></ifx-icon>}\n </div>\n {hasSlot &&\n <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n <slot />\n </div>}\n </div>\n );\n }\n}"],"names":[],"mappings":"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"}

package/dist/esm/ifx-chip_3.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-PqnYwNKt.js';
 import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';
@@ -521,7 +521,7 @@ const Pagination = class {
         this.initPagination();
     }
     render() {
-        return (h("div", { key: '53528d8b99d54e1cb531df3bda2f0f4e02bb3213', class: "container" }, h("div", { key: '00c5d1e5a1509a51e5fa02cf2f8e1b5f2b095751', class: "items__per-page-wrapper" }, h("div", { key: '3893bc77a6494e39d8bdc8e55d7bebcd936d3d36', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '56702ab091d1f9d2023585fecf1f86886ec47abc', class: "items__per-page-field" }, h("ifx-select", { key: '031d0f4c1f95ffe5d412202fe6e0f913de53ef44', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("div", { key: 'e6b15e4e54ea714fd027856d9615d24da92b36c0', class: "items__total-wrapper" }, h("div", { key: '265bae882f374eae6a929c184e9e1f0ae4bf314e', class: "pagination" }, h("ifx-icon-button", { key: '6b3e5ca222fcabac9cb53f0bb18cf647f8c3f990', class: "prev", icon: "arrow-left-16", onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: '6553669f669211ce25086f339a3ff69f52311b19' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: '50bc552d0aea8086d3d783a8a043fcaae3459633', class: "next", icon: "arrow-right-16", onClick: () => this.changePage(this.internalPage + 1) })))));
+        return (h("div", { key: '14f71cd0291d0b01d3b9da91ecec8d3908796107', class: "container" }, h("div", { key: 'd28f3b1a05cd937eec0efa30b661c1e5671542d3', class: "items__per-page-wrapper" }, h("div", { key: '504286b0c1d4d1a77e283612389e2f0a98f76ce3', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '61fb210192777dc3ebf7810f0d311eae2abd3dc3', class: "items__per-page-field" }, h("ifx-select", { key: 'a576ef3d2ee4feb8d9f04550fa08e0a75fdafc07', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("div", { key: '72e40aa84cb9ba69cb4fcbe8d057cf8c6067ac13', class: "items__total-wrapper" }, h("div", { key: 'bf3777a0d9c82cda57125b8bab4a1cdb49f1cfb2', class: "pagination" }, h("ifx-icon-button", { key: 'bcda07cf867ee60e5896d853709b244d2cf4d3ad', class: "prev", icon: "arrow-left-16", onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: 'b3b9929e2a05c15aae434b3749dc748a46491cb4' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: '719da5df49fe092465e856c43e72d187fc7231a5', class: "next", icon: "arrow-right-16", onClick: () => this.changePage(this.internalPage + 1) })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ifx-content-switcher-item.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, d as Host } from './index-DS8meZSd.js';
+import { r as registerInstance, h, d as Host } from './index-PqnYwNKt.js';
 const contentSwitcherItemCss = ".ifx-content-switcher-item{all:unset;height:36px;box-sizing:border-box;border-radius:9999px;border:3px solid transparent;padding:7px 20px;font-family:var(--ifx-font-family);font-weight:600;font-size:14px;line-height:20px;display:flex;justify-content:center;align-items:center;gap:8px;background-color:transparent}.ifx-content-switcher-item.selected{color:#0A8276;background-color:#FFFFFF;border:3px solid #0A8276}.ifx-content-switcher-item:hover{color:#08665C;background-color:#FFFFFF;border:3px solid #08665C;cursor:pointer}.ifx-content-switcher-item:active{color:#08665C;background-color:#FFFFFF;border:3px solid #06534B}.ifx-content-switcher-item:focus{color:#08665C;background-color:#FFFFFF;border:3px solid #08665C}";

package/dist/esm/ifx-content-switcher.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, d as Host, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, c as createEvent, h, d as Host, a as getElement } from './index-PqnYwNKt.js';
 import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';

package/dist/esm/ifx-date-picker.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-PqnYwNKt.js';
 import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';
@@ -104,10 +104,9 @@ const DatePicker = class {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '8d3bfdd4743d5144833debbe94cb30bd20966a98', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '1fbe22181d8d00cf7317cca89cd883c6e1e47ecd', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.trim(), h("span", { key: 'ec01400bff6f4271872df983ce91eeadc22860c0', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: '4aef97a8aee85c37ee8f45b0f0477ec42f3e4be1', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: 'a17ade597c95037de72253eafb4f733165e38327', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: '0b631c87185e97379384dc3d00a3e8c04f5b1015', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: 'c571bb59048fa89a3d43628e02928f504db5180c', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '47a3032adcbd7bbd7f4722eebae9c91a1a1d166b', class: 'caption__wrapper' }, this.caption.trim()))));
+        return (h("div", { key: '54939ec686f17c6f9d5a77d2c578947707254f1e', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '96190d8cd34abb294455693c106e06e99c44b14d', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.trim(), h("span", { key: '43b00aab35d90f6022af42a0fffc9f8ef3750a6b', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: '9077684afde83eadd4ba777a62f30d2b5ba35146', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '7e2aa162dad9c942adc3abf52aa684d485bb0015', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: 'd2f342fc05ecdf7f8c43fec285b2b2b4c3efc99d', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: 'aa7b6906751018c0cad1e43ee0f86aa426dad285', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'bb91a4936b8db806bf3176e95429e7b434c92c1d', class: 'caption__wrapper' }, this.caption.trim()))));
     }
-    static get formAssociated() { return true; }
     get el() { return getElement(this); }
 };
 let datePickerId = 0;

package/dist/esm/ifx-date-picker.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-date-picker.entry.js","sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n display: flex;\n flex-direction: column;\n\n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n\n & .asterisk { \n display: none;\n &.required {\n display: inline;\n margin-left: 4px;\n \n &.error {\n color: #CD002F;\n }\n }\n }\n\n }\n\n &.disabled {\n .label__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.error {\n .caption__wrapper {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled {\n .caption__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .caption__wrapper {\n margin-top: tokens.$ifxSpace50;\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody05;\n }\n}\n\n.date__picker-input {\n font-family: 'Source Sans 3';\n outline: none;\n width: 100%;\n cursor: pointer;\n border-radius: 1px;\n border: 1px solid tokens.$ifxColorEngineering400;\n height: 100%;\n\n &.firefox__classes {\n padding: 8px 16px;\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n cursor: pointer;\n }\n\n &:focus:not(.error, .success) {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &:disabled {\n border-color: tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.error {\n border-color: tokens.$ifxColorRed500;\n }\n\n &.success:not(.error) {\n border-color: tokens.$ifxColorGreen500;\n }\n\n &::-webkit-datetime-edit-text {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n &.has-value::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.has-value::-webkit-datetime-edit {\n color: tokens.$ifxColorBaseBlack;\n }\n}\n\n::-webkit-datetime-edit {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n padding: 8px 16px;\n padding-bottom: 9px;\n transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n position: absolute;\n right: 15px;\n font-size: 19px;\n cursor: pointer;\n border-radius: 1px;\n &:focus-within {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n}\n\n.input__wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n background: tokens.$ifxColorBaseWhite;\n position: relative;\n &.large {\n height: 40px;\n }\n\n &.small {\n height: 36px;\n }\n\n &.disabled {\n & .icon__wrapper {\n background-color: tokens.$ifxColorEngineering200;\n }\n }\n}\n\n.icon__wrapper {\n position: absolute;\n right: 17px;\n padding: 2px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n z-index: 100;\n background-color: tokens.$ifxColorBaseWhite;\n line-height: 16px;\n\n & ifx-icon {\n vertical-align: middle;\n }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } 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-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n formAssociated: true,\n})\n\nexport class DatePicker {\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n @Element() el: HTMLElement;\n @Prop() size: string = 's';\n @Prop() error: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Prop() value: string;\n @Prop() type: string = 'date'\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\n @Prop() autocomplete: string = 'on';\n\n @AttachInternals() internals: ElementInternals;\n\n @Event() ifxDate: EventEmitter;\n\n getDate(e) { \n const inputValue = e.target.value;\n const selectedDate = new Date(inputValue);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1; \n const year = selectedDate.getFullYear();\n\n \n \n if (!inputValue) {\n this.internals.setFormValue(null);\n\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year});\n }\n return;\n }\n\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n input.classList.add('has-value');\n\n this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year})\n }\n }\n\n handleInputFocusOnIconClick() { \n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n if(input) { \n input.focus()\n }\n }\n\n getBrowser() {\n if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n return \"Chrome\";\n } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n return \"Opera\";\n } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n return \"IE\";\n } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n return \"Firefox\";\n } else {\n return \"unknown\";\n }\n }\n\n setFireFoxClasses() { \n const browser = this.getBrowser()\n const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n if(browser === 'Firefox') { \n input.classList.add('firefox__classes')\n } else if(input.classList.contains('firefox__classes')) { \n input.classList.remove('firefox__classes')\n }\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-date-picker', await framework)\n }\n this.setFireFoxClasses()\n }\n\n componentWillUpdate() { \n if (this.value) {\n this.getDate({ target: { value: this.value } });\n }\n }\n\n formResetCallback() {\n this.internals.setFormValue(null);\n }\n\n render() {\n return (\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n <label class='label__wrapper' htmlFor={ this.inputId }>\n { this.label?.trim() }\n <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type={this.type}\n autocomplete={this.autocomplete}\n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error ? true : undefined}\n aria-label={this.ariaLabel}\n max={this.max}\n min={this.min}\n value={this.value}\n required={this.required}\n onChange={(e) => this.getDate(e)} />\n <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n </div>\n </div>\n\n { this.caption?.trim() && (\n <div class='caption__wrapper'>\n { this.caption.trim() }\n </div> \n )}\n </div>\n )\n }\n}\n\nlet datePickerId = 0;"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ifx-date-picker.entry.js","sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n display: flex;\n flex-direction: column;\n\n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n\n & .asterisk { \n display: none;\n &.required {\n display: inline;\n margin-left: 4px;\n \n &.error {\n color: #CD002F;\n }\n }\n }\n\n }\n\n &.disabled {\n .label__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.error {\n .caption__wrapper {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled {\n .caption__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .caption__wrapper {\n margin-top: tokens.$ifxSpace50;\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody05;\n }\n}\n\n.date__picker-input {\n font-family: 'Source Sans 3';\n outline: none;\n width: 100%;\n cursor: pointer;\n border-radius: 1px;\n border: 1px solid tokens.$ifxColorEngineering400;\n height: 100%;\n\n &.firefox__classes {\n padding: 8px 16px;\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n cursor: pointer;\n }\n\n &:focus:not(.error, .success) {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &:disabled {\n border-color: tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.error {\n border-color: tokens.$ifxColorRed500;\n }\n\n &.success:not(.error) {\n border-color: tokens.$ifxColorGreen500;\n }\n\n &::-webkit-datetime-edit-text {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n &.has-value::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.has-value::-webkit-datetime-edit {\n color: tokens.$ifxColorBaseBlack;\n }\n}\n\n::-webkit-datetime-edit {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n padding: 8px 16px;\n padding-bottom: 9px;\n transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n position: absolute;\n right: 15px;\n font-size: 19px;\n cursor: pointer;\n border-radius: 1px;\n &:focus-within {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n}\n\n.input__wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n background: tokens.$ifxColorBaseWhite;\n position: relative;\n &.large {\n height: 40px;\n }\n\n &.small {\n height: 36px;\n }\n\n &.disabled {\n & .icon__wrapper {\n background-color: tokens.$ifxColorEngineering200;\n }\n }\n}\n\n.icon__wrapper {\n position: absolute;\n right: 17px;\n padding: 2px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n z-index: 100;\n background-color: tokens.$ifxColorBaseWhite;\n line-height: 16px;\n\n & ifx-icon {\n vertical-align: middle;\n }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } 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-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n // formAssociated: true,\n})\n\nexport class DatePicker {\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n @Element() el: HTMLElement;\n @Prop() size: string = 's';\n @Prop() error: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Prop() value: string;\n @Prop() type: string = 'date'\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\n @Prop() autocomplete: string = 'on';\n\n @AttachInternals() internals: ElementInternals;\n\n @Event() ifxDate: EventEmitter;\n\n getDate(e) { \n const inputValue = e.target.value;\n const selectedDate = new Date(inputValue);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1; \n const year = selectedDate.getFullYear();\n\n \n \n if (!inputValue) {\n this.internals.setFormValue(null);\n\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year});\n }\n return;\n }\n\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n input.classList.add('has-value');\n\n this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year})\n }\n }\n\n handleInputFocusOnIconClick() { \n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n if(input) { \n input.focus()\n }\n }\n\n getBrowser() {\n if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n return \"Chrome\";\n } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n return \"Opera\";\n } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n return \"IE\";\n } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n return \"Firefox\";\n } else {\n return \"unknown\";\n }\n }\n\n setFireFoxClasses() { \n const browser = this.getBrowser()\n const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n if(browser === 'Firefox') { \n input.classList.add('firefox__classes')\n } else if(input.classList.contains('firefox__classes')) { \n input.classList.remove('firefox__classes')\n }\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-date-picker', await framework)\n }\n this.setFireFoxClasses()\n }\n\n componentWillUpdate() { \n if (this.value) {\n this.getDate({ target: { value: this.value } });\n }\n }\n\n formResetCallback() {\n this.internals.setFormValue(null);\n }\n\n render() {\n return (\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n <label class='label__wrapper' htmlFor={ this.inputId }>\n { this.label?.trim() }\n <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type={this.type}\n autocomplete={this.autocomplete}\n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error ? true : undefined}\n aria-label={this.ariaLabel}\n max={this.max}\n min={this.min}\n value={this.value}\n required={this.required}\n onChange={(e) => this.getDate(e)} />\n <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n </div>\n </div>\n\n { this.caption?.trim() && (\n <div class='caption__wrapper'>\n { this.caption.trim() }\n </div> \n )}\n </div>\n )\n }\n}\n\nlet datePickerId = 0;"],"names":[],"mappings":"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"}

package/dist/esm/ifx-download.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DS8meZSd.js';
+import { r as registerInstance, h } from './index-PqnYwNKt.js';
 const downloadCss = "";

package/dist/esm/ifx-dropdown-header.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DS8meZSd.js';
+import { r as registerInstance, h } from './index-PqnYwNKt.js';
 const dropdownHeaderCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.dropdown-header{display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid #EEEDED;font-family:var(--ifx-font-family)}.dropdown-header span{color:#575352;font-family:var(--ifx-font-family);font-size:14px;font-style:normal;font-weight:400;line-height:20px;}";

package/dist/esm/ifx-dropdown-item.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-PqnYwNKt.js';
 const dropdownItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.dropdown-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.dropdown-item:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.dropdown-item.hide{display:none}.dropdown-item span{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px;}.dropdown-item.small span{font-size:14px}.dropdown-item:hover{cursor:pointer;background-color:#EEEDED}.dropdown-item:active{background-color:#BFBBBB}.icon{margin-right:4px}";

package/dist/esm/ifx-dropdown-menu.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-PqnYwNKt.js';
 const dropdownMenuCss = ":host{position:relative;z-index:1000}.dropdown-menu{display:none;visibility:hidden;flex-direction:column;width:224px;max-height:289px;min-width:224px;overflow-y:auto;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 4px;font-family:var(--ifx-font-family)}.dropdown-menu.small{max-height:266px;max-width:186px;overflow-y:auto}.dropdown-menu.hideTopPadding{padding-top:0px}.dropdown-menu.show{display:flex;visibility:visible}";

package/dist/esm/ifx-dropdown-separator.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DS8meZSd.js';
+import { r as registerInstance, h } from './index-PqnYwNKt.js';
 const dropdownSeparatorCss = ".dropdown-separator{height:1px;background-color:#EEEDED;margin:8px 16px}";

package/dist/esm/ifx-dropdown-trigger-button.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DS8meZSd.js';
+import { r as registerInstance, h } from './index-PqnYwNKt.js';
 const dropdownTriggerButtonCss = ":host{display:inline-block}.rotate{transition:transform 0.2s ease-in-out;transform:rotate(-180deg);margin-top:0em}.icon{margin-top:0em;transition:transform 0.2s ease-in-out}";

package/dist/esm/ifx-dropdown-trigger.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DS8meZSd.js';
+import { r as registerInstance, h } from './index-PqnYwNKt.js';
 const dropdownTriggerCss = ":host{display:inline-block;cursor:pointer}";

package/dist/esm/ifx-dropdown.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DS8meZSd.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-PqnYwNKt.js';
 import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';
 import { c as createPopper } from './popper-BfP9ezJQ.js';

package/dist/esm/ifx-faq.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DS8meZSd.js';
+import { r as registerInstance, h } from './index-PqnYwNKt.js';
 const faqCss = ".container{padding-top:10px}";
@@ -7,7 +7,7 @@ const Faq = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: 'fb2f01442e711c7c093de4b086666ab0b8840455', class: 'container' }, h("ifx-accordion", { key: '238c4362584d6d805e77f28e46cb60f7bf74f40a' }, h("ifx-accordion-item", { key: '56a08731afe003d2128833a0d2b223a82c8df1e9', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: '7b5409c5b499293f133b53cc02ca614b7c5798da', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: '44051921338ddea5ccda24361fe09b6c1206ed54', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: '49e4d3f84d046ce6cce87b83ec5a1b9149fbc6b2', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: 'f0df51ad76c2d8f2c27c22e7d032114487414596', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+        return (h("div", { key: '225fe6a1692f8b6475e3cda101eb192cf3f51de6', class: 'container' }, h("ifx-accordion", { key: '1df94194f6d4e1a897650005b7e9f71f4a6148a4' }, h("ifx-accordion-item", { key: 'ec8ff8d9e0004611ef5c21c93394f93078797e3f', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: '376d2e11e1d93d8ef048317e98a7e927964febd5', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: '55ef07d5c96ebb72fc3c5d28b460940f7fc71296', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: '87a51df79c2fa1b846ddfeb338cc33cc9a4a0a3f', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: '3d445ccf2d8b3b148e969ee2f12b416844754aec', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
     }
 };
 Faq.style = faqCss;