@six-group/ui-library 3.0.0-beta.1.11

package/dist/collection/components/six-error-page/six-error-page.css

@@ -0,0 +1,17 @@
+.six-error-page__title {
+  display: flex;
+  justify-content: center;
+  font-size: var(--six-font-size-xx-large);
+  font-weight: bold;
+  margin-bottom: var(--six-spacing-large);
+}
+.six-error-page__description > * {
+  text-align: center;
+}
+.six-error-page__icon-container {
+  display: flex;
+  justify-content: center;
+}
+.six-error-page__icon::part(icon) {
+  background-color: var(--six-color-web-rock-300);
+}

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

@@ -0,0 +1,199 @@
+import { Component, h, Prop } from '@stencil/core';
+var ERROR_CODE;
+(function (ERROR_CODE) {
+  ERROR_CODE[ERROR_CODE["FORBIDDEN"] = 403] = "FORBIDDEN";
+  ERROR_CODE[ERROR_CODE["NOT_FOUND"] = 404] = "NOT_FOUND";
+  ERROR_CODE[ERROR_CODE["INTERNAL_SERVER_ERROR"] = 500] = "INTERNAL_SERVER_ERROR";
+})(ERROR_CODE || (ERROR_CODE = {}));
+const TITLE_PER_ERROR_CODE = {
+  [ERROR_CODE.FORBIDDEN]: {
+    en: 'Access Denied',
+    de: 'Kein Zugriff',
+  },
+  [ERROR_CODE.NOT_FOUND]: {
+    en: 'Not Found',
+    de: 'Seite nicht gefunden',
+  },
+  [ERROR_CODE.INTERNAL_SERVER_ERROR]: {
+    en: 'Ooops!',
+    de: 'Ups!',
+  },
+};
+const DESCRIPTION_PER_ERROR_CODE = {
+  [ERROR_CODE.FORBIDDEN]: {
+    en: [
+      'You don’t have permission to access this page. ',
+      'Please contact an administrator or click the SIX logo on top left.',
+    ],
+    de: [
+      'Sie haben keine Zugriffsberechtigung auf diese Seite.',
+      'Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.',
+    ],
+  },
+  [ERROR_CODE.NOT_FOUND]: {
+    en: ['We have not found the page you requested.', 'Please click the SIX logo on top left.'],
+    de: ['Wir haben die angeforderte Seite nicht gefunden.', 'Bitte klicken Sie auf das SIX-Logo oben links.'],
+  },
+  [ERROR_CODE.INTERNAL_SERVER_ERROR]: {
+    en: ['Sorry, we messed up! We try to fix this.', 'Please click the SIX logo on top left.'],
+    de: [
+      'Sorry, das war unser Fehler! Wir versuchen das zu beheben.',
+      'Bitte klicken Sie auf das SIX-Logo oben links.',
+    ],
+  },
+};
+/*
+ * @since 2.2.0
+ * @status experimental
+ * @part container - The whole component container
+ * @part label - The language label
+ * @part separator - The separator between the language labels
+ */
+export class SixErrorPage {
+  constructor() {
+    /**
+     * Defines language and thus displays the proper error page in the selected language.
+     */
+    this.language = 'en';
+  }
+  getIconName() {
+    if (this.customIcon !== undefined) {
+      return this.customIcon;
+    }
+    if (this.errorCode === undefined) {
+      return;
+    }
+    if (this.errorCode === ERROR_CODE.FORBIDDEN) {
+      return 'lock';
+    }
+    if (this.errorCode === ERROR_CODE.NOT_FOUND) {
+      return 'find-in-page';
+    }
+    if (this.errorCode === ERROR_CODE.INTERNAL_SERVER_ERROR) {
+      return 'sentiment-dissatisfied';
+    }
+  }
+  getErrorTitle() {
+    if (this.customTitle !== undefined) {
+      return this.customTitle;
+    }
+    if (this.errorCode === undefined) {
+      return;
+    }
+    return TITLE_PER_ERROR_CODE[this.errorCode][this.language];
+  }
+  getErrorDescription() {
+    if (this.errorCode === undefined && this.customDescription === undefined) {
+      return;
+    }
+    const descriptions = this.getDescriptions();
+    return descriptions.map((errorMessage) => h("div", null, errorMessage));
+  }
+  getDescriptions() {
+    if (this.customDescription !== undefined) {
+      return this.customDescription;
+    }
+    return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];
+  }
+  render() {
+    return (h("div", { part: "container" },
+      h("div", { class: "six-error-page__icon-container", part: "icon-container" },
+        h("six-picto", { size: "4xl", class: "six-error-page__icon", part: "icon" }, this.getIconName())),
+      h("div", { class: "six-error-page__title", part: "title" }, this.getErrorTitle()),
+      h("div", { class: "six-error-page__description", part: "description" }, this.getErrorDescription())));
+  }
+  static get is() { return "six-error-page"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-error-page.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-error-page.css"]
+  }; }
+  static get properties() { return {
+    "errorCode": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines error Code and thus displays the proper error page."
+      },
+      "attribute": "error-code",
+      "reflect": false
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'en' | 'de'",
+        "resolved": "\"de\" | \"en\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines language and thus displays the proper error page in the selected language."
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'en'"
+    },
+    "customTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines a custom title."
+      },
+      "attribute": "custom-title",
+      "reflect": false
+    },
+    "customDescription": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines a custom description."
+      }
+    },
+    "customIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines a custom icon."
+      },
+      "attribute": "custom-icon",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/six-file-list/six-file-list.css

