@six-group/ui-library 3.0.0-beta.1.7 → 4.0.0-beta.0

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

@@ -0,0 +1,134 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './six-picto2.js';
+
+const sixErrorPageCss = ".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)}";
+
+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.',
+    ],
+  },
+};
+const SixErrorPage$1 = /*@__PURE__*/ proxyCustomElement(class SixErrorPage extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.errorCode = undefined;
+    this.language = 'en';
+    this.customTitle = undefined;
+    this.customDescription = undefined;
+    this.customIcon = undefined;
+  }
+  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 style() { return sixErrorPageCss; }
+}, [1, "six-error-page", {
+    "errorCode": [2, "error-code"],
+    "language": [1],
+    "customTitle": [1, "custom-title"],
+    "customDescription": [16],
+    "customIcon": [1, "custom-icon"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-error-page", "six-picto"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-error-page":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixErrorPage$1);
+      }
+      break;
+    case "six-picto":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SixErrorPage = SixErrorPage$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixErrorPage, defineCustomElement };
+
+//# sourceMappingURL=six-error-page.js.map

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

@@ -0,0 +1 @@
+{"file":"six-error-page.js","mappings":"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","names":["SixErrorPage"],"sources":["./src/components/six-error-page/six-error-page.scss?tag=six-error-page&encapsulation=shadow","./src/components/six-error-page/six-error-page.tsx"],"sourcesContent":[".six-error-page {\n  &__title {\n    display: flex;\n    justify-content: center;\n    font-size: var(--six-font-size-xx-large);\n    font-weight: bold;\n    margin-bottom: var(--six-spacing-large);\n  }\n\n  &__description {\n    & > * {\n      text-align: center;\n    }\n  }\n\n  &__icon-container {\n    display: flex;\n    justify-content: center;\n  }\n\n  &__icon::part(icon) {\n    background-color: var(--six-color-web-rock-300);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nenum ERROR_CODE {\n  FORBIDDEN = 403,\n  NOT_FOUND = 404,\n  INTERNAL_SERVER_ERROR = 500,\n}\nconst TITLE_PER_ERROR_CODE = {\n  [ERROR_CODE.FORBIDDEN]: {\n    en: 'Access Denied',\n    de: 'Kein Zugriff',\n  },\n  [ERROR_CODE.NOT_FOUND]: {\n    en: 'Not Found',\n    de: 'Seite nicht gefunden',\n  },\n  [ERROR_CODE.INTERNAL_SERVER_ERROR]: {\n    en: 'Ooops!',\n    de: 'Ups!',\n  },\n};\n\nconst DESCRIPTION_PER_ERROR_CODE = {\n  [ERROR_CODE.FORBIDDEN]: {\n    en: [\n      'You don’t have permission to access this page. ',\n      'Please contact an administrator or click the SIX logo on top left.',\n    ],\n    de: [\n      'Sie haben keine Zugriffsberechtigung auf diese Seite.',\n      'Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n  [ERROR_CODE.NOT_FOUND]: {\n    en: ['We have not found the page you requested.', 'Please click the SIX logo on top left.'],\n    de: ['Wir haben die angeforderte Seite nicht gefunden.', 'Bitte klicken Sie auf das SIX-Logo oben links.'],\n  },\n  [ERROR_CODE.INTERNAL_SERVER_ERROR]: {\n    en: ['Sorry, we messed up! We try to fix this.', 'Please click the SIX logo on top left.'],\n    de: [\n      'Sorry, das war unser Fehler! Wir versuchen das zu beheben.',\n      'Bitte klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n};\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n\n@Component({\n  tag: 'six-error-page',\n  styleUrl: 'six-error-page.scss',\n  shadow: true,\n})\nexport class SixErrorPage {\n  /**\n   * Defines error Code and thus displays the proper error page.\n   */\n  @Prop() errorCode: number;\n\n  /**\n   * Defines language and thus displays the proper error page in the selected language.\n   */\n  @Prop() language: 'en' | 'de' = 'en';\n\n  /**\n   * Defines a custom title.\n   */\n  @Prop() customTitle?: string;\n\n  /**\n   * Defines a custom description.\n   */\n  @Prop() customDescription?: string[];\n\n  /**\n   * Defines a custom icon.\n   */\n  @Prop() customIcon?: string;\n\n  private getIconName() {\n    if (this.customIcon !== undefined) {\n      return this.customIcon;\n    }\n\n    if (this.errorCode === undefined) {\n      return;\n    }\n\n    if (this.errorCode === ERROR_CODE.FORBIDDEN) {\n      return 'lock';\n    }\n\n    if (this.errorCode === ERROR_CODE.NOT_FOUND) {\n      return 'find-in-page';\n    }\n\n    if (this.errorCode === ERROR_CODE.INTERNAL_SERVER_ERROR) {\n      return 'sentiment-dissatisfied';\n    }\n  }\n\n  private getErrorTitle() {\n    if (this.customTitle !== undefined) {\n      return this.customTitle;\n    }\n\n    if (this.errorCode === undefined) {\n      return;\n    }\n\n    return TITLE_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  private getErrorDescription() {\n    if (this.errorCode === undefined && this.customDescription === undefined) {\n      return;\n    }\n\n    const descriptions = this.getDescriptions();\n    return descriptions.map((errorMessage) => <div>{errorMessage}</div>);\n  }\n\n  private getDescriptions() {\n    if (this.customDescription !== undefined) {\n      return this.customDescription;\n    }\n\n    return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  render() {\n    return (\n      <div part=\"container\">\n        <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n          <six-picto size=\"4xl\" class=\"six-error-page__icon\" part=\"icon\">\n            {this.getIconName()}\n          </six-picto>\n        </div>\n        <div class=\"six-error-page__title\" part=\"title\">\n          {this.getErrorTitle()}\n        </div>\n        <div class=\"six-error-page__description\" part=\"description\">\n          {this.getErrorDescription()}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-file-list-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixFileListItem extends Components.SixFileListItem, HTMLElement {}
+export const SixFileListItem: {
+  prototype: SixFileListItem;
+  new (): SixFileListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,74 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './six-icon2.js';
+
+const sixFileListItemCss = ".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)}";
+
+const SixFileListItem$1 = /*@__PURE__*/ proxyCustomElement(class SixFileListItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.downloadEvent = createEvent(this, "six-file-list-item-download", 7);
+    this.removeEvent = createEvent(this, "six-file-list-item-remove", 7);
+    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 });
+    };
+    this.identifier = '';
+    this.name = '';
+    this.date = '';
+    this.size = undefined;
+    this.nodownload = false;
+    this.nodelete = false;
+  }
+  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 style() { return sixFileListItemCss; }
+}, [1, "six-file-list-item", {
+    "identifier": [513],
+    "name": [513],
+    "date": [513],
+    "size": [514],
+    "nodownload": [516],
+    "nodelete": [516]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-file-list-item", "six-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-file-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixFileListItem$1);
+      }
+      break;
+    case "six-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SixFileListItem = SixFileListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixFileListItem, defineCustomElement };
+
+//# sourceMappingURL=six-file-list-item.js.map

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

