@six-group/ui-library 0.0.0-insider.ebd822a → 0.0.0-insider.f015905

package/dist/cjs/six-file-list-item.cjs.entry.js

@@ -2,43 +2,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f6daa5b.js');
+const index = require('./index-d7748d51.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 SixFileListItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.downloadEvent = index.createEvent(this, "six-file-list-item-download", 7);
-    this.removeEvent = index.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 (index.h("div", { class: "six-files-list-item" }, index.h("span", { class: {
-        'six-files-list-item__name': true,
-        'six-files-list-item__name--disabled': this.nodownload,
-      }, onClick: this.downloadFile }, this.name), index.h("span", { class: "six-files-list-item__date" }, this.date), this.size !== undefined && index.h("span", { class: "six-files-list-item__size" }, Math.round(this.size / 1024), " KB"), index.h("six-icon", { class: {
-        'six-files-list-item__icon': true,
-        'six-files-list-item__icon--disabled': this.nodelete,
-      }, size: "small", onClick: this.removeFile }, "delete")));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.downloadEvent = index.createEvent(this, "six-file-list-item-download", 7);
+        this.removeEvent = index.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 (index.h("div", { class: "six-files-list-item" }, index.h("span", { class: {
+                'six-files-list-item__name': true,
+                'six-files-list-item__name--disabled': this.nodownload,
+            }, onClick: this.downloadFile }, this.name), index.h("span", { class: "six-files-list-item__date" }, this.date), this.size != null && index.h("span", { class: "six-files-list-item__size" }, Math.round(this.size / 1024), " KB"), index.h("six-icon", { class: {
+                'six-files-list-item__icon': true,
+                'six-files-list-item__icon--disabled': this.nodelete,
+            }, size: "small", onClick: this.removeFile }, "delete")));
+    }
 };
 SixFileListItem.style = sixFileListItemCss;
 

package/dist/cjs/six-file-list-item.cjs.entry.js.map

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

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f6daa5b.js');
+const index = require('./index-d7748d51.js');
 
 const sixFileListCss = ".six-files-list__container{padding:1rem}.six-files-list__container :last-child{padding-bottom:0}";
 
 const SixFileList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("div", { class: "six-files-list__container" }, index.h("slot", null)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("div", { class: "six-files-list__container" }, index.h("slot", null)));
+    }
 };
 SixFileList.style = sixFileListCss;
 

package/dist/cjs/six-file-list.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"six-file-list.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,kGAAkG;;MCY5G,WAAW;;;;EACtB,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,2BAA2B,IACpCA,qBAAQ,CACJ,EACN;GACH;;;;;;","names":["h"],"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.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,kGAAkG;;MCY5G,WAAW;;;;IACtB,MAAM;QACJ,QACEA,iBAAK,KAAK,EAAC,2BAA2B,IACpCA,qBAAQ,CACJ,EACN;KACH;;;;;;","names":["h"],"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/cjs/six-file-upload.cjs.entry.js

