@six-group/ui-library 0.0.0-insider.b8b84f6 → 0.0.0-insider.b9edd84

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

@@ -1,69 +1,70 @@
 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 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(-3px);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 SixFileListItemStyle0 = sixFileListItemCss;
 
 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 != null && 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; }
+    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", { key: '65ea17f1ce1ff3d9cb48696bbf25465f126ca879', class: "six-files-list-item" }, h("span", { key: '53749104860721fd92bbb07b84029e2d3a22c0c0', class: {
+                'six-files-list-item__name': true,
+                'six-files-list-item__name--disabled': this.nodownload,
+            }, onClick: this.downloadFile }, this.name), h("span", { key: '637a12f8bb040e3cf5392ebe7ac488e3d08ae6fb', class: "six-files-list-item__date" }, this.date), this.size != null && h("span", { key: '208e19ce7a5fa642b0b860fdba2d0dc83feb12fc', class: "six-files-list-item__size" }, Math.round(this.size / 1024), " KB"), h("six-icon", { key: 'ecca120c27d87cd450f99ab24ec26f056d014d71', 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 SixFileListItemStyle0; }
 }, [1, "six-file-list-item", {
-    "identifier": [513],
-    "name": [513],
-    "date": [513],
-    "size": [514],
-    "nodownload": [516],
-    "nodelete": [516]
-  }]);
+        "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;
-  } });
+    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;

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

@@ -1 +1 @@
-{"file":"six-file-list-item.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,6zBAA6zB;;MCsB30BA,iBAAe;;;;;;;IAyBlB,iBAAY,GAAG;MACrB,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;IAEM,eAAU,GAAG;MACnB,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,IAAI,IAAI,IAAI,YAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAW,EACtG,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  private downloadFile = () => {\n    if (this.nodownload) {\n      return;\n    }\n\n    this.downloadEvent.emit({ fileId: this.identifier, name: this.name });\n  };\n\n  private 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 != null && <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}
+{"file":"six-file-list-item.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,6zBAA6zB,CAAC;AACz1B,8BAAe,kBAAkB;;MCqBpBA,iBAAe;;;;;;;QAyBlB,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,OAAO;aACR;YAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SACvE,CAAC;QAEM,eAAU,GAAG;YACnB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SACrE,CAAC;0BArCoC,EAAE;oBAGR,EAAE;oBAGF,EAAE;;0BAMI,KAAK;wBAGP,KAAK;;IAwBzC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DACE,KAAK,EAAE;gBACL,2BAA2B,EAAE,IAAI;gBACjC,qCAAqC,EAAE,IAAI,CAAC,UAAU;aACvD,EACD,OAAO,EAAE,IAAI,CAAC,YAAY,IAEzB,IAAI,CAAC,IAAI,CACL,EACP,6DAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAQ,EACzD,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,6DAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAW,EACtG,iEACE,KAAK,EAAE;gBACL,2BAA2B,EAAE,IAAI;gBACjC,qCAAqC,EAAE,IAAI,CAAC,QAAQ;aACrD,EACD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,IAAI,CAAC,UAAU,aAGf,CACP,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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(-3px);\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  private downloadFile = () => {\n    if (this.nodownload) {\n      return;\n    }\n\n    this.downloadEvent.emit({ fileId: this.identifier, name: this.name });\n  };\n\n  private 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 != null && <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

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

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

@@ -1,30 +1,31 @@
 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 SixFileListStyle0 = sixFileListCss;
 
 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; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h("div", { key: '76ef964aaeb29acfe802d3b7a843e1387921be11', class: "six-files-list__container" }, h("slot", { key: 'cd309c4ff0016237e3c162b6eb58130e444a9dbe' })));
+    }
+    static get style() { return SixFileListStyle0; }
 }, [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;
-  } });
+    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;

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