@@ -0,0 +1,6 @@
+.six-files-list__container {
+  padding: 1rem;
+}
+.six-files-list__container :last-child {
+  padding-bottom: 0;
+}

package/dist/collection/components/six-file-list/six-file-list.js

@@ -0,0 +1,20 @@
+import { Component, h } from '@stencil/core';
+/**
+ * @since 2.0.0
+ * @status experimental
+ *
+ */
+export class SixFileList {
+  render() {
+    return (h("div", { class: "six-files-list__container" },
+      h("slot", null)));
+  }
+  static get is() { return "six-file-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-file-list.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-file-list.css"]
+  }; }
+}

package/dist/collection/components/six-file-list-item/six-file-list-item.css

@@ -0,0 +1,36 @@
+.six-files-list-item {
+  padding-bottom: 0.5rem;
+}
+.six-files-list-item__name {
+  color: var(--six-color-action-600);
+  cursor: pointer;
+}
+.six-files-list-item__name--disabled {
+  cursor: inherit;
+  color: var(--six-color-web-rock-500);
+}
+.six-files-list-item__name:hover:not(.six-files-list-item__name--disabled) {
+  color: var(--six-color-action-500);
+}
+.six-files-list-item__date {
+  padding-left: 1rem;
+  color: var(--six-color-web-rock-600);
+}
+.six-files-list-item__size {
+  padding-left: 1rem;
+  color: var(--six-color-web-rock-600);
+}
+.six-files-list-item__icon {
+  padding-left: 0.5rem;
+  display: inline-block;
+  transform: translateY(-1px);
+  cursor: pointer;
+  color: var(--six-color-web-rock-600);
+}
+.six-files-list-item__icon--disabled {
+  cursor: not-allowed;
+  color: var(--six-color-web-rock-500);
+}
+.six-files-list-item__icon:hover:not(.six-files-list-item__icon--disabled) {
+  color: var(--six-color-web-rock-900);
+}

package/dist/collection/components/six-file-list-item/six-file-list-item.js

