@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/error-page/error-page.js

@@ -0,0 +1,155 @@
+import { Host, h } from "@stencil/core";
+const BASE_URL = "https://raw.githubusercontent.com/Infineon/public-assets/main/ifx-error-page";
+export class ErrorPage {
+    /** Custom illustration URL for the error page graphic. */
+    illustrationUrl;
+    /** Alternative text for the illustration. Falls back to the selected error type label. */
+    imgAlt;
+    /** Error page variant used to select the default content and image. Defaults to "403". */
+    type = '403';
+    /** Headline text for the error page. Uses the variant default when no value is provided. */
+    headline;
+    /** Description text for the error page. Uses the variant default when no value is provided. */
+    description;
+    /** Centralized config per error type to keep render clean and avoid conditionals in the template. */
+    errorVariants = {
+        '403': {
+            headline: 'Access restricted',
+            description: 'Accessing this content requires special authorization. If you believe you should be able to access this content, please contact our support team for assistance.',
+        },
+        '404': {
+            headline: 'The requested page cannot be found',
+            description: 'The page you requested does not exist. Please check the URL entered or use the navigation to find what you are looking for.',
+        },
+        '503': {
+            headline: 'The server is currently unavailable',
+            description: 'Our service is currently experiencing high demand or undergoing maintenance. Please try again in a few moments, or contact our support team if the issue persists.',
+        },
+        maintenance: {
+            headline: 'Planned maintenance underway',
+            description: 'We are currently performing scheduled maintenance to improve system performance and stability. Our services will be restored as soon as possible. Thank you for your patience.',
+        },
+    };
+    render() {
+        const fallbackType = this.errorVariants[this.type] ? this.type : '403';
+        const variant = this.errorVariants[fallbackType];
+        const imageSrc = this.illustrationUrl || `${BASE_URL}/${fallbackType}.svg`;
+        const headline = this.headline || variant.headline;
+        const description = this.description || variant.description;
+        const type = this.type === 'maintenance' ? 'Scheduled' : 'Error';
+        const alt = this.imgAlt || `${type} ${fallbackType}`;
+        return (h(Host, { key: 'e63a4181a0e58c797aad9fba3f8e347dc2b5cf4c' }, h("div", { key: 'c0ae48d915d14bacecea55771194656e14ee5248', class: "error-page" }, h("div", { key: '947e505ce00a927c53e22127b2cac053bca1ed7b', class: "error-page__image" }, h("img", { key: '32ede3e7c5b288ca453f381048d29d223b3126a9', src: imageSrc, alt: alt })), h("div", { key: '3fd3035de92f9893b9026239d78b5ea5713d7feb', class: "error-page__description" }, h("div", { key: '707350e800cd1dbeee578831fe675785d41a385e', class: "error-page__type" }, type, " ", fallbackType), h("h1", { key: 'a8535989d8e6fc920e48de53cb13c389f34eb37c', class: "error-page__headline" }, headline), h("p", { key: '0270b0b5018db4271d2ce95aa3bf9f4549869e0b', class: "error-page__body" }, description), h("div", { key: '2f6b69134c12601ba3bb8ce2264fd691d32fc9c0', class: "error-page__actions" }, h("slot", { key: '952b7570262fa16940431f95e79cee305117e8f8', name: "button" }))))));
+    }
+    static get is() { return "ifx-error-page"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["error-page.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["error-page.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "illustrationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom illustration URL for the error page graphic."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "illustration-url"
+            },
+            "imgAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text for the illustration. Falls back to the selected error type label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "img-alt"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'403' | '404' | '503' | 'maintenance'",
+                    "resolved": "\"403\" | \"404\" | \"503\" | \"maintenance\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error page variant used to select the default content and image. Defaults to \"403\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'403'"
+            },
+            "headline": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Headline text for the error page. Uses the variant default when no value is provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "headline"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text for the error page. Uses the variant default when no value is provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            }
+        };
+    }
+}

package/dist/collection/components/file-upload/file-upload.css