@@ -0,0 +1 @@
+{"file":"six-file-list-item.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,6zBAA6zB;;MCsB30BA,iBAAe;;;;;;;IAyB1B,iBAAY,GAAG;MACb,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,OAAO;OACR;MAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KACvE,CAAC;IAEF,eAAU,GAAG;MACX,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,OAAO;OACR;MAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KACrE,CAAC;sBArCoC,EAAE;gBAGR,EAAE;gBAGF,EAAE;;sBAMI,KAAK;oBAGP,KAAK;;EAwBzC,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YACE,KAAK,EAAE;QACL,2BAA2B,EAAE,IAAI;QACjC,qCAAqC,EAAE,IAAI,CAAC,UAAU;OACvD,EACD,OAAO,EAAE,IAAI,CAAC,YAAY,IAEzB,IAAI,CAAC,IAAI,CACL,EACP,YAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAQ,EACzD,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,YAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAW,EAC5G,gBACE,KAAK,EAAE;QACL,2BAA2B,EAAE,IAAI;QACjC,qCAAqC,EAAE,IAAI,CAAC,QAAQ;OACrD,EACD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,IAAI,CAAC,UAAU,aAGf,CACP,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixFileListItem"],"sources":["./src/components/six-file-list-item/six-file-list-item.scss?tag=six-file-list-item&encapsulation=shadow","./src/components/six-file-list-item/six-file-list-item.tsx"],"sourcesContent":[".six-files-list-item {\n  padding-bottom: 0.5rem;\n\n  &__name {\n    color: var(--six-color-action-600);\n    cursor: pointer;\n\n    &--disabled {\n      cursor: inherit;\n      color: var(--six-color-web-rock-500);\n    }\n\n    &:hover:not(&--disabled) {\n      color: var(--six-color-action-500);\n    }\n  }\n\n  &__date {\n    padding-left: 1rem;\n    color: var(--six-color-web-rock-600);\n  }\n\n  &__size {\n    padding-left: 1rem;\n    color: var(--six-color-web-rock-600);\n  }\n\n  &__icon {\n    padding-left: 0.5rem;\n    display: inline-block;\n    transform: translateY(-1px);\n    cursor: pointer;\n    color: var(--six-color-web-rock-600);\n\n    &--disabled {\n      cursor: not-allowed;\n      color: var(--six-color-web-rock-500);\n    }\n\n    &:hover:not(&--disabled) {\n      color: var(--six-color-web-rock-900);\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\nexport interface SixFileListDownloadPayload {\n  fileId: string;\n  name: string;\n}\n\nexport interface SixFileListRemovePayload {\n  fileId: string;\n  name: string;\n}\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-list-item',\n  styleUrl: 'six-file-list-item.scss',\n  shadow: true,\n})\nexport class SixFileListItem {\n  /** An id to clearly identify the file */\n  @Prop({ reflect: true }) identifier = '';\n\n  /** The filename */\n  @Prop({ reflect: true }) name = '';\n\n  /** The date when the file was uploaded */\n  @Prop({ reflect: true }) date = '';\n\n  /** The file size. This number will be divided by 1024 to show the filesize in KB */\n  @Prop({ reflect: true }) size: number;\n\n  /** Set to true if you don't want to allow to download this file */\n  @Prop({ reflect: true }) nodownload = false;\n\n  /** Set to true if you don't want to allow to delete this file */\n  @Prop({ reflect: true }) nodelete = false;\n\n  /** Triggered on file download. */\n  @Event({ eventName: 'six-file-list-item-download' }) downloadEvent: EventEmitter<SixFileListDownloadPayload>;\n\n  /** Triggered on file remove. */\n  @Event({ eventName: 'six-file-list-item-remove' }) removeEvent: EventEmitter<SixFileListRemovePayload>;\n\n  downloadFile = () => {\n    if (this.nodownload) {\n      return;\n    }\n\n    this.downloadEvent.emit({ fileId: this.identifier, name: this.name });\n  };\n\n  removeFile = () => {\n    if (this.nodelete) {\n      return;\n    }\n\n    this.removeEvent.emit({ fileId: this.identifier, name: this.name });\n  };\n\n  render() {\n    return (\n      <div class=\"six-files-list-item\">\n        <span\n          class={{\n            'six-files-list-item__name': true,\n            'six-files-list-item__name--disabled': this.nodownload,\n          }}\n          onClick={this.downloadFile}\n        >\n          {this.name}\n        </span>\n        <span class=\"six-files-list-item__date\">{this.date}</span>\n        {this.size !== undefined && <span class=\"six-files-list-item__size\">{Math.round(this.size / 1024)} KB</span>}\n        <six-icon\n          class={{\n            'six-files-list-item__icon': true,\n            'six-files-list-item__icon--disabled': this.nodelete,\n          }}\n          size=\"small\"\n          onClick={this.removeFile}\n        >\n          delete\n        </six-icon>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-file-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixFileList extends Components.SixFileList, HTMLElement {}
+export const SixFileList: {
+  prototype: SixFileList;
+  new (): SixFileList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sixFileListCss = ".six-files-list__container{padding:1rem}.six-files-list__container :last-child{padding-bottom:0}";
+
+const SixFileList$1 = /*@__PURE__*/ proxyCustomElement(class SixFileList extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("div", { class: "six-files-list__container" }, h("slot", null)));
+  }
+  static get style() { return sixFileListCss; }
+}, [1, "six-file-list"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-file-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-file-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixFileList$1);
+      }
+      break;
+  } });
+}
+
+const SixFileList = SixFileList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixFileList, defineCustomElement };
+
+//# sourceMappingURL=six-file-list.js.map

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