@@ -0,0 +1,203 @@
+import { Component, Event, h, Prop } from '@stencil/core';
+/**
+ * @since 2.0.0
+ * @status experimental
+ *
+ */
+export class SixFileListItem {
+  constructor() {
+    /** An id to clearly identify the file */
+    this.identifier = '';
+    /** The filename */
+    this.name = '';
+    /** The date when the file was uploaded */
+    this.date = '';
+    /** Set to true if you don't want to allow to download this file */
+    this.nodownload = false;
+    /** Set to true if you don't want to allow to delete this file */
+    this.nodelete = false;
+    this.downloadFile = () => {
+      if (this.nodownload) {
+        return;
+      }
+      this.downloadEvent.emit({ fileId: this.identifier, name: this.name });
+    };
+    this.removeFile = () => {
+      if (this.nodelete) {
+        return;
+      }
+      this.removeEvent.emit({ fileId: this.identifier, name: this.name });
+    };
+  }
+  render() {
+    return (h("div", { class: "six-files-list-item" },
+      h("span", { class: {
+          'six-files-list-item__name': true,
+          'six-files-list-item__name--disabled': this.nodownload,
+        }, onClick: this.downloadFile }, this.name),
+      h("span", { class: "six-files-list-item__date" }, this.date),
+      this.size !== undefined && h("span", { class: "six-files-list-item__size" },
+        Math.round(this.size / 1024),
+        " KB"),
+      h("six-icon", { class: {
+          'six-files-list-item__icon': true,
+          'six-files-list-item__icon--disabled': this.nodelete,
+        }, size: "small", onClick: this.removeFile }, "delete")));
+  }
+  static get is() { return "six-file-list-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-file-list-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-file-list-item.css"]
+  }; }
+  static get properties() { return {
+    "identifier": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An id to clearly identify the file"
+      },
+      "attribute": "identifier",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The filename"
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "date": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The date when the file was uploaded"
+      },
+      "attribute": "date",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "size": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The file size. This number will be divided by 1024 to show the filesize in KB"
+      },
+      "attribute": "size",
+      "reflect": true
+    },
+    "nodownload": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true if you don't want to allow to download this file"
+      },
+      "attribute": "nodownload",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "nodelete": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true if you don't want to allow to delete this file"
+      },
+      "attribute": "nodelete",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "downloadEvent",
+      "name": "six-file-list-item-download",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Triggered on file download."
+      },
+      "complexType": {
+        "original": "SixFileListDownloadPayload",
+        "resolved": "SixFileListDownloadPayload",
+        "references": {
+          "SixFileListDownloadPayload": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "removeEvent",
+      "name": "six-file-list-item-remove",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Triggered on file remove."
+      },
+      "complexType": {
+        "original": "SixFileListRemovePayload",
+        "resolved": "SixFileListRemovePayload",
+        "references": {
+          "SixFileListRemovePayload": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+}

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

@@ -0,0 +1,63 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+:host {
+  position: static;
+  display: block;
+}
+
+.six-file-upload six-card {
+  box-shadow: none;
+  padding: 0;
+  width: 100%;
+}
+.six-file-upload six-card.kyc-file-upload__container--compact {
+  width: inherit;
+}
+.six-file-upload__label--highlighted {
+  color: var(--six-color-action-600);
+}
+.six-file-upload__container--full {
+  border: dashed 1px var(--six-color-web-rock-500);
+}
+.six-file-upload__label-icon {
+  margin-right: 0.5rem;
+}
+.six-file-upload__drop-zone {
+  padding: 2rem 0;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  transition: background-color 0.3s;
+}
+.six-file-upload__drop-zone--compact {
+  padding: 0;
+}
+.six-file-upload__input {
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  user-select: none;
+  height: 100%;
+  opacity: 0;
+  outline: none;
+}
+.six-file-upload--disabled .six-file-upload__drop-zone {
+  background-color: var(--six-color-inactive);
+}
+.six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone:hover, .six-file-upload__drop-zone--hover {
+  background-color: var(--six-color-action-light-to-be-defined);
+}
+.six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone:hover.six-file-upload__drop-zone--compact, .six-file-upload__drop-zone--hover.six-file-upload__drop-zone--compact {
+  background-color: inherit;
+}
+.six-file-upload--disabled .six-file-upload__input {
+  cursor: not-allowed;
+}