@@ -2,116 +2,116 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f6daa5b.js');
+const index = require('./index-d7748d51.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--compact.sc-six-file-upload{padding:0}.six-file-upload__input.sc-six-file-upload{cursor:pointer;position:absolute;top:0;left:0;width:100%;user-select:none;height:100%;opacity:0;outline:none}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__drop-zone.sc-six-file-upload{background-color:var(--six-color-inactive)}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover,.six-file-upload__drop-zone--hover.sc-six-file-upload{background-color:var(--six-color-action-light-to-be-defined)}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover.six-file-upload__drop-zone--compact,.six-file-upload__drop-zone--hover.six-file-upload__drop-zone--compact.sc-six-file-upload{background-color:inherit}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__input.sc-six-file-upload{cursor:not-allowed}";
 
 const SixFileUpload = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.fileUploadSuccessEvent = index.createEvent(this, "six-file-upload-success", 7);
-    this.fileUploadFailureEvent = index.createEvent(this, "six-file-upload-failure", 7);
-    this.handleFiles = (files) => {
-      if (this.disabled) {
-        return;
-      }
-      if (files.length === 0) {
-        return;
-      }
-      if (!this.multiple && files.length > 1) {
-        return this.fileUploadFailureEvent.emit({ reason: 'Only one file is allowed.' });
-      }
-      for (const file of files) {
-        if (!file) {
-          return;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.success = index.createEvent(this, "six-file-upload-success", 7);
+        this.failure = index.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;
+                }
+                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.compact = false;
+        this.label = undefined;
+        this.disabled = false;
+        this.accept = undefined;
+        this.multiple = false;
+        this.maxFileSize = undefined;
+    }
+    dragenterHandler() {
+        if (!this.disabled) {
+            this.isOver = true;
         }
-        const acceptedTypesList = this.accept && this.accept.replace(/\s/g, '').split(',');
-        if (this.accept && acceptedTypesList.indexOf(file.type) === -1) {
-          const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';
-          return this.fileUploadFailureEvent.emit({ reason });
+    }
+    dragoverHandler() {
+        if (!this.disabled) {
+            this.isOver = true;
         }
-        if (this.maxFileSize && file.size > this.maxFileSize) {
-          const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';
-          return this.fileUploadFailureEvent.emit({ reason });
+    }
+    dragleaveHandler() {
+        if (!this.disabled) {
+            this.isOver = false;
         }
-      }
-      const objectToEmit = this.multiple ? { files } : { file: files.item(0) };
-      this.fileUploadSuccessEvent.emit(objectToEmit);
-    };
-    this.onChange = () => {
-      var _a;
-      if ((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files) {
-        const files = this.fileInput.files;
-        this.handleFiles(files);
-        this.fileInput.value = '';
-      }
-    };
-    this.isOver = false;
-    this.compact = false;
-    this.label = undefined;
-    this.disabled = false;
-    this.accept = undefined;
-    this.multiple = undefined;
-    this.maxFileSize = undefined;
-  }
-  dragenterHandler() {
-    if (!this.disabled) {
-      this.isOver = true;
     }
-  }
-  dragoverHandler() {
-    if (!this.disabled) {
-      this.isOver = true;
+    dropHandler({ dataTransfer }) {
+        if (!this.disabled) {
+            this.isOver = false;
+            if (dataTransfer != null) {
+                this.handleFiles(dataTransfer.files);
+            }
+        }
+    }
+    componentDidLoad() {
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+            this.host.addEventListener(eventName, this.preventDefaults, false);
+            document.body.addEventListener(eventName, this.preventDefaults, false);
+        });
+    }
+    disconnectedCallback() {
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+            this.host.removeEventListener(eventName, this.preventDefaults, false);
+            document.body.removeEventListener(eventName, this.preventDefaults, false);
+        });
+    }
+    preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
     }
-  }
-  dragleaveHandler() {
-    if (!this.disabled) {
-      this.isOver = false;
+    renderLabel() {
+        var _a;
+        return ((_a = this.label) !== null && _a !== void 0 ? _a : (this.compact ? ('Upload') : (index.h("span", null, "Drop files to upload, or ", index.h("span", { class: "six-file-upload__label--highlighted" }, "browse")))));
     }
-  }
-  dropHandler({ dataTransfer }) {
-    if (!this.disabled) {
-      this.isOver = false;
-      if (dataTransfer) {
-        this.handleFiles(dataTransfer.files);
-      }
+    render() {
+        const Container = this.compact ? 'six-button' : 'six-card';
+        return (index.h("div", { class: {
+                'six-file-upload': true,
+                'six-file-upload--disabled': this.disabled,
+            } }, index.h(Container, { class: {
+                'six-file-upload__container--compact': this.compact,
+                'six-file-upload__container--full': !this.compact,
+            } }, this.compact && (index.h("span", { slot: "prefix" }, index.h("six-icon", { class: "six-file-upload__label-icon" }, "arrow_circle_up"))), index.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,
+            } }, index.h("span", null, this.renderLabel()), index.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) })))));
     }