@@ -0,0 +1,209 @@
+:host {
+  font-family: var(--ifx-font-family, sans-serif);
+}
+
+.file-upload-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.file-upload-wrapper.disabled {
+  pointer-events: none;
+}
+.file-upload-wrapper.disabled label,
+.file-upload-wrapper.disabled .file-upload-info {
+  color: #575352;
+}
+
+.file-upload-label {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: #1d1d1d;
+}
+.file-upload-label .required {
+  display: inline-block;
+  margin-left: 4px;
+}
+.file-upload-label .required.error {
+  color: #cd002f;
+}
+
+.upload-dropzone {
+  border: 1px dashed #bfbbbb;
+  padding: 40px;
+  text-align: center;
+  cursor: pointer;
+  color: #1d1d1d;
+  transition: border-color 0.3s ease;
+  border-radius: 1px;
+  background: #ffffff;
+}
+.upload-dropzone ifx-icon {
+  color: #0a8276;
+}
+.upload-dropzone:hover {
+  border: 1px dashed #8d8786;
+}
+.upload-dropzone.drag-over {
+  border: 1px solid #0a8276;
+  background: #f7f7f7;
+}
+.upload-dropzone.drag-over.error {
+  border: 1px solid #0a8276;
+}
+.upload-dropzone.error {
+  border-color: #cd002f;
+}
+.disabled .upload-dropzone {
+  pointer-events: none;
+  border-color: #bfbbbb;
+  color: #bfbbbb;
+}
+.disabled .upload-dropzone ifx-icon {
+  color: #bfbbbb;
+}
+
+.upload-dropzone input {
+  display: none;
+}
+
+.file-upload-info {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  letter-spacing: 0;
+  color: #1d1d1d;
+  margin: 0;
+  margin-top: 4px;
+}
+
+.file-upload-status {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  letter-spacing: 0.2px;
+  margin-top: 8px;
+}
+.file-upload-status.file-upload-status__error {
+  display: flex;
+  align-items: center;
+  color: #cd002f;
+}
+.file-upload-status.file-upload-status__error ifx-icon {
+  position: relative;
+  top: -1px;
+  color: #cd002f;
+  margin-right: 8px;
+}
+
+.upload-heading {
+  font: 600 1.125rem/1.625rem "Source Sans 3";
+  font-family: var(--ifx-font-family);
+  margin-bottom: 8px;
+}
+
+.file-list-wrapper {
+  margin-top: 16px;
+}
+
+.file-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.file-item {
+  border: 1px solid #bfbbbb;
+  padding-top: 12px;
+  padding-right: 16px;
+  padding-bottom: 8px;
+  padding-left: 16px;
+  display: flex;
+  gap: 8px;
+}
+
+.file-info {
+  width: 100%;
+  min-width: 0;
+}
+
+.file-top-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: -8px;
+}
+
+.file-top-row ifx-icon {
+  flex-shrink: 0;
+}
+
+.file-name-wrapper {
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  font-weight: 400;
+  font-size: 0.875rem;
+}
+
+.file-name-base {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.file-name-ext {
+  flex-shrink: 0;
+  margin-left: 0;
+}
+
+.file-middle-row {
+  display: flex;
+  align-items: center;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  flex-wrap: wrap;
+  color: #575352;
+}
+.file-middle-row .file-status {
+  margin-left: 12px;
+}
+.file-middle-row .file-status ifx-icon {
+  margin-right: 8px;
+}
+
+.file-progress-row {
+  margin-top: 4px;
+}
+
+.file-progress-row ifx-progress-bar {
+  width: 100%;
+}
+
+.upload-success {
+  border-color: #0a8276;
+}
+.upload-success .file-status ifx-icon {
+  position: relative;
+  top: 1px;
+  color: #4ca460;
+}
+
+.upload-failed {
+  border-color: #cd002f;
+}
+.upload-failed .file-status {
+  color: #cd002f;
+  margin-left: 0;
+}