@infineon/infineon-design-system-stencil 30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0 → 30.9.3--canary.1496.5f10a070333a6cd6bc76a2fe783f876b1ca9ba74.0

package/dist/collection/components/templates/template/template.js

@@ -0,0 +1,267 @@
+import { h } from "@stencil/core";
+export class Template {
+    constructor() {
+        this.repoDetails = { name: "", desc: "", framework: "" };
+        this.repoUrl = undefined;
+        this.showDetails = false;
+        this.isTemplatePage = false;
+        this.isLoading = true;
+        this.repoError = undefined;
+        this.name = undefined;
+        this.thumbnail = undefined;
+    }
+    authUser() {
+        const clientId = process.env.CLIENT_ID;
+        const redirectUri = 'http://localhost:6262/?path=/docs/dds-templates--development';
+        const scope = process.env.SCOPE;
+        const state = process.env.STATE;
+        const authorizationUrl = `https://github.com/login/oauth/authorize?` +
+            `client_id=${clientId}&` +
+            `redirect_uri=${redirectUri}&` +
+            `scope=${scope}&` +
+            `state=${state}`;
+        window.open(authorizationUrl, '_blank');
+    }
+    componentDidLoad() {
+        const url = new URL(window.location.href);
+        const code = url.searchParams.get('code');
+        const { templateName } = this.getLocalStorageValues();
+        if (code && this.name === templateName) {
+            this.isTemplatePage = true;
+            this.toggleTemplates.emit('details');
+            this.getUserToken(code);
+        }
+    }
+    getLocalStorageValues() {
+        const repoName = localStorage.getItem('repo_name');
+        const repoDesc = localStorage.getItem('repo_desc');
+        const repoFramework = localStorage.getItem('repo_framework');
+        const templateName = localStorage.getItem('selectedTemplate');
+        return { repoName, repoDesc, repoFramework, templateName };
+    }
+    async getUserToken(authCode) {
+        const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();
+        fetch(`http://localhost:5000/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)
+            .then(response => {
+            if (response.ok) {
+                return response.text();
+            }
+            else {
+                return response.text().then(errorMessage => {
+                    throw new Error(errorMessage);
+                });
+            }
+        })
+            .then(data => {
+            if (data) {
+                this.isLoading = false;
+                this.repoUrl = data;
+                localStorage.clear();
+            }
+        })
+            .catch(error => {
+            this.repoError = error.message;
+            console.error('Error:', error.message);
+        });
+    }
+    handleUserInput(e, type) {
+        if (type === 'name') {
+            this.repoDetails = Object.assign(Object.assign({}, this.repoDetails), { name: e.target.value });
+        }
+        else if (type === 'desc') {
+            this.repoDetails = Object.assign(Object.assign({}, this.repoDetails), { desc: e.target.value });
+        }
+        else if (type === 'framework') {
+            this.repoDetails = Object.assign(Object.assign({}, this.repoDetails), { framework: e.target.value });
+        }
+    }
+    submitUserData() {
+        if (this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) {
+            localStorage.setItem('repo_name', this.repoDetails.name);
+            localStorage.setItem('repo_desc', this.repoDetails.desc);
+            localStorage.setItem('repo_framework', this.repoDetails.framework);
+            localStorage.setItem('selectedTemplate', this.name);
+            this.fieldError.emit(false);
+            this.authUser();
+        }
+        else {
+            this.fieldError.emit('All fields are mandatory');
+        }
+    }
+    togglePadding(action) {
+        let parent = this.el.parentElement;
+        if (parent) {
+            const rootNode = parent.getRootNode();
+            if (rootNode instanceof ShadowRoot) {
+                parent = rootNode.host.parentElement;
+            }
+            else {
+                parent = parent.parentElement;
+            }
+            if (action === 'remove') {
+                parent.parentElement.style.padding = '0px';
+            }
+            else if (action === 'add') {
+                parent.parentElement.style.padding = '4rem 20px';
+            }
+        }
+    }
+    handleCurrentTemplate(e) {
+        if (e && !this.showDetails) {
+            this.togglePadding('remove');
+            const targetTemplate = e.currentTarget;
+            this.toggleTemplates.emit(targetTemplate);
+            this.showDetails = true;
+        }
+    }
+    async toggleTemplate(currTemp) {
+        const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');
+        if (templateWrapper) {
+            if (!templateWrapper.classList.contains('hide') && currTemp) {
+                if (templateWrapper !== currTemp) {
+                    templateWrapper.classList.add('hide');
+                }
+            }
+            else {
+                if (this.showDetails) {
+                    this.showDetails = false;
+                }
+                this.togglePadding('add');
+                templateWrapper.classList.remove('hide');
+            }
+        }
+    }
+    render() {
+        return (h("div", { key: '781dff66aaf60c77f87db01e88a76937bd56d4f5' }, 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))
+            :
+                h("div", { class: "react__template-container" }, h("div", { class: "react__template-wrapper", onClick: (e) => this.handleCurrentTemplate(e) }, h("div", { class: "image__wrapper" }, h("img", { src: this.thumbnail }))), this.showDetails &&
+                    h("div", { class: "details__wrapper" }, h("div", { class: "selection__buttons-wrapper" }, h("div", { class: "selection__input" }, h("input", { type: "radio", id: "react", name: "chosen_framework", value: "react", onInput: (e) => this.handleUserInput(e, 'framework') }), h("label", { htmlFor: "react" }, "React")), h("div", { class: "selection__input vue" }, h("input", { class: "vue__input", disabled: true, type: "radio", id: "vue", name: "chosen_framework", value: "vue", onInput: (e) => this.handleUserInput(e, 'framework') }), h("label", { class: "vue__label", htmlFor: "vue" }, "Vue"), " (Soon)")), h("div", { class: "input__fields-wrapper" }, h("ifx-text-field", { required: true, onInput: (e) => this.handleUserInput(e, 'name'), size: "m", icon: "c-info-16", placeholder: "Your repository name" }, "Repository Name"), h("ifx-text-field", { required: true, size: "m", icon: "c-info-16", onInput: (e) => this.handleUserInput(e, 'desc'), placeholder: "Your repository description" }, "Repository Description"), h("ifx-button", { fullWidth: true, onClick: () => this.submitUserData(), variant: 'primary' }, "Generate template"))))));
+    }
+    static get is() { return "ifx-template"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["template.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["template.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "thumbnail": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "thumbnail",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "repoDetails": {},
+            "repoUrl": {},
+            "showDetails": {},
+            "isTemplatePage": {},
+            "isLoading": {},
+            "repoError": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggleTemplates",
+                "name": "toggleTemplates",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "fieldError",
+                "name": "fieldError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleTemplate": {
+                "complexType": {
+                    "signature": "(currTemp: any) => Promise<void>",
+                    "parameters": [{
+                            "name": "currTemp",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=template.js.map

package/dist/collection/components/templates/template/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/components/templates/template/template.tsx"],"names":[],"mappings":"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","sourcesContent":["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  authUser() { \n    const clientId = process.env.CLIENT_ID;\n    const redirectUri = 'http://localhost:6262/?path=/docs/dds-templates--development';\n    const scope = process.env.SCOPE;\n    const state = process.env.STATE;\n\n    const authorizationUrl = `https://github.com/login/oauth/authorize?` +\n      `client_id=${clientId}&` +\n      `redirect_uri=${redirectUri}&` +\n      `scope=${scope}&` +\n      `state=${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(`http://localhost:5000/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}"]}

package/dist/collection/components/templates/templates-ui/templates-ui.css

@@ -0,0 +1,33 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+.templates__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.templates__container .back__btn-wrapper {
+  display: none;
+}
+.templates__container .back__btn-wrapper.show {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+.templates__container .back__btn-wrapper .alert__wrapper {
+  display: none;
+}
+.templates__container .back__btn-wrapper .alert__wrapper.show {
+  display: block;
+}
+.templates__container .templates__wrapper {
+  display: flex;
+  padding: 20px 0px;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+.templates__container .templates__title.hide {
+  display: none;
+}

package/dist/collection/components/templates/templates-ui/templates-ui.js

@@ -0,0 +1,75 @@
+import { h, getAssetPath } from "@stencil/core";
+export class TemplatesUI {
+    constructor() {
+        this.tableTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);
+        this.wizardTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`);
+    }
+    toggleTemplate(currTemp) {
+        const templates = this.el.shadowRoot.querySelector('.templates__wrapper').querySelectorAll('ifx-template');
+        templates.forEach((template) => {
+            template.toggleTemplate(currTemp);
+        });
+    }
+    handleError(e) {
+        const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');
+        if (e.detail) {
+            alertWrapper.classList.add('show');
+        }
+        else {
+            alertWrapper.classList.remove('show');
+        }
+    }
+    filterTemplates(e) {
+        const title = this.el.shadowRoot.querySelector('.templates__title');
+        const backBtn = this.el.shadowRoot.querySelector('.back__btn-wrapper');
+        if (e.detail) {
+            title.classList.add('hide');
+            if (e.detail !== 'details') {
+                backBtn.classList.add('show');
+            }
+            this.toggleTemplate(e.detail);
+        }
+        else {
+            title.classList.remove('hide');
+            backBtn.classList.remove('show');
+            this.toggleTemplate(null);
+        }
+    }
+    closeAlert() {
+        const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');
+        alertWrapper.classList.remove('show');
+    }
+    render() {
+        return (h("div", { key: '8a1ab0171f19a96d4762617e049fe46c018049bf', class: 'templates__container' }, h("div", { key: '3350c2e2d954859fadb71b4246cfe012e8a45480', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '20e70dd402468c389ea5549e9c8b3fc18f93aad0', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: 'e23552703d8010a189861b983d66ac19b1392fce', class: "alert__wrapper" }, h("ifx-alert", { key: '2c4446d73086225c5d326c760eeefa7e7791db1f', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), h("h2", { key: '82fade8c4279578dcb2b7da32808bb86ed72a81c', class: "templates__title" }, "Choose your template"), h("div", { key: '3314bd4d85adedf718951a34b032654b7b606ce6', class: "templates__wrapper" }, h("ifx-template", { key: 'b2ad4e3f3f88541507ed1c7116aae06e6ab17b7b', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '4237196ce9c415b47804c597169f7246a04d9eb8', name: 'template-02', thumbnail: this.wizardTemplate }))));
+    }
+    static get is() { return "ifx-templates-ui"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["templates-ui.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["templates-ui.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "fieldError",
+                "method": "handleError",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "toggleTemplates",
+                "method": "filterTemplates",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=templates-ui.js.map

package/dist/collection/components/templates/templates-ui/templates-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"templates-ui.js","sourceRoot":"","sources":["../../../../src/components/templates/templates-ui/templates-ui.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAS5E,MAAM,OAAO,WAAW;IAPxB;QAUU,kBAAa,GAAG,YAAY,CAAC,6FAA6F,CAAC,CAAC;QAC5H,mBAAc,GAAG,YAAY,CAAC,8FAA8F,CAAC,CAAC;KA2DvI;IAxDC,cAAc,CAAC,QAAQ;QACrB,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;QACzG,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;YAC7B,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;QACnC,CAAC,CAAC,CAAA;IACN,CAAC;IAGD,WAAW,CAAC,CAAC;QACX,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QACzE,IAAG,CAAC,CAAC,MAAM,EAAE,CAAC;YACZ,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAGD,eAAe,CAAC,CAAC;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QACpE,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACvE,IAAG,CAAC,CAAC,MAAM,EAAE,CAAC;YACZ,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAC5B,IAAG,CAAC,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;gBAC1B,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAChC,CAAC;YACD,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;QAC/B,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YAC/B,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;QAC3B,CAAC;IACH,CAAC;IAED,UAAU;QACR,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QACzE,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,sBAAsB;YAC/B,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,wEAAiB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,KAAK,EAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,eAAe,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAC,GAAG,GAAG;gBAC9I,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,kEAAW,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,eAAY,WAAW,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,WAAW,+BAAqC,CACrI,CACF;YACN,2DAAI,KAAK,EAAC,kBAAkB,2BAA0B;YACtD,4DAAK,KAAK,EAAC,oBAAoB;gBAC7B,qEAAc,IAAI,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,aAAa,GAAI;gBAClE,qEAAc,IAAI,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,cAAc,GAAI,CAC/D,CACF,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Listen, Element, getAssetPath } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-templates-ui',\n  styleUrl: 'templates-ui.scss',\n  shadow: true,\n  assetsDirs: ['assets']\n})\n\nexport class TemplatesUI {\n  @Element() el: HTMLElement;\n\n  private tableTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);\n  private wizardTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`);\n\n\n  toggleTemplate(currTemp) { \n    const templates = this.el.shadowRoot.querySelector('.templates__wrapper').querySelectorAll('ifx-template');\n      templates.forEach((template) => { \n        template.toggleTemplate(currTemp)\n      })\n  }\n\n  @Listen('fieldError')\n  handleError(e) { \n    const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\n    if(e.detail) { \n      alertWrapper.classList.add('show');\n    } else { \n      alertWrapper.classList.remove('show');\n    }\n  }\n\n  @Listen('toggleTemplates')\n  filterTemplates(e) {\n    const title = this.el.shadowRoot.querySelector('.templates__title');\n    const backBtn = this.el.shadowRoot.querySelector('.back__btn-wrapper');\n    if(e.detail) { \n      title.classList.add('hide');\n      if(e.detail !== 'details') { \n        backBtn.classList.add('show');\n      }\n      this.toggleTemplate(e.detail)\n    } else { \n      title.classList.remove('hide');\n      backBtn.classList.remove('show');\n      this.toggleTemplate(null)\n    }\n  }\n\n  closeAlert() { \n    const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\n    alertWrapper.classList.remove('show');\n  }\n\n  render() {\n    return (\n      <div class='templates__container'>\n        <div class=\"back__btn-wrapper\">\n          <ifx-icon-button onClick={() => this.filterTemplates(false)} shape=\"round\" variant=\"tertiary\" icon=\"arrow-left-16\" target=\"_blank\" size=\"m\" />\n          <div class=\"alert__wrapper\">\n            <ifx-alert onClick={() => this.closeAlert()} aria-live=\"assertive\" variant=\"danger\" icon=\"c-info-24\">All fields are mandatory</ifx-alert>\n          </div>\n        </div>\n        <h2 class=\"templates__title\">Choose your template</h2>\n        <div class=\"templates__wrapper\">\n          <ifx-template name='template-01' thumbnail={this.tableTemplate} />\n          <ifx-template name='template-02' thumbnail={this.wizardTemplate} />\n        </div>\n      </div>\n    )\n  }\n}\n"]}

package/dist/collection/components/text-field/text-field.js

@@ -39,12 +39,12 @@ export class TextField {
         this.internals.setFormValue("");
     }
     render() {
-        return (h("div", { key: '8d742d3a60998d4648040fab5d5d50853b12c7b4', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: '4965d888690874e8775bfc83602340b6b83d3e5e', class: "textInput__top-wrapper" }, h("label", { key: 'd5224921d5c26fc62d551bf10dd1207d8ff5e67f', htmlFor: "text-field" }, h("slot", { key: 'eb5758011376ace0664b074fd4e755b1920fa7f4' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: 'ec295037f306f2cd6ee6c3ba3310dc858c4a74f6', class: "textInput__bottom-wrapper" }, h("div", { key: 'bfb3f3e2c47c6f57f29f3fb16cc5e5b50a5e11f4', class: "input-container" }, this.icon && (h("ifx-icon", { key: 'e94e39b0426900264b834b79e9b7667563311b3c', class: 'input-icon', icon: this.icon })), h("input", { key: '08ba76dbe8ac6ab62ffbcb4d0aa44437f8c6b057', ref: (el) => (this.inputElement = el), disabled: this.disabled, type: "text", id: 'text-field', value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
+        return (h("div", { key: 'e42a147ed66f95907f7e74a1b1cecb2bd245567f', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: '2f9d1a80a38ee45a01dd6e9bf636df13a0fc3cb9', class: "textInput__top-wrapper" }, h("label", { key: '43c2995e3e467e7e283c1146333376ece03fef3c', htmlFor: "text-field" }, h("slot", { key: 'c4ac5b9e89dfcbc34fafcb4506eb5e8bcccb0ea1' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: '0d336f053656ef3603fd20c39f2a7ca53f9e7bcf', class: "textInput__bottom-wrapper" }, h("div", { key: '364059c012dda2e3326957943014d76c3668ec56', class: "input-container" }, this.icon && (h("ifx-icon", { key: '92c3d4666bf546fe0959872bab509ec740e258f8', class: 'input-icon', icon: this.icon })), h("input", { key: '640ca8c190e760fe7efe301ab5cf6de0fcb29ed0', ref: (el) => (this.inputElement = el), disabled: this.disabled, type: "text", id: 'text-field', value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
                 ${this.error ? 'error' : ""} 
               ${this.size === "s" ? "input-s" : ""}
-              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: 'f0df7c42fe70e05928e2db93017db15d1f8c659c', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
-            h("div", { key: 'ac6811a80b1728eb7ecea350a2821990d3e49b40', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
-            h("div", { key: 'deba470325e740fc058a67bfcf056af34ab4d8ef', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
+              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: '36cff10da96067388d323d186250ba51d0e8c463', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
+            h("div", { key: '708870a8fe7644a971714d1f76387efc3d7c2db2', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
+            h("div", { key: '000520268ab6bace4d687b41541002563fd6f59b', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
     }
     static get is() { return "ifx-text-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.js

@@ -38,9 +38,9 @@ export class TextArea {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'd557bff378899253b1eea26f202a3d934424deac', class: `wrapper 
+        return (h(Host, { key: '2741d93f63d602a6033ad015387e5c6fa06b4e8a', class: `wrapper 
 						wrapper--${this.error ? 'error' : ''}
-						wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '9163e001e0423effcbc9bad56af021acb8fc5229', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: 'ce7ea7607837c9979a984627fb9d762494a211b8', class: 'wrapper__textarea' }, h("textarea", { key: '6587f63b3d5ef32db9bf4c25ba03246d31a1120e', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '96f109dfc94c8563ce9b3aacfae00eef4b6a49b2', class: 'wrapper__caption' }, this.caption.trim()))));
+						wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '84cc3ca55354f76ec579da85620c7522242ad97f', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: '8c513b72ff2ab687f7b0ba717971ebb4e545f3bb', class: 'wrapper__textarea' }, h("textarea", { key: 'ab111c1c61cdf507877596e17b3d3acbdf78a8e1', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'ac6d25c1b51e7f336c03534514081867b602af09', class: 'wrapper__caption' }, this.caption.trim()))));
     }
     static get is() { return "ifx-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -149,10 +149,10 @@ export class Tooltip {
             'tooltip-extended': true,
             'visible': this.tooltipVisible,
         };
-        return (h("div", { key: '246f0b291e39bbe49ebea1eed9827400f22bb680', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'a16771de825d12d46661be2ecb61ce8326e25794' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '974e0fdbf389fcce6cc34eccb897b188f0413eea', class: tooltipDismissible }, h("button", { key: 'a777e5a63134c07f4330d790044a7aafdb63a83c', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '69cc351f97d892f98cf8bc3df48d2877129e4238', icon: "cross16" })), h("div", { key: '5db6f0ceff12be22d6de58767bab509b67dd9ff8', class: "tooltip-dismissible-content" }, this.header && h("div", { key: '22fd94a588780e413dc04dcc126380b5b382fde6', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'abd4158d18a1c57dda508caddcdb1be945a8efd2', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '1bcd11086f4922c03532c99b2dd1618b862af68b', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5dfac1fa79d7204b1f0770ed243cdbadfc14fdd9', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
-            h("div", { key: 'a52aec447163df16d86d14f96d74501c45266e2a', class: tooltipCompact }, this.text, h("svg", { key: 'c28c49ee4446d73b366bb68280ddf5b9192cc79a', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '2de515ea4344c728a1da4b368c93c7ade11badcb', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
-            h("div", { key: '9e3186e4856770c831d0422bce64b131c64f55f0', class: tooltipExtended }, h("slot", { key: '089640249dbfcf8eed4525615d6e289955304e09', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
-                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: 'eab4f9af96d154a289bec83673db47d3580c267d', class: "tooltip-extended-content" }, this.header && h("div", { key: '810497a167351bef22a9e61050264032be295455', class: "tooltip-extended-header" }, this.header), h("div", { key: '802dbe5e093b9d69b9155e188d35a421b2ca0c2e', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'ff19a79905e5ea4af628364a254e03e022a08a3d', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '557540e1fd91ad15580011ddf37a4cd25a8a6ae3', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
+        return (h("div", { key: '5f723ab7cb77998867b0461e37bc79d6e4ba61a5', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'a22a8f62431b618aafbd803050dc909e6d797076' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '1dac2d6cd1d3c2f4a65bcbcfc9f448c9228bcad1', class: tooltipDismissible }, h("button", { key: '7b837916f8707d1bfc0dd7bd9e39c2fc5083a897', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '242ed6be4f8bbca450f845b936de46461eff9783', icon: "cross16" })), h("div", { key: '897a1e28268e4d87fea0aee2cc65acb98b419d73', class: "tooltip-dismissible-content" }, this.header && h("div", { key: '3f7fcffcbf27946a8e22bc8d7eccd10edd1bfd9c', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '3c4f35aaed3b92cd26211d2e887af20316369e14', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: 'bbb8989f2f35d54166892df95ab3fa7b523e8da4', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '30cd52b47114a0633729604cad3928085ce2d5eb', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
+            h("div", { key: 'f1937f4fe6738a5ec5e2ff97d40833de6e556ea0', class: tooltipCompact }, this.text, h("svg", { key: 'af49be55f76aa695f873574cf6b1d8c224d3d1bd', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '6a1b409ee0a6acc3cb40f570859db21fa6e95dab', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
+            h("div", { key: 'e8db59cd9bfb1017473cb4978d55a9d95ef716a7', class: tooltipExtended }, h("slot", { key: '9bc3ee5d1facb90e4f3a80e62edb60db9798a311', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
+                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '1ced5581d26ad2cee6901e662fd0631695816ec3', class: "tooltip-extended-content" }, this.header && h("div", { key: '00536a9556d42a36afc8ee3282b531b10e6331a4', class: "tooltip-extended-header" }, this.header), h("div", { key: 'df9c595d583240132a838dc8d9c073c7066c5d17', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '7ba21ada3d496d2ac9a1314b6773299f99927cdf', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3079c667691d7a11a28efd9180510f03bd001f58', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
     }
     static get is() { return "ifx-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}

package/dist/collection/stories/setup-and-installation/faq/faq.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Faq {
     render() {
-        return (h("div", { key: '81dac064edfea12005954ca731cbbe00b8d69698', class: 'container' }, h("ifx-accordion", { key: 'f0a52cd1a0c95d038e036c3643504033b15cb342' }, h("ifx-accordion-item", { key: 'e1ed7801a5e7c5d83c8e0ee934dfdfea1925dc4d', 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: '792c48fae24d106277a76554f5d66f5aaa0bb384', 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: '4ed509e6535edf0408f9ed9163d66e979c653370', 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: 'a358a22ca675e01d5e402fe8a4268b27ccb471c5', 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: '88a06feeb2a093b38797667aec93adf4d82502d5', 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: 'a176f639b21e2f4504663ae832d93f8f88a14aff', class: 'container' }, h("ifx-accordion", { key: '1b89a12dc9c462963fe98ddfafcb137f76cf9b81' }, h("ifx-accordion-item", { key: 'ec3b2b10e3656d23fdee790bdad02ead0c7308fc', 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: 'dbeb6e058107b7565649e37389c7995bb4c38b00', 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: '509470bafae5eda41b6ead1c3fb5fe7a4a494e33', 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: '942e19b55d1342b08e84c367d16faca6b53dd47d', 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: '82da02da75548b48d10644d35c423b0c6502d35c', 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."))));
     }
     static get is() { return "ifx-faq"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/ifx-alert.js

@@ -1,71 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
-import { d as defineCustomElement$2 } from './p-7e430b83.js';
-
-const alertCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}";
-const IfxAlertStyle0 = alertCss;
-
-const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.ifxClose = createEvent(this, "ifxClose", 7);
-        this.alertTypeDescription = {
-            "primary": 'Neutral alert',
-            "success": 'Success Alert',
-            "danger": 'Error Alert',
-            "warning": 'Warning Alert',
-            "info": 'Neutral alert',
-        };
-        this.variant = 'primary';
-        this.icon = undefined;
-        this.closable = true;
-        this.AriaLive = 'assertive';
-        this.uniqueId = undefined;
-    }
-    handleClose() {
-        this.ifxClose.emit();
-    }
-    renderCloseButton() {
-        return (h("div", { class: "close-icon-wrapper" }, h("button", { onClick: this.handleClose.bind(this), "aria-label": "Dismiss alert" }, h("ifx-icon", { icon: "cross-16" }))));
-    }
-    generateUniqueId(prefix = 'id') {
-        return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
-    }
-    componentWillLoad() {
-        if (!this.uniqueId) {
-            this.uniqueId = this.generateUniqueId('alert');
-        }
-    }
-    render() {
-        return this.variant === 'info' ? (h("div", { class: "alert__info-wrapper", role: "alert", "aria-live": this.AriaLive, "aria-describedby": this.alertTypeDescription[this.variant], "aria-labelledby": "alert-text alert-description" }, h("div", { class: "info__text-wrapper" }, h("div", { class: "info__headline-wrapper" }, h("slot", { name: "headline" })), h("div", { id: `alert-description-${this.uniqueId}`, class: "info__description-wrapper" }, h("slot", { name: "desc" }))), this.closable ? this.renderCloseButton() : null)) : (h("div", { class: `alert ${this.variant}`, role: "alert" }, this.icon && (h("div", { class: "icon-wrapper" }, h("ifx-icon", { icon: this.icon }))), h("div", { class: "alert-text", id: `alert-text-${this.uniqueId}` }, h("slot", null)), this.closable ? this.renderCloseButton() : null));
-    }
-    static get style() { return IfxAlertStyle0; }
-}, [1, "ifx-alert", {
-        "variant": [1],
-        "icon": [1],
-        "closable": [4],
-        "AriaLive": [1, "aria-live"],
-        "uniqueId": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ifx-alert", "ifx-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ifx-alert":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Alert);
-            }
-            break;
-        case "ifx-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { A as Alert, d as defineCustomElement$1 } from './p-2ca9c3ff.js';
 
 const IfxAlert = Alert;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-alert.js.map

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