-  }
-  componentDidLoad() {
-    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
-      this.host.addEventListener(eventName, this.preventDefaults, false);
-      document.body.addEventListener(eventName, this.preventDefaults, false);
-    });
-  }
-  disconnectedCallback() {
-    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
-      this.host.removeEventListener(eventName, this.preventDefaults, false);
-      document.body.removeEventListener(eventName, this.preventDefaults, false);
-    });
-  }
-  preventDefaults(e) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  renderLabel() {
-    return (this.label ||
-      (this.compact ? ('Upload') : (index.h("span", null, "Drop files to upload, or ", index.h("span", { class: "six-file-upload__label--highlighted" }, "browse")))));
-  }
-  render() {
-    const Container = this.compact ? 'six-button' : 'six-card';
-    return (index.h("div", { class: {
-        'six-file-upload': true,
-        'six-file-upload--disabled': this.disabled,
-      } }, index.h(Container, { class: {
-        'six-file-upload__container--compact': this.compact,
-        'six-file-upload__container--full': !this.compact,
-      } }, this.compact && (index.h("span", { slot: "prefix" }, index.h("six-icon", { class: "six-file-upload__label-icon" }, "arrow_circle_up"))), index.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,
-      } }, index.h("span", null, this.renderLabel()), index.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 index.getElement(this); }
+    get host() { return index.getElement(this); }
 };
 SixFileUpload.style = sixFileUploadCss;
 

package/dist/cjs/six-file-upload.cjs.entry.js.map

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

package/dist/cjs/six-footer.cjs.entry.js

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f6daa5b.js');
+const index = require('./index-d7748d51.js');
 
-const sixFooterCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.six-footer{color:var(--six-color-web-rock-900);padding:var(--six-spacing-x-small) 0;text-align:center;width:100%;background-color:var(--six-footer-background-color);box-shadow:var(--six-shadow-x-large-top)}";
+const sixFooterCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.six-footer{color:var(--six-color-web-rock-900);padding:var(--six-spacing-x-small) 0;text-align:center;width:100%;background-color:var(--six-footer-background-color);box-shadow:var(--six-shadow-medium-top)}";
 
 const SixFooter = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("footer", { class: "six-footer" }, index.h("slot", null)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("footer", { class: "six-footer" }, index.h("slot", null)));
+    }
 };
 SixFooter.style = sixFooterCss;
 

package/dist/cjs/six-footer.cjs.entry.js.map

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

package/dist/cjs/six-group-label.cjs.entry.js

@@ -2,52 +2,53 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f6daa5b.js');
-const formControl = require('./form-control-2c17c573.js');
-const slot = require('./slot-ad537f24.js');
+const index = require('./index-d7748d51.js');
+const formControl = require('./form-control-8d64e974.js');
+const slot = require('./slot-1b1232a1.js');
 
-const sixGroupLabelCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}";
+const sixGroupLabelCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}";
 
 let id = 0;
 const SixGroupLabel = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.wrapperLabelId = `label-${++id}`;
-    this.labelId = `label-label-${id}`;
-    this.helpTextId = `label-help-text-${id}`;
-    this.hasHelpTextSlot = false;
-    this.hasLabelSlot = false;
-    this.size = 'medium';
-    this.label = '';
-    this.helpText = '';
-    this.disabled = false;
-    this.required = undefined;
-  }
-  handleLabelChange() {
-    this.handleSlotChange();
-  }
-  connectedCallback() {
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
-  }
-  componentWillLoad() {
-    this.handleSlotChange();
-  }
-  disconnectedCallback() {
-    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
-  }
-  handleSlotChange() {
-    this.hasLabelSlot = slot.hasSlot(this.host, 'label');
-    this.hasHelpTextSlot = slot.hasSlot(this.host, 'help-text');
-  }
-  render() {
-    return (index.h(formControl.FormControl, { inputId: this.wrapperLabelId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: this.size, disabled: this.disabled, required: this.required }, index.h("slot", null)));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "helpText": ["handleLabelChange"],
-    "label": ["handleLabelChange"]
-  }; }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.wrapperLabelId = `label-${++id}`;
+        this.labelId = `label-label-${id}`;
+        this.helpTextId = `label-help-text-${id}`;
+        this.handleSlotChange = () => {
+            this.hasLabelSlot = slot.hasSlot(this.host, 'label');
+            this.hasHelpTextSlot = slot.hasSlot(this.host, 'help-text');
+        };
+        this.hasHelpTextSlot = false;
+        this.hasLabelSlot = false;
+        this.size = 'medium';
+        this.label = '';
+        this.helpText = '';
+        this.disabled = false;
+        this.required = false;
+    }
+    handleLabelChange() {
+        this.handleSlotChange();
+    }
+    connectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+    }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+    }
+    render() {
+        return (index.h(formControl.FormControl, { inputId: this.wrapperLabelId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: this.size, disabled: this.disabled, required: this.required }, index.h("slot", null)));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "helpText": ["handleLabelChange"],
+        "label": ["handleLabelChange"]
+    }; }
 };
 SixGroupLabel.style = sixGroupLabelCss;
 

