@six-group/ui-library 0.0.0-insider.777a428 → 0.0.0-insider.77a508a

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

@@ -45,11 +45,10 @@ const DESCRIPTION_PER_ERROR_CODE = {
  */
 export class SixErrorPage {
     constructor() {
-        this.errorCode = undefined;
+        /**
+         * Defines language and thus displays the proper error page in the selected language.
+         */
         this.language = 'en';
-        this.customTitle = undefined;
-        this.customDescription = undefined;
-        this.customIcon = undefined;
     }
     getIconName() {
         if (this.customIcon != null) {
@@ -95,7 +94,7 @@ export class SixErrorPage {
         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())));
+        return (h("div", { key: '4ea2ec6cfd20308f5436337b7c76c5fe754aa24f', part: "container" }, h("div", { key: '1324fd2555df87799bdd23d36adcb7b00885a076', class: "six-error-page__icon-container", part: "icon-container" }, h("six-picto", { key: 'e7efd056f880c92385a9945d46c1c04c46872fc3', size: "4xl", class: "six-error-page__icon", part: "icon" }, this.getIconName())), h("div", { key: '75d52fbe4b3561c226c5830e15793d71ec877d46', class: "six-error-page__title", part: "title" }, this.getErrorTitle()), h("div", { key: 'f8ac2279ec7bda15115f2a8ffdad4e80ccdc9b42', class: "six-error-page__description", part: "description" }, this.getErrorDescription())));
     }
     static get is() { return "six-error-page"; }
     static get encapsulation() { return "shadow"; }
@@ -125,6 +124,8 @@ export class SixErrorPage {
                     "tags": [],
                     "text": "Defines error Code and thus displays the proper error page."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "error-code",
                 "reflect": false
             },
@@ -142,6 +143,8 @@ export class SixErrorPage {
                     "tags": [],
                     "text": "Defines language and thus displays the proper error page in the selected language."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "language",
                 "reflect": false,
                 "defaultValue": "'en'"
@@ -160,6 +163,8 @@ export class SixErrorPage {
                     "tags": [],
                     "text": "Defines a custom title."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "custom-title",
                 "reflect": false
             },
@@ -176,7 +181,9 @@ export class SixErrorPage {
                 "docs": {
                     "tags": [],
                     "text": "Defines a custom description."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "customIcon": {
                 "type": "string",
@@ -192,6 +199,8 @@ export class SixErrorPage {
                     "tags": [],
                     "text": "Defines a custom icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "custom-icon",
                 "reflect": false
             }

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

@@ -1 +1 @@
-{"version":3,"file":"six-error-page.js","sourceRoot":"","sources":["../../../src/components/six-error-page/six-error-page.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\ntype ErrorCode = 403 | 404 | 500;\n\nconst TITLE_PER_ERROR_CODE: Record<\n  ErrorCode,\n  {\n    en: string;\n    de: string;\n  }\n> = {\n  403: {\n    en: 'Access Denied',\n    de: 'Kein Zugriff',\n  },\n  404: {\n    en: 'Not Found',\n    de: 'Seite nicht gefunden',\n  },\n  500: {\n    en: 'Ooops!',\n    de: 'Ups!',\n  },\n};\n\nconst DESCRIPTION_PER_ERROR_CODE: Record<ErrorCode, { en: string[]; de: string[] }> = {\n  403: {\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  404: {\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  500: {\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?: 404 | 403 | 500;\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 != null) {\n      return this.customIcon;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    if (this.errorCode === 403) {\n      return 'lock';\n    }\n\n    if (this.errorCode === 404) {\n      return 'find-in-page';\n    }\n\n    if (this.errorCode === 500) {\n      return 'sentiment-dissatisfied';\n    }\n  }\n\n  private getErrorTitle(): string | undefined {\n    if (this.customTitle != null) {\n      return this.customTitle;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    return TITLE_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  private getErrorDescription() {\n    if (this.errorCode == null && this.customDescription == null) {\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    if (this.errorCode == null) {\n      return;\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,"file":"six-error-page.js","sourceRoot":"","sources":["../../../src/components/six-error-page/six-error-page.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\ntype ErrorCode = 403 | 404 | 500;\n\nconst TITLE_PER_ERROR_CODE: Record<\n  ErrorCode,\n  {\n    en: string;\n    de: string;\n  }\n> = {\n  403: {\n    en: 'Access Denied',\n    de: 'Kein Zugriff',\n  },\n  404: {\n    en: 'Not Found',\n    de: 'Seite nicht gefunden',\n  },\n  500: {\n    en: 'Ooops!',\n    de: 'Ups!',\n  },\n};\n\nconst DESCRIPTION_PER_ERROR_CODE: Record<ErrorCode, { en: string[]; de: string[] }> = {\n  403: {\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  404: {\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  500: {\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?: 404 | 403 | 500;\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 != null) {\n      return this.customIcon;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    if (this.errorCode === 403) {\n      return 'lock';\n    }\n\n    if (this.errorCode === 404) {\n      return 'find-in-page';\n    }\n\n    if (this.errorCode === 500) {\n      return 'sentiment-dissatisfied';\n    }\n  }\n\n  private getErrorTitle(): string | undefined {\n    if (this.customTitle != null) {\n      return this.customTitle;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    return TITLE_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  private getErrorDescription() {\n    if (this.errorCode == null && this.customDescription == null) {\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    if (this.errorCode == null) {\n      return;\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"]}

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SixFileList {
     render() {
-        return (h("div", { class: "six-files-list__container" }, h("slot", null)));
+        return (h("div", { key: '38755b01aeafb28e3f268925a347fabdb53cac9b', class: "six-files-list__container" }, h("slot", { key: '7e9e866c6b7f6dffbe26ba5b10c46b135cc1c389' })));
     }
     static get is() { return "six-file-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"six-file-list.js","sourceRoot":"","sources":["../../../src/components/six-file-list/six-file-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;GAIG;AAMH,MAAM,OAAO,WAAW;IACtB,MAAM;QACJ,OAAO,CACL,WAAK,KAAK,EAAC,2BAA2B;YACpC,eAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["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","sourceRoot":"","sources":["../../../src/components/six-file-list/six-file-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;GAIG;AAMH,MAAM,OAAO,WAAW;IACtB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,2BAA2B;YACpC,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -6,6 +6,16 @@ import { h } from "@stencil/core";
  */
 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;
@@ -18,18 +28,12 @@ export class SixFileListItem {
             }
             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: {
+        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", { 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: {
+            }, 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")));
@@ -62,6 +66,8 @@ export class SixFileListItem {
                     "tags": [],
                     "text": "An id to clearly identify the file"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "identifier",
                 "reflect": true,
                 "defaultValue": "''"
@@ -80,6 +86,8 @@ export class SixFileListItem {
                     "tags": [],
                     "text": "The filename"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": true,
                 "defaultValue": "''"
@@ -98,6 +106,8 @@ export class SixFileListItem {
                     "tags": [],
                     "text": "The date when the file was uploaded"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "date",
                 "reflect": true,
                 "defaultValue": "''"
@@ -116,6 +126,8 @@ export class SixFileListItem {
                     "tags": [],
                     "text": "The file size. This number will be divided by 1024 to show the filesize in KB"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": true
             },
@@ -133,6 +145,8 @@ export class SixFileListItem {
                     "tags": [],
                     "text": "Set to true if you don't want to allow to download this file"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "nodownload",
                 "reflect": true,
                 "defaultValue": "false"
@@ -151,6 +165,8 @@ export class SixFileListItem {
                     "tags": [],
                     "text": "Set to true if you don't want to allow to delete this file"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "nodelete",
                 "reflect": true,
                 "defaultValue": "false"

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

@@ -1 +1 @@
-{"version":3,"file":"six-file-list-item.js","sourceRoot":"","sources":["../../../src/components/six-file-list-item/six-file-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAYxE;;;;GAIG;AAMH,MAAM,OAAO,eAAe;;QAyBlB,iBAAY,GAAG,GAAG,EAAE;YAC1B,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;QACxE,CAAC,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE;YACxB,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;QACtE,CAAC,CAAC;0BArCoC,EAAE;oBAGR,EAAE;oBAGF,EAAE;;0BAMI,KAAK;wBAGP,KAAK;;IAwBzC,MAAM;QACJ,OAAO,CACL,WAAK,KAAK,EAAC,qBAAqB;YAC9B,YACE,KAAK,EAAE;oBACL,2BAA2B,EAAE,IAAI;oBACjC,qCAAqC,EAAE,IAAI,CAAC,UAAU;iBACvD,EACD,OAAO,EAAE,IAAI,CAAC,YAAY,IAEzB,IAAI,CAAC,IAAI,CACL;YACP,YAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAQ;YACzD,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,YAAM,KAAK,EAAC,2BAA2B;gBAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;sBAAW;YACtG,gBACE,KAAK,EAAE;oBACL,2BAA2B,EAAE,IAAI;oBACjC,qCAAqC,EAAE,IAAI,CAAC,QAAQ;iBACrD,EACD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,IAAI,CAAC,UAAU,aAGf,CACP,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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","sourceRoot":"","sources":["../../../src/components/six-file-list-item/six-file-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAYxE;;;;GAIG;AAMH,MAAM,OAAO,eAAe;IAL5B;QAME,yCAAyC;QAChB,eAAU,GAAG,EAAE,CAAC;QAEzC,mBAAmB;QACM,SAAI,GAAG,EAAE,CAAC;QAEnC,0CAA0C;QACjB,SAAI,GAAG,EAAE,CAAC;QAKnC,mEAAmE;QAC1C,eAAU,GAAG,KAAK,CAAC;QAE5C,iEAAiE;QACxC,aAAQ,GAAG,KAAK,CAAC;QAQlC,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACxE,CAAC,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE;YACxB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACtE,CAAC,CAAC;KA6BH;IA3BC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,qBAAqB;YAC9B,6DACE,KAAK,EAAE;oBACL,2BAA2B,EAAE,IAAI;oBACjC,qCAAqC,EAAE,IAAI,CAAC,UAAU;iBACvD,EACD,OAAO,EAAE,IAAI,CAAC,YAAY,IAEzB,IAAI,CAAC,IAAI,CACL;YACP,6DAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAQ;YACzD,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,6DAAM,KAAK,EAAC,2BAA2B;gBAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;sBAAW;YACtG,iEACE,KAAK,EAAE;oBACL,2BAA2B,EAAE,IAAI;oBACjC,qCAAqC,EAAE,IAAI,CAAC,QAAQ;iBACrD,EACD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,IAAI,CAAC,UAAU,aAGf,CACP,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -6,6 +6,17 @@
   box-sizing: border-box;
 }
 
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 :host {
   position: static;
   display: block;
@@ -22,9 +33,6 @@
 .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;
@@ -32,6 +40,13 @@
   width: 100%;
   transition: background-color 0.3s;
 }
+.six-file-upload__drop-zone__spinner-container {
+  display: flex;
+  align-items: center;
+}
+.six-file-upload__drop-zone__spinner-container six-spinner {
+  margin-right: var(--six-spacing-x-small);
+}
 .six-file-upload__drop-zone--compact {
   padding: 0;
 }
@@ -48,6 +63,7 @@
 }
 .six-file-upload--disabled .six-file-upload__drop-zone {
   background-color: var(--six-color-inactive);
+  cursor: not-allowed;
 }
 .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);
@@ -57,4 +73,7 @@
 }
 .six-file-upload--disabled .six-file-upload__input {
   cursor: not-allowed;
+}
+.six-file-upload__error-text {
+  font-size: var(--six-input-help-text-font-size-medium);
 }

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

@@ -1,13 +1,38 @@
 import { h } from "@stencil/core";
+import { hasSlot } from "../../utils/slot";
 /**
  * @since 2.0.0
  * @status experimental
  *
+ * @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.
  */
 export class SixFileUpload {
     constructor() {
+        this.isOver = false;
+        this.hasError = false;
+        /** Set to true if file control should be small. */
+        this.compact = false;
+        /** Set when button is disabled. */
+        this.disabled = false;
+        /** More than one file allowed. */
+        this.multiple = false;
+        /** Set to true to draw the control in a loading state. */
+        this.uploading = false;
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        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) {
+            if (this.disabled || files.length === 0 || this.uploading) {
                 return;
             }
             if (!this.multiple && files.length > 1) {
@@ -41,13 +66,6 @@ export class SixFileUpload {
                 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) {
@@ -64,25 +82,29 @@ export class SixFileUpload {
             this.isOver = false;
         }
     }
-    dropHandler({ dataTransfer }) {
+    dropHandler() {
         if (!this.disabled) {
             this.isOver = false;
-            if (dataTransfer != null) {
-                this.handleFiles(dataTransfer.files);
-            }
         }
     }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
     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);
     }
     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);
     }
     preventDefaults(e) {
         e.preventDefault();
@@ -94,17 +116,18 @@ export class SixFileUpload {
     }
     render() {
         const Container = this.compact ? 'six-button' : 'six-card';
-        return (h("div", { class: {
+        const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter((text) => text != null && text.trim() !== '');
+        return (h("div", { key: '273eaa495b7158f3caba301a3efa49918ee44e2b', class: {
                 'six-file-upload': true,
-                'six-file-upload--disabled': this.disabled,
-            } }, h(Container, { class: {
+                'six-file-upload--disabled': this.disabled || this.uploading,
+            } }, h(Container, { key: '6f230b253610a589d7ef1ce8d38ec5db724c129a', 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 && (h("span", { slot: "prefix" }, h("six-icon", { class: "six-file-upload__label-icon" }, "arrow_circle_up"))), h("div", { class: {
+            } }, this.compact && !this.uploading && h("six-icon", { key: '03d7bfa9936a35d258a40a6458a4a6d16595f355', slot: "prefix" }, "arrow_circle_up"), h("div", { key: '63704d5e67daa748f1a0268a006190bbf413af8d', 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) })))));
+            } }, 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: '9dcedf9db17e7036abf98a6edbd586fb16ef229c', "aria-hidden": this.invalid ? 'false' : 'true' }, h("slot", { key: '3e52f15184a1dfc9bd6b6ad3602a2fa2c21330be', name: "error-text" }, errorMessages.map((text) => (h("six-error", null, h("div", { class: "six-file-upload__error-text" }, text))))))));
     }
     static get is() { return "six-file-upload"; }
     static get encapsulation() { return "scoped"; }
@@ -134,6 +157,8 @@ export class SixFileUpload {
                     "tags": [],
                     "text": "Set to true if file control should be small."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "compact",
                 "reflect": false,
                 "defaultValue": "false"
@@ -152,6 +177,8 @@ export class SixFileUpload {
                     "tags": [],
                     "text": "Label of the drop area."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -169,6 +196,8 @@ export class SixFileUpload {
                     "tags": [],
                     "text": "Set when button is disabled."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -187,6 +216,8 @@ export class SixFileUpload {
                     "tags": [],
                     "text": "Accepted MIME-Types."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accept",
                 "reflect": false
             },
@@ -204,6 +235,8 @@ export class SixFileUpload {
                     "tags": [],
                     "text": "More than one file allowed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
@@ -222,14 +255,77 @@ export class SixFileUpload {
                     "tags": [],
                     "text": "Allowed max file size in bytes."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max-file-size",
                 "reflect": false
+            },
+            "uploading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to draw the control in a loading state."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "uploading",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message shown, if `invalid` is set to true."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "isOver": {}
+            "isOver": {},
+            "hasError": {}
         };
     }
     static get events() {

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

@@ -1 +1 @@
-{"version":3,"file":"six-file-upload.js","sourceRoot":"","sources":["../../../src/components/six-file-upload/six-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["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  private 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 = false;\n\n  /** Accepted MIME-Types. */\n  @Prop() readonly accept?: string;\n\n  /** More than one file allowed. */\n  @Prop() readonly multiple = false;\n\n  /** Allowed max file size in bytes. */\n  @Prop() readonly maxFileSize?: number;\n\n  /** Triggers when a file is added. */\n  @Event({ eventName: 'six-file-upload-success' }) success!: 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' }) failure!: 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 != null) {\n        this.handleFiles(dataTransfer.files);\n      }\n    }\n  }\n\n  private handleFiles = (files: FileList) => {\n    if (this.disabled || files.length === 0) {\n      return;\n    }\n\n    if (!this.multiple && files.length > 1) {\n      return this.failure.emit({ reason: 'Only one file is allowed.' });\n    }\n\n    for (const file of files) {\n      if (file == null) {\n        return;\n      }\n\n      let acceptedTypesList: string[] = [];\n      if (this.accept != null) {\n        acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n      }\n\n      if (acceptedTypesList.length > 0 && 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.failure.emit({ reason });\n      }\n\n      if (this.maxFileSize != null && file.size > this.maxFileSize) {\n        const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n        return this.failure.emit({ reason });\n      }\n    }\n\n    const eventPayload: SixFileUploadSuccessPayload = this.multiple ? { files } : { file: files[0] };\n    this.success.emit(eventPayload);\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  private preventDefaults(e: Event) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  private onChange = () => {\n    if (this.fileInput?.files != null) {\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,"file":"six-file-upload.js","sourceRoot":"","sources":["../../../src/components/six-file-upload/six-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\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 * @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.\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  private fileInput?: HTMLInputElement;\n\n  @State() isOver = false;\n  @State() hasError = 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 = false;\n\n  /** Accepted MIME-Types. */\n  @Prop() readonly accept?: string;\n\n  /** More than one file allowed. */\n  @Prop() readonly multiple = false;\n\n  /** Allowed max file size in bytes. */\n  @Prop() readonly maxFileSize?: number;\n\n  /** Set to true to draw the control in a loading state. */\n  @Prop({ reflect: true }) uploading = false;\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** Triggers when a file is added. */\n  @Event({ eventName: 'six-file-upload-success' }) success!: 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' }) failure!: 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() {\n    if (!this.disabled) {\n      this.isOver = false;\n    }\n  }\n\n  private handleSlotChange = () => {\n    let validType = false;\n\n    if (\n      this.errorText != null &&\n      ((typeof this.errorText == 'string' && this.errorText.trim().length > 0) ||\n        (typeof this.errorText == 'object' && this.errorText.length > 0))\n    ) {\n      validType = true;\n    }\n\n    this.hasError = validType || hasSlot(this.host, 'error-text');\n  };\n\n  private handleFiles = (files: FileList) => {\n    if (this.disabled || files.length === 0 || this.uploading) {\n      return;\n    }\n\n    if (!this.multiple && files.length > 1) {\n      return this.failure.emit({ reason: 'Only one file is allowed.' });\n    }\n\n    for (const file of files) {\n      if (file == null) {\n        return;\n      }\n\n      let acceptedTypesList: string[] = [];\n      if (this.accept != null) {\n        acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n      }\n\n      if (acceptedTypesList.length > 0 && 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.failure.emit({ reason });\n      }\n\n      if (this.maxFileSize != null && file.size > this.maxFileSize) {\n        const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n        return this.failure.emit({ reason });\n      }\n    }\n\n    const eventPayload: SixFileUploadSuccessPayload = this.multiple ? { files } : { file: files[0] };\n    this.success.emit(eventPayload);\n  };\n\n  componentWillLoad() {\n    this.handleSlotChange();\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    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\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    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  private preventDefaults(e: Event) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  private onChange = () => {\n    if (this.fileInput?.files != null) {\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    const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter(\n      (text) => text != null && text.trim() !== ''\n    );\n\n    return (\n      <div\n        class={{\n          'six-file-upload': true,\n          'six-file-upload--disabled': this.disabled || this.uploading,\n        }}\n      >\n        <Container\n          disabled={this.disabled || this.uploading}\n          aria-invalid={this.invalid ? 'true' : 'false'}\n          class={{\n            'six-file-upload__container--compact': this.compact,\n            'six-file-upload__container--full': !this.compact,\n          }}\n        >\n          {this.compact && !this.uploading && <six-icon slot=\"prefix\">arrow_circle_up</six-icon>}\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            {this.uploading ? (\n              <span class=\"six-file-upload__drop-zone__spinner-container\">\n                <six-spinner /> Uploading...\n              </span>\n            ) : (\n              <div>\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            )}\n          </div>\n        </Container>\n        <div aria-hidden={this.invalid ? 'false' : 'true'}>\n          <slot name=\"error-text\">\n            {errorMessages.map((text) => (\n              <six-error>\n                <div class=\"six-file-upload__error-text\">{text}</div>\n              </six-error>\n            ))}\n          </slot>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-footer/six-footer.css

@@ -6,6 +6,17 @@
   box-sizing: border-box;
 }
 
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 :host {
   display: block;
 }

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

@@ -7,7 +7,7 @@ import { h } from "@stencil/core";
  */
 export class SixFooter {
     render() {
-        return (h("footer", { class: "six-footer" }, h("slot", null)));
+        return (h("footer", { key: 'fe39b58edfd331a6b6ae1d551286fd45e3783f5d', class: "six-footer" }, h("slot", { key: '7c93a54de4e4160adabc4790b368401b790d6fcc' })));
     }
     static get is() { return "six-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"six-footer.js","sourceRoot":"","sources":["../../../src/components/six-footer/six-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;;GAKG;AAOH,MAAM,OAAO,SAAS;IACpB,MAAM;QACJ,OAAO,CACL,cAAQ,KAAK,EAAC,YAAY;YACxB,eAAQ,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["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,"file":"six-footer.js","sourceRoot":"","sources":["../../../src/components/six-footer/six-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;;GAKG;AAOH,MAAM,OAAO,SAAS;IACpB,MAAM;QACJ,OAAO,CACL,+DAAQ,KAAK,EAAC,YAAY;YACxB,8DAAQ,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/six-group-label/six-group-label.css

@@ -6,6 +6,17 @@
   box-sizing: border-box;
 }
 
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .form-control .form-control__label {
   display: none;
 }