@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,272 @@
+import { h, } from "@stencil/core";
+export class Template {
+    el;
+    repoDetails = {
+        name: "",
+        desc: "",
+        framework: "",
+    };
+    repoUrl;
+    showDetails = false;
+    isTemplatePage = false;
+    isLoading = true;
+    repoError;
+    /** Name of the template field. */
+    name;
+    /** Fired when templates are toggled on or off. */
+    toggleTemplates;
+    /** Fired when a validation error occurs on the field. */
+    fieldError;
+    /** Thumbnail image URL or identifier for the template. */
+    thumbnail;
+    clientId = "Ov23lixmXiNTTNb6V5W6";
+    redirectUri = "https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development";
+    scope = "repo workflow";
+    state = "template123";
+    authUser() {
+        const authorizationUrl = `https://github.com/login/oauth/authorize?` +
+            `client_id=${this.clientId}&` +
+            `redirect_uri=${this.redirectUri}&` +
+            `scope=${this.scope}&` +
+            `state=${this.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(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/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 = { ...this.repoDetails, name: e.target.value };
+        }
+        else if (type === "desc") {
+            this.repoDetails = { ...this.repoDetails, desc: e.target.value };
+        }
+        else if (type === "framework") {
+            this.repoDetails = { ...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;
+        }
+    }
+    /** Toggles visibility of this template and hides the currently open one if needed. */
+    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: 'bbdf6c77f4d9f26651eb3016337f761ef85362fb' }, 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": "Name of the template field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "thumbnail": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Thumbnail image URL or identifier for the template."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "thumbnail"
+            }
+        };
+    }
+    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": "Fired when templates are toggled on or off."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "fieldError",
+                "name": "fieldError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a validation error occurs on the field."
+                },
+                "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": "Toggles visibility of this template and hides the currently open one if needed.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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 { getAssetPath, h } from "@stencil/core";
+export class TemplatesUI {
+    el;
+    tableTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);
+    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: 'f30661dd835f27ed2a53867b5035653a6e13d06e', class: "templates__container" }, h("div", { key: 'c62f94398ea8aa2023297a5cfb7863cb7cb82b5f', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: 'c43a1e3a405afdd7f2bc417b9877d5833d3cba75', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '3bb40c0e4143f96c293be948ed1c92e8d8d0290c', class: "alert__wrapper" }, h("ifx-alert", { key: '15fb2f5f2bb6c03d72ca6e8e82f8f82127ee7b40', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), h("h2", { key: '2b24399234e8b18fb43515851221922ded2c26e2', class: "templates__title" }, "Choose your template"), h("div", { key: '2f5e132ad3a82c7ee4a57eb2d34f3eb814b071c2', class: "templates__wrapper" }, h("ifx-template", { key: 'b30f5715c2da6a94bb87b5266e4aab3e7afb0628', name: "template-01", thumbnail: this.tableTemplate }), h("ifx-template", { key: '518920d3551319d985fbfe523d834cfb917eb007', 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
+            }];
+    }
+}

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

@@ -0,0 +1,193 @@
+:host {
+  display: flex;
+}
+
+.textInput__container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px;
+  width: 100%;
+  flex: none;
+  order: 0;
+  align-self: stretch;
+  flex-grow: 0;
+  font-family: var(--ifx-font-family);
+}
+.textInput__container .delete-icon {
+  position: absolute;
+  right: 16px;
+}
+.textInput__container:not(.readOnly, .disabled) .delete-icon:hover {
+  cursor: pointer;
+}
+.textInput__container.disabled:not(.readOnly) #text-field {
+  color: #ffffff;
+}
+.textInput__container.disabled:not(.readOnly) .delete-icon {
+  color: #ffffff;
+}
+.textInput__container.disabled:not(.readOnly) .textInput__top-wrapper label {
+  color: #bfbbbb;
+}
+.textInput__container.disabled:not(.readOnly) .textInput__top-wrapper .required {
+  color: #bfbbbb;
+}
+.textInput__container.disabled:not(.readOnly) .textInput__bottom-wrapper input {
+  border: 1px solid #bfbbbb;
+  background-color: #bfbbbb;
+}
+.textInput__container.disabled:not(.readOnly) .textInput__bottom-wrapper input::placeholder {
+  font-size: 1rem;
+  color: #ffffff;
+}
+.textInput__container .textInput__top-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 4px;
+  flex: none;
+  order: 0;
+  align-self: stretch;
+  flex-grow: 0;
+}
+.textInput__container .textInput__top-wrapper label {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  display: flex;
+  align-items: center;
+  color: #1d1d1d;
+  flex: none;
+  order: 0;
+  flex-grow: 0;
+}
+.textInput__container .textInput__top-wrapper label .optional-required {
+  margin-left: 4px;
+}
+.textInput__container .textInput__top-wrapper label .optional {
+  margin-left: 4px;
+}
+.textInput__container .textInput__top-wrapper label .required {
+  color: #575352;
+  margin-left: 4px;
+}
+.textInput__container .textInput__top-wrapper label .required.error {
+  color: #cd002f;
+}
+.textInput__container .input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.textInput__container .textInput__bottom-wrapper {
+  flex-grow: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 4px;
+  flex: none;
+  order: 1;
+  align-self: stretch;
+  flex-grow: 0;
+}
+.textInput__container .textInput__bottom-wrapper input {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 16px;
+  gap: 8px;
+  height: 40px;
+  background-color: #ffffff;
+  color: #1d1d1d;
+  font-family: var(--ifx-font-family);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  border: 1px solid #8d8786;
+  border-radius: 1px;
+  flex: none;
+  order: 0;
+  align-self: stretch;
+  flex-grow: 0;
+  text-overflow: ellipsis;
+}
+.textInput__container .textInput__bottom-wrapper input.input-s {
+  height: 36px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.textInput__container .textInput__bottom-wrapper input.input-s::placeholder {
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+.textInput__container .textInput__bottom-wrapper input.icon {
+  padding-left: 40px;
+}
+.textInput__container .textInput__bottom-wrapper input.error {
+  border: 1px solid #cd002f;
+}
+.textInput__container .textInput__bottom-wrapper input.error:focus {
+  outline: none;
+}
+.textInput__container .textInput__bottom-wrapper input.readOnly {
+  border: none;
+  border-radius: var(--borderRadius-12, 1px);
+  border-bottom: 1px solid var(--color-engineering-300, #bfbbbb);
+  background: var(--color-base-white, #fff);
+  padding-left: 0;
+}
+.textInput__container .textInput__bottom-wrapper input.readOnly::placeholder {
+  color: #1d1d1d;
+}
+.textInput__container .textInput__bottom-wrapper input.success {
+  border: 1px solid #4ca460;
+}
+.textInput__container .textInput__bottom-wrapper input.success:focus {
+  outline: none;
+}
+.textInput__container .textInput__bottom-wrapper input:focus:not(.error, .success):not(.readOnly) {
+  outline: none;
+  border: 1px solid #0a8276;
+}
+.textInput__container .textInput__bottom-wrapper input.readOnly:focus, .textInput__container .textInput__bottom-wrapper input[readonly]:focus {
+  outline: none;
+  box-shadow: none;
+  border: none;
+  border-bottom: 1px solid var(--color-engineering-300, #bfbbbb);
+}
+.textInput__container .textInput__bottom-wrapper input:hover:not(:disabled, :focus, .error, .success):not(.readOnly) {
+  border: 1px solid #575352;
+}
+.textInput__container .textInput__bottom-wrapper .input-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 16px;
+  /* Adjust this value to control the icon's left offset */
+  transition: 0.3s;
+  color: #8d8786;
+}
+.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: #1d1d1d;
+  flex: none;
+  order: 1;
+  align-self: stretch;
+  flex-grow: 0;
+}
+.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.error {
+  color: #cd002f;
+}
+.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.disabled {
+  color: #bfbbbb;
+}