package/dist/cjs/six-group-label.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"six-group-label.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,w7EAAw7E;;ACIj9E,IAAI,EAAE,GAAG,CAAC,CAAC;MAoBE,aAAa;;;IACxB,mBAAc,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC;IACjC,YAAO,GAAG,eAAe,EAAE,EAAE,CAAC;IAC9B,eAAU,GAAG,mBAAmB,EAAE,EAAE,CAAC;2BAIV,KAAK;wBACR,KAAK;gBAGiC,QAAQ;iBAGtD,EAAE;oBAGC,EAAE;oBAGe,KAAK;;;EAOzC,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAED,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzD,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;GAC5E;EAED,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAED,oBAAoB;IAClB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;GAC/E;EAED,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAGA,YAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAChD,IAAI,CAAC,eAAe,GAAGA,YAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;GACxD;EAED,MAAM;IACJ,QACEC,QAACC,uBAAW,IACV,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvBD,qBAAa,CACD,EACd;GACH;;;;;;;;;;;","names":["hasSlot","h","FormControl"],"sources":["./src/components/six-group-label/six-group-label.scss?tag=six-group-label&encapsulation=shadow","./src/components/six-group-label/six-group-label.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/**\n * @since 1.1\n * @status stable\n *\n * @slot label - The wrapped component's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The label of wrapped component.\n * @part help-text - The help text of the wrapped component.\n */\n@Component({\n  tag: 'six-group-label',\n  styleUrl: 'six-group-label.scss',\n  shadow: true,\n})\nexport class SixGroupLabel {\n  wrapperLabelId = `label-${++id}`;\n  labelId = `label-label-${id}`;\n  helpTextId = `label-help-text-${id}`;\n\n  @Element() host: HTMLSixGroupLabelElement;\n\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The label's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The wrapper label's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The wrapper label's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the label. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The label's required attribute. */\n  @Prop({ reflect: true }) required: boolean;\n\n  @Watch('helpText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  handleSlotChange() {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.wrapperLabelId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n      >\n        <slot></slot>\n      </FormControl>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-group-label.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,y/EAAy/E;;ACIlhF,IAAI,EAAE,GAAG,CAAC,CAAC;MAoBE,aAAa;;;QAChB,mBAAc,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC;QACjC,YAAO,GAAG,eAAe,EAAE,EAAE,CAAC;QAC9B,eAAU,GAAG,mBAAmB,EAAE,EAAE,CAAC;QAwCrC,qBAAgB,GAAG;YACzB,IAAI,CAAC,YAAY,GAAGA,YAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAChD,IAAI,CAAC,eAAe,GAAGA,YAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;SACxD,CAAC;+BAvCyB,KAAK;4BACR,KAAK;oBAGiC,QAAQ;qBAGtD,EAAE;wBAGC,EAAE;wBAGe,KAAK;wBAGtB,KAAK;;IAIxB,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,iBAAiB;;QACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAChF;IAOD,MAAM;QACJ,QACEC,QAACC,uBAAW,IACV,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvBD,qBAAa,CACD,EACd;KACH;;;;;;;;;;;","names":["hasSlot","h","FormControl"],"sources":["src/components/six-group-label/six-group-label.scss?tag=six-group-label&encapsulation=shadow","src/components/six-group-label/six-group-label.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/**\n * @since 1.1\n * @status stable\n *\n * @slot label - The wrapped component's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The label of wrapped component.\n * @part help-text - The help text of the wrapped component.\n */\n@Component({\n  tag: 'six-group-label',\n  styleUrl: 'six-group-label.scss',\n  shadow: true,\n})\nexport class SixGroupLabel {\n  private wrapperLabelId = `label-${++id}`;\n  private labelId = `label-label-${id}`;\n  private helpTextId = `label-help-text-${id}`;\n\n  @Element() host!: HTMLSixGroupLabelElement;\n\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The label's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The wrapper label's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The wrapper label's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the label. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  @Watch('helpText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n  };\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.wrapperLabelId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n      >\n        <slot></slot>\n      </FormControl>\n    );\n  }\n}\n"],"version":3}