@@ -1 +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}
+{"file":"six-file-list.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kGAAkG,CAAC;AAC1H,0BAAe,cAAc;;MCWhBA,aAAW;;;;;;IACtB,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,2BAA2B,IACpC,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","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

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

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

@@ -1,142 +1,181 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './six-icon2.js';
+import { h as hasSlot } from './slot.js';
+import { d as defineCustomElement$4 } from './six-error2.js';
+import { d as defineCustomElement$3 } from './six-icon2.js';
+import { d as defineCustomElement$2 } from './six-spinner2.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 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:border-box}.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__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__spinner-container.sc-six-file-upload{display:flex;align-items:center}.six-file-upload__drop-zone__spinner-container.sc-six-file-upload six-spinner.sc-six-file-upload{margin-right:var(--six-spacing-x-small)}.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);cursor:not-allowed}.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}.six-file-upload__error-text.sc-six-file-upload{font-size:var(--six-input-help-text-font-size-medium)}";
+const SixFileUploadStyle0 = sixFileUploadCss;
 
 const SixFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class SixFileUpload extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.success = createEvent(this, "six-file-upload-success", 7);
-    this.failure = createEvent(this, "six-file-upload-failure", 7);
-    this.handleFiles = (files) => {
-      if (this.disabled || files.length === 0) {
-        return;
-      }
-      if (!this.multiple && files.length > 1) {
-        return this.failure.emit({ reason: 'Only one file is allowed.' });
-      }
-      for (const file of files) {
-        if (file == null) {
-          return;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.success = createEvent(this, "six-file-upload-success", 7);
+        this.failure = createEvent(this, "six-file-upload-failure", 7);
+        this.handleSlotChange = () => {
+            let validType = false;
+            if (this.errorText != null &&
+                ((typeof this.errorText == 'string' && this.errorText.trim().length > 0) ||
+                    (typeof this.errorText == 'object' && this.errorText.length > 0))) {
+                validType = true;
+            }
+            this.hasError = validType || hasSlot(this.host, 'error-text');
+        };
+        this.handleFiles = (files) => {
+            if (this.disabled || files.length === 0 || this.uploading) {
+                return;
+            }
+            if (!this.multiple && files.length > 1) {
+                return this.failure.emit({ reason: 'Only one file is allowed.' });
+            }
+            for (const file of files) {
+                if (file == null) {
+                    return;
+                }
+                let acceptedTypesList = [];
+                if (this.accept != null) {
+                    acceptedTypesList = this.accept.replace(/\s/g, '').split(',');
+                }
+                if (acceptedTypesList.length > 0 && 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.failure.emit({ reason });
+                }
+                if (this.maxFileSize != null && file.size > this.maxFileSize) {
+                    const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';
+                    return this.failure.emit({ reason });
+                }
+            }
+            const eventPayload = this.multiple ? { files } : { file: files[0] };
+            this.success.emit(eventPayload);
+        };
+        this.onChange = () => {
+            var _a;
+            if (((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files) != null) {
+                const files = this.fileInput.files;
+                this.handleFiles(files);
+                this.fileInput.value = '';
+            }
+        };
+        this.isOver = false;
+        this.hasError = false;
+        this.compact = false;
+        this.label = undefined;
+        this.disabled = false;
+        this.accept = undefined;
+        this.multiple = false;
+        this.maxFileSize = undefined;
+        this.uploading = false;
+        this.errorText = '';
+        this.invalid = false;
+    }
+    dragenterHandler() {
+        if (!this.disabled) {
+            this.isOver = true;
         }
-        let acceptedTypesList = [];
-        if (this.accept != null) {
-          acceptedTypesList = this.accept.replace(/\s/g, '').split(',');
+    }
+    dragoverHandler() {
+        if (!this.disabled) {
+            this.isOver = true;
         }
-        if (acceptedTypesList.length > 0 && 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.failure.emit({ reason });
+    }
+    dragleaveHandler() {
+        if (!this.disabled) {
+            this.isOver = false;
         }
-        if (this.maxFileSize != null && file.size > this.maxFileSize) {
-          const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';
-          return this.failure.emit({ reason });
+    }
+    dropHandler({ dataTransfer }) {
+        if (!this.disabled) {
+            this.isOver = false;
+            if (dataTransfer != null) {
+                this.handleFiles(dataTransfer.files);
+            }
         }
-      }
-      const eventPayload = this.multiple ? { files } : { file: files[0] };
-      this.success.emit(eventPayload);
-    };
-    this.onChange = () => {
-      var _a;
-      if (((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files) != null) {
-        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 = false;
-    this.maxFileSize = undefined;
-  }
-  dragenterHandler() {
-    if (!this.disabled) {
-      this.isOver = true;
     }
-  }
-  dragoverHandler() {
-    if (!this.disabled) {
-      this.isOver = true;
+    componentWillLoad() {
+        this.handleSlotChange();
     }
-  }
-  dragleaveHandler() {
-    if (!this.disabled) {
-      this.isOver = false;
+    componentDidLoad() {
+        var _a;
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+            this.host.addEventListener(eventName, this.preventDefaults, false);
+            document.body.addEventListener(eventName, this.preventDefaults, false);
+        });
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
     }
-  }
-  dropHandler({ dataTransfer }) {
-    if (!this.disabled) {
-      this.isOver = false;
-      if (dataTransfer != null) {
-        this.handleFiles(dataTransfer.files);
-      }
+    disconnectedCallback() {
+        var _a;
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+            this.host.removeEventListener(eventName, this.preventDefaults, false);
+            document.body.removeEventListener(eventName, this.preventDefaults, false);
+        });
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     }
-  }
-  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() {
-    var _a;
-    return ((_a = this.label) !== null && _a !== void 0 ? _a : (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"]]]);
+    preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    renderLabel() {
+        var _a;
+        return ((_a = this.label) !== null && _a !== void 0 ? _a : (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';
+        const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter((text) => text != null && text.trim() !== '');
+        return (h("div", { key: 'c34cb1b694fdfa5ce818c3283bc831ab7eea4ebc', class: {
+                'six-file-upload': true,
+                'six-file-upload--disabled': this.disabled || this.uploading,
+            } }, h(Container, { key: '4f678e31adc6a27b13aad0afc7fc74a512847485', disabled: this.disabled || this.uploading, "aria-invalid": this.invalid ? 'true' : 'false', class: {
+                'six-file-upload__container--compact': this.compact,
+                'six-file-upload__container--full': !this.compact,
+            } }, this.compact && !this.uploading && (h("span", { key: '44ca591aa262ae411926a791b02a80bd9ecf8ab3', slot: "prefix" }, h("six-icon", { key: 'd198b17b87fe446537f3f6a6728ed6c8c0d7a5e7', class: "six-file-upload__label-icon" }, "arrow_circle_up"))), h("div", { key: '401862887f522c994ba0553e7ca099ef33f59a4f', class: {
+                'six-file-upload__drop-zone': true,
+                'six-file-upload__drop-zone--hover': this.isOver,
+                'six-file-upload__drop-zone--compact': this.compact,
+            } }, this.uploading ? (h("span", { class: "six-file-upload__drop-zone__spinner-container" }, h("six-spinner", null), " Uploading...")) : (h("div", null, 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) }))))), h("div", { key: '117259e2211571ba71569842550a865d66de2c66', "aria-hidden": this.invalid ? 'false' : 'true' }, h("slot", { key: 'b475f3fe8b093e7c71160e8da5d5584f93484619', name: "error-text" }, errorMessages.map((text) => (h("six-error", null, h("div", { class: "six-file-upload__error-text" }, text))))))));
+    }
+    get host() { return this; }
+    static get style() { return SixFileUploadStyle0; }
+}, [6, "six-file-upload", {
+        "compact": [4],
+        "label": [1],
+        "disabled": [4],
+        "accept": [1],
+        "multiple": [4],
+        "maxFileSize": [2, "max-file-size"],
+        "uploading": [516],
+        "errorText": [1, "error-text"],
+        "invalid": [516],
+        "isOver": [32],
+        "hasError": [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;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-file-upload", "six-error", "six-icon", "six-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-file-upload":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixFileUpload$1);
+            }
+            break;
+        case "six-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "six-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const SixFileUpload = SixFileUpload$1;