@@ -0,0 +1 @@
+{"file":"six-file-list.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kGAAkG;;MCY5GA,aAAW;;;;;;EACtB,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,2BAA2B,IACpC,eAAQ,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["SixFileList"],"sources":["./src/components/six-file-list/six-file-list.scss?tag=six-file-list&encapsulation=shadow","./src/components/six-file-list/six-file-list.tsx"],"sourcesContent":[".six-files-list {\n  &__container {\n    padding: 1rem;\n\n    & :last-child {\n      padding-bottom: 0;\n    }\n  }\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-list',\n  styleUrl: 'six-file-list.scss',\n  shadow: true,\n})\nexport class SixFileList {\n  render() {\n    return (\n      <div class=\"six-files-list__container\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-file-upload.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixFileUpload extends Components.SixFileUpload, HTMLElement {}
+export const SixFileUpload: {
+  prototype: SixFileUpload;
+  new (): SixFileUpload;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/six-file-upload.js

@@ -0,0 +1,147 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './six-icon2.js';
+
+const sixFileUploadCss = ".sc-six-file-upload-h{position:relative;box-sizing:border-box}.sc-six-file-upload-h *.sc-six-file-upload,.sc-six-file-upload-h *.sc-six-file-upload:before,.sc-six-file-upload-h *.sc-six-file-upload:after{box-sizing:inherit}.sc-six-file-upload-h{position:static;display:block}.six-file-upload.sc-six-file-upload six-card.sc-six-file-upload{box-shadow:none;padding:0;width:100%}.six-file-upload.sc-six-file-upload six-card.kyc-file-upload__container--compact.sc-six-file-upload{width:inherit}.six-file-upload__label--highlighted.sc-six-file-upload{color:var(--six-color-action-600)}.six-file-upload__container--full.sc-six-file-upload{border:dashed 1px var(--six-color-web-rock-500)}.six-file-upload__label-icon.sc-six-file-upload{margin-right:0.5rem}.six-file-upload__drop-zone.sc-six-file-upload{padding:2rem 0;display:flex;justify-content:center;width:100%;transition:background-color 0.3s}.six-file-upload__drop-zone--compact.sc-six-file-upload{padding:0}.six-file-upload__input.sc-six-file-upload{cursor:pointer;position:absolute;top:0;left:0;width:100%;user-select:none;height:100%;opacity:0;outline:none}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__drop-zone.sc-six-file-upload{background-color:var(--six-color-inactive)}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover,.six-file-upload__drop-zone--hover.sc-six-file-upload{background-color:var(--six-color-action-light-to-be-defined)}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover.six-file-upload__drop-zone--compact,.six-file-upload__drop-zone--hover.six-file-upload__drop-zone--compact.sc-six-file-upload{background-color:inherit}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__input.sc-six-file-upload{cursor:not-allowed}";
+
+const SixFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class SixFileUpload extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.fileUploadSuccessEvent = createEvent(this, "six-file-upload-success", 7);
+    this.fileUploadFailureEvent = createEvent(this, "six-file-upload-failure", 7);
+    this.handleFiles = (files) => {
+      if (this.disabled) {
+        return;
+      }
+      if (files.length === 0) {
+        return;
+      }
+      if (!this.multiple && files.length > 1) {
+        return this.fileUploadFailureEvent.emit({ reason: 'Only one file is allowed.' });
+      }
+      for (const file of files) {
+        if (!file) {
+          return;
+        }
+        const acceptedTypesList = this.accept && this.accept.replace(/\s/g, '').split(',');
+        if (this.accept && acceptedTypesList.indexOf(file.type) === -1) {
+          const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';
+          return this.fileUploadFailureEvent.emit({ reason });
+        }
+        if (this.maxFileSize && file.size > this.maxFileSize) {
+          const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';
+          return this.fileUploadFailureEvent.emit({ reason });
+        }
+      }
+      const objectToEmit = this.multiple ? { files } : { file: files.item(0) };
+      this.fileUploadSuccessEvent.emit(objectToEmit);
+    };
+    this.onChange = () => {
+      var _a;
+      if ((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files) {
+        const files = this.fileInput.files;
+        this.handleFiles(files);
+        this.fileInput.value = '';
+      }
+    };
+    this.isOver = false;
+    this.compact = false;
+    this.label = undefined;
+    this.disabled = false;
+    this.accept = undefined;
+    this.multiple = undefined;
+    this.maxFileSize = undefined;
+  }
+  dragenterHandler() {
+    if (!this.disabled) {
+      this.isOver = true;
+    }
+  }
+  dragoverHandler() {
+    if (!this.disabled) {
+      this.isOver = true;
+    }
+  }
+  dragleaveHandler() {
+    if (!this.disabled) {
+      this.isOver = false;
+    }
+  }
+  dropHandler({ dataTransfer }) {
+    if (!this.disabled) {
+      this.isOver = false;
+      if (dataTransfer) {
+        this.handleFiles(dataTransfer.files);
+      }
+    }
+  }
+  componentDidLoad() {
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+      this.host.addEventListener(eventName, this.preventDefaults, false);
+      document.body.addEventListener(eventName, this.preventDefaults, false);
+    });
+  }
+  disconnectedCallback() {
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+      this.host.removeEventListener(eventName, this.preventDefaults, false);
+      document.body.removeEventListener(eventName, this.preventDefaults, false);
+    });
+  }
+  preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  renderLabel() {
+    return (this.label ||
+      (this.compact ? ('Upload') : (h("span", null, "Drop files to upload, or ", h("span", { class: "six-file-upload__label--highlighted" }, "browse")))));
+  }
+  render() {
+    const Container = this.compact ? 'six-button' : 'six-card';
+    return (h("div", { class: {
+        'six-file-upload': true,
+        'six-file-upload--disabled': this.disabled,
+      } }, h(Container, { class: {
+        'six-file-upload__container--compact': this.compact,
+        'six-file-upload__container--full': !this.compact,
+      } }, this.compact && (h("span", { slot: "prefix" }, h("six-icon", { class: "six-file-upload__label-icon" }, "arrow_circle_up"))), h("div", { class: {
+        'six-file-upload__drop-zone': true,
+        'six-file-upload__drop-zone--hover': this.isOver,
+        'six-file-upload__drop-zone--compact': this.compact,
+      } }, h("span", null, this.renderLabel()), h("input", { class: "six-file-upload__input", type: "file", name: "resume", disabled: this.disabled, accept: this.accept, multiple: this.multiple, onChange: this.onChange, ref: (el) => (this.fileInput = el) })))));
+  }
+  get host() { return this; }
+  static get style() { return sixFileUploadCss; }
+}, [2, "six-file-upload", {
+    "compact": [4],
+    "label": [1],
+    "disabled": [4],
+    "accept": [1],
+    "multiple": [4],
+    "maxFileSize": [2, "max-file-size"],
+    "isOver": [32]
+  }, [[1, "dragenter", "dragenterHandler"], [1, "dragover", "dragoverHandler"], [1, "dragleave", "dragleaveHandler"], [1, "drop", "dropHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-file-upload", "six-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-file-upload":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixFileUpload$1);
+      }
+      break;
+    case "six-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SixFileUpload = SixFileUpload$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixFileUpload, defineCustomElement };
+
+//# sourceMappingURL=six-file-upload.js.map

package/dist/components/six-file-upload.js.map

@@ -0,0 +1 @@
+{"file":"six-file-upload.js","mappings":"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","names":["SixFileUpload"],"sources":["./src/components/six-file-upload/six-file-upload.scss?tag=six-file-upload&encapsulation=scoped","./src/components/six-file-upload/six-file-upload.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$over-color: var(--six-color-action-light-to-be-defined);\n$disabled-color: var(--six-color-inactive);\n$transition: 0.3s;\n$margin: 1rem;\n\n:host {\n  position: static;\n  display: block;\n}\n\n.six-file-upload {\n  six-card {\n    box-shadow: none;\n    padding: 0;\n    width: 100%;\n\n    &.kyc-file-upload__container--compact {\n      width: inherit;\n    }\n  }\n\n  &__label {\n    &--highlighted {\n      color: var(--six-color-action-600);\n    }\n  }\n\n  &__container {\n    &--full {\n      border: dashed 1px var(--six-color-web-rock-500);\n    }\n  }\n\n  &__label-icon {\n    margin-right: 0.5rem;\n  }\n\n  &__drop-zone {\n    padding: 2rem 0;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    transition: background-color $transition;\n\n    &--compact {\n      padding: 0;\n    }\n  }\n\n  &__input {\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    user-select: none;\n    height: 100%;\n    opacity: 0;\n    outline: none;\n  }\n\n  &--disabled &__drop-zone {\n    background-color: $disabled-color;\n  }\n\n  &:not(.six-file-upload--disabled) &__drop-zone:hover,\n  &__drop-zone--hover {\n    background-color: $over-color;\n\n    &.six-file-upload__drop-zone--compact {\n      background-color: inherit;\n    }\n  }\n\n  &--disabled &__input {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\n\ninterface ISingleFile {\n  file: File;\n}\n\ninterface IMultipleFiles {\n  files: FileList;\n}\n\nexport type SixFileUploadSuccessPayload = ISingleFile | IMultipleFiles;\n\nexport interface SixFileUploadFailurePayload {\n  reason: string;\n}\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-upload',\n  styleUrl: 'six-file-upload.scss',\n  scoped: true,\n  shadow: false,\n})\nexport class SixFileUpload {\n  @Element() readonly host: HTMLSixFileUploadElement;\n\n  fileInput: HTMLInputElement;\n\n  @State() isOver = false;\n\n  /** Set to true if file control should be small. */\n  @Prop() readonly compact: boolean = false;\n\n  /** Label of the drop area. */\n  @Prop() readonly label: string;\n\n  /** Set when button is disabled. */\n  @Prop() readonly disabled: boolean = false;\n\n  /** Accepted MIME-Types. */\n  @Prop() readonly accept: string;\n\n  /** More than one file allowed. */\n  @Prop() readonly multiple: boolean;\n\n  /** Allowed max file size in bytes. */\n  @Prop() readonly maxFileSize: number | undefined = undefined;\n\n  /** Triggers when a file is added. */\n  @Event({ eventName: 'six-file-upload-success' })\n  readonly fileUploadSuccessEvent: EventEmitter<SixFileUploadSuccessPayload>;\n\n  /** Triggers when an uploaded file doesn't match MIME type or max file size. */\n  @Event({ eventName: 'six-file-upload-failure' })\n  readonly fileUploadFailureEvent: EventEmitter<SixFileUploadFailurePayload>;\n\n  @Listen('dragenter', { capture: false })\n  dragenterHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragover', { capture: false })\n  dragoverHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragleave', { capture: false })\n  dragleaveHandler() {\n    if (!this.disabled) {\n      this.isOver = false;\n    }\n  }\n\n  @Listen('drop', { capture: false })\n  dropHandler({ dataTransfer }: DragEvent) {\n    if (!this.disabled) {\n      this.isOver = false;\n      if (dataTransfer) {\n        this.handleFiles(dataTransfer.files);\n      }\n    }\n  }\n\n  handleFiles = (files: FileList) => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (files.length === 0) {\n      return;\n    }\n\n    if (!this.multiple && files.length > 1) {\n      return this.fileUploadFailureEvent.emit({ reason: 'Only one file is allowed.' });\n    }\n\n    for (const file of files) {\n      if (!file) {\n        return;\n      }\n\n      const acceptedTypesList = this.accept && this.accept.replace(/\\s/g, '').split(',');\n\n      if (this.accept && acceptedTypesList.indexOf(file.type) === -1) {\n        const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n        return this.fileUploadFailureEvent.emit({ reason });\n      }\n\n      if (this.maxFileSize && file.size > this.maxFileSize) {\n        const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n        return this.fileUploadFailureEvent.emit({ reason });\n      }\n    }\n\n    const objectToEmit: SixFileUploadSuccessPayload = this.multiple ? { files } : { file: files.item(0) };\n\n    this.fileUploadSuccessEvent.emit(objectToEmit);\n  };\n\n  componentDidLoad() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.addEventListener(eventName, this.preventDefaults, false);\n      document.body.addEventListener(eventName, this.preventDefaults, false);\n    });\n  }\n\n  disconnectedCallback() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.removeEventListener(eventName, this.preventDefaults, false);\n      document.body.removeEventListener(eventName, this.preventDefaults, false);\n    });\n  }\n\n  preventDefaults(e: Event) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  onChange = () => {\n    if (this.fileInput?.files) {\n      const files = this.fileInput.files;\n      this.handleFiles(files);\n      this.fileInput.value = '';\n    }\n  };\n\n  private renderLabel() {\n    return (\n      this.label ||\n      (this.compact ? (\n        'Upload'\n      ) : (\n        <span>\n          Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n        </span>\n      ))\n    );\n  }\n\n  render() {\n    const Container = this.compact ? 'six-button' : 'six-card';\n\n    return (\n      <div\n        class={{\n          'six-file-upload': true,\n          'six-file-upload--disabled': this.disabled,\n        }}\n      >\n        <Container\n          class={{\n            'six-file-upload__container--compact': this.compact,\n            'six-file-upload__container--full': !this.compact,\n          }}\n        >\n          {this.compact && (\n            <span slot=\"prefix\">\n              <six-icon class=\"six-file-upload__label-icon\">arrow_circle_up</six-icon>\n            </span>\n          )}\n          <div\n            class={{\n              'six-file-upload__drop-zone': true,\n              'six-file-upload__drop-zone--hover': this.isOver,\n              'six-file-upload__drop-zone--compact': this.compact,\n            }}\n          >\n            <span>{this.renderLabel()}</span>\n            <input\n              class=\"six-file-upload__input\"\n              type=\"file\"\n              name=\"resume\"\n              disabled={this.disabled}\n              accept={this.accept}\n              multiple={this.multiple}\n              onChange={this.onChange}\n              ref={(el) => (this.fileInput = el)}\n            />\n          </div>\n        </Container>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-footer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixFooter extends Components.SixFooter, HTMLElement {}
+export const SixFooter: {
+  prototype: SixFooter;
+  new (): SixFooter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/six-footer.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sixFooterCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.six-footer{color:var(--six-color-web-rock-900);padding:var(--six-spacing-x-small) 0;text-align:center;width:100%;background-color:var(--six-footer-background-color);box-shadow:var(--six-shadow-x-large-top)}";
+
+const SixFooter$1 = /*@__PURE__*/ proxyCustomElement(class SixFooter extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("footer", { class: "six-footer" }, h("slot", null)));
+  }
+  static get style() { return sixFooterCss; }
+}, [1, "six-footer"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-footer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-footer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixFooter$1);
+      }
+      break;
+  } });
+}
+
+const SixFooter = SixFooter$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixFooter, defineCustomElement };
+
+//# sourceMappingURL=six-footer.js.map

package/dist/components/six-footer.js.map

@@ -0,0 +1 @@
+{"file":"six-footer.js","mappings":";;AAAA,MAAM,YAAY,GAAG,2UAA2U;;MCcnVA,WAAS;;;;;;EACpB,MAAM;IACJ,QACE,cAAQ,KAAK,EAAC,YAAY,IACxB,eAAQ,CACD,EACT;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["SixFooter"],"sources":["./src/components/six-footer/six-footer.scss?tag=six-footer&encapsulation=shadow","./src/components/six-footer/six-footer.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.six-footer {\n  color: var(--six-color-web-rock-900);\n  padding: var(--six-spacing-x-small) 0;\n  text-align: center;\n  width: 100%;\n  background-color: var(--six-footer-background-color);\n  box-shadow: var(--six-shadow-x-large-top);\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the content of the footer.\n */\n\n@Component({\n  tag: 'six-footer',\n  styleUrl: 'six-footer.scss',\n  shadow: true,\n})\nexport class SixFooter {\n  render() {\n    return (\n      <footer class=\"six-footer\">\n        <slot />\n      </footer>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-form.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixForm extends Components.SixForm, HTMLElement {}
+export const SixForm: {
+  prototype: SixForm;
+  new (): SixForm;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;